feat(core): user settings

libs/core/bar/bar.component.scss

@@ -1 +1,5 @@
 @import 'fundamental-styles/dist/bar.css';
+
+.fd-bar__left:has(.fd-bar__element > *:is(:empty, [style*='display: none'])) {
+    gap: 0;
+}

libs/core/content-density/services/content-density-observer.service.ts

@@ -174,7 +174,7 @@ export class ContentDensityObserver extends BehaviorSubject<ContentDensityMode>
             contentDensityDirective: this._contentDensityDirective ?? undefined,
             contentDensityService: this._globalContentDensityService ?? undefined,
             parentContentDensityService: this.config.restrictChildContentDensity
-                ? this._parentContentDensityObserver?.asObservable() ?? undefined
+                ? (this._parentContentDensityObserver?.asObservable() ?? undefined)
                 : undefined
         })
             .pipe(

libs/core/datetime/fd-datetime-adapter.ts

@@ -156,8 +156,9 @@ export class FdDatetimeAdapter extends DatetimeAdapter<FdDate> {
 
         try {
             const am = formatter.formatToParts(new Date(2020, 0, 1, 6)).find(({ type }) => type === 'dayPeriod')?.value;
-            const pm = formatter.formatToParts(new Date(2020, 0, 1, 16)).find(({ type }) => type === 'dayPeriod')
-                ?.value;
+            const pm = formatter
+                .formatToParts(new Date(2020, 0, 1, 16))
+                .find(({ type }) => type === 'dayPeriod')?.value;
 
             return am && pm ? [am, pm] : DEFAULT_PERIODS;
         } catch {

libs/core/dialog/base/dialog-config-base.class.ts

@@ -82,6 +82,9 @@ export class DialogConfigBase<T> implements DynamicComponentConfig {
     /** Whether to completely disable dialog body paddings. */
     disablePaddings?: boolean = false;
 
+    /** Whether the dialog is a Settings dialog. */
+    settings?: boolean;
+
     /** Workaround for IE11, as `flex-grow: 1` on dialog body won't work when 'min-height' for dialog set
      * There is another way to get dialog of wanted height by setting `min-height` for dialog body.
      */

libs/core/dialog/dialog-body/dialog-body.component.ts

@@ -31,10 +31,11 @@ import { DialogRef } from '../utils/dialog-ref.class';
     templateUrl: 'dialog-body.component.html',
     host: {
         '[class.fd-dialog__body]': 'true',
+        '[class.fd-settings__dialog-body]': 'dialogConfig.settings',
         '[class.fd-dialog__body--no-vertical-padding]': '!dialogConfig.verticalPadding',
         '[class.fd-dialog__body--no-horizontal-padding]': '!dialogConfig.horizontalPadding',
         '[style.min-height]': 'dialogConfig.bodyMinHeight',
-        '[style.padding]': 'dialogConfig.disablePaddings || disablePaddings() ? 0 : "1rem"'
+        '[style.padding]': 'dialogConfig.disablePaddings || disablePaddings() || dialogConfig.settings ? 0 : "1rem"'
     },
     providers: [
         {

libs/core/dialog/dialog.component.html

@@ -21,6 +21,7 @@
     [class.fd-dialog__content--draggable-grab]="dialogConfig.draggable && !isDragged"
     [class.fd-dialog__content--draggable-grabbing]="dialogConfig.draggable && isDragged"
     [class.fd-dialog__content-full-screen]="_fullScreen"
+    [class.fd-settings__dialog-content]="dialogConfig.settings"
     [cdkDragDisabled]="!dialogConfig.draggable"
     [fdkResizeDisabled]="!dialogConfig.resizable"
     [attr.id]="dialogConfig.id"

libs/core/dialog/dialog.component.scss

@@ -1,4 +1,5 @@
 @import 'fundamental-styles/dist/dialog.css';
+@import 'fundamental-styles/dist/settings.css';
 
 .fd-dialog {
     z-index: 999;

libs/core/dialog/dialog.component.ts

@@ -173,6 +173,7 @@ export class DialogComponent
             this.dialogConfig.hasBackdrop ? 'fd-dialog' : 'fd-dialog--no-backdrop',
             this.dialogConfig.container !== 'body' || this.dialogConfig.position ? 'fd-dialog--targeted' : '',
             this.showDialogWindow ? 'fd-dialog--active' : '',
+            this.dialogConfig.settings ? 'fd-settings' : '',
             this._class,
             this.dialogConfig.backdropClass ? this.dialogConfig.backdropClass : ''
         ];

libs/core/fundamental-ngx.module.ts

@@ -68,6 +68,7 @@ import { ScrollSpyModule } from '@fundamental-ngx/core/scroll-spy';
 import { ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
 import { SegmentedButtonModule } from '@fundamental-ngx/core/segmented-button';
 import { SelectModule } from '@fundamental-ngx/core/select';
+import { SettingsModule } from '@fundamental-ngx/core/settings';
 import { ShellbarModule } from '@fundamental-ngx/core/shellbar';
 import { SideNavigationModule } from '@fundamental-ngx/core/side-navigation';
 import { SkeletonModule } from '@fundamental-ngx/core/skeleton';
@@ -189,7 +190,8 @@ import { WizardModule } from '@fundamental-ngx/core/wizard';
         ContentDensityModule,
         SkeletonModule,
         MultiComboboxModule,
-        ObjectAttributeModule
+        ObjectAttributeModule,
+        SettingsModule
     ]
 })
 export class FundamentalNgxCoreModule {}

libs/core/index.ts

@@ -71,6 +71,7 @@ export * from '@fundamental-ngx/core/scroll-spy';
 export * from '@fundamental-ngx/core/scrollbar';
 export * from '@fundamental-ngx/core/segmented-button';
 export * from '@fundamental-ngx/core/select';
+export * from '@fundamental-ngx/core/settings';
 export * from '@fundamental-ngx/core/shared';
 export * from '@fundamental-ngx/core/shellbar';
 export * from '@fundamental-ngx/core/side-navigation';

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

@@ -11,9 +11,11 @@ import {
     HostBinding,
     HostListener,
     inject,
+    input,
     Input,
     Output,
     QueryList,
+    TemplateRef,
     ViewEncapsulation
 } from '@angular/core';
 
@@ -171,6 +173,9 @@ export class ListItemComponent<T = any> extends ListFocusItem<T> implements Afte
         optional: true
     });
 
+    /** Template ref for Settings list item */
+    settingsListTpl = input<TemplateRef<any>>();
+
     /** @hidden */
     private _role = 'listitem'; // default for li elements
 

libs/core/list/list.component.scss

@@ -4,3 +4,7 @@
 .fd-list {
     max-width: 100% !important;
 }
+
+.fd-settings__list.fd-list.fd-list--byline .fd-list__content {
+    height: auto;
+}

libs/core/list/list.component.ts

@@ -13,7 +13,9 @@ import {
     Output,
     QueryList,
     ViewEncapsulation,
-    inject
+    booleanAttribute,
+    inject,
+    input
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
@@ -44,7 +46,9 @@ import { FD_LIST_COMPONENT, FD_LIST_UNREAD_INDICATOR } from './tokens';
     selector: '[fd-list], [fdList]',
     template: `<ng-content></ng-content>`,
     host: {
-        class: 'fd-list'
+        class: 'fd-list',
+        '[class.fd-settings__list]': 'settingsList() || settingsListFooter()',
+        '[class.fd-settings__list--footer]': 'settingsListFooter()'
     },
     styleUrls: ['./list.component.scss', '../../cdk/utils/drag-and-drop/drag-and-drop.scss'],
     encapsulation: ViewEncapsulation.None,
@@ -145,6 +149,12 @@ export class ListComponent implements ListComponentInterface, ListUnreadIndicato
         return this.role || this._defaultRole;
     }
 
+    /** Whether the list is used inside Settings Dialog */
+    settingsList = input(false, { transform: booleanAttribute });
+
+    /** Whether the list is used inside Settings Dialog Footer */
+    settingsListFooter = input(false, { transform: booleanAttribute });
+
     /**
      * @hidden
      * Default role for lists

libs/core/settings/index.ts

@@ -0,0 +1,11 @@
+export * from './settings-container/settings-container.component';
+export * from './settings-content/settings-content.directive';
+export * from './settings-detail-area/settings-detail-area.directive';
+export * from './settings-dialog-body/settings-dialog-body.directive';
+export * from './settings-dialog-content/settings-dialog-content.directive';
+export * from './settings-header-button/settings-header-button.directive';
+export * from './settings-header/settings-header.directive';
+export * from './settings-list-area/settings-list-area.directive';
+export * from './settings-list-container/settings-list-container.directive';
+export * from './settings.component';
+export * from './settings.module';

libs/core/settings/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "./index.ts"
+    }
+}

libs/core/settings/project.json

@@ -0,0 +1,10 @@
+{
+    "name": "core-settings",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "library",
+    "sourceRoot": "libs/core/settings",
+    "prefix": "fd",
+    "tags": ["type:lib", "scope:fd"],
+    "// targets": "to see all targets run: nx show project core-settings --web",
+    "targets": {}
+}

libs/core/settings/settings-container/settings-container.component.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { whenStable } from '@fundamental-ngx/core/tests';
+import { SettingsContainerComponent } from './settings-container.component';
+
+describe('SettingsContainerComponent', () => {
+    let component: SettingsContainerComponent;
+    let fixture: ComponentFixture<SettingsContainerComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [SettingsContainerComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SettingsContainerComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should apply proper css classes', async () => {
+        await whenStable(fixture);
+
+        expect(fixture.nativeElement.classList.contains('fd-settings__container')).toBe(true);
+    });
+});