@fundamental-ngx/cdk 0.40.0-rc.8 → 0.40.0

package/forms/cva/cva-control.class.d.ts

@@ -12,7 +12,7 @@ export declare class CvaControl<T> {
     /**
      * Control value accessor directive instance.
      */
-    cvaDirective: CvaDirective<any> | null;
+    cvaDirective: CvaDirective<T> | null;
     /**
      * Change detector instance.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/cdk",
-  "version": "0.40.0-rc.8",
+  "version": "0.40.0",
   "schematics": "./schematics/collection.json",
   "description": "Fundamental Library for Angular - CDK",
   "license": "Apache-2.0",
@@ -25,9 +25,9 @@
   "dependencies": {
     "@sap-theming/theming-base-content": "^11.2.0",
     "focus-trap": "^7.1.0",
-    "fundamental-styles": "0.27.1",
+    "fundamental-styles": "0.28.3",
     "@fundamental-styles/cx": "0.26.3-rc.5",
-    "@fundamental-ngx/i18n": "0.40.0-rc.8",
+    "@fundamental-ngx/i18n": "0.40.0",
     "fast-deep-equal": "3.1.3",
     "lodash-es": "^4.17.0",
     "tslib": "^2.0.0",

package/utils/directives/breakpoints/breakpoint.directive.d.ts

@@ -0,0 +1,83 @@
+import { AfterViewInit, ElementRef, EmbeddedViewRef, OnChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { BreakpointName } from './responsive-breakpoints';
+import * as i0 from "@angular/core";
+/**
+ * Directive to show/hide element on specific breakpoint or range of window width.
+ * Uses native ngIf directive to show/hide element.
+ */
+export declare class BreakpointDirective implements OnChanges, AfterViewInit {
+    private readonly templateRef;
+    private readonly viewContainer;
+    /**
+     * Provide list of the breakpoints to show element on.
+     * */
+    set fdkBreakpoint(value: BreakpointName[]);
+    /**
+     * Show element on S breakpoint.
+     * S - 0 - 599px
+     * */
+    set showOnS(value: BooleanInput);
+    /**
+     * Show element on M breakpoint.
+     * M - 0 - 1023px
+     * */
+    set showOnM(value: BooleanInput);
+    /**
+     * Show element on L breakpoint.
+     * L - 0 - 1439px
+     * */
+    set showOnL(value: BooleanInput);
+    /**
+     * Show element on XL breakpoint.
+     *  */
+    set showOnXL(value: BooleanInput);
+    /**
+     * Show element on breakpoint less than provided value.
+     * */
+    fdkBreakpointLt: number;
+    /**
+     * Show element on breakpoint greater than provided value.
+     *  */
+    fdkBreakpointGt: number;
+    /**
+     * Observe element width changes.
+     */
+    set observationSource(value: HTMLElement | ElementRef<HTMLElement>);
+    /** @hidden */
+    templateViewRef?: EmbeddedViewRef<unknown>;
+    /** @hidden */
+    private _showOnS;
+    /** @hidden */
+    private _showOnM;
+    /** @hidden */
+    private _showOnL;
+    /** @hidden */
+    private _showOnXL;
+    /** @hidden */
+    private viewportSize$;
+    /** @hidden */
+    private _destroyed$;
+    /** @hidden */
+    private _resizeObserverService;
+    /** @hidden */
+    onChanges$: Subject<void>;
+    /** @hidden */
+    _sizeObservable$: BehaviorSubject<Observable<number>>;
+    /** @hidden */
+    constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef);
+    /** @hidden */
+    ngAfterViewInit(): void;
+    /** @hidden */
+    ngOnChanges(): void;
+    /** @hidden */
+    private _shouldShow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BreakpointDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BreakpointDirective, "[fdkBreakpoint], [fdkBreakpointS], [fdkBreakpointM], [fdkBreakpointL], [fdkBreakpointXL], [fdkBreakpointLt], [fdkBreakpointGt]", never, { "fdkBreakpoint": "fdkBreakpoint"; "showOnS": "fdkBreakpointS"; "showOnM": "fdkBreakpointM"; "showOnL": "fdkBreakpointL"; "showOnXL": "fdkBreakpointXL"; "fdkBreakpointLt": "fdkBreakpointLt"; "fdkBreakpointGt": "fdkBreakpointGt"; "observationSource": "fdkBreakpointObserve"; }, {}, never, never, true, never>;
+}
+export declare class BreakpointModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BreakpointModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BreakpointModule, never, [typeof BreakpointDirective], [typeof BreakpointDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BreakpointModule>;
+}

package/utils/directives/breakpoints/responsive-breakpoints.d.ts

@@ -0,0 +1,10 @@
+export declare const ResponsiveBreakpoints: {
+    readonly S: 600;
+    readonly M: 1024;
+    readonly L: 1440;
+};
+type breakpointName = keyof typeof ResponsiveBreakpoints | 'XL';
+export type BreakpointName = Lowercase<breakpointName> | Uppercase<breakpointName>;
+/** @hidden */
+export declare function getBreakpointName(width: number): breakpointName;
+export {};

package/utils/directives/disabled/disabled-behavior.directive.d.ts

@@ -18,6 +18,14 @@ export declare class DisabledBehaviorDirective extends ReplaySubject<boolean> im
     /** @hidden */
     set fdkDisabled(value: BooleanInput);
     get fdkDisabled(): boolean;
+    /**
+     * Whether to add `disabledClass` class to the element.
+     */
+    addDisabledClass: boolean;
+    /**
+     * Disabled css class to apply to the element.
+     */
+    disabledClass: string;
     /** @hidden */
     private _disabled;
     /** @hidden */
@@ -31,5 +39,5 @@ export declare class DisabledBehaviorDirective extends ReplaySubject<boolean> im
     /** @hidden */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DisabledBehaviorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DisabledBehaviorDirective, "[fdkDisabled]", never, { "fdkDisabled": "fdkDisabled"; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DisabledBehaviorDirective, "[fdkDisabled]", never, { "fdkDisabled": "fdkDisabled"; "addDisabledClass": "addDisabledClass"; "disabledClass": "disabledClass"; }, {}, never, never, true, never>;
 }

package/utils/directives/disabled/set-disabled-state.d.ts

@@ -1,4 +1,4 @@
 import { ElementRef } from '@angular/core';
 import { HasElementRef } from '../../interfaces/has-element-ref.interface';
 /** @hidden */
-export declare function setDisabledState(element: HasElementRef<Element> | Element | ElementRef<Element>, isDisabled: boolean): void;
+export declare function setDisabledState(element: HasElementRef<Element> | Element | ElementRef<Element>, isDisabled: boolean, disabledClass: string, addDisabledClass: boolean): void;

package/utils/directives/index.d.ts

@@ -29,3 +29,4 @@ export * from './readonly';
 export * from './disabled';
 export * from './clicked';
 export * from './selectable-list';
+export * from './breakpoints/breakpoint.directive';

package/utils/drag-and-drop/dnd-list/dnd-list.directive.d.ts

@@ -1,14 +1,38 @@
 import { AfterContentInit, EventEmitter, OnDestroy, QueryList } from '@angular/core';
-import { FdDropEvent, ElementPosition, DndItem } from '../dnd.interfaces';
+import { FdDropEvent, ElementPosition, DndItem, FdDndDropType } from '../dnd.interfaces';
 import * as i0 from "@angular/core";
 export declare class DndListDirective<T> implements AfterContentInit, OnDestroy {
     /**
-     * Defines if the the element is allowed to be dragged in 2 dimensions,
+     * Defines if the element is allowed to be dragged in 2 dimensions,
      * When true - replace indicator will be displayed vertically
      */
     gridMode: boolean;
-    /** When enabled, replace indicator will appear on whole element, instead of horizontal/vertical line before/after element */
-    replaceMode: boolean;
+    /**
+     * Defines drop strategy:
+     * * `shift` mode will create line after closest drop element.
+     * * `group` mode will create replace indicator on whole closest drop element.
+     * * `auto` mode will create line after closest drop element,
+     * if dragged element coordinates are shifted for 30% from center of the closest drop element.
+     * Otherwise, it will create replace indicator on whole closest drop element.
+     *
+     * `shift` mode is the default.
+     */
+    dropMode: FdDndDropType;
+    /**
+     * Threshold of dragged item over another item to define which type of `dropMode` should be used.
+     */
+    threshold: number;
+    /**
+     * @deprecated
+     * Use `dropMode` property for better configuration.
+     *
+     * @description
+     * When enabled, replace indicator will appear on whole element, instead of horizontal/vertical line before/after element.
+     */
+    set replaceMode(value: boolean);
+    get replaceMode(): boolean;
+    /** @hidden */
+    private _replaceMode;
     /** Array of items, that will be sorted */
     items: Array<T>;
     /** Defines if drag and drop feature should be enabled for list items */
@@ -34,6 +58,14 @@ export declare class DndListDirective<T> implements AfterContentInit, OnDestroy
     /** @hidden */
     private _draggable;
     /** @hidden */
+    private readonly _initialClass;
+    /** @hidden */
+    private _detectedDropMode;
+    /** @hidden */
+    private _linesRemoved;
+    /** @hidden */
+    private _indicatorsRemoved;
+    /** @hidden */
     ngAfterContentInit(): void;
     /** @hidden */
     ngOnDestroy(): void;
@@ -44,6 +76,8 @@ export declare class DndListDirective<T> implements AfterContentInit, OnDestroy
     /** Method called, when element is released */
     dragEnd(draggedItemIndex: number): void;
     /** @hidden */
+    private _selectDropModeIndicator;
+    /** @hidden */
     private _removeAllLines;
     /** @hidden */
     private _removeAllReplaceIndicators;
@@ -61,5 +95,5 @@ export declare class DndListDirective<T> implements AfterContentInit, OnDestroy
     /** @hidden */
     private _changeDraggableState;
     static ɵfac: i0.ɵɵFactoryDeclaration<DndListDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DndListDirective<any>, "[fdkDndList], [fd-dnd-list]", never, { "gridMode": "gridMode"; "replaceMode": "replaceMode"; "items": "items"; "draggable": "draggable"; }, { "itemsChange": "itemsChange"; "itemDropped": "itemDropped"; }, ["dndItems"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DndListDirective<any>, "[fdkDndList], [fd-dnd-list]", never, { "gridMode": "gridMode"; "dropMode": "dropMode"; "threshold": "threshold"; "replaceMode": "replaceMode"; "items": "items"; "draggable": "draggable"; }, { "itemsChange": "itemsChange"; "itemDropped": "itemDropped"; }, ["dndItems"], never, false, never>;
 }

package/utils/drag-and-drop/dnd.interfaces.d.ts

@@ -13,6 +13,8 @@ export interface FdDropEvent<T> {
     items: Array<T>;
     replacedItemIndex: number;
     draggedItemIndex: number;
+    insertAt: 'before' | 'after' | null;
+    mode: FdDndDropEventMode;
 }
 export interface ElementPosition {
     x: number;
@@ -31,3 +33,5 @@ export interface DndItem {
     listDraggable: boolean;
     changeCDKDragState: () => void;
 }
+export type FdDndDropType = 'shift' | 'group' | 'auto';
+export type FdDndDropEventMode = 'shift' | 'group';

package/utils/index.d.ts

@@ -16,3 +16,4 @@ export * from './services';
 export * from './abstract-fd-ngx-class';
 export * from './pipes';
 export * from './tokens/module-deprecations.token';
+export * from './tokens/viewport-size.observable';

package/utils/tokens/viewport-size.observable.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
+/**
+ * Injection token for the viewport size observable.
+ * Emits the viewport size in pixels, which are outputted by the ViewportRuler
+ * from @angular/cdk/overlay.
+ */
+export declare const ViewportSizeObservable: InjectionToken<Observable<number>>;