feat: new content density mechanism

apps/docs/project.json

@@ -198,7 +198,7 @@
                         {
                             "type": "initial",
                             "maximumWarning": "2mb",
-                            "maximumError": "5mb"
+                            "maximumError": "6mb"
                         }
                     ]
                 },

libs/cdk/src/lib/utils/directives/disabled/default-disabled-view-modifier.ts

@@ -8,6 +8,6 @@ export class DefaultDisabledViewModifier implements DisabledViewModifier {
 
     /** @hidden */
     setDisabledState = (isDisabled: boolean): void => {
-        setDisabledState(this.elementRef, isDisabled);
+        setDisabledState(this.elementRef, isDisabled, 'is-disabled', true);
     };
 }

libs/cdk/src/lib/utils/directives/disabled/disabled-behavior.directive.ts

@@ -55,6 +55,18 @@ export class DisabledBehaviorDirective
         return this._disabled;
     }
 
+    /**
+     * Whether to add `disabledClass` class to the element.
+     */
+    @Input()
+    addDisabledClass = true;
+
+    /**
+     * Disabled css class to apply to the element.
+     */
+    @Input()
+    disabledClass = 'is-disabled';
+
     /** @hidden */
     private _disabled = false;
     /** @hidden */
@@ -71,7 +83,7 @@ export class DisabledBehaviorDirective
 
     /** @hidden */
     setDisabledState = (isDisabled: boolean): void => {
-        setDisabledState(this._elementRef, isDisabled);
+        setDisabledState(this._elementRef, isDisabled, this.disabledClass, this.addDisabledClass);
     };
 
     /** @hidden */

libs/cdk/src/lib/utils/directives/disabled/set-disabled-state.ts

@@ -5,15 +5,19 @@ import { HasElementRef } from '../../interfaces/has-element-ref.interface';
 /** @hidden */
 export function setDisabledState(
     element: HasElementRef<Element> | Element | ElementRef<Element>,
-    isDisabled: boolean
+    isDisabled: boolean,
+    disabledClass: string,
+    addDisabledClass: boolean
 ): void {
     const htmlElement = getNativeElement(element);
     if (isDisabled) {
-        htmlElement.classList.add('is-disabled');
+        if (addDisabledClass) {
+            htmlElement.classList.add(disabledClass);
+        }
         htmlElement.setAttribute('disabled', '');
         htmlElement.setAttribute('aria-disabled', 'true');
     } else {
-        htmlElement.classList.remove('is-disabled');
+        htmlElement.classList.remove(disabledClass);
         htmlElement.removeAttribute('disabled');
         htmlElement.removeAttribute('aria-disabled');
     }

libs/core/src/lib/action-sheet/action-sheet-body/action-sheet-body.component.html

@@ -5,7 +5,6 @@
     [attr.aria-labelledby]="ariaLabelledby"
     class="fd-action-sheet"
     [class.fd-action-sheet--mobile]="mobile"
-    [class.fd-action-sheet--compact]="_contentDensityObserver.isCompact$ | async"
     role="menu"
 >
     <ng-content select="[fd-action-sheet-item]"></ng-content>

libs/core/src/lib/bar/bar.component.ts

@@ -33,9 +33,6 @@ export type BarDesignType = 'header' | 'subheader' | 'header-with-subheader' | '
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         contentDensityObserverProviders({
-            modifiers: {
-                [ContentDensityMode.COZY]: 'fd-bar--cozy'
-            },
             defaultContentDensity: ContentDensityMode.COMPACT
         })
     ]

libs/core/src/lib/button/button.component.ts

@@ -13,11 +13,7 @@ import {
 import { BaseButton } from './base-button';
 import { Subscription } from 'rxjs';
 import { applyCssClass, CssClassBuilder } from '@fundamental-ngx/cdk/utils';
-import {
-    ContentDensityObserver,
-    contentDensityObserverProviders,
-    ContentDensityMode
-} from '@fundamental-ngx/core/content-density';
+import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
 
 import { FD_BUTTON_COMPONENT } from './tokens';
 
@@ -45,11 +41,7 @@ import { FD_BUTTON_COMPONENT } from './tokens';
         '[attr.aria-label]': 'buttonArialabel'
     },
     providers: [
-        contentDensityObserverProviders({
-            modifiers: {
-                [ContentDensityMode.COMPACT]: 'fd-button--compact'
-            }
-        }),
+        contentDensityObserverProviders(),
         {
             provide: FD_BUTTON_COMPONENT,
             useExisting: ButtonComponent

libs/core/src/lib/calendar/calendar.component.ts

@@ -36,11 +36,7 @@ import { createMissingDateImplementationError } from './calendar-errors';
 import { CalendarAggregatedYearViewComponent } from './calendar-views/calendar-aggregated-year-view/calendar-aggregated-year-view.component';
 import { DisableDateFunction, EscapeFocusFunction, FocusableCalendarView } from './models/common';
 import { CalendarType, DaysOfWeek, FdCalendarView, NavigationButtonDisableFunction } from './types';
-import {
-    ContentDensityObserver,
-    contentDensityObserverProviders,
-    ContentDensityMode
-} from '@fundamental-ngx/core/content-density';
+import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
 import { Nullable } from '@fundamental-ngx/cdk/utils';
 
 let calendarUniqueId = 0;
@@ -73,11 +69,7 @@ let calendarUniqueId = 0;
             multi: true
         },
         CalendarService,
-        contentDensityObserverProviders({
-            modifiers: {
-                [ContentDensityMode.COMPACT]: 'fd-calendar--compact'
-            }
-        })
+        contentDensityObserverProviders()
     ],
     host: {
         '(focusout)': '_focusOut($event)',

libs/core/src/lib/card/card.component.ts

@@ -15,11 +15,7 @@ import { applyCssClass, CssClassBuilder } from '@fundamental-ngx/cdk/utils';
 import { CardType, CLASS_NAME } from './constants';
 import { Subscription } from 'rxjs';
 import { getCardModifierClassNameByCardType } from './utils';
-import {
-    ContentDensityObserver,
-    contentDensityObserverProviders,
-    ContentDensityMode
-} from '@fundamental-ngx/core/content-density';
+import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
 
 let cardId = 0;
 
@@ -29,13 +25,7 @@ let cardId = 0;
     styleUrls: ['./card.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [
-        contentDensityObserverProviders({
-            modifiers: {
-                [ContentDensityMode.COMPACT]: CLASS_NAME.cardCompact
-            }
-        })
-    ]
+    providers: [contentDensityObserverProviders()]
 })
 export class CardComponent implements OnChanges, OnInit, CssClassBuilder, OnDestroy {
     /** Badge */

libs/core/src/lib/card/constants.ts

@@ -1,6 +1,5 @@
 export const CLASS_NAME = {
     card: 'fd-card',
-    cardCompact: 'fd-card--compact',
 
     cardHeader: 'fd-card__header',
     cardHeaderNonInteractive: 'fd-card__header--non-interactive',

libs/core/src/lib/checkbox/checkbox/checkbox.component.ts

@@ -24,11 +24,7 @@ import equal from 'fast-deep-equal';
 import { Subscription } from 'rxjs';
 import { FormStates } from '@fundamental-ngx/cdk/forms';
 import { FormItemControl, registerFormItemControl } from '@fundamental-ngx/core/form';
-import {
-    ContentDensityMode,
-    ContentDensityObserver,
-    contentDensityObserverProviders
-} from '@fundamental-ngx/core/content-density';
+import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
 import { FD_CHECKBOX_COMPONENT } from '../tokens';
 
 let checkboxUniqueId = 0;
@@ -191,22 +187,14 @@ export class CheckboxComponent implements ControlValueAccessor, AfterViewInit, O
 
     /** @hidden */
     ngAfterViewInit(): void {
-        this._contentDensityObserver
-            .consume(
-                {
-                    elementRef: () => this.inputElement,
-                    contentDensitySettings: {
-                        modifiers: { [ContentDensityMode.COMPACT]: 'fd-checkbox--compact' }
-                    }
-                },
-                {
-                    elementRef: () => this.labelElement,
-                    contentDensitySettings: {
-                        modifiers: { [ContentDensityMode.COMPACT]: 'fd-checkbox__label--compact' }
-                    }
-                }
-            )
-            .subscribe();
+        this._contentDensityObserver.consume(
+            {
+                elementRef: () => this.inputElement
+            },
+            {
+                elementRef: () => this.labelElement
+            }
+        );
     }
 
     /** @hidden */

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

@@ -89,7 +89,6 @@
         />
         <span
             class="fd-input-group__addon fd-input-group__addon--button"
-            [class.fd-input-group__addon--compact]="_contentDensityObserver.isCompact$ | async"
             [class.fd-shellbar__input-group-addon]="inShellbar"
             *ngIf="isSearch && showClearButton && inputText && inputText.length > 0"
         >

libs/core/src/lib/content-density/classes/content-density-observer.settings.ts

@@ -10,4 +10,8 @@ export class ContentDensityObserverSettings {
     defaultContentDensity?: ContentDensityMode | ProviderToken<ContentDensityMode> | FactorySansProvider;
     /** Whether in debug mode. */
     debug?: boolean;
+    /** Whether to always add class modifiers. Useful for components that are detached from its parent component. */
+    alwaysAddModifiers?: boolean;
+    /** Whether to force child components to restrict supported content density with current component's one. */
+    restrictChildContentDensity?: boolean;
 }

libs/core/src/lib/content-density/content-density.module.ts

@@ -38,9 +38,8 @@ function generateContentDensityStorage(config: ContentDensityModuleConfig): Prov
 }
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [ContentDensityDirective],
-    declarations: [ContentDensityDirective]
+    imports: [CommonModule, ContentDensityDirective],
+    exports: [ContentDensityDirective]
 })
 export class ContentDensityModule {
     /** Module with providers */

libs/core/src/lib/content-density/content-density.types.ts

@@ -42,7 +42,7 @@ export type ContentDensityModuleConfig = (
     BaseContentDensityModuleConfig;
 
 export interface ContentDensityObserverTarget extends HasElementRef {
-    contentDensitySettings: ContentDensityObserverSettings;
+    contentDensitySettings?: ContentDensityObserverSettings;
 }
 
 export type ContentDensityCallbackFn = (target: ContentDensityMode) => void;

libs/core/src/lib/content-density/directives/content-density.directive.ts

@@ -21,7 +21,8 @@ import { ContentDensityMode } from '../types/content-density.mode';
             provide: CONTENT_DENSITY_DIRECTIVE,
             useExisting: forwardRef(() => ContentDensityDirective)
         }
-    ]
+    ],
+    standalone: true
 })
 export class ContentDensityDirective extends BehaviorSubject<LocalContentDensityMode> implements OnDestroy {
     /**

libs/core/src/lib/content-density/helpers/content-density-change-callback-factory.ts

@@ -15,7 +15,7 @@ export function contentDensityCallbackFactory(
         const configs = {
             contentDensitySettings: {
                 ...defaultContentDensityObserverConfigs,
-                ...consumerConfig.contentDensitySettings
+                ...(consumerConfig.contentDensitySettings || {})
             },
             elementRef: () => consumerConfig.elementRef()
         };

libs/core/src/lib/content-density/helpers/get-changes-source.provider.ts

@@ -11,11 +11,16 @@ export const getChangesSource$ = (params: {
     defaultContentDensity: ContentDensityMode;
     contentDensityDirective?: Observable<LocalContentDensityMode>;
     contentDensityService?: GlobalContentDensityService;
+    parentContentDensityService?: Observable<ContentDensityMode>;
 }): Observable<ContentDensityMode> => {
     const serviceValue$: Observable<ContentDensityMode> = params.contentDensityService
         ? params.contentDensityService.contentDensityListener()
         : of(params.defaultContentDensity);
-    const changesSource$ = params.contentDensityDirective ? params.contentDensityDirective : serviceValue$;
+    const changesSource$ = params.parentContentDensityService
+        ? params.parentContentDensityService
+        : params.contentDensityDirective
+        ? params.contentDensityDirective
+        : serviceValue$;
 
     return changesSource$.pipe(
         switchMap((mode: LocalContentDensityMode) => {