@daffodil/design 0.90.0 → 0.92.3-rc.0

package/fesm2022/daffodil-design-spinner.mjs

@@ -0,0 +1,99 @@
+import * as i0 from '@angular/core';
+import { Directive, input, ContentChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@daffodil/design';
+import { DaffColorableDirective, DaffSizableDirective } from '@daffodil/design';
+
+/**
+ * Labels are used to describe the loading state and provide context for users.
+ * They are optional.
+ *
+ * @usage
+ * ```html
+ * <daff-spinner-label>Loading</daff-spinner-label>
+ * ```
+ */
+class DaffSpinnerLabelDirective {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSpinnerLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffSpinnerLabelDirective, isStandalone: true, selector: "daff-spinner-label", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSpinnerLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    /* eslint-disable-next-line @angular-eslint/directive-selector */
+                    selector: 'daff-spinner-label',
+                }]
+        }] });
+
+/**
+ * DaffSpinnerComponent is an animated indicator that lets users know content or action is being loaded.
+ */
+class DaffSpinnerComponent {
+    static { this.SIZE_MAP = {
+        xs: 12,
+        sm: 16,
+        md: 32,
+        lg: 40,
+        xl: 48,
+    }; }
+    /**
+     * @docs-private
+     */
+    get _ariaLabel() {
+        if (!this._label) {
+            return this.ariaLabel();
+        }
+    }
+    /**
+     * @docs-private
+     *
+     * The dimension (width/height) based on the size.
+     */
+    get dimension() {
+        return DaffSpinnerComponent.SIZE_MAP[this.sizable.size];
+    }
+    constructor(sizable) {
+        this.sizable = sizable;
+        /**
+         * The `aria-label` for the spinner. Defaults to "loading".
+         */
+        this.ariaLabel = input('loading', ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
+        this.sizable.defaultSize = 'md';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSpinnerComponent, deps: [{ token: i1.DaffSizableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DaffSpinnerComponent, isStandalone: true, selector: "daff-spinner", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "_ariaLabel" }, classAttribute: "daff-spinner" }, queries: [{ propertyName: "_label", first: true, predicate: DaffSpinnerLabelDirective, descendants: true }], hostDirectives: [{ directive: i1.DaffColorableDirective, inputs: ["color", "color"] }, { directive: i1.DaffSizableDirective, inputs: ["size", "size"] }], ngImport: i0, template: "<svg\n  [attr.height]=\"dimension\"\n  [attr.width]=\"dimension\"\n  viewBox=\"0 0 16 16\"\n  fill=\"none\"\n  aria-hidden=\"true\"\n  class=\"daff-spinner__svg\">\n  <circle class=\"daff-spinner__track\" cx=\"8\" cy=\"8\" r=\"7\" vector-effect=\"non-scaling-stroke\"></circle>\n  <path class=\"daff-spinner__path\" d=\"M15 8a7.002 7.002 0 00-7-7\" vector-effect=\"non-scaling-stroke\"></path>\n</svg>\n@if (_label) {\n  <div class=\"daff-spinner__label\">\n    <ng-content select=\"daff-spinner-label\"></ng-content>\n  </div>\n}", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;gap:.25rem}:host.daff-xs .daff-spinner__track,:host.daff-xs .daff-spinner__path{stroke-width:1.5}:host.daff-xl .daff-spinner__track,:host.daff-xl .daff-spinner__path{stroke-width:2.5}.daff-spinner__svg{display:block}.daff-spinner__track{stroke:currentColor;stroke-opacity:.25;stroke-width:2}.daff-spinner__path{stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:spinner-rotation 1s cubic-bezier(0,0,1,1) infinite;transform-origin:center}@keyframes spinner-rotation{to{transform:rotate(1turn)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-spinner', host: {
+                        class: 'daff-spinner',
+                        role: 'status',
+                        '[attr.aria-label]': '_ariaLabel',
+                    }, hostDirectives: [
+                        {
+                            directive: DaffColorableDirective,
+                            inputs: ['color'],
+                        },
+                        {
+                            directive: DaffSizableDirective,
+                            inputs: ['size'],
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  [attr.height]=\"dimension\"\n  [attr.width]=\"dimension\"\n  viewBox=\"0 0 16 16\"\n  fill=\"none\"\n  aria-hidden=\"true\"\n  class=\"daff-spinner__svg\">\n  <circle class=\"daff-spinner__track\" cx=\"8\" cy=\"8\" r=\"7\" vector-effect=\"non-scaling-stroke\"></circle>\n  <path class=\"daff-spinner__path\" d=\"M15 8a7.002 7.002 0 00-7-7\" vector-effect=\"non-scaling-stroke\"></path>\n</svg>\n@if (_label) {\n  <div class=\"daff-spinner__label\">\n    <ng-content select=\"daff-spinner-label\"></ng-content>\n  </div>\n}", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;gap:.25rem}:host.daff-xs .daff-spinner__track,:host.daff-xs .daff-spinner__path{stroke-width:1.5}:host.daff-xl .daff-spinner__track,:host.daff-xl .daff-spinner__path{stroke-width:2.5}.daff-spinner__svg{display:block}.daff-spinner__track{stroke:currentColor;stroke-opacity:.25;stroke-width:2}.daff-spinner__path{stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:spinner-rotation 1s cubic-bezier(0,0,1,1) infinite;transform-origin:center}@keyframes spinner-rotation{to{transform:rotate(1turn)}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DaffSizableDirective }], propDecorators: { _label: [{
+                type: ContentChild,
+                args: [DaffSpinnerLabelDirective]
+            }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+
+/**
+ * @docs-private
+ */
+const DAFF_SPINNER_COMPONENTS = [
+    DaffSpinnerComponent,
+    DaffSpinnerLabelDirective,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DAFF_SPINNER_COMPONENTS, DaffSpinnerComponent, DaffSpinnerLabelDirective };
+//# sourceMappingURL=daffodil-design-spinner.mjs.map

package/fesm2022/daffodil-design-spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"daffodil-design-spinner.mjs","sources":["../../../libs/design/spinner/src/spinner-label/spinner-label.directive.ts","../../../libs/design/spinner/src/spinner.component.ts","../../../libs/design/spinner/src/spinner.component.html","../../../libs/design/spinner/src/spinner.ts","../../../libs/design/spinner/src/daffodil-design-spinner.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Labels are used to describe the loading state and provide context for users.\n * They are optional.\n *\n * @usage\n * ```html\n * <daff-spinner-label>Loading</daff-spinner-label>\n * ```\n */\n@Directive({\n  /* eslint-disable-next-line @angular-eslint/directive-selector */\n  selector: 'daff-spinner-label',\n})\nexport class DaffSpinnerLabelDirective {}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  ContentChild,\n} from '@angular/core';\n\nimport {\n  DaffColorableDirective,\n  DaffSizableDirective,\n  DaffSizeAllType,\n} from '@daffodil/design';\n\nimport { DaffSpinnerLabelDirective } from './spinner-label/spinner-label.directive';\n\n/**\n * DaffSpinnerComponent is an animated indicator that lets users know content or action is being loaded.\n */\n@Component({\n  selector: 'daff-spinner',\n  templateUrl: './spinner.component.html',\n  styleUrl: './spinner.component.scss',\n  host: {\n    class: 'daff-spinner',\n    role: 'status',\n    '[attr.aria-label]': '_ariaLabel',\n  },\n  hostDirectives: [\n    {\n      directive: DaffColorableDirective,\n      inputs: ['color'],\n    },\n    {\n      directive: DaffSizableDirective,\n      inputs: ['size'],\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffSpinnerComponent {\n  /**\n   * @docs-private\n   */\n  @ContentChild(DaffSpinnerLabelDirective) _label: DaffSpinnerLabelDirective;\n\n  private static readonly SIZE_MAP: Record<DaffSizeAllType, number> = {\n    xs: 12,\n    sm: 16,\n    md: 32,\n    lg: 40,\n    xl: 48,\n  };\n\n  /**\n   * The `aria-label` for the spinner. Defaults to \"loading\".\n   */\n  ariaLabel = input('loading', { alias: 'aria-label' });\n\n  /**\n   * @docs-private\n   */\n  get _ariaLabel() {\n    if (!this._label) {\n      return this.ariaLabel();\n    }\n  }\n\n  /**\n   * @docs-private\n   *\n   * The dimension (width/height) based on the size.\n   */\n  get dimension() {\n    return DaffSpinnerComponent.SIZE_MAP[this.sizable.size];\n  }\n\n  constructor(\n    private sizable: DaffSizableDirective<DaffSizeAllType>,\n  ) {\n    this.sizable.defaultSize = 'md';\n  }\n}\n","<svg\n  [attr.height]=\"dimension\"\n  [attr.width]=\"dimension\"\n  viewBox=\"0 0 16 16\"\n  fill=\"none\"\n  aria-hidden=\"true\"\n  class=\"daff-spinner__svg\">\n  <circle class=\"daff-spinner__track\" cx=\"8\" cy=\"8\" r=\"7\" vector-effect=\"non-scaling-stroke\"></circle>\n  <path class=\"daff-spinner__path\" d=\"M15 8a7.002 7.002 0 00-7-7\" vector-effect=\"non-scaling-stroke\"></path>\n</svg>\n@if (_label) {\n  <div class=\"daff-spinner__label\">\n    <ng-content select=\"daff-spinner-label\"></ng-content>\n  </div>\n}","import { DaffSpinnerLabelDirective } from './spinner-label/spinner-label.directive';\nimport { DaffSpinnerComponent } from './spinner.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_SPINNER_COMPONENTS = <const> [\n  DaffSpinnerComponent,\n  DaffSpinnerLabelDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-switch.mjs

@@ -1,108 +1,65 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, HostBinding, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i1 from '@daffodil/design/loading-icon';
-import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';
+import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@daffodil/design';
+import { DaffSizableDirective, DaffDisableableDirective } from '@daffodil/design';
 
 /**
  * The position of the label relative to the switch.
  */
-var DaffLabelPositionEnum;
-(function (DaffLabelPositionEnum) {
-    DaffLabelPositionEnum["LEFT"] = "daff-left";
-    DaffLabelPositionEnum["RIGHT"] = "daff-right";
-    DaffLabelPositionEnum["TOP"] = "daff-top";
-    DaffLabelPositionEnum["BOTTOM"] = "daff-bottom";
-})(DaffLabelPositionEnum || (DaffLabelPositionEnum = {}));
+var DaffSwitchLabelPositionEnum;
+(function (DaffSwitchLabelPositionEnum) {
+    DaffSwitchLabelPositionEnum["LEFT"] = "left";
+    DaffSwitchLabelPositionEnum["RIGHT"] = "right";
+    DaffSwitchLabelPositionEnum["TOP"] = "top";
+    DaffSwitchLabelPositionEnum["BOTTOM"] = "bottom";
+})(DaffSwitchLabelPositionEnum || (DaffSwitchLabelPositionEnum = {}));
 
-let switchUniqueId = 0;
+/* eslint-disable quote-props */
+let switchIncrementalId = 0;
 /**
  * The switch component provides a way to toggle between two settings.
  *
  * ```html
- * <daff-switch>
- *  Label
- * </daff-switch>
+ * <daff-switch>Label</daff-switch>
  * ```
  */
-class DaffSwitchComponent {
-    constructor() {
+class DaffSwitchComponent extends DaffSizableDirective {
+    constructor(disabledDirective) {
+        super();
+        this.disabledDirective = disabledDirective;
         /**
-         * Whether the switch is loading.
+         * The position of the label relative to the switch.
          */
-        this.loading = false;
+        this.labelPosition = DaffSwitchLabelPositionEnum.LEFT;
         /**
          * Current state of switch (on/off).
          */
         this.checked = false;
-        /**
-         * The position of the label relative to the switch.
-         */
-        this.labelPosition = DaffLabelPositionEnum.LEFT;
-        /**
-         * Whether the switch shows an error.
-         */
-        this.error = false;
-        /**
-         * @docs-private
-         */
-        this._disabled = false;
         /**
          * @docs-private
          */
-        this.externalAriaLabel = null;
-        /**
-         * aria-label for the switch.
-         */
-        this.ariaLabel = '';
+        this.labelId = 'daff-switch-' + switchIncrementalId++ + '-label';
         /**
-         * A unique id for the switch.
+         * The unique id of the switch. Defaults to an autogenerated value. When using this,
+         * it's your responsibility to ensure that the id for each switch is unique.
          *
-         * The `id` is automatically generated by linking the prefix 'daff-switch-' with an incrementing number. This value can be customized by passing a different `id` value via the component's `id` input.
-         *
-         * @example Using the `id` property
-         * ```html
-         * <daff-switch [id]="'custom-id'"></daff-switch>
-         * ```
+         * It gets assigned to the `for` attribute on the `<label>` inside of the switch.
          */
-        this.id = 'daff-switch-' + switchUniqueId++;
+        this.id = 'daff-switch-' + switchIncrementalId++;
         /**
          * Output event triggered when the switch has been toggled.
          */
         this.toggled = new EventEmitter();
     }
     /**
-     * Whether the switch is disabled and/or loading.
+     * Whether the switch is disabled.
      */
     get disabled() {
-        return this._disabled || this.loading;
+        return this.disabledDirective.disabled;
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    /**
-     * @docs-private
-     */
-    get disabledAttribute() {
-        return this.disabled ? true : null;
-    }
-    /**
-     * @docs-private
-     */
-    get ariaDisabled() {
-        return this.disabled ? true : null;
-    }
-    /**
-     * @docs-private
-     */
-    get classes() {
-        return `daff-switch ${this.labelPosition}`;
-    }
-    handleKeydown(event) {
-        if (event.code === 'Space') {
-            event.preventDefault();
-            this.onToggle();
-        }
+        this.disabledDirective.disabled = coerceBooleanProperty(value);
     }
     /**
      * @docs-private
@@ -113,48 +70,34 @@ class DaffSwitchComponent {
             this.toggled.emit(this.checked);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: DaffSwitchComponent, isStandalone: true, selector: "daff-switch", inputs: { disabled: "disabled", loading: "loading", checked: "checked", labelPosition: "labelPosition", error: "error", ariaLabel: ["aria-label", "ariaLabel"], id: "id" }, outputs: { toggled: "toggled" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class.daff-disabled": "this.disabled", "attr.disabled": "this.disabledAttribute", "attr.aria-disabled": "this.ariaDisabled", "class": "this.classes", "class.daff-loading": "this.loading", "attr.aria-label": "this.externalAriaLabel" } }, ngImport: i0, template: "<div class=\"daff-switch__wrapper\">\n  <label class=\"daff-switch__label\" [attr.for]=\"id\">\n    <ng-content></ng-content>\n  </label>\n  <label class=\"daff-switch__toggle\" \n    [class.daff-checked]=\"checked\">\n    @if (loading) {\n      <daff-loading-icon class=\"daff-switch__loading\"></daff-loading-icon>\n    }\n    <input \n      type=\"checkbox\" \n      role=\"switch\" \n      [attr.disabled] = \"disabled ? '' : null\" \n      [checked]=\"checked\"\n      (change)=\"onToggle()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-checked]=\"checked ? true : false\"\n      [attr.id]=\"id\"\n    />    \n  </label>\n</div>\n@if (error) {\n  <ng-content select=\"daff-error-message\"></ng-content>\n}", styles: [":host{display:flex;flex-direction:column}:host.daff-loading .daff-switch__toggle:before{display:none}:host.daff-left .daff-switch__wrapper{flex-direction:row}:host.daff-right .daff-switch__wrapper{flex-direction:row-reverse}:host.daff-left .daff-switch__wrapper,:host.daff-right .daff-switch__wrapper{gap:.5rem}:host.daff-top .daff-switch__wrapper{flex-direction:column}:host.daff-top .daff-switch__toggle{margin-left:-.125rem}:host.daff-bottom .daff-switch__wrapper{flex-direction:column-reverse}:host.daff-top .daff-switch__wrapper,:host.daff-bottom .daff-switch__wrapper{align-items:flex-start;gap:.25rem}:host.daff-top .daff-switch__toggle,:host.daff-bottom .daff-switch__toggle{margin-left:-.25rem}:host.daff-disabled{opacity:.4}:host.daff-disabled .daff-switch__toggle{cursor:default}.daff-switch__wrapper{display:flex;align-items:center}.daff-switch__label{font-size:1rem;color:inherit}.daff-switch__loading{position:relative;left:.125rem;max-width:1.25rem}.daff-switch__toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;background-clip:content-box;border-radius:1rem;height:2rem;width:3.5rem;padding:.125rem;margin:.125rem;position:relative}.daff-switch__toggle>input[type=checkbox]{opacity:0;margin:0;padding:0;border:none}.daff-switch__toggle:before{content:\"\";position:absolute;border-radius:1.5rem;height:1.25rem;width:1.25rem;inset-block-end:4px;inset-inline-start:4px;transition:transform .3s}.daff-switch__toggle.daff-checked:before{transform:translate(1.5rem)}\n"], dependencies: [{ kind: "component", type: i1.DaffLoadingIconComponent, selector: "daff-loading-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSwitchComponent, deps: [{ token: i1.DaffDisableableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DaffSwitchComponent, isStandalone: true, selector: "daff-switch", inputs: { labelPosition: "labelPosition", disabled: "disabled", checked: "checked", id: "id" }, outputs: { toggled: "toggled" }, host: { properties: { "class.checked": "checked", "class.left": "labelPosition === \"left\"", "class.right": "labelPosition === \"right\"", "class.top": "labelPosition === \"top\"", "class.bottom": "labelPosition === \"bottom\"" }, classAttribute: "daff-switch" }, usesInheritance: true, hostDirectives: [{ directive: i1.DaffSizableDirective, inputs: ["size", "size"] }, { directive: i1.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], ngImport: i0, template: "<label class=\"daff-switch__label\" [id]=\"labelId\" [for]=\"id\">\n  <ng-content></ng-content>\n</label>\n\n<button class=\"daff-switch__toggle\"\n  type=\"button\"\n  role=\"switch\"\n  (click)=\"onToggle()\"\n  [attr.disabled]=\"disabled ? '' : null\"\n  [attr.aria-checked]=\"checked ? true : false\"\n  [attr.aria-labelledby]=\"labelId\"\n  [attr.id]=\"id\">\n</button>", styles: [":host{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.left{flex-direction:row}:host.right{flex-direction:row-reverse}:host.top{flex-direction:column}:host.bottom{flex-direction:column-reverse}:host.left,:host.right{justify-content:space-between;width:fit-content}:host.top,:host.bottom{align-items:flex-start}:host.daff-disabled{opacity:.5;cursor:not-allowed}:host.daff-disabled .daff-switch__label{cursor:not-allowed}:host.daff-disabled .daff-switch__toggle{cursor:not-allowed}:host.checked .daff-switch__toggle:before{transform:translate(1.5rem)}:host.daff-sm .daff-switch__toggle{height:1.5rem;width:2.75rem}:host.daff-sm .daff-switch__toggle:before{height:1.125rem;width:1.125rem;inset-inline-start:.15rem}:host.daff-sm.checked .daff-switch__toggle:before{transform:translate(1.25rem)}.daff-switch__label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1rem;line-height:1rem}.daff-switch__toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;display:flex;align-items:center;border:none;border-radius:1rem;height:2rem;width:3.5rem;margin:0;outline:none;padding:0;position:relative}.daff-switch__toggle:before{content:\"\";position:absolute;border-radius:1.5rem;height:1.625rem;width:1.625rem;inset-inline-start:.175rem;transition:transform .3s}.daff-switch__toggle:after{content:\"\";display:flex;border-radius:1rem;width:100%;outline-offset:1px;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-switch', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        DAFF_LOADING_ICON_COMPONENTS,
-                    ], template: "<div class=\"daff-switch__wrapper\">\n  <label class=\"daff-switch__label\" [attr.for]=\"id\">\n    <ng-content></ng-content>\n  </label>\n  <label class=\"daff-switch__toggle\" \n    [class.daff-checked]=\"checked\">\n    @if (loading) {\n      <daff-loading-icon class=\"daff-switch__loading\"></daff-loading-icon>\n    }\n    <input \n      type=\"checkbox\" \n      role=\"switch\" \n      [attr.disabled] = \"disabled ? '' : null\" \n      [checked]=\"checked\"\n      (change)=\"onToggle()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-checked]=\"checked ? true : false\"\n      [attr.id]=\"id\"\n    />    \n  </label>\n</div>\n@if (error) {\n  <ng-content select=\"daff-error-message\"></ng-content>\n}", styles: [":host{display:flex;flex-direction:column}:host.daff-loading .daff-switch__toggle:before{display:none}:host.daff-left .daff-switch__wrapper{flex-direction:row}:host.daff-right .daff-switch__wrapper{flex-direction:row-reverse}:host.daff-left .daff-switch__wrapper,:host.daff-right .daff-switch__wrapper{gap:.5rem}:host.daff-top .daff-switch__wrapper{flex-direction:column}:host.daff-top .daff-switch__toggle{margin-left:-.125rem}:host.daff-bottom .daff-switch__wrapper{flex-direction:column-reverse}:host.daff-top .daff-switch__wrapper,:host.daff-bottom .daff-switch__wrapper{align-items:flex-start;gap:.25rem}:host.daff-top .daff-switch__toggle,:host.daff-bottom .daff-switch__toggle{margin-left:-.25rem}:host.daff-disabled{opacity:.4}:host.daff-disabled .daff-switch__toggle{cursor:default}.daff-switch__wrapper{display:flex;align-items:center}.daff-switch__label{font-size:1rem;color:inherit}.daff-switch__loading{position:relative;left:.125rem;max-width:1.25rem}.daff-switch__toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;background-clip:content-box;border-radius:1rem;height:2rem;width:3.5rem;padding:.125rem;margin:.125rem;position:relative}.daff-switch__toggle>input[type=checkbox]{opacity:0;margin:0;padding:0;border:none}.daff-switch__toggle:before{content:\"\";position:absolute;border-radius:1.5rem;height:1.25rem;width:1.25rem;inset-block-end:4px;inset-inline-start:4px;transition:transform .3s}.daff-switch__toggle.daff-checked:before{transform:translate(1.5rem)}\n"] }]
-        }], propDecorators: { disabled: [{
+            args: [{ selector: 'daff-switch', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: DaffSizableDirective,
+                            inputs: ['size'],
+                        },
+                        {
+                            directive: DaffDisableableDirective,
+                            inputs: ['disabled'],
+                        },
+                    ], host: {
+                        'class': 'daff-switch',
+                        '[class.checked]': 'checked',
+                        '[class.left]': 'labelPosition === "left"',
+                        '[class.right]': 'labelPosition === "right"',
+                        '[class.top]': 'labelPosition === "top"',
+                        '[class.bottom]': 'labelPosition === "bottom"',
+                    }, template: "<label class=\"daff-switch__label\" [id]=\"labelId\" [for]=\"id\">\n  <ng-content></ng-content>\n</label>\n\n<button class=\"daff-switch__toggle\"\n  type=\"button\"\n  role=\"switch\"\n  (click)=\"onToggle()\"\n  [attr.disabled]=\"disabled ? '' : null\"\n  [attr.aria-checked]=\"checked ? true : false\"\n  [attr.aria-labelledby]=\"labelId\"\n  [attr.id]=\"id\">\n</button>", styles: [":host{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.left{flex-direction:row}:host.right{flex-direction:row-reverse}:host.top{flex-direction:column}:host.bottom{flex-direction:column-reverse}:host.left,:host.right{justify-content:space-between;width:fit-content}:host.top,:host.bottom{align-items:flex-start}:host.daff-disabled{opacity:.5;cursor:not-allowed}:host.daff-disabled .daff-switch__label{cursor:not-allowed}:host.daff-disabled .daff-switch__toggle{cursor:not-allowed}:host.checked .daff-switch__toggle:before{transform:translate(1.5rem)}:host.daff-sm .daff-switch__toggle{height:1.5rem;width:2.75rem}:host.daff-sm .daff-switch__toggle:before{height:1.125rem;width:1.125rem;inset-inline-start:.15rem}:host.daff-sm.checked .daff-switch__toggle:before{transform:translate(1.25rem)}.daff-switch__label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1rem;line-height:1rem}.daff-switch__toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;display:flex;align-items:center;border:none;border-radius:1rem;height:2rem;width:3.5rem;margin:0;outline:none;padding:0;position:relative}.daff-switch__toggle:before{content:\"\";position:absolute;border-radius:1.5rem;height:1.625rem;width:1.625rem;inset-inline-start:.175rem;transition:transform .3s}.daff-switch__toggle:after{content:\"\";display:flex;border-radius:1rem;width:100%;outline-offset:1px;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DaffDisableableDirective }], propDecorators: { labelPosition: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-disabled']
-            }], disabledAttribute: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], ariaDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], loading: [{
+            }], disabled: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-loading']
             }], checked: [{
                 type: Input
-            }], labelPosition: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], externalAriaLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
             }], id: [{
                 type: Input
             }], toggled: [{

package/fesm2022/daffodil-design-switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-switch.mjs","sources":["../../../libs/design/switch/src/switch/label-position.ts","../../../libs/design/switch/src/switch/switch.component.ts","../../../libs/design/switch/src/switch/switch.component.html","../../../libs/design/switch/src/switch.ts","../../../libs/design/switch/src/daffodil-design-switch.ts"],"sourcesContent":["export type DaffLabelPosition = 'daff-left' | 'daff-right' | 'daff-top' | 'daff-bottom';\n\n/**\n * The position of the label relative to the switch.\n */\nexport enum DaffLabelPositionEnum {\n  LEFT = 'daff-left',\n  RIGHT = 'daff-right',\n  TOP = 'daff-top',\n  BOTTOM = 'daff-bottom',\n}\n","import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';\n\nimport {\n  DaffLabelPosition,\n  DaffLabelPositionEnum,\n} from './label-position';\n\nlet switchUniqueId = 0;\n\n/**\n * The switch component provides a way to toggle between two settings.\n *\n * ```html\n * <daff-switch>\n *  Label\n * </daff-switch>\n * ```\n */\n@Component({\n  selector: 'daff-switch',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './switch.component.html',\n  styleUrls: ['./switch.component.scss'],\n  imports: [\n    DAFF_LOADING_ICON_COMPONENTS,\n  ],\n})\nexport class DaffSwitchComponent {\n  /**\n   * Whether the switch is disabled and/or loading.\n   */\n  @Input() @HostBinding('class.daff-disabled') get disabled() {\n    return this._disabled || this.loading;\n  }\n  set disabled(value: any) {\n    this._disabled = coerceBooleanProperty(value);\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('attr.disabled') get disabledAttribute() {\n    return this.disabled ? true : null;\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('attr.aria-disabled') get ariaDisabled() {\n    return this.disabled ? true : null;\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class') get classes() {\n    return `daff-switch ${this.labelPosition}`;\n  }\n\n  /**\n   * Whether the switch is loading.\n   */\n  @Input() @HostBinding('class.daff-loading') loading = false;\n\n  /**\n   * Current state of switch (on/off).\n   */\n  @Input() checked = false;\n\n  /**\n   * The position of the label relative to the switch.\n   */\n  @Input() labelPosition: DaffLabelPosition = DaffLabelPositionEnum.LEFT;\n\n  /**\n   * Whether the switch shows an error.\n   */\n  @Input() error = false;\n\n  /**\n   * @docs-private\n   */\n  _disabled = false;\n\n  @HostListener('keydown', ['$event'])\n  handleKeydown(event: KeyboardEvent) {\n    if (event.code === 'Space') {\n      event.preventDefault();\n      this.onToggle();\n    }\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('attr.aria-label') private externalAriaLabel = null;\n\n  /**\n   * aria-label for the switch.\n   */\n  @Input('aria-label') ariaLabel = '';\n\n  /**\n   * A unique id for the switch.\n   *\n   * The `id` is automatically generated by linking the prefix 'daff-switch-' with an incrementing number. This value can be customized by passing a different `id` value via the component's `id` input.\n   *\n   * @example Using the `id` property\n   * ```html\n   * <daff-switch [id]=\"'custom-id'\"></daff-switch>\n   * ```\n   */\n  @Input() id: string = 'daff-switch-' + switchUniqueId++;\n\n  /**\n   * Output event triggered when the switch has been toggled.\n   */\n  @Output() toggled = new EventEmitter<boolean>();\n\n  /**\n   * @docs-private\n   */\n  onToggle() {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.toggled.emit(this.checked);\n    }\n  }\n}\n","<div class=\"daff-switch__wrapper\">\n  <label class=\"daff-switch__label\" [attr.for]=\"id\">\n    <ng-content></ng-content>\n  </label>\n  <label class=\"daff-switch__toggle\" \n    [class.daff-checked]=\"checked\">\n    @if (loading) {\n      <daff-loading-icon class=\"daff-switch__loading\"></daff-loading-icon>\n    }\n    <input \n      type=\"checkbox\" \n      role=\"switch\" \n      [attr.disabled] = \"disabled ? '' : null\" \n      [checked]=\"checked\"\n      (change)=\"onToggle()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-checked]=\"checked ? true : false\"\n      [attr.id]=\"id\"\n    />    \n  </label>\n</div>\n@if (error) {\n  <ng-content select=\"daff-error-message\"></ng-content>\n}","import { DaffSwitchComponent } from './switch/switch.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_SWITCH_COMPONENTS = <const> [\n  DaffSwitchComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"daffodil-design-switch.mjs","sources":["../../../libs/design/switch/src/switch/label-position.ts","../../../libs/design/switch/src/switch/switch.component.ts","../../../libs/design/switch/src/switch/switch.component.html","../../../libs/design/switch/src/switch.ts","../../../libs/design/switch/src/daffodil-design-switch.ts"],"sourcesContent":["export type DaffSwitchLabelPosition = 'left' | 'right' | 'top' | 'bottom';\n\n/**\n * The position of the label relative to the switch.\n */\nexport enum DaffSwitchLabelPositionEnum {\n  LEFT = 'left',\n  RIGHT = 'right',\n  TOP = 'top',\n  BOTTOM = 'bottom',\n}\n","/* eslint-disable quote-props */\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport {\n  DaffDisableable,\n  DaffDisableableDirective,\n  DaffSizableDirective,\n  DaffSizeSmallType,\n} from '@daffodil/design';\n\nimport {\n  DaffSwitchLabelPosition,\n  DaffSwitchLabelPositionEnum,\n} from './label-position';\n\nlet switchIncrementalId = 0;\n\nexport type DaffSwitchSize = DaffSizeSmallType;\n\n/**\n * The switch component provides a way to toggle between two settings.\n *\n * ```html\n * <daff-switch>Label</daff-switch>\n * ```\n */\n@Component({\n  selector: 'daff-switch',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './switch.component.html',\n  styleUrls: ['./switch.component.scss'],\n  hostDirectives: [\n    {\n      directive: DaffSizableDirective,\n      inputs: ['size'],\n    },\n    {\n      directive: DaffDisableableDirective,\n      inputs: ['disabled'],\n    },\n  ],\n  host: {\n    'class': 'daff-switch',\n    '[class.checked]': 'checked',\n    '[class.left]': 'labelPosition === \"left\"',\n    '[class.right]': 'labelPosition === \"right\"',\n    '[class.top]': 'labelPosition === \"top\"',\n    '[class.bottom]': 'labelPosition === \"bottom\"',\n  },\n})\nexport class DaffSwitchComponent extends DaffSizableDirective<DaffSwitchSize> implements DaffDisableable {\n  /**\n   * The position of the label relative to the switch.\n   */\n  @Input() labelPosition: DaffSwitchLabelPosition = DaffSwitchLabelPositionEnum.LEFT;\n\n  constructor(private disabledDirective: DaffDisableableDirective) {\n    super();\n  }\n\n  /**\n   * Whether the switch is disabled.\n   */\n  @Input() get disabled() {\n    return this.disabledDirective.disabled;\n  }\n  set disabled(value: any) {\n    this.disabledDirective.disabled = coerceBooleanProperty(value);\n  }\n\n  /**\n   * Current state of switch (on/off).\n   */\n  @Input() checked = false;\n\n  /**\n   * @docs-private\n   */\n  labelId: string = 'daff-switch-' + switchIncrementalId++ + '-label';\n\n  /**\n   * The unique id of the switch. Defaults to an autogenerated value. When using this,\n   * it's your responsibility to ensure that the id for each switch is unique.\n   *\n   * It gets assigned to the `for` attribute on the `<label>` inside of the switch.\n   */\n  @Input() id = 'daff-switch-' + switchIncrementalId++;\n\n  /**\n   * Output event triggered when the switch has been toggled.\n   */\n  @Output() toggled = new EventEmitter<boolean>();\n\n  /**\n   * @docs-private\n   */\n  onToggle() {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.toggled.emit(this.checked);\n    }\n  }\n}\n","<label class=\"daff-switch__label\" [id]=\"labelId\" [for]=\"id\">\n  <ng-content></ng-content>\n</label>\n\n<button class=\"daff-switch__toggle\"\n  type=\"button\"\n  role=\"switch\"\n  (click)=\"onToggle()\"\n  [attr.disabled]=\"disabled ? '' : null\"\n  [attr.aria-checked]=\"checked ? true : false\"\n  [attr.aria-labelledby]=\"labelId\"\n  [attr.id]=\"id\">\n</button>","import { DaffSwitchComponent } from './switch/switch.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_SWITCH_COMPONENTS = <const> [\n  DaffSwitchComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-tabs.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { TemplateRef, Input, ViewChild, ChangeDetectionStrategy, Component, ContentChild, ViewEncapsulation, EventEmitter, ViewChildren, ContentChildren, Output, HostBinding } from '@angular/core';
-import * as i1$1 from '@angular/common';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@daffodil/design';
-import { DaffPrefixDirective, DaffSuffixDirective, DaffSelectableDirective } from '@daffodil/design';
+import { DaffDisableableDirective, DaffPrefixDirective, DaffSuffixDirective, DaffSelectableDirective } from '@daffodil/design';
+import * as i1$1 from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 let tabId = 1;
@@ -26,11 +26,16 @@ let tabId = 1;
  * ```
  */
 class DaffTabComponent {
-    constructor() {
-        /**
-         * Whether the tab is disabled.
-         */
-        this.disabled = false;
+    /**
+     * @docs-private
+     *
+     * Whether the tab is disabled.
+     */
+    get disabled() {
+        return this.disabledDirective.disabled;
+    }
+    constructor(disabledDirective) {
+        this.disabledDirective = disabledDirective;
         /**
          * A unique id for the tab component. Defaults to an autogenerated value. When using this,
          * it's your responsibility to ensure that the id for each tab is unique.
@@ -42,8 +47,8 @@ class DaffTabComponent {
         this.panelId = 'daff-tab-panel-' + tabId;
         tabId++;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffTabComponent, isStandalone: true, selector: "daff-tab", inputs: { disabled: "disabled", id: "id" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: TemplateRef, static: true }, { propertyName: "labelRef", first: true, predicate: ["label"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabComponent, deps: [{ token: i1.DaffDisableableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DaffTabComponent, isStandalone: true, selector: "daff-tab", inputs: { id: "id" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: TemplateRef, static: true }, { propertyName: "labelRef", first: true, predicate: ["label"], descendants: true, read: TemplateRef, static: true }], hostDirectives: [{ directive: i1.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], ngImport: i0, template: `
       <ng-template #label>
         <ng-content select="daff-tab-label"></ng-content>
       </ng-template>
@@ -52,7 +57,7 @@ class DaffTabComponent {
       </ng-template>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'daff-tab',
@@ -65,10 +70,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
       </ng-template>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [
+                        {
+                            directive: DaffDisableableDirective,
+                            inputs: ['disabled'],
+                        },
+                    ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{
-                type: Input
-            }], contentRef: [{
+        }], ctorParameters: () => [{ type: i1.DaffDisableableDirective }], propDecorators: { contentRef: [{
                 type: ViewChild,
                 args: ['content', { read: TemplateRef, static: true }]
             }], labelRef: [{
@@ -91,13 +100,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * ```
  */
 class DaffTabLabelComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: DaffTabLabelComponent, isStandalone: true, selector: "daff-tab-label", queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }], ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-tab-label__content\">\n  <ng-content></ng-content>\n</div>\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [":host{display:flex;justify-content:center;align-items:center;gap:.5rem}.daff-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:15rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DaffTabLabelComponent, isStandalone: true, selector: "daff-tab-label", queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }], ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-tab-label__content\">\n  <ng-content></ng-content>\n</div>\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [":host{display:flex;justify-content:center;align-items:center;gap:.5rem}.daff-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:15rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-tab-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
                         DaffPrefixDirective,
                         DaffSuffixDirective,
                     ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-tab-label__content\">\n  <ng-content></ng-content>\n</div>\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [":host{display:flex;justify-content:center;align-items:center;gap:.5rem}.daff-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:15rem}\n"] }]
@@ -145,10 +153,10 @@ class DaffTabPanelComponent {
         this._ariaLabelledBy = this.tab.id;
         this._id = this.tab.panelId;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabPanelComponent, deps: [{ token: DaffTabComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffTabPanelComponent, isStandalone: true, selector: "daff-tab-panel", host: { attributes: { "role": "tabpanel", "tabindex": "0" }, properties: { "attr.id": "tabPanelId", "attr.aria-labelledby": "ariaLabelledBy" }, classAttribute: "daff-tab-panel" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host(.daff-tab-panel){display:block;padding:1rem 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabPanelComponent, deps: [{ token: DaffTabComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DaffTabPanelComponent, isStandalone: true, selector: "daff-tab-panel", host: { attributes: { "role": "tabpanel", "tabindex": "0" }, properties: { "attr.id": "tabPanelId", "attr.aria-labelledby": "ariaLabelledBy" }, classAttribute: "daff-tab-panel" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host(.daff-tab-panel){display:block;padding:1rem 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-tab-panel', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'daff-tab-panel',
@@ -192,10 +200,10 @@ class DaffTabActivatorComponent {
     focus() {
         this.el.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabActivatorComponent, deps: [{ token: i0.ElementRef }, { token: i1.DaffSelectableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffTabActivatorComponent, isStandalone: true, selector: "button[daff-tab-activator],a[daff-tab-activator]", inputs: { tabActivatorId: "tabActivatorId", panelId: "panelId" }, host: { attributes: { "role": "tab" }, properties: { "attr.aria-selected": "ariaSelected", "attr.tabindex": "tabIndex", "attr.id": "tabActivatorId", "attr.aria-controls": "panelId" }, classAttribute: "daff-tab-activator" }, hostDirectives: [{ directive: i1.DaffSelectableDirective, inputs: ["selected", "selected"] }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".daff-tab-activator{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;appearance:none;background:none;border:none;font-size:1rem;line-height:1.5rem;font-weight:500;height:3rem;margin:0;min-width:8rem;padding:.5rem 1.5rem;text-decoration:none;z-index:2}.daff-tab-activator[disabled]{cursor:not-allowed;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabActivatorComponent, deps: [{ token: i0.ElementRef }, { token: i1.DaffSelectableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DaffTabActivatorComponent, isStandalone: true, selector: "button[daff-tab-activator],a[daff-tab-activator]", inputs: { tabActivatorId: "tabActivatorId", panelId: "panelId" }, host: { attributes: { "role": "tab" }, properties: { "attr.aria-selected": "ariaSelected", "attr.tabindex": "tabIndex", "attr.id": "tabActivatorId", "attr.aria-controls": "panelId" }, classAttribute: "daff-tab-activator" }, hostDirectives: [{ directive: i1.DaffSelectableDirective, inputs: ["selected", "selected"] }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".daff-tab-activator{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;appearance:none;background:none;border:none;font-size:1rem;line-height:1.5rem;font-weight:500;height:3rem;margin:0;min-width:8rem;padding:.5rem 1.5rem;text-decoration:none;z-index:2}.daff-tab-activator[disabled]{cursor:not-allowed;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabActivatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabActivatorComponent, decorators: [{
             type: Component,
             args: [{ selector: '' +
                         'button[daff-tab-activator]' + ',' +
@@ -384,10 +392,10 @@ class DaffTabsComponent {
         const array = this._tabs.toArray();
         this.select(array[array.length - 1].id);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: DaffTabsComponent, isStandalone: true, selector: "daff-tabs", inputs: { initiallySelected: "initiallySelected", ariaLabel: ["aria-label", "ariaLabel"], linkMode: "linkMode", url: "url", queryParam: "queryParam" }, outputs: { tabChange: "tabChange" }, host: { properties: { "attr.aria-label": "this.externalAriaLabel" }, classAttribute: "daff-tabs" }, queries: [{ propertyName: "_labels", predicate: DaffTabLabelComponent, descendants: true }, { propertyName: "_tabs", predicate: DaffTabComponent }], viewQueries: [{ propertyName: "_tabActivators", predicate: DaffTabActivatorComponent, descendants: true }], ngImport: i0, template: "<div class=\"daff-tabs__tab-list\"\n\trole=\"tablist\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(keydown.home)=\"selectFirst($event)\"\n\t(keydown.end)=\"selectLast($event)\">\n\t@for (tab of _tabs; track tab) {\n\t\t@if (linkMode && tab.disabled) {\n\t\t\t<button daff-tab-activator routerLinkActive\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t} @else if (linkMode) {\n\t\t\t<a daff-tab-activator routerLinkActive\n\t\t\t\tclass=\"daff-ae daff_tabs__link\"\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[routerLink]=\"url || currentPath\"\n\t\t\t\tqueryParamsHandling=\"merge\"\n\t\t\t\t[queryParams]=\"_buildQueryParams(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\"\n\t\t\t\t(isActiveChange)=\"$event && select(tab.id)\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</a>\n\t\t} @else {\n\t\t\t<button daff-tab-activator\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t(click)=\"select(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n\n@for (tab of _tabs; track tab) {\n\t@if(tab.id === selectedTab ) {\n\t\t<ng-container *ngTemplateOutlet=\"tab.contentRef\"></ng-container>\n\t}\n}", styles: [":host(.daff-tabs){max-width:100%}.daff-tabs{display:block}.daff-tabs .daff-tabs__tab-list{display:flex;overflow-x:auto;scrollbar-width:thin;position:relative}.daff-tabs .daff-tabs__tab-list:after{content:\"\";position:absolute;height:.125rem;width:100%;bottom:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DaffTabActivatorComponent, selector: "button[daff-tab-activator],a[daff-tab-activator]", inputs: ["tabActivatorId", "panelId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DaffTabsComponent, isStandalone: true, selector: "daff-tabs", inputs: { initiallySelected: "initiallySelected", ariaLabel: ["aria-label", "ariaLabel"], linkMode: "linkMode", url: "url", queryParam: "queryParam" }, outputs: { tabChange: "tabChange" }, host: { properties: { "attr.aria-label": "this.externalAriaLabel" }, classAttribute: "daff-tabs" }, queries: [{ propertyName: "_labels", predicate: DaffTabLabelComponent, descendants: true }, { propertyName: "_tabs", predicate: DaffTabComponent }], viewQueries: [{ propertyName: "_tabActivators", predicate: DaffTabActivatorComponent, descendants: true }], ngImport: i0, template: "<div class=\"daff-tabs__tab-list\"\n\trole=\"tablist\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(keydown.home)=\"selectFirst($event)\"\n\t(keydown.end)=\"selectLast($event)\">\n\t@for (tab of _tabs; track tab) {\n\t\t@if (linkMode && tab.disabled) {\n\t\t\t<button daff-tab-activator routerLinkActive\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t} @else if (linkMode) {\n\t\t\t<a daff-tab-activator routerLinkActive\n\t\t\t\tclass=\"daff-ae daff_tabs__link\"\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t[routerLink]=\"url || currentPath\"\n\t\t\t\tqueryParamsHandling=\"merge\"\n\t\t\t\t[queryParams]=\"_buildQueryParams(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\"\n\t\t\t\t(isActiveChange)=\"$event && select(tab.id)\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</a>\n\t\t} @else {\n\t\t\t<button daff-tab-activator\n\t\t\t\t[selected]=\"tab.id === selectedTab\"\n\t\t\t\t(click)=\"select(tab.id)\"\n\t\t\t\t[panelId]=\"tab.panelId\"\n\t\t\t\t[disabled]=\"tab.disabled\"\n\t\t\t\t[tabActivatorId]=\"tab.id\"\n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"tab.labelRef\"></ng-container>\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n\n@for (tab of _tabs; track tab) {\n\t@if(tab.id === selectedTab ) {\n\t\t<ng-container *ngTemplateOutlet=\"tab.contentRef\"></ng-container>\n\t}\n}", styles: [":host(.daff-tabs){max-width:100%}.daff-tabs{display:block}.daff-tabs .daff-tabs__tab-list{display:flex;overflow-x:auto;scrollbar-width:thin;position:relative}.daff-tabs .daff-tabs__tab-list:after{content:\"\";position:absolute;height:.125rem;width:100%;bottom:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DaffTabActivatorComponent, selector: "button[daff-tab-activator],a[daff-tab-activator]", inputs: ["tabActivatorId", "panelId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-tabs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'daff-tabs',