@ng-matero/extensions 19.4.1 → 20.0.1

package/split/index.d.ts

@@ -1,5 +1,257 @@
+import { ThemePalette } from '@angular/material/core';
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, ElementRef, InjectionToken, AfterViewInit, EventEmitter } from '@angular/core';
+import * as i1 from '@angular/common';
+import { Observable } from 'rxjs';
+
+declare class MtxSplitPane implements OnInit, OnDestroy {
+    private ngZone;
+    private renderer;
+    private split;
+    elRef: ElementRef<any>;
+    /**
+     * Order of the area. Used to maintain the order of areas when toggling their visibility.
+     * Toggling area visibility without specifying an `order` leads to weird behavior.
+     */
+    get order(): number | null;
+    set order(v: number | null);
+    private _order;
+    /**
+     * Size of the area in selected unit (percent/pixel).
+     * - Percent: All areas sizes should equal to `100`, If not, all areas will have the same size.
+     * - Pixel: An area with wildcard size (`size="*"`) is mandatory (only one) and
+     *   can't have `visible="false"` or `minSize`/`maxSize`/`lockSize` properties.
+     */
+    get size(): number | null;
+    set size(v: number | null);
+    private _size;
+    /** Minimum pixel or percent size, should be equal to or smaller than provided `size`. */
+    get minSize(): number | null;
+    set minSize(v: number | null);
+    private _minSize;
+    /** Maximum pixel or percent size, should be equal to or larger than provided `size`. */
+    get maxSize(): number | null;
+    set maxSize(v: number | null);
+    private _maxSize;
+    /** Lock area size, same as `minSize`=`maxSize`=`size`. */
+    get lockSize(): boolean;
+    set lockSize(v: boolean);
+    private _lockSize;
+    /** Hide area visually but still present in the DOM, use `ngIf` to completely remove it. */
+    get visible(): boolean;
+    set visible(v: boolean);
+    private _visible;
+    private transitionListener;
+    private readonly lockListeners;
+    constructor();
+    ngOnInit(): void;
+    setStyleOrder(value: number): void;
+    setStyleFlex(grow: number, shrink: number, basis: string, isMin: boolean, isMax: boolean): void;
+    lockEvents(): void;
+    unlockEvents(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxSplitPane, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSplitPane, "mtx-split-pane, [mtx-split-pane]", ["mtxSplitPane"], { "order": { "alias": "order"; "required": false; }; "size": { "alias": "size"; "required": false; }; "minSize": { "alias": "minSize"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "lockSize": { "alias": "lockSize"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_lockSize: unknown;
+    static ngAcceptInputType_visible: unknown;
+}
+
+interface MtxSplitPoint {
+    x: number;
+    y: number;
+}
+interface MtxSplitArea {
+    component: MtxSplitPane;
+    order: number;
+    size: number | null;
+    minSize: number | null;
+    maxSize: number | null;
+}
+interface MtxSplitSnapshot {
+    gutterNum: number;
+    allAreasSizePixel: number;
+    allInvolvedAreasSizePercent: number;
+    lastSteppedOffset: number;
+    areasBeforeGutter: MtxSplitAreaSnapshot[];
+    areasAfterGutter: MtxSplitAreaSnapshot[];
+}
+interface MtxSplitAreaSnapshot {
+    area: MtxSplitArea;
+    sizePixelAtStart: number;
+    sizePercentAtStart: number;
+}
+interface MtxSplitSideAbsorptionCapacity {
+    remain: number;
+    list: MtxSplitAreaAbsorptionCapacity[];
+}
+interface MtxSplitAreaAbsorptionCapacity {
+    areaSnapshot: MtxSplitAreaSnapshot;
+    pixelAbsorb: number;
+    percentAfterAbsorption: number;
+    pixelRemain: number;
+}
+interface MtxSplitOutputData {
+    gutterNum: number;
+    sizes: MtxSplitOutputAreaSizes;
+}
+type MtxSplitOutputAreaSizes = (number | '*')[];
+interface MtxSplitDefaultOptions {
+    color?: ThemePalette;
+    dir?: 'ltr' | 'rtl';
+    direction?: 'horizontal' | 'vertical';
+    unit?: 'percent' | 'pixel';
+    gutterDblClickDuration?: number;
+    gutterSize?: number;
+    gutterStep?: number;
+    restrictMove?: boolean;
+    useTransition?: boolean;
+}
+
+declare function getPointFromEvent(event: MouseEvent | TouchEvent): MtxSplitPoint | null;
+declare function getElementPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number;
+declare function getInputPositiveNumber<T>(v: any, defaultValue: T): number | T;
+declare function isUserSizesValid(unit: 'percent' | 'pixel', sizes: number[]): boolean | number | void;
+declare function getAreaMinSize(a: MtxSplitArea): null | number;
+declare function getAreaMaxSize(a: MtxSplitArea): null | number;
+declare function getGutterSideAbsorptionCapacity(unit: 'percent' | 'pixel', sideAreas: MtxSplitAreaSnapshot[], pixels: number, allAreasSizePixel: number): MtxSplitSideAbsorptionCapacity;
+declare function getAreaAbsorptionCapacity(unit: 'percent' | 'pixel', areaSnapshot: MtxSplitAreaSnapshot, pixels: number, allAreasSizePixel: number): MtxSplitAreaAbsorptionCapacity | void;
+declare function getAreaAbsorptionCapacityPercent(areaSnapshot: MtxSplitAreaSnapshot, pixels: number, allAreasSizePixel: number): MtxSplitAreaAbsorptionCapacity | void;
+declare function getAreaAbsorptionCapacityPixel(areaSnapshot: MtxSplitAreaSnapshot, pixels: number, containerSizePixel: number): MtxSplitAreaAbsorptionCapacity | void;
+declare function updateAreaSize(unit: 'percent' | 'pixel', item: MtxSplitAreaAbsorptionCapacity): void;
+
+/** Injection token that can be used to specify default split options. */
+declare const MTX_SPLIT_DEFAULT_OPTIONS: InjectionToken<MtxSplitDefaultOptions>;
 /**
- * Generated bundle index. Do not edit.
+ * mtx-split
+ *
+ *
+ *  PERCENT MODE ([unit]="'percent'")
+ *  ___________________________________________________________________________________________
+ * |       A       [g1]       B       [g2]       C       [g3]       D       [g4]       E       |
+ * |-------------------------------------------------------------------------------------------|
+ * |       20                 30                 20                 15                 15      | <-- [size]="x"
+ * |               10px               10px               10px               10px               | <-- [gutterSize]="10"
+ * |calc(20% - 8px)    calc(30% - 12px)   calc(20% - 8px)    calc(15% - 6px)    calc(15% - 6px)| <-- CSS flex-basis property (with flex-grow&shrink at 0)
+ * |     152px              228px              152px              114px              114px     | <-- el.getBoundingClientRect().width
+ * |___________________________________________________________________________________________|
+ *                                                                                 800px         <-- el.getBoundingClientRect().width
+ *  flex-basis = calc( { area.size }% - { area.size/100 * nbGutter*gutterSize }px );
+ *
+ *
+ *  PIXEL MODE ([unit]="'pixel'")
+ *  ___________________________________________________________________________________________
+ * |       A       [g1]       B       [g2]       C       [g3]       D       [g4]       E       |
+ * |-------------------------------------------------------------------------------------------|
+ * |      100                250                 *                 150                100      | <-- [size]="y"
+ * |               10px               10px               10px               10px               | <-- [gutterSize]="10"
+ * |   0 0 100px          0 0 250px           1 1 auto          0 0 150px          0 0 100px   | <-- CSS flex property (flex-grow/flex-shrink/flex-basis)
+ * |     100px              250px              200px              150px              100px     | <-- el.getBoundingClientRect().width
+ * |___________________________________________________________________________________________|
+ *                                                                                 800px         <-- el.getBoundingClientRect().width
+ *
  */
-/// <amd-module name="@ng-matero/extensions/split" />
-export * from './public-api';
+declare class MtxSplit implements AfterViewInit, OnDestroy {
+    private ngZone;
+    private elRef;
+    private cdRef;
+    private renderer;
+    protected _defaultOptions: MtxSplitDefaultOptions | null;
+    color: ThemePalette;
+    /** The split direction. */
+    get direction(): "horizontal" | "vertical";
+    set direction(v: 'horizontal' | 'vertical');
+    private _direction;
+    /** The unit you want to specify area sizes. */
+    get unit(): "percent" | "pixel";
+    set unit(v: 'percent' | 'pixel');
+    private _unit;
+    /** Gutters's size (dragging elements) in pixels. */
+    get gutterSize(): number;
+    set gutterSize(v: number);
+    private _gutterSize;
+    /** Gutter step while moving in pixels. */
+    get gutterStep(): number;
+    set gutterStep(v: number);
+    private _gutterStep;
+    /** Set to true if you want to limit gutter move to adjacent areas only. */
+    restrictMove: boolean;
+    /** Add transition when toggling visibility using `visible` or `size` changes. */
+    get useTransition(): boolean;
+    set useTransition(v: boolean);
+    private _useTransition;
+    /**
+     * Disable the dragging feature (remove cursor/image on gutters).
+     * `gutterClick`/`gutterDblClick` still emits.
+     */
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    private _disabled;
+    /** Indicates the directionality of the areas. */
+    get dir(): "ltr" | "rtl";
+    set dir(v: 'ltr' | 'rtl');
+    private _dir;
+    /**
+     * Milliseconds to detect a double click on a gutter. Set it around 300-500ms if
+     * you want to use `gutterDblClick` event.
+     */
+    get gutterDblClickDuration(): number;
+    set gutterDblClickDuration(v: number);
+    private _gutterDblClickDuration;
+    /** Event emitted when drag starts. */
+    dragStart: EventEmitter<MtxSplitOutputData>;
+    /** Event emitted when drag ends. */
+    dragEnd: EventEmitter<MtxSplitOutputData>;
+    /** Event emitted when user clicks on a gutter. */
+    gutterClick: EventEmitter<MtxSplitOutputData>;
+    /** Event emitted when user double clicks on a gutter. */
+    gutterDblClick: EventEmitter<MtxSplitOutputData>;
+    /**
+     * Event emitted when transition ends (could be triggered from `visible` or `size` changes).
+     * Only if `useTransition` equals true.
+     */
+    get transitionEnd(): Observable<MtxSplitOutputAreaSizes>;
+    private transitionEndSubscriber;
+    private dragProgressSubject;
+    dragProgress$: Observable<MtxSplitOutputData>;
+    private isDragging;
+    private dragListeners;
+    private snapshot;
+    private startPoint;
+    private endPoint;
+    readonly displayedAreas: MtxSplitArea[];
+    private readonly hidedAreas;
+    private gutterEls;
+    constructor();
+    ngAfterViewInit(): void;
+    private getNbGutters;
+    addArea(component: MtxSplitPane): void;
+    removeArea(component: MtxSplitPane): void;
+    updateArea(component: MtxSplitPane, resetOrders: boolean, resetSizes: boolean): void;
+    showArea(component: MtxSplitPane): void;
+    hideArea(comp: MtxSplitPane): void;
+    getVisibleAreaSizes(): MtxSplitOutputAreaSizes;
+    setVisibleAreaSizes(sizes: MtxSplitOutputAreaSizes): boolean;
+    private build;
+    private refreshStyleSizes;
+    _clickTimeout: number | null;
+    clickGutter(event: MouseEvent | TouchEvent, gutterNum: number): void;
+    startDragging(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void;
+    private dragEvent;
+    private stopDragging;
+    notify(type: 'start' | 'progress' | 'end' | 'click' | 'dblclick' | 'transitionEnd', gutterNum: number): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxSplit, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxSplit, "mtx-split", ["mtxSplit"], { "color": { "alias": "color"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "unit": { "alias": "unit"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; "gutterStep": { "alias": "gutterStep"; "required": false; }; "restrictMove": { "alias": "restrictMove"; "required": false; }; "useTransition": { "alias": "useTransition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "gutterDblClickDuration": { "alias": "gutterDblClickDuration"; "required": false; }; }, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "gutterClick": "gutterClick"; "gutterDblClick": "gutterDblClick"; "transitionEnd": "transitionEnd"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_restrictMove: unknown;
+    static ngAcceptInputType_useTransition: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+declare class MtxSplitModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxSplitModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxSplitModule, never, [typeof i1.CommonModule, typeof MtxSplit, typeof MtxSplitPane], [typeof MtxSplit, typeof MtxSplitPane]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxSplitModule>;
+}
+
+export { MTX_SPLIT_DEFAULT_OPTIONS, MtxSplit, MtxSplitModule, MtxSplitPane, getAreaAbsorptionCapacity, getAreaAbsorptionCapacityPercent, getAreaAbsorptionCapacityPixel, getAreaMaxSize, getAreaMinSize, getElementPixelSize, getGutterSideAbsorptionCapacity, getInputPositiveNumber, getPointFromEvent, isUserSizesValid, updateAreaSize };
+export type { MtxSplitArea, MtxSplitAreaAbsorptionCapacity, MtxSplitAreaSnapshot, MtxSplitDefaultOptions, MtxSplitOutputAreaSizes, MtxSplitOutputData, MtxSplitPoint, MtxSplitSideAbsorptionCapacity, MtxSplitSnapshot };

package/split/split.scss

@@ -1,11 +1,11 @@
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/split' as tokens-mtx-split;
+@use './m3-split';
+
+$fallbacks: m3-split.get-tokens();
 
 $gutter-size: 4px;
 $handle-size: 8px;
-$handle-offset: ($handle-size - $gutter-size) * .5;
-
-$_tokens: tokens-mtx-split.$prefix, tokens-mtx-split.get-token-slots();
+$handle-offset: ($handle-size - $gutter-size) * 0.5;
 
 .mtx-split {
   display: flex;
@@ -23,13 +23,10 @@ $_tokens: tokens-mtx-split.$prefix, tokens-mtx-split.get-token-slots();
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
+    background-color: token-utils.slot(split-gutter-background-color, $fallbacks);
 
-    @include token-utils.use-tokens($_tokens...) {
-      @include token-utils.create-token-slot(background-color, gutter-background-color);
-
-      &:hover {
-        @include token-utils.create-token-slot(background-color, gutter-hover-state-background-color);
-      }
+    &:hover {
+      background-color: token-utils.slot(split-gutter-hover-state-background-color, $fallbacks);
     }
 
     > .mtx-split-gutter-handle {
@@ -114,7 +111,7 @@ $_tokens: tokens-mtx-split.$prefix, tokens-mtx-split.get-token-slots();
   &.mtx-split-transition.mtx-split-init:not(.mtx-dragging) {
     > .mtx-split-gutter,
     > .mtx-split-pane {
-      transition: flex-basis .3s;
+      transition: flex-basis 0.3s;
     }
   }
 }

package/tooltip/_m2-tooltip.scss

@@ -0,0 +1,50 @@
+@use '@angular/material' as mat;
+@use '../core/tokens/m2-utils';
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    tooltip-container-shape: 4px,
+    tooltip-supporting-text-line-height: 16px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+
+  @return (
+    tooltip-container-color: mat.get-theme-color($theme, background, tooltip),
+    tooltip-supporting-text-color: #fff,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    tooltip-supporting-text-font: mat.get-theme-typography($theme, caption, font-family),
+    tooltip-supporting-text-size: mat.get-theme-typography($theme, caption, font-size),
+    tooltip-supporting-text-weight: mat.get-theme-typography($theme, caption, font-weight),
+    tooltip-supporting-text-tracking: mat.get-theme-typography($theme, caption, letter-spacing),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return mat.private-deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
+  );
+}

package/tooltip/_m3-tooltip.scss

@@ -0,0 +1,28 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates the tokens for MDC plain-tooltip
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  $tokens: (
+    base: (
+      tooltip-container-shape: map.get($system, corner-extra-small),
+      tooltip-supporting-text-line-height: map.get($system, body-small-line-height),
+    ),
+    color: (
+      tooltip-container-color: map.get($system, inverse-surface),
+      tooltip-supporting-text-color: map.get($system, inverse-on-surface),
+    ),
+    typography: (
+      tooltip-supporting-text-font: map.get($system, body-small-font),
+      tooltip-supporting-text-size: map.get($system, body-small-size),
+      tooltip-supporting-text-tracking: map.get($system, body-small-tracking),
+      tooltip-supporting-text-weight: map.get($system, body-small-weight),
+    ),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/tooltip/_tooltip-theme.scss

@@ -1,63 +1,46 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
+@use './m2-tooltip';
+@use './m3-tooltip';
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+    @include token-utils.create-token-values(map.get(m3-tooltip.get-tokens($theme), base));
+  } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-plain-tooltip.$prefix,
-        tokens-mdc-plain-tooltip.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-tooltip.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+    @include token-utils.create-token-values(map.get(m3-tooltip.get-tokens($theme), color));
+  } @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-plain-tooltip.$prefix,
-        tokens-mdc-plain-tooltip.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-tooltip.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+    @include token-utils.create-token-values(map.get(m3-tooltip.get-tokens($theme), typography));
+  } @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-plain-tooltip.$prefix,
-        tokens-mdc-plain-tooltip.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-tooltip.get-typography-tokens($theme));
     }
   }
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+    @include token-utils.create-token-values(map.get(m3-tooltip.get-tokens($theme), density));
+  } @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-plain-tooltip.$prefix,
-        tokens-mdc-plain-tooltip.get-density-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-tooltip.get-density-tokens($theme));
     }
   }
 }
@@ -66,22 +49,24 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mdc-plain-tooltip.$prefix,
-      tokens: tokens-mdc-plain-tooltip.get-token-slots(),
+      namespace: tooltip,
+      tokens: token-utils.get-overrides(m3-tooltip.get-tokens(), tooltip)
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 @mixin theme($theme) {
-  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-tooltip') {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-tooltip') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
+    } @else {
       @include base($theme);
       @if mat.theme-has($theme, color) {
         @include color($theme);
@@ -95,12 +80,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  @if $tokens != () {
-    $tokens: token-utils.get-tokens-for($tokens, tokens-mdc-plain-tooltip.$prefix);
-    @include token-utils.create-token-values(tokens-mdc-plain-tooltip.$prefix, $tokens);
-  }
-}