@daffodil/design 0.93.0 → 0.94.0

package/fesm2022/daffodil-design-switch.mjs

@@ -1,6 +1,6 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@daffodil/design';
 import { DaffSizableDirective, DaffDisableableDirective } from '@daffodil/design';
 
@@ -15,7 +15,6 @@ var DaffSwitchLabelPositionEnum;
     DaffSwitchLabelPositionEnum["BOTTOM"] = "bottom";
 })(DaffSwitchLabelPositionEnum || (DaffSwitchLabelPositionEnum = {}));
 
-/* eslint-disable quote-props */
 let switchIncrementalId = 0;
 /**
  * The switch component provides a way to toggle between two settings.
@@ -31,11 +30,11 @@ class DaffSwitchComponent extends DaffSizableDirective {
         /**
          * The position of the label relative to the switch.
          */
-        this.labelPosition = DaffSwitchLabelPositionEnum.LEFT;
+        this.labelPosition = input(DaffSwitchLabelPositionEnum.LEFT, ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
         /**
          * Current state of switch (on/off).
          */
-        this.checked = false;
+        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
         /**
          * @docs-private
          */
@@ -46,36 +45,36 @@ class DaffSwitchComponent extends DaffSizableDirective {
          *
          * It gets assigned to the `for` attribute on the `<label>` inside of the switch.
          */
-        this.id = 'daff-switch-' + switchIncrementalId++;
+        this.id = input('daff-switch-' + switchIncrementalId++, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * Output event triggered when the switch has been toggled.
          */
-        this.toggled = new EventEmitter();
+        this.toggled = output();
     }
     /**
      * Whether the switch is disabled.
      */
     get disabled() {
-        return this.disabledDirective.disabled;
+        return this.disabledDirective.disabled();
     }
     set disabled(value) {
-        this.disabledDirective.disabled = coerceBooleanProperty(value);
+        this.disabledDirective.disabled.set(coerceBooleanProperty(value));
     }
     /**
      * @docs-private
      */
     onToggle() {
         if (!this.disabled) {
-            this.checked = !this.checked;
-            this.toggled.emit(this.checked);
+            this.checked.set(!this.checked());
+            this.toggled.emit(this.checked());
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffSwitchComponent, deps: [{ token: i1.DaffDisableableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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 }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: DaffSwitchComponent, isStandalone: true, selector: "daff-switch", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", 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: "21.2.9", ngImport: i0, type: DaffSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-switch', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+            args: [{ selector: 'daff-switch', hostDirectives: [
                         {
                             directive: DaffSizableDirective,
                             inputs: ['size'],
@@ -85,24 +84,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             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: [{
+                        class: 'daff-switch',
+                        '[class.checked]': 'checked()',
+                        '[class.left]': 'labelPosition() === "left"',
+                        '[class.right]': 'labelPosition() === "right"',
+                        '[class.top]': 'labelPosition() === "top"',
+                        '[class.bottom]': 'labelPosition() === "bottom"',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], disabled: [{
                 type: Input
-            }], disabled: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], toggled: [{
-                type: Output
-            }] } });
+            }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
 
 /**
  * @docs-private

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 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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"}
+{"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","import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  input,\n  model,\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  templateUrl: './switch.component.html',\n  styleUrl: './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  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffSwitchComponent extends DaffSizableDirective<DaffSwitchSize> implements DaffDisableable {\n  /**\n   * The position of the label relative to the switch.\n   */\n  labelPosition = input<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.set(coerceBooleanProperty(value));\n  }\n\n  /**\n   * Current state of switch (on/off).\n   */\n  checked = model(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  id = input('daff-switch-' + switchIncrementalId++);\n\n  /**\n   * Output event triggered when the switch has been toggled.\n   */\n  toggled = output<boolean>();\n\n  /**\n   * @docs-private\n   */\n  onToggle() {\n    if (!this.disabled) {\n      this.checked.set(!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,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Input, ViewChild, ChangeDetectionStrategy, Component, ContentChild, ViewEncapsulation, EventEmitter, ViewChildren, ContentChildren, Output } from '@angular/core';
+import { viewChild, TemplateRef, input, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, output, contentChildren, viewChildren } from '@angular/core';
 import * as i1 from '@daffodil/design';
 import { DaffDisableableDirective, DaffPrefixDirective, DaffSuffixDirective, DaffSelectableDirective } from '@daffodil/design';
 import * as i1$1 from '@angular/common';
@@ -32,15 +32,23 @@ class DaffTabComponent {
      * Whether the tab is disabled.
      */
     get disabled() {
-        return this.disabledDirective.disabled;
+        return this.disabledDirective.disabled();
     }
     constructor(disabledDirective) {
         this.disabledDirective = disabledDirective;
+        /**
+         * @docs-private
+         */
+        this.contentRef = viewChild('content', { ...(ngDevMode ? { debugName: "contentRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @docs-private
+         */
+        this.labelRef = viewChild('label', { ...(ngDevMode ? { debugName: "labelRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /**
          * 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.
          */
-        this.id = 'daff-tab-' + tabId;
+        this.id = input('daff-tab-' + tabId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * @docs-private
          */
@@ -48,7 +56,7 @@ class DaffTabComponent {
         tabId++;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffTabComponent, deps: [{ token: i1.DaffDisableableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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: `
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: DaffTabComponent, isStandalone: true, selector: "daff-tab", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelRef", first: true, predicate: ["label"], descendants: true, read: TemplateRef, isSignal: true }], hostDirectives: [{ directive: i1.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], ngImport: i0, template: `
       <ng-template #label>
         <ng-content select="daff-tab-label"></ng-content>
       </ng-template>
@@ -77,15 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1.DaffDisableableDirective }], propDecorators: { contentRef: [{
-                type: ViewChild,
-                args: ['content', { read: TemplateRef, static: true }]
-            }], labelRef: [{
-                type: ViewChild,
-                args: ['label', { read: TemplateRef, static: true }]
-            }], id: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [{ type: i1.DaffDisableableDirective }], propDecorators: { contentRef: [{ type: i0.ViewChild, args: ['content', { ...{ read: TemplateRef }, isSignal: true }] }], labelRef: [{ type: i0.ViewChild, args: ['label', { ...{ read: TemplateRef }, isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * Tab label is the clicakble label that activates its corresponding tab panel. Labels can contain text, icons, or both.
@@ -100,24 +100,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * ```
  */
 class DaffTabLabelComponent {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this._prefix = contentChild(DaffPrefixDirective, ...(ngDevMode ? [{ debugName: "_prefix" }] : /* istanbul ignore next */ []));
+        /**
+         * @docs-private
+         */
+        this._suffix = contentChild(DaffSuffixDirective, ...(ngDevMode ? [{ debugName: "_suffix" }] : /* istanbul ignore next */ []));
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffTabLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffTabLabelComponent, isStandalone: true, selector: "daff-tab-label", queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true, isSignal: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true, isSignal: 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: "21.2.9", ngImport: i0, type: DaffTabLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-tab-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         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"] }]
-        }], propDecorators: { _prefix: [{
-                type: ContentChild,
-                args: [DaffPrefixDirective]
-            }], _suffix: [{
-                type: ContentChild,
-                args: [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"] }]
+        }], propDecorators: { _prefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DaffPrefixDirective), { isSignal: true }] }], _suffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DaffSuffixDirective), { isSignal: true }] }] } });
 
-/* eslint-disable quote-props */
 /**
  * Tab panel is the content area displayed when a tab is active.
  *
@@ -150,7 +153,7 @@ class DaffTabPanelComponent {
         /**
          * Sets the value of `ariaLabelledBy` to the id of the tab component.
          */
-        this._ariaLabelledBy = this.tab.id;
+        this._ariaLabelledBy = this.tab.id();
         this._id = this.tab.panelId;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffTabPanelComponent, deps: [{ token: DaffTabComponent }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -159,15 +162,14 @@ class DaffTabPanelComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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',
-                        'role': 'tabpanel',
-                        'tabindex': '0',
+                        class: 'daff-tab-panel',
+                        role: 'tabpanel',
+                        tabindex: '0',
                         '[attr.id]': 'tabPanelId',
                         '[attr.aria-labelledby]': 'ariaLabelledBy',
                     }, styles: [":host(.daff-tab-panel){display:block;padding:1rem 0}\n"] }]
         }], ctorParameters: () => [{ type: DaffTabComponent }] });
 
-/* eslint-disable quote-props */
 class DaffTabActivatorComponent {
     /**
      * @docs-private
@@ -191,8 +193,8 @@ class DaffTabActivatorComponent {
         /**
          * The html id of the tab activator component
          */
-        this.tabActivatorId = '';
-        this.panelId = '';
+        this.tabActivatorId = input('', ...(ngDevMode ? [{ debugName: "tabActivatorId" }] : /* istanbul ignore next */ []));
+        this.panelId = input('', ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
     }
     /**
      * Sets focus to the native element of the component.
@@ -201,7 +203,7 @@ class DaffTabActivatorComponent {
         this.el.nativeElement.focus();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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: "21.2.9", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: DaffTabActivatorComponent, isStandalone: true, selector: "button[daff-tab-activator],a[daff-tab-activator]", inputs: { tabActivatorId: { classPropertyName: "tabActivatorId", publicName: "tabActivatorId", isSignal: true, isRequired: false, transformFunction: null }, panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null } }, 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: "21.2.9", ngImport: i0, type: DaffTabActivatorComponent, decorators: [{
             type: Component,
@@ -213,20 +215,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             inputs: ['selected'],
                         },
                     ], host: {
-                        'class': 'daff-tab-activator',
-                        'role': 'tab',
+                        class: 'daff-tab-activator',
+                        role: 'tab',
                         '[attr.aria-selected]': 'ariaSelected',
                         '[attr.tabindex]': 'tabIndex',
-                        '[attr.id]': 'tabActivatorId',
-                        '[attr.aria-controls]': 'panelId',
+                        '[attr.id]': 'tabActivatorId()',
+                        '[attr.aria-controls]': 'panelId()',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DaffSelectableDirective }], propDecorators: { tabActivatorId: [{
-                type: Input
-            }], panelId: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DaffSelectableDirective }], propDecorators: { tabActivatorId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabActivatorId", required: false }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }] } });
 
-/* eslint-disable quote-props */
 /**
  * Tabs provide a way to navigate between panels that display related content without leaving the page.
  *
@@ -264,33 +261,56 @@ class DaffTabsComponent {
     constructor(cdRef, location) {
         this.cdRef = cdRef;
         this.location = location;
+        /**
+         * @docs-private
+         *
+         * The currently selected tab. This property is dynamically updated when a user selects a tab.
+         */
+        this.selectedTab = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
         /**
          * The tab that is selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
          */
-        this.initiallySelected = null;
+        this.initiallySelected = input(null, ...(ngDevMode ? [{ debugName: "initiallySelected" }] : /* istanbul ignore next */ []));
         /**
          * `aria-label` to label the tablist.
          */
-        this.ariaLabel = '';
+        this.ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
         /**
          * Replace the tab buttons as links.
          */
-        this.linkMode = false;
+        this.linkMode = input(false, ...(ngDevMode ? [{ debugName: "linkMode" }] : /* istanbul ignore next */ []));
+        /**
+         * The URL to navigate to when the component is in link mode.
+         * This component will set the specified query param.
+         */
+        this.url = input(...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
         /**
          * The query parameter that the tabs component will use to set the tab value in link mode.
          */
-        this.queryParam = 'tab';
+        this.queryParam = input('tab', ...(ngDevMode ? [{ debugName: "queryParam" }] : /* istanbul ignore next */ []));
         /**
          * Event emitted when tab selection changes.
          */
-        this.tabChange = new EventEmitter();
+        this.tabChange = output();
+        /**
+         * @docs-private
+         */
+        this._labels = contentChildren(DaffTabLabelComponent, { ...(ngDevMode ? { debugName: "_labels" } : /* istanbul ignore next */ {}), descendants: true });
+        /**
+         * @docs-private
+         */
+        this._tabs = contentChildren(DaffTabComponent, ...(ngDevMode ? [{ debugName: "_tabs" }] : /* istanbul ignore next */ []));
+        /**
+         * @docs-private
+         */
+        this._tabActivators = viewChildren(DaffTabActivatorComponent, ...(ngDevMode ? [{ debugName: "_tabActivators" }] : /* istanbul ignore next */ []));
     }
     reset() {
-        if (this.initiallySelected) {
-            this.selectedTab = this.initiallySelected;
+        if (this.initiallySelected()) {
+            this.selectedTab.set(this.initiallySelected());
         }
-        if (!this.selectedTab) {
-            this.selectedTab = this._tabs.first.id;
+        if (!this.selectedTab()) {
+            this.selectedTab.set(this._tabs()[0].id());
         }
     }
     /**
@@ -299,10 +319,10 @@ class DaffTabsComponent {
     ngOnInit() {
         this.location.onUrlChange(() => {
             // if the app is navigated away from the current page, reset the state
-            if (this.linkMode && !this.location.isCurrentPathEqualTo(this.url, `${this.queryParam}=${this.selectedTab}`)) {
-                this.selectedTab = null;
+            if (this.linkMode() && !this.location.isCurrentPathEqualTo(this.url(), `${this.queryParam()}=${this.selectedTab()}`)) {
+                this.selectedTab.set(null);
                 this.reset();
-                this.tabChange.emit(this.selectedTab);
+                this.tabChange.emit(this.selectedTab());
             }
         });
     }
@@ -318,13 +338,13 @@ class DaffTabsComponent {
      * Selects a tab and sets focus on the selected tab.
      */
     select(tabId) {
-        const tabActivator = this._tabActivators.find(el => el.tabActivatorId === tabId);
+        const tabActivator = this._tabActivators().find(el => el.tabActivatorId() === tabId);
         if (!tabActivator) {
             console.warn(`The tab '${tabId}' was not able to be selected because it does not exist. Check the id on your <daff-tab>s.`);
             return;
         }
         this.tabChange.emit(tabId);
-        this.selectedTab = tabId;
+        this.selectedTab.set(tabId);
         this.cdRef.markForCheck();
         tabActivator.focus();
     }
@@ -333,22 +353,22 @@ class DaffTabsComponent {
      * Moves forward or backward in the tab array, wrapping around when necessary.
      */
     navigateTabs(offset) {
-        const array = this._tabs.toArray();
-        let selectedIndex = array.findIndex(el => el.id === this.selectedTab);
+        const array = this._tabs();
+        let selectedIndex = array.findIndex(el => el.id() === this.selectedTab());
         const startingIndex = selectedIndex;
         let newIndex;
         do {
             newIndex = (selectedIndex + offset + array.length) % array.length;
             selectedIndex = newIndex;
         } while (array[newIndex].disabled && selectedIndex !== startingIndex); // Skip disabled tabs
-        this.select(array[newIndex].id);
+        this.select(array[newIndex].id());
     }
     /**
      * @docs-private
      */
     _buildQueryParams(tab) {
         return {
-            [this.queryParam]: tab,
+            [this.queryParam()]: tab,
         };
     }
     /**
@@ -374,7 +394,7 @@ class DaffTabsComponent {
      */
     selectFirst(event) {
         event.preventDefault();
-        this.select(this._tabs.toArray()[0].id);
+        this.select(this._tabs()[0].id());
     }
     /**
      * @docs-private
@@ -383,46 +403,24 @@ class DaffTabsComponent {
      */
     selectLast(event) {
         event.preventDefault();
-        const array = this._tabs.toArray();
-        this.select(array[array.length - 1].id);
+        const array = this._tabs();
+        this.select(array[array.length - 1].id());
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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: "21.2.9", 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": "null" }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffTabsComponent, isStandalone: true, selector: "daff-tabs", inputs: { initiallySelected: { classPropertyName: "initiallySelected", publicName: "initiallySelected", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linkMode: { classPropertyName: "linkMode", publicName: "linkMode", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, queryParam: { classPropertyName: "queryParam", publicName: "queryParam", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, host: { properties: { "attr.aria-label": "null" }, classAttribute: "daff-tabs" }, queries: [{ propertyName: "_labels", predicate: DaffTabLabelComponent, descendants: true, isSignal: true }, { propertyName: "_tabs", predicate: DaffTabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabActivators", predicate: DaffTabActivatorComponent, descendants: true, isSignal: 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}\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: "21.2.9", ngImport: i0, type: DaffTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-tabs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'class': 'daff-tabs',
+                        class: 'daff-tabs',
                         '[attr.aria-label]': 'null',
                     }, imports: [
                         NgTemplateOutlet,
                         RouterLink,
                         RouterLinkActive,
                         DaffTabActivatorComponent,
-                    ], 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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Location }], propDecorators: { initiallySelected: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], linkMode: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], queryParam: [{
-                type: Input
-            }], tabChange: [{
-                type: Output
-            }], _labels: [{
-                type: ContentChildren,
-                args: [DaffTabLabelComponent, { descendants: true }]
-            }], _tabs: [{
-                type: ContentChildren,
-                args: [DaffTabComponent]
-            }], _tabActivators: [{
-                type: ViewChildren,
-                args: [DaffTabActivatorComponent]
-            }] } });
+                    ], 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}\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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Location }], propDecorators: { initiallySelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "initiallySelected", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], linkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkMode", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], queryParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParam", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], _labels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DaffTabLabelComponent), { ...{ descendants: true }, isSignal: true }] }], _tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DaffTabComponent), { isSignal: true }] }], _tabActivators: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DaffTabActivatorComponent), { isSignal: true }] }] } });
 
 /**
  * @docs-private