@daffodil/design 0.85.0 → 0.87.0

package/fesm2022/daffodil-design-form-field-examples.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"daffodil-design-form-field-examples.mjs","sources":["../../../libs/design/form-field/examples/src/form-field-appearances/form-field-appearances.component.ts","../../../libs/design/form-field/examples/src/form-field-appearances/form-field-appearances.component.html","../../../libs/design/form-field/examples/src/form-field-with-action/form-field-with-action.component.ts","../../../libs/design/form-field/examples/src/form-field-with-action/form-field-with-action.component.html","../../../libs/design/form-field/examples/src/form-field-with-prefix/form-field-with-prefix.component.ts","../../../libs/design/form-field/examples/src/form-field-with-prefix/form-field-with-prefix.component.html","../../../libs/design/form-field/examples/src/form-field-with-suffix/form-field-with-suffix.component.ts","../../../libs/design/form-field/examples/src/form-field-with-suffix/form-field-with-suffix.component.html","../../../libs/design/form-field/examples/src/examples.ts","../../../libs/design/form-field/examples/src/daffodil-design-form-field-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  faUser,\n  faEye,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'form-field-appearances',\n  templateUrl: './form-field-appearances.component.html',\n  styleUrl: './form-field-appearances.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n  ],\n})\nexport class FormFieldAppearancesComponent {\n  faUser = faUser;\n  faEye = faEye;\n}\n","<daff-form-field appearance=\"fluid\">\n  <daff-form-label>First Name</daff-form-label>\n  <input daff-input type=\"text\" name=\"first-name\" />\n</daff-form-field>\n\n<daff-form-field appearance=\"fixed\">\n  <daff-form-label>First Name</daff-form-label>\n  <input daff-input type=\"text\" name=\"first-name\" />\n</daff-form-field>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport {\n  faUser,\n  faCircleXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design';\nimport { DaffButtonComponent } from '@daffodil/design/button';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'form-field-with-action',\n  templateUrl: './form-field-with-action.component.html',\n  styleUrl: './form-field-with-action.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    FaIconComponent,\n    FormsModule,\n    DaffButtonComponent,\n  ],\n})\nexport class FormFieldWithActionComponent {\n  faUser = faUser;\n  faCircleXmark = faCircleXmark;\n\n  inputValue = '';\n\n  clearInput(): void {\n    this.inputValue = ''; // or this.inputValue = null;\n  }\n}\n","<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\" required />\n  <button daff-button color=\"theme-contrast\" daffFormFieldAction>\n    Submit\n  </button>\n</daff-form-field>\n\n\n<daff-form-field appearance=\"fixed\">\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\" [(ngModel)]=\"inputValue\" />\n  <button daff-button color=\"theme-contrast\" daffFormFieldAction>\n    Submit\n  </button>\n</daff-form-field>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faUser } from '@fortawesome/free-solid-svg-icons';\n\nimport { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'form-field-with-prefix',\n  templateUrl: './form-field-with-prefix.component.html',\n  styleUrl: './form-field-with-prefix.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    FaIconComponent,\n  ],\n})\nexport class FormFieldWithPrefixComponent {\n  faUser = faUser;\n}\n","<daff-form-field>\n  <daff-form-label>First Name</daff-form-label>\n  <fa-icon [icon]=\"faUser\" daffPrefix></fa-icon>\n  <input daff-input type=\"text\" name=\"first-name\" />\n</daff-form-field>\n\n\n<daff-form-field appearance=\"fixed\">\n  <daff-form-label>First Name</daff-form-label>\n  <fa-icon [icon]=\"faUser\" daffPrefix></fa-icon>\n  <input daff-input type=\"text\" name=\"first-name\" />\n</daff-form-field>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faPencil } from '@fortawesome/free-solid-svg-icons';\n\nimport { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'form-field-with-suffix',\n  templateUrl: './form-field-with-suffix.component.html',\n  styleUrl: './form-field-with-suffix.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    FaIconComponent,\n  ],\n})\nexport class FormFieldWithSuffixComponent {\n  faPencil = faPencil;\n}\n","<daff-form-field>\n  <daff-form-label>Phone Number</daff-form-label>\n  <input daff-input type=\"text\" name=\"phone-number\" />\n  <fa-icon [icon]=\"faPencil\" daffSuffix></fa-icon>\n</daff-form-field>\n\n\n<daff-form-field appearance=\"fixed\">\n  <daff-form-label>Phone Number</daff-form-label>\n  <input daff-input type=\"text\" name=\"phone-number\" />\n  <fa-icon [icon]=\"faPencil\" daffSuffix></fa-icon>\n</daff-form-field>","import { FormFieldAppearancesComponent } from './form-field-appearances/form-field-appearances.component';\nimport { FormFieldWithActionComponent } from './form-field-with-action/form-field-with-action.component';\nimport { FormFieldWithPrefixComponent } from './form-field-with-prefix/form-field-with-prefix.component';\nimport { FormFieldWithSuffixComponent } from './form-field-with-suffix/form-field-with-suffix.component';\n\nexport const FORM_FIELD_EXAMPLES = [\n  FormFieldAppearancesComponent,\n  FormFieldWithActionComponent,\n  FormFieldWithPrefixComponent,\n  FormFieldWithSuffixComponent,\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-image.mjs

@@ -104,7 +104,7 @@ class DaffImageComponent {
         return this.width + 'px';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffImageComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffImageComponent, isStandalone: true, selector: "daff-image", inputs: { src: "src", alt: "alt", width: "width", height: "height" }, outputs: { load: "load" }, host: { properties: { "style.max-width": "this.maxWidth" } }, hostDirectives: [{ directive: i2.DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<img class=\"daff-image\" [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\" [style.aspectRatio]=\"_aspectRatio\"/>", styles: [":host{display:block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex;position:relative}:host.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}:host.daff-skeleton img{opacity:0}:host img{display:block;object-fit:cover;max-width:100%;max-height:100%;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffImageComponent, isStandalone: true, selector: "daff-image", inputs: { src: "src", alt: "alt", width: "width", height: "height" }, outputs: { load: "load" }, host: { properties: { "style.max-width": "this.maxWidth" } }, hostDirectives: [{ directive: i2.DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<img class=\"daff-image\" [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\" [style.aspectRatio]=\"_aspectRatio\"/>", styles: [":host{display:block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex;position:relative;height:100%;width:100%;border-radius:0}:host.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}:host.daff-skeleton img{opacity:0}:host img{display:block;object-fit:cover;max-width:100%;max-height:100%;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffImageComponent, decorators: [{
             type: Component,
@@ -113,7 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                             directive: DaffSkeletonableDirective,
                             inputs: ['skeleton'],
                         },
-                    ], template: "<img class=\"daff-image\" [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\" [style.aspectRatio]=\"_aspectRatio\"/>", styles: [":host{display:block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex;position:relative}:host.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}:host.daff-skeleton img{opacity:0}:host img{display:block;object-fit:cover;max-width:100%;max-height:100%;width:100%}\n"] }]
+                    ], template: "<img class=\"daff-image\" [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\" [style.aspectRatio]=\"_aspectRatio\"/>", styles: [":host{display:block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex;position:relative;height:100%;width:100%;border-radius:0}:host.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}:host.daff-skeleton img{opacity:0}:host img{display:block;object-fit:cover;max-width:100%;max-height:100%;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { src: [{
                 type: Input
             }], alt: [{

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

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-image.mjs","sources":["../../../libs/design/image/src/image/image.component.ts","../../../libs/design/image/src/image/image.component.html","../../../libs/design/image/src/image.module.ts","../../../libs/design/image/src/image.ts","../../../libs/design/image/src/daffodil-design-image.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  Input,\n  EventEmitter,\n  OnInit,\n  Output,\n  HostBinding,\n} from '@angular/core';\nimport {\n  DomSanitizer,\n  SafeStyle,\n} from '@angular/platform-browser';\n\nimport { DaffSkeletonableDirective } from '@daffodil/design';\n\nconst validateProperty = (object: Record<string, any>, prop: string) => {\n  if (object[prop] === null || object[prop] === undefined || object[prop] === '') {\n    throw new Error(`DaffImageComponent must have a defined ${prop} attribute.`);\n  }\n};\n\nconst validateProperties = (object: Record<string, any>, props: string[]) => {\n  const invalidProps = props.filter(prop => {\n    try {\n      validateProperty(object, prop);\n    } catch(e) {\n      return true;\n    }\n    return false;\n  });\n\n  if (invalidProps.length) {\n    throw new Error(`DaffImageComponent must have the ${invalidProps.join(',')} attributes defined.`);\n  }\n};\n\n@Component({\n  selector: 'daff-image',\n  templateUrl: './image.component.html',\n  styleUrls: ['./image.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: DaffSkeletonableDirective,\n      inputs: ['skeleton'],\n    },\n  ],\n})\nexport class DaffImageComponent implements OnInit {\n\n  private _src: string;\n\n  /**\n   * The URL of the image.\n   */\n  @Input()\n  get src(): string {\n    return this._src;\n  }\n  set src(value: string) {\n    this._src = value;\n    validateProperty(this, 'src');\n  }\n\n  private _alt: string;\n\n  /**\n   * The alternate text for the image.\n   */\n  @Input()\n  get alt(): string {\n    return this._alt;\n  }\n  set alt(value: string) {\n    this._alt = value;\n    validateProperty(this, 'alt');\n  }\n\n  private _width: number;\n\n  /**\n   * The width of the image.\n   */\n  @Input()\n  get width(): number {\n    return this._width;\n  }\n  set width(value: number) {\n    this._width = value;\n    validateProperty(this, 'width');\n  }\n\n  private _height: number;\n\n  /**\n   * The height of the image.\n   */\n  @Input()\n  get height(): number {\n    return this._height;\n  }\n  set height(value: number) {\n    this._height = value;\n    validateProperty(this, 'height');\n  }\n\n  /**\n   * Emits when the image has loaded.\n   */\n  // TODO: rename event to not collide with native event (unless that's intentional)\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  @Output() load: EventEmitter<void> = new EventEmitter();\n\n  /**\n   * @docs-private\n   */\n  ngOnInit(): void {\n    validateProperties(this, ['src', 'alt', 'width', 'height']);\n  }\n\n  constructor(private sanitizer: DomSanitizer) {}\n\n  /**\n   * @docs-private\n   */\n  get _paddingTop(): any {\n    if (!this.height || !this.width ) {\n      return undefined;\n    }\n\n    return this.sanitizer.bypassSecurityTrustStyle('calc(' + this.height + ' / ' + this.width + ' * 100%)');\n  }\n\n  /**\n   * @docs-private\n   *\n   * The aspect ratio of an image, based on the width and height set by the user.\n   */\n  get _aspectRatio(): SafeStyle {\n    return this.sanitizer.bypassSecurityTrustStyle(this.width + ' / ' + this.height);\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('style.max-width') get maxWidth(): string {\n    return this.width + 'px';\n  }\n}\n","<img class=\"daff-image\" [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\" [style.aspectRatio]=\"_aspectRatio\"/>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffImageComponent } from './image/image.component';\n\n/**\n * @deprecated in favor of {@link DAFF_IMAGE_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n * */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffImageComponent,\n  ],\n  exports: [\n    DaffImageComponent,\n  ],\n})\nexport class DaffImageModule { }\n","import { DaffImageComponent } from './image/image.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_IMAGE_COMPONENTS = <const> [\n  DaffImageComponent,\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-image.mjs","sources":["../../../libs/design/image/src/image/image.component.ts","../../../libs/design/image/src/image/image.component.html","../../../libs/design/image/src/image.module.ts","../../../libs/design/image/src/image.ts","../../../libs/design/image/src/daffodil-design-image.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  Input,\n  EventEmitter,\n  OnInit,\n  Output,\n  HostBinding,\n} from '@angular/core';\nimport {\n  DomSanitizer,\n  SafeStyle,\n} from '@angular/platform-browser';\n\nimport { DaffSkeletonableDirective } from '@daffodil/design';\n\nconst validateProperty = (object: Record<string, any>, prop: string) => {\n  if (object[prop] === null || object[prop] === undefined || object[prop] === '') {\n    throw new Error(`DaffImageComponent must have a defined ${prop} attribute.`);\n  }\n};\n\nconst validateProperties = (object: Record<string, any>, props: string[]) => {\n  const invalidProps = props.filter(prop => {\n    try {\n      validateProperty(object, prop);\n    } catch(e) {\n      return true;\n    }\n    return false;\n  });\n\n  if (invalidProps.length) {\n    throw new Error(`DaffImageComponent must have the ${invalidProps.join(',')} attributes defined.`);\n  }\n};\n\n@Component({\n  selector: 'daff-image',\n  templateUrl: './image.component.html',\n  styleUrls: ['./image.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: DaffSkeletonableDirective,\n      inputs: ['skeleton'],\n    },\n  ],\n})\nexport class DaffImageComponent implements OnInit {\n\n  private _src: string;\n\n  /**\n   * The URL of the image.\n   */\n  @Input()\n  get src(): string {\n    return this._src;\n  }\n  set src(value: string) {\n    this._src = value;\n    validateProperty(this, 'src');\n  }\n\n  private _alt: string;\n\n  /**\n   * The alternate text for the image.\n   */\n  @Input()\n  get alt(): string {\n    return this._alt;\n  }\n  set alt(value: string) {\n    this._alt = value;\n    validateProperty(this, 'alt');\n  }\n\n  private _width: number;\n\n  /**\n   * The width of the image.\n   */\n  @Input()\n  get width(): number {\n    return this._width;\n  }\n  set width(value: number) {\n    this._width = value;\n    validateProperty(this, 'width');\n  }\n\n  private _height: number;\n\n  /**\n   * The height of the image.\n   */\n  @Input()\n  get height(): number {\n    return this._height;\n  }\n  set height(value: number) {\n    this._height = value;\n    validateProperty(this, 'height');\n  }\n\n  /**\n   * Emits when the image has loaded.\n   */\n  // TODO: rename event to not collide with native event (unless that's intentional)\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  @Output() load: EventEmitter<void> = new EventEmitter();\n\n  /**\n   * @docs-private\n   */\n  ngOnInit(): void {\n    validateProperties(this, ['src', 'alt', 'width', 'height']);\n  }\n\n  constructor(private sanitizer: DomSanitizer) {}\n\n  /**\n   * @docs-private\n   */\n  get _paddingTop(): any {\n    if (!this.height || !this.width ) {\n      return undefined;\n    }\n\n    return this.sanitizer.bypassSecurityTrustStyle('calc(' + this.height + ' / ' + this.width + ' * 100%)');\n  }\n\n  /**\n   * @docs-private\n   *\n   * The aspect ratio of an image, based on the width and height set by the user.\n   */\n  get _aspectRatio(): SafeStyle {\n    return this.sanitizer.bypassSecurityTrustStyle(this.width + ' / ' + this.height);\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('style.max-width') get maxWidth(): string {\n    return this.width + 'px';\n  }\n}\n","<img class=\"daff-image\" [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\" [style.aspectRatio]=\"_aspectRatio\"/>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffImageComponent } from './image/image.component';\n\n/**\n * @deprecated in favor of {@link DAFF_IMAGE_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n * */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffImageComponent,\n  ],\n  exports: [\n    DaffImageComponent,\n  ],\n})\nexport class DaffImageModule { }\n","import { DaffImageComponent } from './image/image.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_IMAGE_COMPONENTS = <const> [\n  DaffImageComponent,\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-input-examples.mjs

@@ -13,7 +13,7 @@ class InputDisabledComponent {
         this.disabled = new UntypedFormControl({ value: '', disabled: true });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputDisabledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: InputDisabledComponent, isStandalone: true, selector: "input-disabled", ngImport: i0, template: "<daff-form-field>\n  <label daffFormLabel for=\"disabled-input\">Email</label>\n  <input daff-input type=\"text\" name=\"email\" id=\"disabled-input\" [formControl]=\"disabled\"/>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field" }, { kind: "directive", type: i1.DaffFormLabelDirective, selector: "[daffFormLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: InputDisabledComponent, isStandalone: true, selector: "input-disabled", ngImport: i0, template: "<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\" [formControl]=\"disabled\"/>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["appearance", "id"] }, { kind: "directive", type: i1.DaffFormFieldLabelDirective, selector: "daff-form-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputDisabledComponent, decorators: [{
             type: Component,
@@ -21,7 +21,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         ReactiveFormsModule,
                         DaffInputComponent,
                         DAFF_FORM_FIELD_COMPONENTS,
-                    ], template: "<daff-form-field>\n  <label daffFormLabel for=\"disabled-input\">Email</label>\n  <input daff-input type=\"text\" name=\"email\" id=\"disabled-input\" [formControl]=\"disabled\"/>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"] }]
+                    ], template: "<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\" [formControl]=\"disabled\"/>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"] }]
         }] });
 
 class InputErrorComponent {
@@ -32,7 +32,7 @@ class InputErrorComponent {
         ]);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: InputErrorComponent, isStandalone: true, selector: "input-error", ngImport: i0, template: "<daff-form-field>\n  <label daffFormLabel for=\"error-input\">Email</label>\n  <input daff-input type=\"text\" name=\"email\" [formControl]=\"control\" id=\"error-input\"/>\n  @if (control.errors?.required) {\n    <daff-error-message>Email is a required field.</daff-error-message>\n  }\n  @if (control.errors?.email) {\n    <daff-error-message>Email is not valid.</daff-error-message>\n  }\n</daff-form-field>\n<p>Value: {{ control.value }} </p>", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field" }, { kind: "component", type: i1.DaffErrorMessageComponent, selector: "daff-error-message" }, { kind: "directive", type: i1.DaffFormLabelDirective, selector: "[daffFormLabel]" }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: InputErrorComponent, isStandalone: true, selector: "input-error", ngImport: i0, template: "<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\" [formControl]=\"control\"/>\n  <daff-hint>Hint</daff-hint>\n  @if (control.errors?.required) {\n    <daff-error-message>Email is a required field.</daff-error-message>\n  }\n  @if (control.errors?.email) {\n    <daff-error-message>Email is not valid.</daff-error-message>\n  }\n</daff-form-field>\n<p>Value: {{ control.value }} </p>", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["appearance", "id"] }, { kind: "component", type: i1.DaffErrorMessageComponent, selector: "daff-error-message" }, { kind: "component", type: i1.DaffHintComponent, selector: "daff-hint", inputs: ["validated"] }, { kind: "directive", type: i1.DaffFormFieldLabelDirective, selector: "daff-form-label" }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputErrorComponent, decorators: [{
             type: Component,
@@ -41,12 +41,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         DaffInputComponent,
                         DaffHintComponent,
                         ReactiveFormsModule,
-                    ], template: "<daff-form-field>\n  <label daffFormLabel for=\"error-input\">Email</label>\n  <input daff-input type=\"text\" name=\"email\" [formControl]=\"control\" id=\"error-input\"/>\n  @if (control.errors?.required) {\n    <daff-error-message>Email is a required field.</daff-error-message>\n  }\n  @if (control.errors?.email) {\n    <daff-error-message>Email is not valid.</daff-error-message>\n  }\n</daff-form-field>\n<p>Value: {{ control.value }} </p>", styles: ["daff-form-field{max-width:320px}\n"] }]
+                    ], template: "<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\" [formControl]=\"control\"/>\n  <daff-hint>Hint</daff-hint>\n  @if (control.errors?.required) {\n    <daff-error-message>Email is a required field.</daff-error-message>\n  }\n  @if (control.errors?.email) {\n    <daff-error-message>Email is not valid.</daff-error-message>\n  }\n</daff-form-field>\n<p>Value: {{ control.value }} </p>", styles: ["daff-form-field{max-width:320px}\n"] }]
         }] });
 
 class InputHintComponent {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: InputHintComponent, isStandalone: true, selector: "input-hint", ngImport: i0, template: "<daff-form-field>\n  <label daffFormLabel for=\"input-hint\">Email</label>\n  <input daff-input type=\"text\" name=\"email\" id=\"input-hint\"/>\n  <daff-hint>Hint goes here.</daff-hint>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field" }, { kind: "directive", type: i1.DaffFormLabelDirective, selector: "[daffFormLabel]" }, { kind: "component", type: i1.DaffHintComponent, selector: "daff-hint", inputs: ["validated"] }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: InputHintComponent, isStandalone: true, selector: "input-hint", ngImport: i0, template: "<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\"/>\n  <daff-hint>Hint goes here.</daff-hint>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["appearance", "id"] }, { kind: "component", type: i1.DaffHintComponent, selector: "daff-hint", inputs: ["validated"] }, { kind: "directive", type: i1.DaffFormFieldLabelDirective, selector: "daff-form-label" }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputHintComponent, decorators: [{
             type: Component,
@@ -54,7 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         DAFF_FORM_FIELD_COMPONENTS,
                         DaffInputComponent,
                         DaffHintComponent,
-                    ], template: "<daff-form-field>\n  <label daffFormLabel for=\"input-hint\">Email</label>\n  <input daff-input type=\"text\" name=\"email\" id=\"input-hint\"/>\n  <daff-hint>Hint goes here.</daff-hint>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"] }]
+                    ], template: "<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\"/>\n  <daff-hint>Hint goes here.</daff-hint>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"] }]
         }] });
 
 class InputHintAndErrorComponent {
@@ -64,7 +64,7 @@ class InputHintAndErrorComponent {
         this.control = new UntypedFormControl('', [Validators.required, Validators.minLength(8)]);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputHintAndErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: InputHintAndErrorComponent, isStandalone: true, selector: "input-hint-and-error", ngImport: i0, template: "<daff-form-field>\n  <label daffFormLabel for=\"error-input\">Password</label>\n  <input daff-input type=\"text\" name=\"password\" [formControl]=\"control\" id=\"error-input\"/>\n  <daff-hint [validated]=\"!(control.invalid) && control.dirty\">\n    @if (!(control.invalid) && control.dirty) {\n      <fa-icon [icon]=\"faCheck\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    } @else {\n      <fa-icon [icon]=\"faXmark\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    }\n    Minimum of 8 characters.\n  </daff-hint>\n  @if (control.errors?.required && control.touched) {\n    <daff-error-message>Password is a required field.</daff-error-message>\n  }\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field" }, { kind: "component", type: i1.DaffErrorMessageComponent, selector: "daff-error-message" }, { kind: "directive", type: i1.DaffFormLabelDirective, selector: "[daffFormLabel]" }, { kind: "component", type: i1.DaffHintComponent, selector: "daff-hint", inputs: ["validated"] }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: InputHintAndErrorComponent, isStandalone: true, selector: "input-hint-and-error", ngImport: i0, template: "<daff-form-field>\n  <daff-form-label>Password</daff-form-label>\n  <input daff-input type=\"text\" name=\"password\" [formControl]=\"control\"/>\n  <daff-hint [validated]=\"!(control.invalid) && control.dirty\">\n    @if (!(control.invalid) && control.dirty) {\n      <fa-icon [icon]=\"faCheck\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    } @else {\n      <fa-icon [icon]=\"faXmark\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    }\n    Minimum of 8 characters.\n  </daff-hint>\n  @if (control.errors?.required && control.touched) {\n    <daff-error-message>Password is a required field.</daff-error-message>\n  }\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["appearance", "id"] }, { kind: "component", type: i1.DaffErrorMessageComponent, selector: "daff-error-message" }, { kind: "component", type: i1.DaffHintComponent, selector: "daff-hint", inputs: ["validated"] }, { kind: "directive", type: i1.DaffFormFieldLabelDirective, selector: "daff-form-label" }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputHintAndErrorComponent, decorators: [{
             type: Component,
@@ -73,7 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         DaffInputComponent,
                         ReactiveFormsModule,
                         FaIconComponent,
-                    ], template: "<daff-form-field>\n  <label daffFormLabel for=\"error-input\">Password</label>\n  <input daff-input type=\"text\" name=\"password\" [formControl]=\"control\" id=\"error-input\"/>\n  <daff-hint [validated]=\"!(control.invalid) && control.dirty\">\n    @if (!(control.invalid) && control.dirty) {\n      <fa-icon [icon]=\"faCheck\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    } @else {\n      <fa-icon [icon]=\"faXmark\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    }\n    Minimum of 8 characters.\n  </daff-hint>\n  @if (control.errors?.required && control.touched) {\n    <daff-error-message>Password is a required field.</daff-error-message>\n  }\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"] }]
+                    ], template: "<daff-form-field>\n  <daff-form-label>Password</daff-form-label>\n  <input daff-input type=\"text\" name=\"password\" [formControl]=\"control\"/>\n  <daff-hint [validated]=\"!(control.invalid) && control.dirty\">\n    @if (!(control.invalid) && control.dirty) {\n      <fa-icon [icon]=\"faCheck\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    } @else {\n      <fa-icon [icon]=\"faXmark\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    }\n    Minimum of 8 characters.\n  </daff-hint>\n  @if (control.errors?.required && control.touched) {\n    <daff-error-message>Password is a required field.</daff-error-message>\n  }\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"] }]
         }] });
 
 class InputWithFormFieldComponent {
@@ -82,7 +82,7 @@ class InputWithFormFieldComponent {
         this.faCircleXmark = faCircleXmark;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputWithFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: InputWithFormFieldComponent, isStandalone: true, selector: "input-with-form-field", ngImport: i0, template: "<daff-form-field>\n  <fa-icon [icon]=\"faUser\" daffPrefix></fa-icon>\n  <label daffFormLabel for=\"example-input\">First Name</label>\n  <input daff-input type=\"text\" name=\"first-name\" id=\"example-input\" />\n  <fa-icon [icon]=\"faCircleXmark\" daffSuffix></fa-icon>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field" }, { kind: "directive", type: i1.DaffFormLabelDirective, selector: "[daffFormLabel]" }, { kind: "directive", type: i1.DaffPrefixDirective, selector: "[daffPrefix]" }, { kind: "directive", type: i1.DaffSuffixDirective, selector: "[daffSuffix]" }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: DaffPrefixSuffixModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: InputWithFormFieldComponent, isStandalone: true, selector: "input-with-form-field", ngImport: i0, template: "<daff-form-field>\n  <fa-icon [icon]=\"faUser\" daffPrefix></fa-icon>\n  <daff-form-label>First Name</daff-form-label>\n  <input daff-input type=\"text\" name=\"first-name\" />\n  <fa-icon [icon]=\"faCircleXmark\" daffSuffix></fa-icon>\n</daff-form-field>\n", styles: ["daff-form-field{max-width:320px}\n"], dependencies: [{ kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["appearance", "id"] }, { kind: "directive", type: i1.DaffPrefixDirective, selector: "[daffPrefix]" }, { kind: "directive", type: i1.DaffSuffixDirective, selector: "[daffSuffix]" }, { kind: "directive", type: i1.DaffFormFieldLabelDirective, selector: "daff-form-label" }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: DaffPrefixSuffixModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputWithFormFieldComponent, decorators: [{
             type: Component,
@@ -91,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         DaffInputComponent,
                         FaIconComponent,
                         DaffPrefixSuffixModule,
-                    ], template: "<daff-form-field>\n  <fa-icon [icon]=\"faUser\" daffPrefix></fa-icon>\n  <label daffFormLabel for=\"example-input\">First Name</label>\n  <input daff-input type=\"text\" name=\"first-name\" id=\"example-input\" />\n  <fa-icon [icon]=\"faCircleXmark\" daffSuffix></fa-icon>\n</daff-form-field>", styles: ["daff-form-field{max-width:320px}\n"] }]
+                    ], template: "<daff-form-field>\n  <fa-icon [icon]=\"faUser\" daffPrefix></fa-icon>\n  <daff-form-label>First Name</daff-form-label>\n  <input daff-input type=\"text\" name=\"first-name\" />\n  <fa-icon [icon]=\"faCircleXmark\" daffSuffix></fa-icon>\n</daff-form-field>\n", styles: ["daff-form-field{max-width:320px}\n"] }]
         }] });
 
 const INPUT_EXAMPLES = [

package/fesm2022/daffodil-design-input-examples.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-input-examples.mjs","sources":["../../../libs/design/input/examples/src/input-disabled/input-disabled.component.ts","../../../libs/design/input/examples/src/input-disabled/input-disabled.component.html","../../../libs/design/input/examples/src/input-error/input-error.component.ts","../../../libs/design/input/examples/src/input-error/input-error.component.html","../../../libs/design/input/examples/src/input-hint/input-hint.component.ts","../../../libs/design/input/examples/src/input-hint/input-hint.component.html","../../../libs/design/input/examples/src/input-hint-and-error/input-hint-and-error.component.ts","../../../libs/design/input/examples/src/input-hint-and-error/input-hint-and-error.component.html","../../../libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.ts","../../../libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.html","../../../libs/design/input/examples/src/examples.ts","../../../libs/design/input/examples/src/daffodil-design-input-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  ReactiveFormsModule,\n  UntypedFormControl,\n} from '@angular/forms';\n\nimport { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-disabled',\n  templateUrl: './input-disabled.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    ReactiveFormsModule,\n    DaffInputComponent,\n    DAFF_FORM_FIELD_COMPONENTS,\n  ],\n})\nexport class InputDisabledComponent {\n  disabled = new UntypedFormControl({ value : '' , disabled: true });\n}\n","<daff-form-field>\n  <label daffFormLabel for=\"disabled-input\">Email</label>\n  <input daff-input type=\"text\" name=\"email\" id=\"disabled-input\" [formControl]=\"disabled\"/>\n</daff-form-field>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  UntypedFormControl,\n  Validators,\n  ReactiveFormsModule,\n} from '@angular/forms';\n\nimport {\n  DAFF_FORM_FIELD_COMPONENTS,\n  DaffHintComponent,\n} from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-error',\n  templateUrl: './input-error.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    DaffHintComponent,\n    ReactiveFormsModule,\n  ],\n})\nexport class InputErrorComponent {\n  control: UntypedFormControl = new UntypedFormControl('test@example.com', [\n    Validators.email,\n    Validators.required,\n  ]);\n}\n","<daff-form-field>\n  <label daffFormLabel for=\"error-input\">Email</label>\n  <input daff-input type=\"text\" name=\"email\" [formControl]=\"control\" id=\"error-input\"/>\n  @if (control.errors?.required) {\n    <daff-error-message>Email is a required field.</daff-error-message>\n  }\n  @if (control.errors?.email) {\n    <daff-error-message>Email is not valid.</daff-error-message>\n  }\n</daff-form-field>\n<p>Value: {{ control.value }} </p>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport {\n  DAFF_FORM_FIELD_COMPONENTS,\n  DaffHintComponent,\n} from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-hint',\n  templateUrl: './input-hint.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    DaffHintComponent,\n  ],\n})\nexport class InputHintComponent {\n}\n","<daff-form-field>\n  <label daffFormLabel for=\"input-hint\">Email</label>\n  <input daff-input type=\"text\" name=\"email\" id=\"input-hint\"/>\n  <daff-hint>Hint goes here.</daff-hint>\n</daff-form-field>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  UntypedFormControl,\n  Validators,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport {\n  faCheck,\n  faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-hint-and-error',\n  templateUrl: './input-hint-and-error.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    ReactiveFormsModule,\n    FaIconComponent,\n  ],\n})\nexport class InputHintAndErrorComponent {\n  faCheck = faCheck;\n  faXmark = faXmark;\n\n  control: UntypedFormControl = new UntypedFormControl('', [Validators.required, Validators.minLength(8)]);\n}\n","<daff-form-field>\n  <label daffFormLabel for=\"error-input\">Password</label>\n  <input daff-input type=\"text\" name=\"password\" [formControl]=\"control\" id=\"error-input\"/>\n  <daff-hint [validated]=\"!(control.invalid) && control.dirty\">\n    @if (!(control.invalid) && control.dirty) {\n      <fa-icon [icon]=\"faCheck\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    } @else {\n      <fa-icon [icon]=\"faXmark\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    }\n    Minimum of 8 characters.\n  </daff-hint>\n  @if (control.errors?.required && control.touched) {\n    <daff-error-message>Password is a required field.</daff-error-message>\n  }\n</daff-form-field>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport {\n  faUser,\n  faCircleXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DAFF_FORM_FIELD_COMPONENTS,\n  DaffPrefixSuffixModule,\n} from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-with-form-field',\n  templateUrl: './input-with-form-field.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    FaIconComponent,\n    DaffPrefixSuffixModule,\n  ],\n})\nexport class InputWithFormFieldComponent {\n  faUser = faUser;\n  faCircleXmark = faCircleXmark;\n}\n","<daff-form-field>\n  <fa-icon [icon]=\"faUser\" daffPrefix></fa-icon>\n  <label daffFormLabel for=\"example-input\">First Name</label>\n  <input daff-input type=\"text\" name=\"first-name\" id=\"example-input\" />\n  <fa-icon [icon]=\"faCircleXmark\" daffSuffix></fa-icon>\n</daff-form-field>","import { InputDisabledComponent } from './input-disabled/input-disabled.component';\nimport { InputErrorComponent } from './input-error/input-error.component';\nimport { InputHintComponent } from './input-hint/input-hint.component';\nimport { InputHintAndErrorComponent } from './input-hint-and-error/input-hint-and-error.component';\nimport { InputWithFormFieldComponent } from './input-with-form-field/input-with-form-field.component';\n\nexport const INPUT_EXAMPLES = [\n  InputWithFormFieldComponent,\n  InputDisabledComponent,\n  InputErrorComponent,\n  InputHintComponent,\n  InputHintAndErrorComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}
+{"version":3,"file":"daffodil-design-input-examples.mjs","sources":["../../../libs/design/input/examples/src/input-disabled/input-disabled.component.ts","../../../libs/design/input/examples/src/input-disabled/input-disabled.component.html","../../../libs/design/input/examples/src/input-error/input-error.component.ts","../../../libs/design/input/examples/src/input-error/input-error.component.html","../../../libs/design/input/examples/src/input-hint/input-hint.component.ts","../../../libs/design/input/examples/src/input-hint/input-hint.component.html","../../../libs/design/input/examples/src/input-hint-and-error/input-hint-and-error.component.ts","../../../libs/design/input/examples/src/input-hint-and-error/input-hint-and-error.component.html","../../../libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.ts","../../../libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.html","../../../libs/design/input/examples/src/examples.ts","../../../libs/design/input/examples/src/daffodil-design-input-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  ReactiveFormsModule,\n  UntypedFormControl,\n} from '@angular/forms';\n\nimport { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-disabled',\n  templateUrl: './input-disabled.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    ReactiveFormsModule,\n    DaffInputComponent,\n    DAFF_FORM_FIELD_COMPONENTS,\n  ],\n})\nexport class InputDisabledComponent {\n  disabled = new UntypedFormControl({ value : '' , disabled: true });\n}\n","<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\" [formControl]=\"disabled\"/>\n</daff-form-field>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  UntypedFormControl,\n  Validators,\n  ReactiveFormsModule,\n} from '@angular/forms';\n\nimport {\n  DAFF_FORM_FIELD_COMPONENTS,\n  DaffHintComponent,\n} from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-error',\n  templateUrl: './input-error.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    DaffHintComponent,\n    ReactiveFormsModule,\n  ],\n})\nexport class InputErrorComponent {\n  control: UntypedFormControl = new UntypedFormControl('test@example.com', [\n    Validators.email,\n    Validators.required,\n  ]);\n}\n","<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\" [formControl]=\"control\"/>\n  <daff-hint>Hint</daff-hint>\n  @if (control.errors?.required) {\n    <daff-error-message>Email is a required field.</daff-error-message>\n  }\n  @if (control.errors?.email) {\n    <daff-error-message>Email is not valid.</daff-error-message>\n  }\n</daff-form-field>\n<p>Value: {{ control.value }} </p>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport {\n  DAFF_FORM_FIELD_COMPONENTS,\n  DaffHintComponent,\n} from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-hint',\n  templateUrl: './input-hint.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    DaffHintComponent,\n  ],\n})\nexport class InputHintComponent {\n}\n","<daff-form-field>\n  <daff-form-label>Email</daff-form-label>\n  <input daff-input type=\"text\" name=\"email\"/>\n  <daff-hint>Hint goes here.</daff-hint>\n</daff-form-field>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  UntypedFormControl,\n  Validators,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport {\n  faCheck,\n  faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-hint-and-error',\n  templateUrl: './input-hint-and-error.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    ReactiveFormsModule,\n    FaIconComponent,\n  ],\n})\nexport class InputHintAndErrorComponent {\n  faCheck = faCheck;\n  faXmark = faXmark;\n\n  control: UntypedFormControl = new UntypedFormControl('', [Validators.required, Validators.minLength(8)]);\n}\n","<daff-form-field>\n  <daff-form-label>Password</daff-form-label>\n  <input daff-input type=\"text\" name=\"password\" [formControl]=\"control\"/>\n  <daff-hint [validated]=\"!(control.invalid) && control.dirty\">\n    @if (!(control.invalid) && control.dirty) {\n      <fa-icon [icon]=\"faCheck\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    } @else {\n      <fa-icon [icon]=\"faXmark\" [fixedWidth]=\"true\" size=\"xs\"></fa-icon>\n    }\n    Minimum of 8 characters.\n  </daff-hint>\n  @if (control.errors?.required && control.touched) {\n    <daff-error-message>Password is a required field.</daff-error-message>\n  }\n</daff-form-field>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport {\n  faUser,\n  faCircleXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DAFF_FORM_FIELD_COMPONENTS,\n  DaffPrefixSuffixModule,\n} from '@daffodil/design';\nimport { DaffInputComponent } from '@daffodil/design/input';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input-with-form-field',\n  templateUrl: './input-with-form-field.component.html',\n  styles: [`\n    daff-form-field {\n      max-width: 320px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_FORM_FIELD_COMPONENTS,\n    DaffInputComponent,\n    FaIconComponent,\n    DaffPrefixSuffixModule,\n  ],\n})\nexport class InputWithFormFieldComponent {\n  faUser = faUser;\n  faCircleXmark = faCircleXmark;\n}\n","<daff-form-field>\n  <fa-icon [icon]=\"faUser\" daffPrefix></fa-icon>\n  <daff-form-label>First Name</daff-form-label>\n  <input daff-input type=\"text\" name=\"first-name\" />\n  <fa-icon [icon]=\"faCircleXmark\" daffSuffix></fa-icon>\n</daff-form-field>\n","import { InputDisabledComponent } from './input-disabled/input-disabled.component';\nimport { InputErrorComponent } from './input-error/input-error.component';\nimport { InputHintComponent } from './input-hint/input-hint.component';\nimport { InputHintAndErrorComponent } from './input-hint-and-error/input-hint-and-error.component';\nimport { InputWithFormFieldComponent } from './input-with-form-field/input-with-form-field.component';\n\nexport const INPUT_EXAMPLES = [\n  InputWithFormFieldComponent,\n  InputDisabledComponent,\n  InputErrorComponent,\n  InputHintComponent,\n  InputHintAndErrorComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}

package/fesm2022/daffodil-design-input.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { HostListener, HostBinding, Optional, Self, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { merge, of, map } from 'rxjs';
+import * as i2 from '@daffodil/design';
 import { DaffFormFieldControl } from '@daffodil/design';
 
 /**
@@ -13,6 +14,30 @@ class DaffInputComponent extends DaffFormFieldControl {
         this.focused = true;
         this.emitState();
     }
+    get _id() {
+        return this.formField?.id;
+    }
+    ;
+    /**
+     * @docs-private
+     */
+    get internalId() {
+        return this._id;
+    }
+    /**
+     * @docs-private
+     */
+    get ariaDescribedBy() {
+        if (this.formField.hasErrorMessage()) {
+            return this.formField.errorMessageId;
+        }
+        else if (this.formField.hasHint()) {
+            return this.formField.hintId;
+        }
+        else {
+            return null;
+        }
+    }
     /** @docs-private */
     blur() {
         this.focused = false;
@@ -20,15 +45,20 @@ class DaffInputComponent extends DaffFormFieldControl {
     }
     constructor(
     /** @docs-private */
-    ngControl, _elementRef) {
+    ngControl, _elementRef, formField) {
         super(ngControl);
         this.ngControl = ngControl;
         this._elementRef = _elementRef;
+        this.formField = formField;
         /** @docs-private */
         this.class = true;
         /** @docs-private */
         this.controlType = 'native-input';
+        /** @docs-private */
         this.focused = false;
+        if (!this.formField) {
+            throw new Error('DaffInputComponent needs to be used with the DaffFormFieldComponent.');
+        }
     }
     /** @docs-private */
     ngOnInit() {
@@ -38,11 +68,12 @@ class DaffInputComponent extends DaffFormFieldControl {
     onFocus() {
         this._elementRef.nativeElement.focus();
     }
+    /** @docs-private */
     get value() {
         return this._elementRef.nativeElement.value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffInputComponent, isStandalone: true, selector: "input[daff-input]", host: { listeners: { "focus": "focus()", "blur": "blur()" }, properties: { "class.daff-input": "this.class" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i2.DaffFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffInputComponent, isStandalone: true, selector: "input[daff-input]", host: { listeners: { "focus": "focus()", "blur": "blur()" }, properties: { "class.daff-input": "this.class", "attr.id": "this.internalId", "attr.aria-describedby": "this.ariaDescribedBy" } }, providers: [
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             { provide: DaffFormFieldControl, useExisting: DaffInputComponent },
         ], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{background:none;border:none;box-shadow:none;margin:0;width:100%;box-sizing:border-box}:host:focus{border:none;box-shadow:none;outline:none}:host:disabled{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -57,12 +88,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i0.ElementRef }], propDecorators: { class: [{
+                }] }, { type: i0.ElementRef }, { type: i2.DaffFormFieldComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-input']
             }], focus: [{
                 type: HostListener,
                 args: ['focus']
+            }], internalId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], ariaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
             }], blur: [{
                 type: HostListener,
                 args: ['blur']

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

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-input.mjs","sources":["../../../libs/design/input/src/input.component.ts","../../../libs/design/input/src/input.module.ts","../../../libs/design/input/src/daffodil-design-input.ts"],"sourcesContent":["import {\n  Component,\n  Optional,\n  Self,\n  ElementRef,\n  HostListener,\n  ChangeDetectionStrategy,\n  HostBinding,\n  OnInit,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport {\n  merge,\n  of,\n  map,\n} from 'rxjs';\n\nimport { DaffFormFieldControl } from '@daffodil/design';\n\n/**\n * DaffInputComponent provides the same functionality as a native `<input>` and contains custom styling and functionality.\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input[daff-input]',\n  template: '<ng-content></ng-content>',\n  styleUrl: './input.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    { provide: DaffFormFieldControl, useExisting: DaffInputComponent },\n  ],\n})\nexport class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {\n\n  /** @docs-private */\n  @HostBinding('class.daff-input') class = true;\n\n  /** @docs-private */\n  controlType = 'native-input';\n\n  focused = false;\n\n  /** @docs-private */\n  @HostListener('focus') focus() {\n    this.focused = true;\n    this.emitState();\n\n  }\n\n  /** @docs-private */\n  @HostListener('blur') blur() {\n    this.focused = false;\n    this.emitState();\n  }\n\n  constructor(\n    /** @docs-private */\n    @Optional() @Self() public ngControl: NgControl,\n    private _elementRef: ElementRef<HTMLInputElement>,\n  ) {\n    super(ngControl);\n  }\n\n  /** @docs-private */\n  ngOnInit() {\n    this.stateChanges = merge(\n      this._stateChanges.asObservable(),\n      this.ngControl ? this.ngControl.statusChanges : of(undefined),\n    ).pipe(\n      map(() => this.state),\n    );\n  }\n\n  /** @docs-private */\n  onFocus() {\n    this._elementRef.nativeElement.focus();\n  }\n\n  get value() {\n    return this._elementRef.nativeElement.value;\n  }\n}\n","import { NgModule } from '@angular/core';\n\nimport { DaffInputComponent } from './input.component';\n\n/**\n * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    DaffInputComponent,\n  ],\n  exports: [\n    DaffInputComponent,\n  ],\n})\nexport class DaffInputModule { }\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-input.mjs","sources":["../../../libs/design/input/src/input.component.ts","../../../libs/design/input/src/input.module.ts","../../../libs/design/input/src/daffodil-design-input.ts"],"sourcesContent":["import {\n  Component,\n  Optional,\n  Self,\n  ElementRef,\n  HostListener,\n  ChangeDetectionStrategy,\n  HostBinding,\n  OnInit,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport {\n  merge,\n  of,\n  map,\n} from 'rxjs';\n\nimport {\n  DaffFormFieldComponent,\n  DaffFormFieldControl,\n} from '@daffodil/design';\n\n/**\n * DaffInputComponent provides the same functionality as a native `<input>` and contains custom styling and functionality.\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input[daff-input]',\n  template: '<ng-content></ng-content>',\n  styleUrl: './input.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    { provide: DaffFormFieldControl, useExisting: DaffInputComponent },\n  ],\n})\nexport class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {\n\n  /** @docs-private */\n  @HostBinding('class.daff-input') class = true;\n\n  /** @docs-private */\n  controlType = 'native-input';\n\n  /** @docs-private */\n  focused = false;\n\n  /** @docs-private */\n  @HostListener('focus') focus() {\n    this.focused = true;\n    this.emitState();\n\n  }\n\n  private get _id() {\n    return this.formField?.id;\n  };\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('attr.id') get internalId() {\n    return this._id;\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('attr.aria-describedby') get ariaDescribedBy() {\n    if(this.formField.hasErrorMessage()) {\n      return this.formField.errorMessageId;\n    } else if(this.formField.hasHint()) {\n      return this.formField.hintId;\n    } else {\n      return null;\n    }\n  }\n\n  /** @docs-private */\n  @HostListener('blur') blur() {\n    this.focused = false;\n    this.emitState();\n  }\n\n  constructor(\n    /** @docs-private */\n    @Optional() @Self() public ngControl: NgControl,\n    private _elementRef: ElementRef<HTMLInputElement>,\n    @Optional() private formField: DaffFormFieldComponent,\n  ) {\n    super(ngControl);\n\n    if(!this.formField) {\n      throw new Error('DaffInputComponent needs to be used with the DaffFormFieldComponent.');\n    }\n  }\n\n  /** @docs-private */\n  ngOnInit() {\n    this.stateChanges = merge(\n      this._stateChanges.asObservable(),\n      this.ngControl ? this.ngControl.statusChanges : of(undefined),\n    ).pipe(\n      map(() => this.state),\n    );\n  }\n\n  /** @docs-private */\n  onFocus() {\n    this._elementRef.nativeElement.focus();\n  }\n\n  /** @docs-private */\n  get value() {\n    return this._elementRef.nativeElement.value;\n  }\n}\n","import { NgModule } from '@angular/core';\n\nimport { DaffInputComponent } from './input.component';\n\n/**\n * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    DaffInputComponent,\n  ],\n  exports: [\n    DaffInputComponent,\n  ],\n})\nexport class DaffInputModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-media-gallery.mjs

@@ -221,7 +221,7 @@ class DaffMediaGalleryComponent {
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DaffMediaGalleryComponent, isStandalone: true, selector: "daff-media-gallery", inputs: { id: "id" }, outputs: { elementChange: "elementChange" }, host: { properties: { "attr.id": "this.id", "class.daff-media-gallery": "this.class" } }, providers: [
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
-        ], queries: [{ propertyName: "_thumbnails", predicate: DaffThumbnailDirective, isSignal: true }], viewQueries: [{ propertyName: "_thumbnailButtons", predicate: ["thumbnailButtons"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }, { directive: i1.DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl role=\"tablist\">\n\t@if(skeleton) {\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t}\n\t@else {\n\t\t@for (thumbnail of _thumbnails(); track thumbnail; let index = $index) {\n\t\t\t<button \n\t\t\t\t#thumbnailButtons\n\t\t\t\tclass=\"daff-thumbnail\" \n\t\t\t\trole=\"tab\"\n\t\t\t\tdaffSelected\n\t\t\t\t[selected]=\"thumbnail === _selectedThumbnail()\"\n\t\t\t\tattr.aria-label=\"{{ thumbnail.label ?? 'Gallery Element ' + (index + 1) }}\"\n\t\t\t\t[attr.aria-selected]=\"thumbnail === _selectedThumbnail() ? 'true' : 'false'\"\n\t\t\t\t[attr.aria-controls]=\"thumbnail.selectedThumbnailId\"\n\t\t\t\t[attr.tabindex]=\"thumbnail === _selectedThumbnail() ? 0 : -1\"\n\t\t\t\t(click)=\"selectIndex(index)\"\n\t\t\t\t[attr.id]=\"thumbnail.id\" \n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t@if (thumbnail.thumbnailSrc) {\n\t\t\t\t\t<img [src]=\"thumbnail.thumbnailSrc\" aria-hidden=\"true\"/>\n\t\t\t\t}\n\t\t\t\t@if (thumbnail.isVideo) {\n\t\t\t\t\t<div class=\"daff-media-gallery__video-button\">\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n@let selectedEl = this._selectedThumbnail();\n<div \n\tclass=\"daff-media-gallery__selected-thumbnail\"\n\ttabindex=\"0\"\n\t#selectedThumbnail\n\trole=\"tabpanel\"\n\t[attr.id]=\"selectedEl?.selectedThumbnailId\">\n\t\t@if(selectedEl) {\n\t\t\t<ng-container *ngTemplateOutlet=\"selectedEl.templateRef\"></ng-container>\n\t\t}\n\t\t@else {\n\t\t\t<div class=\"daff-media-gallery__skeleton-placeholder\"></div>\n\t\t}\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column;gap:.5rem}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;justify-content:center;align-items:center;height:4rem;width:4rem;max-width:100%;overflow:hidden;user-select:none;padding:0;position:relative;flex-shrink:0}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:4.5rem;width:4.5rem}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{flex-direction:column;height:5rem;width:5rem}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail img{display:block;width:100%}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4rem;width:4rem;position:absolute;top:0;left:0}@media (min-width: 480px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4.5rem;width:4.5rem;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:5rem;width:5rem;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex;position:relative;flex-grow:1}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:16rem}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:30rem}}.daff-media-gallery__thumbnails{display:flex;flex-direction:row;flex-shrink:0;gap:.25rem;order:2;max-width:100%;overflow-x:auto}@media (min-width: 1024px){.daff-media-gallery__thumbnails{max-height:29.5rem;flex-direction:column;overflow-y:auto;order:1}}.daff-media-gallery__selected-thumbnail{display:flex;align-items:center;justify-content:center;flex-grow:1;width:100%;order:1}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2;margin:0}}.daff-media-gallery__video-button{width:2rem;height:2rem;border-radius:100%;position:absolute}.daff-media-gallery__video-button:after{content:\"\";position:absolute;width:.75rem;height:.75rem;left:60%;top:50%;transform:translate(-60%,-50%) rotate(90deg);clip-path:polygon(50% 15%,0% 100%,100% 100%);transition:all .4s ease-in-out}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DaffSelectableDirective, selector: "[daffSelected]", inputs: ["selected"], outputs: ["becameSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "_thumbnails", predicate: DaffThumbnailDirective, isSignal: true }], viewQueries: [{ propertyName: "_thumbnailButtons", predicate: ["thumbnailButtons"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }, { directive: i1.DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl role=\"tablist\">\n\t@if(skeleton) {\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t}\n\t@else {\n\t\t@for (thumbnail of _thumbnails(); track thumbnail; let index = $index) {\n\t\t\t<button \n\t\t\t\t#thumbnailButtons\n\t\t\t\tclass=\"daff-thumbnail\" \n\t\t\t\trole=\"tab\"\n\t\t\t\tdaffSelected\n\t\t\t\t[selected]=\"thumbnail === _selectedThumbnail()\"\n\t\t\t\tattr.aria-label=\"{{ thumbnail.label ?? 'Gallery Element ' + (index + 1) }}\"\n\t\t\t\t[attr.aria-selected]=\"thumbnail === _selectedThumbnail() ? 'true' : 'false'\"\n\t\t\t\t[attr.aria-controls]=\"thumbnail.selectedThumbnailId\"\n\t\t\t\t[attr.tabindex]=\"thumbnail === _selectedThumbnail() ? 0 : -1\"\n\t\t\t\t(click)=\"selectIndex(index)\"\n\t\t\t\t[attr.id]=\"thumbnail.id\" \n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t@if (thumbnail.thumbnailSrc) {\n\t\t\t\t\t<img [src]=\"thumbnail.thumbnailSrc\" aria-hidden=\"true\"/>\n\t\t\t\t}\n\t\t\t\t@if (thumbnail.isVideo) {\n\t\t\t\t\t<div class=\"daff-media-gallery__video-button\">\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n@let selectedEl = this._selectedThumbnail();\n<div \n\tclass=\"daff-media-gallery__selected-thumbnail\"\n\ttabindex=\"0\"\n\t#selectedThumbnail\n\trole=\"tabpanel\"\n\t[attr.id]=\"selectedEl?.selectedThumbnailId\">\n\t\t@if(selectedEl) {\n\t\t\t<ng-container *ngTemplateOutlet=\"selectedEl.templateRef\"></ng-container>\n\t\t}\n\t\t@else {\n\t\t\t<div class=\"daff-media-gallery__skeleton-placeholder\"></div>\n\t\t}\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column;gap:.5rem}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;justify-content:center;align-items:center;height:4rem;width:4rem;max-width:100%;overflow:hidden;user-select:none;padding:0;position:relative;flex-shrink:0}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:4.5rem;width:4.5rem}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{flex-direction:column;height:5rem;width:5rem}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail img{display:block;width:100%}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:4rem;width:4rem;border-radius:0}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4rem;width:4rem;position:absolute;top:0;left:0}@media (min-width: 480px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:4.5rem;width:4.5rem;border-radius:0}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4.5rem;width:4.5rem;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:5rem;width:5rem;border-radius:0}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:5rem;width:5rem;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{flex-grow:1;display:flex;position:relative;height:100%;width:100%;border-radius:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:16rem}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:30rem}}.daff-media-gallery__thumbnails{display:flex;flex-direction:row;flex-shrink:0;gap:.25rem;order:2;max-width:100%;overflow-x:auto}@media (min-width: 1024px){.daff-media-gallery__thumbnails{max-height:29.5rem;flex-direction:column;overflow-y:auto;order:1}}.daff-media-gallery__selected-thumbnail{display:flex;align-items:center;justify-content:center;flex-grow:1;width:100%;order:1}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2;margin:0}}.daff-media-gallery__video-button{width:2rem;height:2rem;border-radius:100%;position:absolute}.daff-media-gallery__video-button:after{content:\"\";position:absolute;width:.75rem;height:.75rem;left:60%;top:50%;transform:translate(-60%,-50%) rotate(90deg);clip-path:polygon(50% 15%,0% 100%,100% 100%);transition:all .4s ease-in-out}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DaffSelectableDirective, selector: "[daffSelected]", inputs: ["selected"], outputs: ["becameSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffMediaGalleryComponent, decorators: [{
             type: Component,
@@ -238,7 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         DaffThumbnailDirective,
                         NgTemplateOutlet,
                         DaffSelectableDirective,
-                    ], template: "<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl role=\"tablist\">\n\t@if(skeleton) {\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t}\n\t@else {\n\t\t@for (thumbnail of _thumbnails(); track thumbnail; let index = $index) {\n\t\t\t<button \n\t\t\t\t#thumbnailButtons\n\t\t\t\tclass=\"daff-thumbnail\" \n\t\t\t\trole=\"tab\"\n\t\t\t\tdaffSelected\n\t\t\t\t[selected]=\"thumbnail === _selectedThumbnail()\"\n\t\t\t\tattr.aria-label=\"{{ thumbnail.label ?? 'Gallery Element ' + (index + 1) }}\"\n\t\t\t\t[attr.aria-selected]=\"thumbnail === _selectedThumbnail() ? 'true' : 'false'\"\n\t\t\t\t[attr.aria-controls]=\"thumbnail.selectedThumbnailId\"\n\t\t\t\t[attr.tabindex]=\"thumbnail === _selectedThumbnail() ? 0 : -1\"\n\t\t\t\t(click)=\"selectIndex(index)\"\n\t\t\t\t[attr.id]=\"thumbnail.id\" \n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t@if (thumbnail.thumbnailSrc) {\n\t\t\t\t\t<img [src]=\"thumbnail.thumbnailSrc\" aria-hidden=\"true\"/>\n\t\t\t\t}\n\t\t\t\t@if (thumbnail.isVideo) {\n\t\t\t\t\t<div class=\"daff-media-gallery__video-button\">\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n@let selectedEl = this._selectedThumbnail();\n<div \n\tclass=\"daff-media-gallery__selected-thumbnail\"\n\ttabindex=\"0\"\n\t#selectedThumbnail\n\trole=\"tabpanel\"\n\t[attr.id]=\"selectedEl?.selectedThumbnailId\">\n\t\t@if(selectedEl) {\n\t\t\t<ng-container *ngTemplateOutlet=\"selectedEl.templateRef\"></ng-container>\n\t\t}\n\t\t@else {\n\t\t\t<div class=\"daff-media-gallery__skeleton-placeholder\"></div>\n\t\t}\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column;gap:.5rem}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;justify-content:center;align-items:center;height:4rem;width:4rem;max-width:100%;overflow:hidden;user-select:none;padding:0;position:relative;flex-shrink:0}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:4.5rem;width:4.5rem}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{flex-direction:column;height:5rem;width:5rem}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail img{display:block;width:100%}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4rem;width:4rem;position:absolute;top:0;left:0}@media (min-width: 480px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4.5rem;width:4.5rem;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:5rem;width:5rem;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex;position:relative;flex-grow:1}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:16rem}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:30rem}}.daff-media-gallery__thumbnails{display:flex;flex-direction:row;flex-shrink:0;gap:.25rem;order:2;max-width:100%;overflow-x:auto}@media (min-width: 1024px){.daff-media-gallery__thumbnails{max-height:29.5rem;flex-direction:column;overflow-y:auto;order:1}}.daff-media-gallery__selected-thumbnail{display:flex;align-items:center;justify-content:center;flex-grow:1;width:100%;order:1}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2;margin:0}}.daff-media-gallery__video-button{width:2rem;height:2rem;border-radius:100%;position:absolute}.daff-media-gallery__video-button:after{content:\"\";position:absolute;width:.75rem;height:.75rem;left:60%;top:50%;transform:translate(-60%,-50%) rotate(90deg);clip-path:polygon(50% 15%,0% 100%,100% 100%);transition:all .4s ease-in-out}\n"] }]
+                    ], template: "<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl role=\"tablist\">\n\t@if(skeleton) {\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t}\n\t@else {\n\t\t@for (thumbnail of _thumbnails(); track thumbnail; let index = $index) {\n\t\t\t<button \n\t\t\t\t#thumbnailButtons\n\t\t\t\tclass=\"daff-thumbnail\" \n\t\t\t\trole=\"tab\"\n\t\t\t\tdaffSelected\n\t\t\t\t[selected]=\"thumbnail === _selectedThumbnail()\"\n\t\t\t\tattr.aria-label=\"{{ thumbnail.label ?? 'Gallery Element ' + (index + 1) }}\"\n\t\t\t\t[attr.aria-selected]=\"thumbnail === _selectedThumbnail() ? 'true' : 'false'\"\n\t\t\t\t[attr.aria-controls]=\"thumbnail.selectedThumbnailId\"\n\t\t\t\t[attr.tabindex]=\"thumbnail === _selectedThumbnail() ? 0 : -1\"\n\t\t\t\t(click)=\"selectIndex(index)\"\n\t\t\t\t[attr.id]=\"thumbnail.id\" \n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t@if (thumbnail.thumbnailSrc) {\n\t\t\t\t\t<img [src]=\"thumbnail.thumbnailSrc\" aria-hidden=\"true\"/>\n\t\t\t\t}\n\t\t\t\t@if (thumbnail.isVideo) {\n\t\t\t\t\t<div class=\"daff-media-gallery__video-button\">\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n@let selectedEl = this._selectedThumbnail();\n<div \n\tclass=\"daff-media-gallery__selected-thumbnail\"\n\ttabindex=\"0\"\n\t#selectedThumbnail\n\trole=\"tabpanel\"\n\t[attr.id]=\"selectedEl?.selectedThumbnailId\">\n\t\t@if(selectedEl) {\n\t\t\t<ng-container *ngTemplateOutlet=\"selectedEl.templateRef\"></ng-container>\n\t\t}\n\t\t@else {\n\t\t\t<div class=\"daff-media-gallery__skeleton-placeholder\"></div>\n\t\t}\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column;gap:.5rem}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;justify-content:center;align-items:center;height:4rem;width:4rem;max-width:100%;overflow:hidden;user-select:none;padding:0;position:relative;flex-shrink:0}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:4.5rem;width:4.5rem}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{flex-direction:column;height:5rem;width:5rem}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail img{display:block;width:100%}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:4rem;width:4rem;border-radius:0}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4rem;width:4rem;position:absolute;top:0;left:0}@media (min-width: 480px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:4.5rem;width:4.5rem;border-radius:0}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4.5rem;width:4.5rem;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:5rem;width:5rem;border-radius:0}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:5rem;width:5rem;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{flex-grow:1;display:flex;position:relative;height:100%;width:100%;border-radius:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:16rem}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:30rem}}.daff-media-gallery__thumbnails{display:flex;flex-direction:row;flex-shrink:0;gap:.25rem;order:2;max-width:100%;overflow-x:auto}@media (min-width: 1024px){.daff-media-gallery__thumbnails{max-height:29.5rem;flex-direction:column;overflow-y:auto;order:1}}.daff-media-gallery__selected-thumbnail{display:flex;align-items:center;justify-content:center;flex-grow:1;width:100%;order:1}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2;margin:0}}.daff-media-gallery__video-button{width:2rem;height:2rem;border-radius:100%;position:absolute}.daff-media-gallery__video-button:after{content:\"\";position:absolute;width:.75rem;height:.75rem;left:60%;top:50%;transform:translate(-60%,-50%) rotate(90deg);clip-path:polygon(50% 15%,0% 100%,100% 100%);transition:all .4s ease-in-out}\n"] }]
         }], ctorParameters: () => [{ type: i1.DaffSkeletonableDirective }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']