fix(docs,core,platform): various fixes from deffect hunt (#10168)

* fix(platform): fixed platform form generator skeleton paddings

* feat(core): added missing list item byline property

* fix(platform): fixed HTML structure of the message view error

* chore(docs,core,platform): replaced deprecated selector usages

* fix(cdk,docs): fixed incorrect deprecation. input was effectively removed without replacement

* chore(core): removed unnecessary comments

* fix(docs): fixed incorrect paths to the modules

* fix(docs): added missing sub package

* chore: fixed e2e test

libs/cdk/src/lib/utils/directives/initial-focus/initial-focus.directive.ts

@@ -20,7 +20,18 @@ import { TabbableElementService } from '../../services/tabbable-element.service'
         }
     ]
 })
-export class DeprecatedInitialFocusDirective extends DeprecatedSelector {}
+export class DeprecatedInitialFocusDirective extends DeprecatedSelector {
+    /** @hidden */
+    private _initialFocusDirective = inject(InitialFocusDirective, { host: true });
+
+    /**
+     * CSS selector of an element that should be focused.
+     */
+    @Input('fd-initial-focus')
+    set initialFocusTarget(value: string) {
+        this._initialFocusDirective.fdkInitialFocus = value;
+    }
+}
 
 @Directive({
     selector: '[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]',
@@ -38,8 +49,8 @@ export class InitialFocusDirective implements AfterViewInit {
     /**
      * CSS selector of an element that should be focused.
      */
-    @Input('fd-initial-focus')
-    focusableItem = '.fd-initial-focus-item';
+    @Input()
+    fdkInitialFocus = '.fd-initial-focus-item';
 
     /**
      * Whether initial focus enabled for a current element.
@@ -105,13 +116,14 @@ export class InitialFocusDirective implements AfterViewInit {
      * Searches for an appropriate focusable element
      */
     private _getFocusableElement(): HTMLElement | null {
-        if (!this.focusableItem) {
+        if (!this.fdkInitialFocus) {
             return this._tabbableService.getTabbableElement(this._elmRef.nativeElement, this.focusLastElement);
         }
 
         const autoFocusableItems = this._elmRef.nativeElement.querySelectorAll(
-            this.focusableItem
+            this.fdkInitialFocus
         ) as NodeListOf<HTMLElement>;
+        console.log(autoFocusableItems);
 
         if (autoFocusableItems.length > 0) {
             return !this.focusLastElement ? autoFocusableItems[0] : autoFocusableItems[autoFocusableItems.length - 1];

libs/core/src/lib/combobox/combobox-mobile/combobox-mobile.component.html

@@ -32,7 +32,7 @@ <h1 fd-title *ngIf="mobileConfig?.title">{{ mobileConfig.title }}</h1>
             </fd-button-bar>
             <fd-button-bar
                 *ngIf="mobileConfig?.cancelButtonText"
-                fd-initial-focus
+                fdkInitialFocus
                 [label]="mobileConfig.cancelButtonText!"
                 (click)="handleDismiss()"
             >

libs/core/src/lib/dialog/dialog-default/dialog-default.component.html

@@ -22,7 +22,7 @@ <h1 fd-title [id]="_defaultDialogContent?.titleId">{{ _defaultDialogContent?.tit
         <fd-button-bar
             *ngIf="_defaultDialogContent?.approveButton"
             fdType="emphasized"
-            fd-initial-focus
+            fdkInitialFocus
             [label]="_defaultDialogContent?.approveButton || ''"
             [fdCozy]="_defaultDialogConfiguration.mobile"
             (click)="_approveButtonClicked()"

libs/core/src/lib/list/list-item/list-item.component.ts

@@ -103,6 +103,13 @@ export class ListItemComponent extends ListFocusItem implements AfterContentInit
     @HostBinding('class.fd-list__item--unread')
     unread = false;
 
+    /**
+     * Whether the list item is byline
+     */
+    @Input()
+    @HostBinding('class.fd-list__item--byline')
+    byline = false;
+
     /** @deprecated Text to be read by screen reader for selected list item */
     @Input()
     selectedListItemScreenReaderText: string;

libs/core/src/lib/menu/menu-mobile/menu-mobile.component.html

@@ -45,7 +45,7 @@ <h1 fd-title>{{ title }}</h1>
             </fd-button-bar>
             <fd-button-bar
                 *ngIf="mobileConfig.cancelButtonText"
-                fd-initial-focus
+                fdkInitialFocus
                 [label]="mobileConfig.cancelButtonText"
                 (click)="close()"
             >

libs/core/src/lib/message-box/message-box-default/message-box-default.component.html

@@ -8,7 +8,7 @@ <h1 fd-title>{{ _messageBoxContent.title }}</h1>
     <fd-message-box-footer *ngIf="_footerVisible">
         <fd-button-bar
             *ngIf="_messageBoxContent.approveButton"
-            fd-initial-focus
+            fdkInitialFocus
             fdType="emphasized"
             [label]="_messageBoxContent.approveButton"
             [ariaLabel]="_messageBoxContent.approveButtonAriaLabel"

libs/core/src/lib/select/select.component.html

@@ -72,15 +72,6 @@
         >
             <fd-icon [glyph]="glyph"></fd-icon>
         </span>
-        <!--        <button-->
-        <!--            fd-button-->
-        <!--            tabindex="-1"-->
-        <!--            class="fd-button&#45;&#45;transparent fd-select__button {{ selectDropdownButtonClass }}"-->
-        <!--            (click)="_buttonClick()"-->
-        <!--            *ngIf="!readonly"-->
-        <!--            [disabled]="disabled"-->
-        <!--            [glyph]="glyph"-->
-        <!--        ></button>-->
     </div>
 </ng-template>
 

libs/docs/cdk/clicked/clicked-header/clicked-header.component.html

@@ -19,7 +19,7 @@
         have access to the event handler.
     </p>
 </description>
-<import module="ClickedBehaviorModule" subPackage="cdk"></import>
+<import module="ClickedBehaviorModule" subPackage="utils"></import>
 
 <fd-header-tabs></fd-header-tabs>
 <router-outlet></router-outlet>

libs/docs/cdk/disabled/disabled-header/disabled-header.component.html

@@ -12,7 +12,7 @@
         to your component.
     </p>
 </description>
-<import module="DisabledBehaviorModule" subPackage="cdk"></import>
+<import module="DisabledBehaviorModule" subPackage="utils"></import>
 
 <fd-header-tabs></fd-header-tabs>
 <router-outlet></router-outlet>

libs/docs/cdk/focusable-grid/focusable-grid-header/focusable-grid-header.component.html

@@ -5,7 +5,7 @@
     It also respects <code>[fdkDisabled]</code> directive, so that those elements will be excluded from the selection
     sequence.
 </description>
-<import module="FocusableGridModule" subPackage="cdk"></import>
+<import module="FocusableGridModule" subPackage="utils"></import>
 
 <fd-header-tabs></fd-header-tabs>
 <router-outlet></router-outlet>

libs/docs/cdk/focusable-list/focusable-list-header/focusable-list-header.component.html

@@ -5,7 +5,7 @@
     directions, and it also respects <code>[fdkDisabled]</code> directive, so that those elements will be excluded from
     the selection sequence.
 </description>
-<import module="FocusableListModule" subPackage="cdk"></import>
+<import module="FocusableListModule" subPackage="utils"></import>
 
 <fd-header-tabs></fd-header-tabs>
 <router-outlet></router-outlet>

libs/docs/cdk/initial-focus/examples/default/initial-focus-default-example.component.html

@@ -7,22 +7,22 @@
 
 <div class="fdk-initial-focus-examples">
     <div *ngIf="currentExample === 'link'">
-        <a fd-initial-focus [routerLink]="['./']" fd-link aria-label="Standard">Link with autofocus</a>
+        <a fdkInitialFocus [routerLink]="['./']" fd-link aria-label="Standard">Link with autofocus</a>
     </div>
     <div *ngIf="currentExample === 'button'">
-        <button fd-initial-focus fd-button>Button with autofocus</button>
+        <button fdkInitialFocus fd-button>Button with autofocus</button>
     </div>
     <div *ngIf="currentExample === 'input'">
         <div fd-form-item>
             <label fd-form-label for="input-1">Default Input</label>
-            <input fd-initial-focus fd-form-control type="text" id="input-1" placeholder="Input with autofocus" />
+            <input fdkInitialFocus fd-form-control type="text" id="input-1" placeholder="Input with autofocus" />
         </div>
     </div>
     <div *ngIf="currentExample === 'textarea'">
         <div fd-form-item>
             <label fd-form-label for="input-1">Default Textarea</label>
             <textarea
-                fd-initial-focus
+                fdkInitialFocus
                 fd-form-control
                 type="text"
                 id="textarea-1"

libs/docs/cdk/initial-focus/examples/nested-elements-example/nested-elements-example.component.html

@@ -7,13 +7,13 @@
 
 <div class="fdk-initial-focus-examples">
     <div *ngIf="currentExample === 'select'">
-        <fd-select fd-initial-focus=".fd-select__button" placeholder="Autofocusable select">
+        <fd-select fdkInitialFocus=".fd-select__control" placeholder="Autofocusable select">
             <li fd-option *ngFor="let option of options" [value]="option">{{ option }}</li>
         </fd-select>
     </div>
     <div *ngIf="currentExample === 'combobox'">
         <fd-combobox
-            fd-initial-focus
+            fdkInitialFocus
             inputId="comboboxID1"
             ariaLabel="Standard"
             maxHeight="250px"
@@ -24,7 +24,7 @@
     </div>
     <div *ngIf="currentExample === 'datepicker'">
         <fd-date-picker
-            fd-initial-focus=".fd-input-group__button"
+            fdkInitialFocus=".fd-input-group__button"
             type="single"
             inputId="datePicker"
             [(ngModel)]="date"
@@ -33,7 +33,7 @@
     <div *ngIf="currentExample === 'textarea'">
         <div fd-form-item>
             <fd-slider
-                fd-initial-focus
+                fdkInitialFocus
                 [focusLastElement]="true"
                 mode="range"
                 tooltipMode="editable"

libs/docs/cdk/initial-focus/initial-focus-docs.component.html

@@ -7,9 +7,9 @@
 </component-example>
 <code-example [exampleFiles]="initialFocusDefaultExample"></code-example>
 <separator></separator>
-<fd-docs-section-title id="nested" componentName="InitialFocus"
-    >Initial focus with nested elements</fd-docs-section-title
->
+<fd-docs-section-title id="nested" componentName="InitialFocus">
+    Initial focus with nested elements
+</fd-docs-section-title>
 <description>
     <p>By default, initial focus directive will try to focus element to which this directive is applied.</p>
 

libs/docs/cdk/selectable-list/selectable-list-header/selectable-list-header.component.html

@@ -3,7 +3,7 @@
     You can quickly build out selectable list collection for your components. For that you will need to use combination
     of <code>[fdkSelectableList]</code> and <code>[fdkSelectableItem]</code>
 </description>
-<import module="SelectableListModule" subPackage="cdk"></import>
+<import module="SelectableListModule" subPackage="utils"></import>
 
 <fd-header-tabs></fd-header-tabs>
 <router-outlet></router-outlet>

libs/docs/core/dialog/dialog-docs.component.html

@@ -16,7 +16,7 @@
         </li>
         <li>
             By default after opening the Dialog first focusable element will be focused. To focus specific element after
-            opening the Dialog, use <code>fd-initial-focus</code> directive.
+            opening the Dialog, use <code>fdkInitialFocus</code> directive.
         </li>
     </ul>
 </description>

libs/docs/core/illustrated-message/examples/illustrated-message-dialog-example.component.html

@@ -18,7 +18,7 @@ <h3 fd-illustrated-message-title>Unable to load data</h3>
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-button-bar fd-initial-focus fdType="emphasized" label="Reload"></fd-button-bar>
+            <fd-button-bar fdkInitialFocus fdType="emphasized" label="Reload"></fd-button-bar>
             <fd-button-bar label="Close" (click)="dialog.dismiss('Close button')"></fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>

libs/docs/core/message-box/examples/template-based/template-based-message-box-example.component.html

@@ -9,7 +9,7 @@ <h1 id="fd-message-box-template-base-header" fd-title>Fruit facts</h1>
         </fd-message-box-body>
         <fd-message-box-footer>
             <fd-button-bar
-                fd-initial-focus
+                fdkInitialFocus
                 label="Ok"
                 fdType="emphasized"
                 (click)="messageBox.close('Ok')"

libs/docs/core/message-box/message-box-docs.component.html

@@ -31,7 +31,7 @@
         </li>
         <li>
             By default after opening the message box first focusable element will be focused. To focus specific element
-            after opening the message box, use <code>fd-initial-focus</code> directive.
+            after opening the message box, use <code>fdkInitialFocus</code> directive.
         </li>
     </ul>
 </description>

libs/docs/core/popover/examples/popover-dialog/popover-dialog-example.component.html

@@ -10,7 +10,7 @@ <h1 id="fd-dialog-popover-1" fd-title>Popover Example</h1>
         <fd-dialog-body>
             <fd-popover [noArrow]="false">
                 <fd-popover-control>
-                    <button fdInitialFocus fd-button label="Click me!" aria-describedby="fd-dialog-button-1"></button>
+                    <button fdkInitialFocus fd-button label="Click me!" aria-describedby="fd-dialog-button-1"></button>
                 </fd-popover-control>
                 <fd-popover-body>
                     <div id="fd-dialog-button-1" style="padding: 12px">This is the button's popover!</div>

libs/docs/core/tabs/e2e/tabs.po.ts

@@ -38,7 +38,7 @@ export class TabsPo extends CoreBaseComponentPo {
     titleField = '#playgroundtitle';
     counterField = '#playgroundcounter';
     iconSelect = '#playgroundicon ';
-    acceleratedIcon = this.iconSelect + 'option:nth-child(2)';
+    acceleratedIcon = this.iconSelect + 'option[value="accelerated"]';
     fdIcon = this.playGroundExample + 'fd-icon';
 
     async open(): Promise<void> {

libs/docs/core/wizard/examples/wizard-branching-example.component.html

@@ -143,7 +143,7 @@
         <fd-dialog-footer>
             <fd-button-bar fdType="emphasized" label="Continue" type="submit" (click)="dialog.close('Continue')">
             </fd-button-bar>
-            <fd-button-bar fd-initial-focus label="Cancel" (click)="dialog.dismiss()"> </fd-button-bar>
+            <fd-button-bar fdkInitialFocus label="Cancel" (click)="dialog.dismiss()"> </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>

libs/docs/platform/icon-tab-bar/platform-icon-tab-bar-header/platform-icon-tab-bar-header.component.html

@@ -9,7 +9,7 @@
             the user switches between tab pages by clicking the respective tab.
         </p>
     </description>
-    <import module="PlatformIconTabBarModule"></import>
+    <import module="PlatformIconTabBarModule" subPackage="icon-tab-bar"></import>
 
     <fd-header-tabs></fd-header-tabs>
 </fd-doc-page>

libs/docs/platform/wizard-generator/examples/wizard-generator-customizable-example.component.html

@@ -88,7 +88,7 @@ <h4 fd-title [headerSize]="6">{{ group.title }} form</h4>
 
         <fd-dialog-footer>
             <fd-button-bar fdType="emphasized" label="Yes" type="submit" (click)="dialog.close(true)"> </fd-button-bar>
-            <fd-button-bar fd-initial-focus label="No" (click)="dialog.dismiss()"> </fd-button-bar>
+            <fd-button-bar fdkInitialFocus label="No" (click)="dialog.dismiss()"> </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>

libs/platform/src/lib/approval-flow/approval-flow-add-node/approval-flow-add-node.component.html

@@ -165,7 +165,7 @@
             <fd-dialog-footer-button>
                 <button
                     fd-button
-                    fd-initial-focus
+                    fdkInitialFocus
                     fd-dialog-decisive-button
                     fdType="transparent"
                     [label]="'platformApprovalFlow.addNodeCancelActionBtnLabel' | fdTranslate"
@@ -189,7 +189,7 @@
                 <fd-dialog-footer-button>
                     <button
                         fd-button
-                        fd-initial-focus
+                        fdkInitialFocus
                         fdType="transparent"
                         [label]="'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate"
                         (click)="_exitSelectMode()"
@@ -211,7 +211,7 @@
                 <fd-dialog-footer-button>
                     <button
                         fd-button
-                        fd-initial-focus
+                        fdkInitialFocus
                         fdType="transparent"
                         [label]="'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate"
                         (click)="_exitSelectMode()"
@@ -223,7 +223,7 @@
                 <fd-dialog-footer-button>
                     <button
                         fd-button
-                        fd-initial-focus
+                        fdkInitialFocus
                         fdType="transparent"
                         [label]="'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate"
                         (click)="_exitTeamMembersMode()"
@@ -235,7 +235,7 @@
                 <fd-dialog-footer-button>
                     <button
                         fd-button
-                        fd-initial-focus
+                        fdkInitialFocus
                         fdType="transparent"
                         [label]="'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate"
                         (click)="_exitUserDetailsMode()"

libs/platform/src/lib/approval-flow/approval-flow-approver-details/approval-flow-approver-details.component.html

@@ -56,7 +56,7 @@
         <fd-dialog-footer-button>
             <button
                 fd-button
-                fd-initial-focus
+                fdkInitialFocus
                 fd-dialog-decisive-button
                 fdType="transparent"
                 [label]="'platformApprovalFlow.userDetailsCancelBtnLabel' | fdTranslate"

libs/platform/src/lib/approval-flow/approval-flow-select-type/approval-flow-select-type.component.html

@@ -55,7 +55,7 @@
             <fd-dialog-footer-button>
                 <button
                     fd-button
-                    fd-initial-focus
+                    fdkInitialFocus
                     fd-dialog-decisive-button
                     fdType="transparent"
                     [label]="'platformApprovalFlow.selectTypeDialogCancelButton' | fdTranslate"

libs/platform/src/lib/form/form-generator/form-generator/form-generator.component.html

@@ -100,7 +100,7 @@
 </fd-busy-indicator>
 
 <ng-template #loadingTemplate>
-    <fd-skeleton width="100%" height="100px">
+    <fd-skeleton width="100%" height="100px" style="padding: 1rem">
         <svg:rect x="0" y="0" rx="4" width="15%" height="8" />
         <svg:rect x="0" y="20" rx="4" width="25%" height="16" />