npm - @daffodil/design - Versions diffs - 0.82.0 → 0.84.0 - Mend

@daffodil/design 0.82.0 → 0.84.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

package/fesm2022/daffodil-design-input-examples.mjs CHANGED Viewed

@@ -1,26 +1,26 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import * as i1 from '@daffodil/design';
-import { DaffInputModule, DaffFormFieldModule } from '@daffodil/design';
-import * as i2 from '@angular/forms';
-import { UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-class BasicInputComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BasicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: BasicInputComponent, isStandalone: true, selector: "basic-input", ngImport: i0, template: "<input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />", dependencies: [{ kind: "ngmodule", type: DaffInputModule }, { kind: "component", type: i1.DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BasicInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'basic-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DaffInputModule], template: "<input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />" }]
-        }] });
+import * as i1 from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import * as i1$1 from '@daffodil/design';
+import { DaffInputComponent, DAFF_FORM_FIELD_COMPONENTS, DaffHintComponent, DaffPrefixSuffixModule } from '@daffodil/design';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faUser, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
 class InputDisabledComponent {
+    constructor() {
+        this.disabled = new UntypedFormControl({ value: '', disabled: true });
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InputDisabledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: InputDisabledComponent, isStandalone: true, selector: "input-disabled", ngImport: i0, template: "<daff-form-field>\n  <input disabled daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />\n</daff-form-field>", dependencies: [{ kind: "ngmodule", type: DaffFormFieldModule }, { kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["formSubmitted"] }, { kind: "ngmodule", type: DaffInputModule }, { kind: "component", type: i1.DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "component", type: i1$1.DaffFormFieldComponent, selector: "daff-form-field" }, { kind: "directive", type: i1$1.DaffFormLabelDirective, selector: "[daffFormLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InputDisabledComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-disabled', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DaffFormFieldModule, DaffInputModule], template: "<daff-form-field>\n  <input disabled daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />\n</daff-form-field>" }]
+            args: [{ selector: 'input-disabled', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        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"] }]
         }] });
 class InputErrorComponent {
@@ -31,31 +31,54 @@ class InputErrorComponent {
         ]);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InputErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: InputErrorComponent, isStandalone: true, selector: "input-error", ngImport: i0, template: "<daff-form-field>\n  <input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" [formControl]=\"control\" />\n</daff-form-field>\n<p>Value: {{ control.value }} </p>", dependencies: [{ kind: "ngmodule", type: DaffFormFieldModule }, { kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["formSubmitted"] }, { kind: "ngmodule", type: DaffInputModule }, { kind: "component", type: i1.DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }, { 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.1.5", 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$1.DaffFormFieldComponent, selector: "daff-form-field" }, { kind: "component", type: i1$1.DaffErrorMessageComponent, selector: "daff-error-message" }, { kind: "directive", type: i1$1.DaffFormLabelDirective, selector: "[daffFormLabel]" }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InputErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input-error', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        DaffFormFieldModule,
-                        DaffInputModule,
+                        DAFF_FORM_FIELD_COMPONENTS,
+                        DaffInputComponent,
+                        DaffHintComponent,
                         ReactiveFormsModule,
-                    ], template: "<daff-form-field>\n  <input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" [formControl]=\"control\" />\n</daff-form-field>\n<p>Value: {{ control.value }} </p>" }]
+                    ], 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"] }]
+        }] });
+class InputHintComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InputHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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$1.DaffFormFieldComponent, selector: "daff-form-field" }, { kind: "directive", type: i1$1.DaffFormLabelDirective, selector: "[daffFormLabel]" }, { kind: "component", type: i1$1.DaffHintComponent, selector: "daff-hint" }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InputHintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-hint', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        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"] }]
         }] });
 class InputWithFormFieldComponent {
+    constructor() {
+        this.faUser = faUser;
+        this.faCircleXmark = faCircleXmark;
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InputWithFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: InputWithFormFieldComponent, isStandalone: true, selector: "input-with-form-field", ngImport: i0, template: "<daff-form-field>\n  <input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />\n</daff-form-field>\n", dependencies: [{ kind: "ngmodule", type: DaffFormFieldModule }, { kind: "component", type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["formSubmitted"] }, { kind: "ngmodule", type: DaffInputModule }, { kind: "component", type: i1.DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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$1.DaffFormFieldComponent, selector: "daff-form-field" }, { kind: "directive", type: i1$1.DaffFormLabelDirective, selector: "[daffFormLabel]" }, { kind: "directive", type: i1$1.DaffPrefixDirective, selector: "[daffPrefix]" }, { kind: "directive", type: i1$1.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InputWithFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-with-form-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DaffFormFieldModule, DaffInputModule], template: "<daff-form-field>\n  <input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />\n</daff-form-field>\n" }]
+            args: [{ selector: 'input-with-form-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DAFF_FORM_FIELD_COMPONENTS,
+                        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"] }]
         }] });
 const INPUT_EXAMPLES = [
-    BasicInputComponent,
     InputWithFormFieldComponent,
     InputDisabledComponent,
     InputErrorComponent,
+    InputHintComponent,
 ];
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"daffodil-design-input-examples.mjs","sources":["../../../libs/design/input/examples/src/basic-input/basic-input.component.ts","../../../libs/design/input/examples/src/basic-input/basic-input.component.html","../../../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-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';\n\nimport { DaffInputModule } from '@daffodil/design';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'basic-input',\n templateUrl: './basic-input.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [DaffInputModule],\n})\nexport class BasicInputComponent {\n\n}\n","<input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\nimport {\n DaffFormFieldModule,\n DaffInputModule,\n} from '@daffodil/design';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'input-disabled',\n templateUrl: './input-disabled.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [DaffFormFieldModule, DaffInputModule],\n})\nexport class InputDisabledComponent {\n\n}\n","<daff-form-field>\n <input disabled daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />\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 DaffFormFieldModule,\n DaffInputModule,\n} from '@daffodil/design';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'input-error',\n templateUrl: './input-error.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n DaffFormFieldModule,\n DaffInputModule,\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 <input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" [formControl]=\"control\" />\n</daff-form-field>\n<p>Value: {{ control.value }} </p>","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\nimport {\n DaffFormFieldModule,\n DaffInputModule,\n} from '@daffodil/design';\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 changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [DaffFormFieldModule, DaffInputModule],\n})\nexport class InputWithFormFieldComponent {\n\n}\n","<daff-form-field>\n <input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />\n</daff-form-field>\n","import { BasicInputComponent } from './basic-input/basic-input.component';\nimport { InputDisabledComponent } from './input-disabled/input-disabled.component';\nimport { InputErrorComponent } from './input-error/input-error.component';\nimport { InputWithFormFieldComponent } from './input-with-form-field/input-with-form-field.component';\n\nexport const INPUT_EXAMPLES = [\n BasicInputComponent,\n InputWithFormFieldComponent,\n InputDisabledComponent,\n InputErrorComponent,\n];\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
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-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 {\n DAFF_FORM_FIELD_COMPONENTS,\n DaffInputComponent,\n} from '@daffodil/design';\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 DaffInputComponent,\n} from '@daffodil/design';\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 DaffInputComponent,\n} from '@daffodil/design';\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 { 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 DaffInputComponent,\n DaffPrefixSuffixModule,\n} from '@daffodil/design';\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 { 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];\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i2","i1"],"mappings":"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"}

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

@@ -13,7 +13,7 @@ provider: provideDaffMediaGalleryToken, } = createSingleInjectionToken('DAFF_MED
 let uniqueThumbnailId = 0;
 /**
- * A structural directive marking thumbnails for the `DaffMediaGalleryComponent`.
+ * DaffThumbnailDirective is a structural directive used to mark elements as thumbnails within the `DaffMediaGalleryComponent`.
  *
  * ```html
  * <ng-template daffThumbnail></ng-template>
@@ -21,31 +21,42 @@ let uniqueThumbnailId = 0;
  */
 class DaffThumbnailDirective {
     /**
-     * The id of the thumbnail.
+     * @docs-private
+     *
+     * The autogenerated unique id for a thumbnail.
      */
     get id() {
-        return this.gallery.id + '-thumbnail-' + uniqueThumbnailId;
+        return this.gallery.id + '-thumbnail-' + this._increment;
     }
     /**
-     * The id of the thumbnail panel.
+     * @docs-private
+     *
+     * The unique id of the selected thumbnail.
      */
-    get panelId() {
-        return this.id + '-el';
+    get selectedThumbnailId() {
+        return this.id + '-selected';
     }
+    constructor(
+    /**
+     * @docs-private
+     */
+    gallery,
     /**
      * @docs-private
      */
-    constructor(gallery, templateRef) {
+    templateRef) {
         this.gallery = gallery;
         this.templateRef = templateRef;
+        this._increment = uniqueThumbnailId;
         /**
          * The file path to a thumbnail, presumably an image.
          */
         this.thumbnailSrc = undefined;
         /**
-         * The button label for the thumbnail.
+         * Provides an accessible label for a thumbnail.
          */
         this.label = undefined;
+        /** Indicates whether the thumbnail represents a video. */
         this.isVideo = false;
         uniqueThumbnailId++;
     }
@@ -78,13 +89,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 let uniqueGalleryId = 0;
 /**
+ * The `DaffMediaGalleryComonent` is used to display a group of thumbnails in a gallery format.
+ *
  * ```html
- * <daff-media-gallery></daff-media-gallery>
+ * <daff-media-gallery>
+ *  <ng-template daffThumbnail thumbnailSrc="/thumbnail-path.jpg" label="Your description">
+ *    <daff-image src="/image-path.jpg" alt="Your description" width="100" height="100"></daff-image>
+ *  </ng-template>
+ * </daff-media-gallery>
  * ```
  */
 class DaffMediaGalleryComponent {
     /**
-     * The id of the gallery.
+     * Custom ID for the media gallery that overrides the auto-generated one. When using this input, it is your responsibility to ensure that the ID is unique.
      */
     get id() {
         return this._id;
@@ -105,6 +122,10 @@ class DaffMediaGalleryComponent {
          * @docs-private
          */
         this.role = 'tablist';
+        /**
+         * The internal ID of the gallery.
+         */
+        this._id = 'media-gallery-' + uniqueGalleryId;
         /**
          * @docs-private
          *
@@ -144,7 +165,9 @@ class DaffMediaGalleryComponent {
         this._thumbnailButtons.get(this._selectedIndex())?.nativeElement.focus();
     }
     /**
-     * Select a specific entry in the media gallery by its index (starting at 0).
+     * Select a specific entry in the media gallery by its index.
+     *
+     * @param index The index to set, starting at 0.
      */
     selectIndex(index) {
         this._selectedIndex.set(index);
@@ -152,41 +175,57 @@ class DaffMediaGalleryComponent {
     }
     /**
      * Navigate to the next element in the list of thumbnails.
+     *
+     * @param focus Whether to move focus to the newly selected item.
      */
     next(focus = true) {
         this._selectedIndex.update((curr) => ((curr ?? 0) + 1 + this._thumbnails().length) % this._thumbnails().length);
         this.elementChange.emit(this._selectedIndex());
-        this.focusSelected();
+        if (focus) {
+            this.focusSelected();
+        }
     }
     /**
      * Navigate to the previous element in the list of thumbnails.
+     *
+     * @param focus Whether to move focus to the newly selected item.
      */
     previous(focus = true) {
         this._selectedIndex.update((curr) => ((curr ?? 0) - 1 + this._thumbnails().length) % this._thumbnails().length);
         this.elementChange.emit(this._selectedIndex());
-        this.focusSelected();
+        if (focus) {
+            this.focusSelected();
+        }
     }
     /**
-     * Select the first element
+     * Select the first element.
+     *
+     * @param focus Whether to move focus to the newly selected item.
      */
     selectFirst(focus = true) {
         this._selectedIndex.set(0);
         this.elementChange.emit(this._selectedIndex());
-        this.focusSelected();
+        if (focus) {
+            this.focusSelected();
+        }
     }
     /**
      * Select the last element of the gallery.
+     *
+     * @param Whether to move focus to the newly selected item.
      */
     selectLast(focus = true) {
         this._selectedIndex.set(this._thumbnails().length - 1);
         this.elementChange.emit(this._selectedIndex());
-        this.focusSelected();
+        if (focus) {
+            this.focusSelected();
+        }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMediaGalleryComponent, deps: [{ token: i1.DaffSkeletonableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: DaffMediaGalleryComponent, isStandalone: true, selector: "daff-media-gallery", inputs: { id: "id" }, outputs: { elementChange: "elementChange" }, host: { properties: { "attr.role": "this.role", "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>\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.panelId\"\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 el = this._selectedThumbnail();\n<div \n\tclass=\"daff-media-gallery__selected-thumbnail\"\n\ttabindex=\"0\"\n\t#selectedThumbnail\n\trole=\"tabpanel\"\n\t[attr.id]=\"el?.panelId\">\n\t\t@if(el) {\n\t\t\t<ng-container *ngTemplateOutlet=\"el.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}}@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}}: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}: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>\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMediaGalleryComponent, decorators: [{
             type: Component,
@@ -203,7 +242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         DaffThumbnailDirective,
                         NgTemplateOutlet,
                         DaffSelectableDirective,
-                    ], template: "<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl>\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.panelId\"\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 el = this._selectedThumbnail();\n<div \n\tclass=\"daff-media-gallery__selected-thumbnail\"\n\ttabindex=\"0\"\n\t#selectedThumbnail\n\trole=\"tabpanel\"\n\t[attr.id]=\"el?.panelId\">\n\t\t@if(el) {\n\t\t\t<ng-container *ngTemplateOutlet=\"el.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}}@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}}: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}: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>\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"] }]
         }], ctorParameters: () => [{ type: i1.DaffSkeletonableDirective }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']

package/fesm2022/daffodil-design-media-gallery.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"daffodil-design-media-gallery.mjs","sources":["../../../libs/design/media-gallery/src/helpers/media-gallery-token.ts","../../../libs/design/media-gallery/src/thumbnail/thumbnail.directive.ts","../../../libs/design/media-gallery/src/media-gallery/media-gallery.component.ts","../../../libs/design/media-gallery/src/media-gallery/media-gallery.component.html","../../../libs/design/media-gallery/src/media-gallery.module.ts","../../../libs/design/media-gallery/src/media-gallery.ts","../../../libs/design/media-gallery/src/daffodil-design-media-gallery.ts"],"sourcesContent":["import { createSingleInjectionToken } from '@daffodil/core';\n\nimport { DaffMediaGalleryRegistration } from './media-gallery-registration.interface';\n\nexport const {\n token: DAFF_MEDIA_GALLERY_TOKEN,\n /*\n Provider function for {@link DAFF_MEDIA_GALLERY_TOKEN}.\n /\n provider: provideDaffMediaGalleryToken,\n} = createSingleInjectionToken<DaffMediaGalleryRegistration>('DAFF_MEDIA_GALLERY_TOKEN');\n","import {\n Directive,\n Inject,\n Input,\n TemplateRef,\n OnInit,\n isDevMode,\n} from '@angular/core';\n\nimport { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';\nimport { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';\n\nlet uniqueThumbnailId = 0;\n\n/\n A structural directive marking thumbnails for the `DaffMediaGalleryComponent`.\n \n ```html\n * <ng-template daffThumbnail></ng-template>\n * ```\n /\n@Directive({\n selector: '[daffThumbnail]',\n})\nexport class DaffThumbnailDirective implements OnInit {\n\n /\n The id of the thumbnail.\n /\n get id(): string {\n return this.gallery.id + '-thumbnail-' + uniqueThumbnailId;\n }\n\n /\n The id of the thumbnail panel.\n /\n get panelId(): string {\n return this.id + '-el';\n }\n\n /\n The file path to a thumbnail, presumably an image.\n /\n @Input() thumbnailSrc = undefined;\n\n\n /\n The button label for the thumbnail.\n /\n @Input() label: string = undefined;\n\n @Input() isVideo = false;\n\n /\n @docs-private\n /\n constructor(\n @Inject(DAFF_MEDIA_GALLERY_TOKEN) public gallery: DaffMediaGalleryRegistration,\n public templateRef: TemplateRef<unknown>,\n ) {\n uniqueThumbnailId++;\n }\n\n /\n @docs-private\n /\n ngOnInit() {\n if(!this.label && isDevMode()) {\n console.warn('The thumbnail ' + this.id + ' is missing a label.');\n }\n }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n Input,\n QueryList,\n ViewChildren,\n ElementRef,\n Output,\n EventEmitter,\n contentChildren,\n signal,\n computed,\n Signal,\n} from '@angular/core';\n\nimport {\n DaffArticleEncapsulatedDirective,\n DaffSelectableDirective,\n DaffSkeletonableDirective,\n} from '@daffodil/design';\n\nimport { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';\nimport { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';\nimport { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';\n\nlet uniqueGalleryId = 0;\n\n/\n ```html\n * <daff-media-gallery></daff-media-gallery>\n * ```\n /\n@Component({\n selector: 'daff-media-gallery',\n templateUrl: './media-gallery.component.html',\n styleUrls: ['./media-gallery.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },\n ],\n hostDirectives: [\n { directive: DaffArticleEncapsulatedDirective },\n {\n directive: DaffSkeletonableDirective,\n inputs: ['skeleton'],\n },\n ],\n imports: [\n DaffThumbnailDirective,\n NgTemplateOutlet,\n DaffSelectableDirective,\n ],\n})\nexport class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration {\n\n /\n @docs-private\n /\n @HostBinding('attr.role') role = 'tablist';\n\n /\n The internal id of the gallery.\n /\n private _id: string;\n\n /\n The id of the gallery.\n /\n @HostBinding('attr.id')\n @Input()\n get id() {\n return this._id;\n }\n set id(val: string \| undefined \| null) {\n if(!val){\n return;\n }\n this._id = val;\n };\n\n /\n @docs-private\n \n Adds a class for styling the media gallery\n /\n @HostBinding('class.daff-media-gallery') private class = true;\n\n /\n An event indicating that the selected media gallery element has changed.\n /\n @Output() elementChange: EventEmitter<number> = new EventEmitter<number>();\n\n /\n @docs-private\n /\n _thumbnails = contentChildren(DaffThumbnailDirective);\n\n /\n @docs-private\n /\n @ViewChildren('thumbnailButtons', { read: ElementRef }) private _thumbnailButtons: QueryList<ElementRef<HTMLElement>>;\n\n /\n @docs-private\n /\n constructor(private skeletonDirective: DaffSkeletonableDirective) {\n uniqueGalleryId++;\n }\n\n /\n @docs-private\n \n Whether or not the component its currently displaying its skeleton state.\n /\n get skeleton() {\n return this.skeletonDirective.skeleton;\n }\n\n /\n @docs-private\n /\n _selectedThumbnail: Signal<DaffThumbnailDirective> = computed(() => {\n const idx = this._selectedIndex();\n if(!idx) {\n return this._thumbnails().at(0);\n }\n return this._thumbnails().at(idx);\n });\n\n private _selectedIndex = signal<number \| null>(null);\n\n\n private focusSelected() {\n this._thumbnailButtons.get(this._selectedIndex())?.nativeElement.focus();\n }\n\n /\n Select a specific entry in the media gallery by its index (starting at 0).\n /\n selectIndex(index: number) {\n this._selectedIndex.set(index);\n this.elementChange.emit(index);\n }\n\n /\n Navigate to the next element in the list of thumbnails.\n /\n next(focus: boolean = true) {\n this._selectedIndex.update((curr) => ((curr ?? 0) + 1 + this._thumbnails().length) % this._thumbnails().length);\n this.elementChange.emit(this._selectedIndex());\n this.focusSelected();\n }\n\n /\n Navigate to the previous element in the list of thumbnails.\n /\n previous(focus: boolean = true) {\n this._selectedIndex.update((curr) => ((curr ?? 0) - 1 + this._thumbnails().length) % this._thumbnails().length);\n this.elementChange.emit(this._selectedIndex());\n this.focusSelected();\n }\n\n /\n Select the first element\n /\n selectFirst(focus: boolean = true) {\n this._selectedIndex.set(0);\n this.elementChange.emit(this._selectedIndex());\n this.focusSelected();\n }\n\n /\n Select the last element of the gallery.\n /\n selectLast(focus: boolean = true) {\n this._selectedIndex.set(this._thumbnails().length - 1);\n this.elementChange.emit(this._selectedIndex());\n this.focusSelected();\n }\n}\n","<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl>\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.panelId\"\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 el = this._selectedThumbnail();\n<div \n\tclass=\"daff-media-gallery__selected-thumbnail\"\n\ttabindex=\"0\"\n\t#selectedThumbnail\n\trole=\"tabpanel\"\n\t[attr.id]=\"el?.panelId\">\n\t\t@if(el) {\n\t\t\t<ng-container ngTemplateOutlet=\"el.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>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';\nimport { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';\n\n/*\n @deprecated in favor of {@link DAFF_MEDIA_GALLERY_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n /\n@NgModule({\n imports: [\n CommonModule,\n DaffMediaGalleryComponent,\n DaffThumbnailDirective,\n ],\n exports: [\n DaffMediaGalleryComponent,\n DaffThumbnailDirective,\n ],\n})\nexport class DaffMediaGalleryModule {}\n","import { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';\nimport { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';\n\n/\n @docs-private\n /\nexport const DAFF_MEDIA_GALLERY_COMPONENTS = <const> [\n DaffMediaGalleryComponent,\n DaffThumbnailDirective,\n];\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"daffodil-design-media-gallery.mjs","sources":["../../../libs/design/media-gallery/src/helpers/media-gallery-token.ts","../../../libs/design/media-gallery/src/thumbnail/thumbnail.directive.ts","../../../libs/design/media-gallery/src/media-gallery/media-gallery.component.ts","../../../libs/design/media-gallery/src/media-gallery/media-gallery.component.html","../../../libs/design/media-gallery/src/media-gallery.module.ts","../../../libs/design/media-gallery/src/media-gallery.ts","../../../libs/design/media-gallery/src/daffodil-design-media-gallery.ts"],"sourcesContent":["import { createSingleInjectionToken } from '@daffodil/core';\n\nimport { DaffMediaGalleryRegistration } from './media-gallery-registration.interface';\n\nexport const {\n token: DAFF_MEDIA_GALLERY_TOKEN,\n /*\n Provider function for {@link DAFF_MEDIA_GALLERY_TOKEN}.\n /\n provider: provideDaffMediaGalleryToken,\n} = createSingleInjectionToken<DaffMediaGalleryRegistration>('DAFF_MEDIA_GALLERY_TOKEN');\n","import {\n Directive,\n Inject,\n Input,\n TemplateRef,\n OnInit,\n isDevMode,\n} from '@angular/core';\n\nimport { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';\nimport { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';\n\nlet uniqueThumbnailId = 0;\n\n/\n DaffThumbnailDirective is a structural directive used to mark elements as thumbnails within the `DaffMediaGalleryComponent`.\n \n ```html\n * <ng-template daffThumbnail></ng-template>\n * ```\n /\n@Directive({\n selector: '[daffThumbnail]',\n})\nexport class DaffThumbnailDirective implements OnInit {\n\n private _increment = uniqueThumbnailId;\n\n /\n @docs-private\n \n The autogenerated unique id for a thumbnail.\n /\n get id(): string {\n return this.gallery.id + '-thumbnail-' + this._increment;\n }\n\n /\n @docs-private\n \n The unique id of the selected thumbnail.\n /\n get selectedThumbnailId(): string {\n return this.id + '-selected';\n }\n\n /\n The file path to a thumbnail, presumably an image.\n /\n @Input() thumbnailSrc = undefined;\n\n /\n Provides an accessible label for a thumbnail.\n /\n @Input() label: string = undefined;\n\n /* Indicates whether the thumbnail represents a video. /\n @Input() isVideo = false;\n\n constructor(\n /\n @docs-private\n /\n @Inject(DAFF_MEDIA_GALLERY_TOKEN) public gallery: DaffMediaGalleryRegistration,\n /\n @docs-private\n /\n public templateRef: TemplateRef<unknown>,\n ) {\n uniqueThumbnailId++;\n }\n\n /\n @docs-private\n /\n ngOnInit() {\n if(!this.label && isDevMode()) {\n console.warn('The thumbnail ' + this.id + ' is missing a label.');\n }\n }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n Input,\n QueryList,\n ViewChildren,\n ElementRef,\n Output,\n EventEmitter,\n contentChildren,\n signal,\n computed,\n Signal,\n} from '@angular/core';\n\nimport {\n DaffArticleEncapsulatedDirective,\n DaffSelectableDirective,\n DaffSkeletonableDirective,\n} from '@daffodil/design';\n\nimport { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';\nimport { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';\nimport { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';\n\nlet uniqueGalleryId = 0;\n\n/\n The `DaffMediaGalleryComonent` is used to display a group of thumbnails in a gallery format.\n \n ```html\n * <daff-media-gallery>\n * <ng-template daffThumbnail thumbnailSrc=\"/thumbnail-path.jpg\" label=\"Your description\">\n * <daff-image src=\"/image-path.jpg\" alt=\"Your description\" width=\"100\" height=\"100\"></daff-image>\n * </ng-template>\n * </daff-media-gallery>\n * ```\n /\n@Component({\n selector: 'daff-media-gallery',\n templateUrl: './media-gallery.component.html',\n styleUrls: ['./media-gallery.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },\n ],\n hostDirectives: [\n { directive: DaffArticleEncapsulatedDirective },\n {\n directive: DaffSkeletonableDirective,\n inputs: ['skeleton'],\n },\n ],\n imports: [\n DaffThumbnailDirective,\n NgTemplateOutlet,\n DaffSelectableDirective,\n ],\n})\nexport class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration {\n\n /\n @docs-private\n /\n @HostBinding('attr.role') role = 'tablist';\n\n /\n The internal ID of the gallery.\n /\n private _id = 'media-gallery-' + uniqueGalleryId;\n\n /\n Custom ID for the media gallery that overrides the auto-generated one. When using this input, it is your responsibility to ensure that the ID is unique.\n /\n @HostBinding('attr.id')\n @Input()\n get id() {\n return this._id;\n }\n set id(val: string \| undefined \| null) {\n if(!val){\n return;\n }\n this._id = val;\n };\n\n /\n @docs-private\n \n Adds a class for styling the media gallery\n /\n @HostBinding('class.daff-media-gallery') private class = true;\n\n /\n An event indicating that the selected media gallery element has changed.\n /\n @Output() elementChange: EventEmitter<number> = new EventEmitter<number>();\n\n /\n @docs-private\n /\n _thumbnails = contentChildren(DaffThumbnailDirective);\n\n /\n @docs-private\n /\n @ViewChildren('thumbnailButtons', { read: ElementRef }) private _thumbnailButtons: QueryList<ElementRef<HTMLElement>>;\n\n /\n @docs-private\n /\n constructor(private skeletonDirective: DaffSkeletonableDirective) {\n uniqueGalleryId++;\n }\n\n /\n @docs-private\n \n Whether or not the component its currently displaying its skeleton state.\n /\n get skeleton() {\n return this.skeletonDirective.skeleton;\n }\n\n /\n @docs-private\n /\n _selectedThumbnail: Signal<DaffThumbnailDirective> = computed(() => {\n const idx = this._selectedIndex();\n if(!idx) {\n return this._thumbnails().at(0);\n }\n return this._thumbnails().at(idx);\n });\n\n private _selectedIndex = signal<number \| null>(null);\n\n private focusSelected() {\n this._thumbnailButtons.get(this._selectedIndex())?.nativeElement.focus();\n }\n\n /\n Select a specific entry in the media gallery by its index.\n \n @param index The index to set, starting at 0.\n /\n selectIndex(index: number) {\n this._selectedIndex.set(index);\n this.elementChange.emit(index);\n }\n\n /\n Navigate to the next element in the list of thumbnails.\n \n @param focus Whether to move focus to the newly selected item.\n /\n next(focus: boolean = true) {\n this._selectedIndex.update((curr) => ((curr ?? 0) + 1 + this._thumbnails().length) % this._thumbnails().length);\n this.elementChange.emit(this._selectedIndex());\n\n if(focus) {\n this.focusSelected();\n }\n }\n\n /\n Navigate to the previous element in the list of thumbnails.\n \n @param focus Whether to move focus to the newly selected item.\n /\n previous(focus: boolean = true) {\n this._selectedIndex.update((curr) => ((curr ?? 0) - 1 + this._thumbnails().length) % this._thumbnails().length);\n this.elementChange.emit(this._selectedIndex());\n\n if(focus) {\n this.focusSelected();\n }\n }\n\n /\n Select the first element.\n \n @param focus Whether to move focus to the newly selected item.\n /\n selectFirst(focus: boolean = true) {\n this._selectedIndex.set(0);\n this.elementChange.emit(this._selectedIndex());\n\n if(focus) {\n this.focusSelected();\n }\n }\n\n /\n Select the last element of the gallery.\n \n @param Whether to move focus to the newly selected item.\n /\n selectLast(focus: boolean = true) {\n this._selectedIndex.set(this._thumbnails().length - 1);\n this.elementChange.emit(this._selectedIndex());\n\n if(focus) {\n this.focusSelected();\n }\n }\n}\n","<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl>\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>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';\nimport { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';\n\n/*\n @deprecated in favor of {@link DAFF_MEDIA_GALLERY_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n /\n@NgModule({\n imports: [\n CommonModule,\n DaffMediaGalleryComponent,\n DaffThumbnailDirective,\n ],\n exports: [\n DaffMediaGalleryComponent,\n DaffThumbnailDirective,\n ],\n})\nexport class DaffMediaGalleryModule {}\n","import { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';\nimport { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';\n\n/\n @docs-private\n /\nexport const DAFF_MEDIA_GALLERY_COMPONENTS = <const> [\n DaffMediaGalleryComponent,\n DaffThumbnailDirective,\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-menu.mjs CHANGED Viewed

@@ -4,9 +4,9 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
 import { Type, TemplateRef, Injectable, Directive, HostBinding, Input, HostListener, Component, ChangeDetectionStrategy, ContentChild, NgModule } from '@angular/core';
 import { BehaviorSubject, map, Subject, takeUntil, fromEvent, filter } from 'rxjs';
-import { NgIf, CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/cdk/a11y';
-import { DaffPrefixDirective, DaffPrefixSuffixModule, daffFocusableElementsSelector } from '@daffodil/design';
+import { DaffPrefixDirective, daffFocusableElementsSelector } from '@daffodil/design';
 function daffMenuCreateOverlay(overlay, element, config = {}) {
     return overlay.create({
@@ -84,6 +84,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Injector }] });
 class DaffMenuActivatorDirective {
+    /**
+     * @docs-private
+     */
     get openClass() {
         return this._open;
     }
@@ -141,15 +144,12 @@ class DaffMenuItemComponent {
         this.role = 'menuitem';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffMenuItemComponent, isStandalone: true, selector: "a[daff-menu-item],button[daff-menu-item]", host: { properties: { "class.daff-menu-item": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-menu-item__content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;border:none;border-radius:4px;margin:0;padding:12px 16px;text-decoration:none;width:100%}.daff-menu-item__content{font-size:1rem;line-height:1.25rem;text-align:left}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DaffPrefixSuffixModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: DaffMenuItemComponent, isStandalone: true, selector: "a[daff-menu-item],button[daff-menu-item]", host: { properties: { "class.daff-menu-item": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }], ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-menu-item__content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;border:none;border-radius:4px;margin:0;padding:12px 16px;text-decoration:none;width:100%}.daff-menu-item__content{font-size:1rem;line-height:1.25rem;text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[daff-menu-item]' + ',' +
-                        'button[daff-menu-item]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
-                        DaffPrefixSuffixModule,
-                    ], template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-menu-item__content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;border:none;border-radius:4px;margin:0;padding:12px 16px;text-decoration:none;width:100%}.daff-menu-item__content{font-size:1rem;line-height:1.25rem;text-align:left}\n"] }]
+                        'button[daff-menu-item]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-menu-item__content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;border:none;border-radius:4px;margin:0;padding:12px 16px;text-decoration:none;width:100%}.daff-menu-item__content{font-size:1rem;line-height:1.25rem;text-align:left}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-menu-item']
@@ -167,8 +167,17 @@ class DaffMenuComponent {
         this._ngZone = _ngZone;
         this._elementRef = _elementRef;
         this.menuService = menuService;
+        /**
+         * @docs-private
+         */
         this.class = true;
+        /**
+         * @docs-private
+         */
         this.tabindex = 0;
+        /**
+         * @docs-private
+         */
         this.role = 'menu';
         /**
          * Listen to `keydown` events outside the zone so that change detection is not run every
@@ -184,9 +193,15 @@ class DaffMenuComponent {
             }));
         });
     }
+    /**
+     * @docs-private
+     */
     ngAfterContentInit() {
         this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
     }
+    /**
+     * @docs-private
+     */
     ngAfterViewInit() {
         const focusableChild = this._elementRef.nativeElement.querySelector(daffFocusableElementsSelector);
         if (focusableChild) {
@@ -230,9 +245,7 @@ class DaffMenuModule {
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMenuModule, providers: [
             DaffMenuService,
         ], imports: [CommonModule,
-            OverlayModule,
-            DaffMenuComponent,
-            DaffMenuItemComponent] }); }
+            OverlayModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMenuModule, decorators: [{
             type: NgModule,