@daffodil/design 0.59.0 → 0.59.1

package/fesm2015/daffodil-design-input-examples.mjs

@@ -0,0 +1,153 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i1 from '@daffodil/design';
+import { DaffFormFieldModule, DaffInputModule } from '@daffodil/design';
+import * as i2 from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+
+class BasicInputComponent {
+}
+/** @nocollapse */ BasicInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BasicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ BasicInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: BasicInputComponent, selector: "basic-input", ngImport: i0, template: "<input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />", components: [{ type: i1.DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BasicInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />" }]
+        }] });
+
+class BasicInputModule {
+}
+/** @nocollapse */ BasicInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BasicInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ BasicInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BasicInputModule, declarations: [BasicInputComponent], imports: [DaffFormFieldModule,
+        DaffInputModule] });
+/** @nocollapse */ BasicInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BasicInputModule, imports: [[
+            DaffFormFieldModule,
+            DaffInputModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BasicInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        DaffFormFieldModule,
+                        DaffInputModule,
+                    ],
+                    declarations: [
+                        BasicInputComponent,
+                    ],
+                }]
+        }] });
+
+class InputDisabledComponent {
+}
+/** @nocollapse */ InputDisabledComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputDisabledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ InputDisabledComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: InputDisabledComponent, selector: "input-disabled", ngImport: i0, template: "<daff-form-field>\n  <input disabled daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />\n</daff-form-field>", components: [{ type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["formSubmitted"] }, { type: i1.DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputDisabledComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-disabled', changeDetection: ChangeDetectionStrategy.OnPush, template: "<daff-form-field>\n  <input disabled daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />\n</daff-form-field>" }]
+        }] });
+
+class InputDisabledModule {
+}
+/** @nocollapse */ InputDisabledModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputDisabledModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ InputDisabledModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputDisabledModule, declarations: [InputDisabledComponent], imports: [DaffFormFieldModule,
+        DaffInputModule] });
+/** @nocollapse */ InputDisabledModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputDisabledModule, imports: [[
+            DaffFormFieldModule,
+            DaffInputModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputDisabledModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        DaffFormFieldModule,
+                        DaffInputModule,
+                    ],
+                    declarations: [
+                        InputDisabledComponent,
+                    ],
+                }]
+        }] });
+
+class InputErrorComponent {
+    constructor() {
+        this.control = new FormControl('test@example.com', [
+            Validators.email,
+            Validators.required,
+        ]);
+    }
+}
+/** @nocollapse */ InputErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ InputErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: InputErrorComponent, 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>", components: [{ type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["formSubmitted"] }, { type: i1.DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }], directives: [{ 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-error', changeDetection: ChangeDetectionStrategy.OnPush, 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>" }]
+        }] });
+
+class InputErrorModule {
+}
+/** @nocollapse */ InputErrorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ InputErrorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorModule, declarations: [InputErrorComponent], imports: [DaffFormFieldModule,
+        DaffInputModule,
+        ReactiveFormsModule] });
+/** @nocollapse */ InputErrorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorModule, imports: [[
+            DaffFormFieldModule,
+            DaffInputModule,
+            ReactiveFormsModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        DaffFormFieldModule,
+                        DaffInputModule,
+                        ReactiveFormsModule,
+                    ],
+                    declarations: [
+                        InputErrorComponent,
+                    ],
+                }]
+        }] });
+
+class InputWithFormFieldComponent {
+}
+/** @nocollapse */ InputWithFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputWithFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ InputWithFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: InputWithFormFieldComponent, 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", components: [{ type: i1.DaffFormFieldComponent, selector: "daff-form-field", inputs: ["formSubmitted"] }, { type: i1.DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputWithFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-with-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<daff-form-field>\n  <input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />\n</daff-form-field>\n" }]
+        }] });
+
+class InputWithFormFieldModule {
+}
+/** @nocollapse */ InputWithFormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputWithFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ InputWithFormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputWithFormFieldModule, declarations: [InputWithFormFieldComponent], imports: [DaffFormFieldModule,
+        DaffInputModule] });
+/** @nocollapse */ InputWithFormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputWithFormFieldModule, imports: [[
+            DaffFormFieldModule,
+            DaffInputModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputWithFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        DaffFormFieldModule,
+                        DaffInputModule,
+                    ],
+                    declarations: [
+                        InputWithFormFieldComponent,
+                    ],
+                }]
+        }] });
+
+const INPUT_EXAMPLES = [
+    { component: BasicInputComponent, module: BasicInputModule },
+    { component: InputWithFormFieldComponent, module: InputWithFormFieldModule },
+    { component: InputDisabledComponent, module: InputDisabledModule },
+    { component: InputErrorComponent, module: InputErrorModule },
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { INPUT_EXAMPLES };
+//# sourceMappingURL=daffodil-design-input-examples.mjs.map

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

@@ -0,0 +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/basic-input/basic-input.module.ts","../../../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-disabled/input-disabled.module.ts","../../../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-error/input-error.module.ts","../../../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/input-with-form-field/input-with-form-field.module.ts","../../../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\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})\nexport class BasicInputComponent {\n\n}\n","<input daff-input type=\"text\" placeholder=\"Email\" name=\"email\" />","import { NgModule } from '@angular/core';\n\nimport {\n  DaffFormFieldModule,\n  DaffInputModule,\n} from '@daffodil/design';\n\nimport { BasicInputComponent } from './basic-input.component';\n\n@NgModule({\n  imports: [\n    DaffFormFieldModule,\n    DaffInputModule,\n  ],\n  declarations: [\n    BasicInputComponent,\n  ],\n})\nexport class BasicInputModule {\n\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\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})\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 { NgModule } from '@angular/core';\n\nimport {\n  DaffFormFieldModule,\n  DaffInputModule,\n} from '@daffodil/design';\n\nimport { InputDisabledComponent } from './input-disabled.component';\n\n@NgModule({\n  imports: [\n    DaffFormFieldModule,\n    DaffInputModule,\n  ],\n  declarations: [\n    InputDisabledComponent,\n  ],\n})\nexport class InputDisabledModule {\n\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  FormControl,\n  Validators,\n} from '@angular/forms';\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})\nexport class InputErrorComponent {\n  control: FormControl = new FormControl('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 { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport {\n  DaffFormFieldModule,\n  DaffInputModule,\n} from '@daffodil/design';\n\nimport { InputErrorComponent } from './input-error.component';\n\n@NgModule({\n  imports: [\n    DaffFormFieldModule,\n    DaffInputModule,\n    ReactiveFormsModule,\n  ],\n  declarations: [\n    InputErrorComponent,\n  ],\n})\nexport class InputErrorModule {\n\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\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})\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 { NgModule } from '@angular/core';\n\nimport {\n  DaffFormFieldModule,\n  DaffInputModule,\n} from '@daffodil/design';\n\nimport { InputWithFormFieldComponent } from './input-with-form-field.component';\n\n@NgModule({\n  imports: [\n    DaffFormFieldModule,\n    DaffInputModule,\n  ],\n  declarations: [\n    InputWithFormFieldComponent,\n  ],\n})\nexport class InputWithFormFieldModule {\n\n}\n","import { ComponentExampleWithModule } from '@daffodil/design';\n\nimport { BasicInputComponent } from './basic-input/basic-input.component';\nimport { BasicInputModule } from './basic-input/basic-input.module';\nimport { InputDisabledComponent } from './input-disabled/input-disabled.component';\nimport { InputDisabledModule } from './input-disabled/input-disabled.module';\nimport { InputErrorComponent } from './input-error/input-error.component';\nimport { InputErrorModule } from './input-error/input-error.module';\nimport { InputWithFormFieldComponent } from './input-with-form-field/input-with-form-field.component';\nimport { InputWithFormFieldModule } from './input-with-form-field/input-with-form-field.module';\n\nexport const INPUT_EXAMPLES: ComponentExampleWithModule[] = [\n  { component: BasicInputComponent, module: BasicInputModule },\n  { component: InputWithFormFieldComponent, module: InputWithFormFieldModule },\n  { component: InputDisabledComponent, module: InputDisabledModule },\n  { component: InputErrorComponent, module: InputErrorModule },\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/daffodil-design-media-gallery-examples.mjs

@@ -6,7 +6,7 @@ import { DaffImageModule, DaffMediaGalleryModule } from '@daffodil/design';
 class BasicMediaGalleryComponent {
 }
 /** @nocollapse */ BasicMediaGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BasicMediaGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ BasicMediaGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: BasicMediaGalleryComponent, selector: "basic-media-gallery", ngImport: i0, template: "<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Fruits\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Lemons\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Avocado\" width=\"946\" height=\"946\"></daff-image>\n</daff-media-gallery>\n", components: [{ type: i1.DaffMediaGalleryComponent, selector: "daff-media-gallery", inputs: ["name"] }, { type: i1.DaffImageComponent, selector: "daff-image", inputs: ["src", "alt", "width", "height"], outputs: ["load"] }], directives: [{ type: i1.DaffThumbnailDirective, selector: "[daffThumbnail]", outputs: ["becameSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ BasicMediaGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: BasicMediaGalleryComponent, selector: "basic-media-gallery", ngImport: i0, template: "<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Fruits\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Lemons\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Avocado\" width=\"946\" height=\"946\"></daff-image>\n</daff-media-gallery>\n", components: [{ type: i1.DaffMediaGalleryComponent, selector: "daff-media-gallery", inputs: ["skeleton", "name"] }, { type: i1.DaffImageComponent, selector: "daff-image", inputs: ["skeleton", "src", "alt", "width", "height"], outputs: ["load"] }], directives: [{ type: i1.DaffThumbnailDirective, selector: "[daffThumbnail]", outputs: ["becameSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BasicMediaGalleryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'basic-media-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Fruits\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Lemons\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Avocado\" width=\"946\" height=\"946\"></daff-image>\n</daff-media-gallery>\n" }]
@@ -15,15 +15,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
 class MismatchedSizesMediaGalleryComponent {
 }
 /** @nocollapse */ MismatchedSizesMediaGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MismatchedSizesMediaGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MismatchedSizesMediaGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: MismatchedSizesMediaGalleryComponent, selector: "mismatched-sizes-media-gallery", ngImport: i0, template: "<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1551410224-699683e15636?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Drink\" width=\"640\" height=\"799\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1586788224331-947f68671cf1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80\" alt=\"Fruits\" width=\"640\" height=\"960\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Cherries\" width=\"640\" height=\"800\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1606926167690-07a1edafd407?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80\" alt=\"Lemons\" width=\"640\" height=\"426\"></daff-image>\n</daff-media-gallery>\n", components: [{ type: i1.DaffMediaGalleryComponent, selector: "daff-media-gallery", inputs: ["name"] }, { type: i1.DaffImageComponent, selector: "daff-image", inputs: ["src", "alt", "width", "height"], outputs: ["load"] }], directives: [{ type: i1.DaffThumbnailDirective, selector: "[daffThumbnail]", outputs: ["becameSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ MismatchedSizesMediaGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: MismatchedSizesMediaGalleryComponent, selector: "mismatched-sizes-media-gallery", ngImport: i0, template: "<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1551410224-699683e15636?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Drink\" width=\"640\" height=\"799\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1586788224331-947f68671cf1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80\" alt=\"Fruits\" width=\"640\" height=\"960\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Cherries\" width=\"640\" height=\"800\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1606926167690-07a1edafd407?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80\" alt=\"Lemons\" width=\"640\" height=\"426\"></daff-image>\n</daff-media-gallery>\n", components: [{ type: i1.DaffMediaGalleryComponent, selector: "daff-media-gallery", inputs: ["skeleton", "name"] }, { type: i1.DaffImageComponent, selector: "daff-image", inputs: ["skeleton", "src", "alt", "width", "height"], outputs: ["load"] }], directives: [{ type: i1.DaffThumbnailDirective, selector: "[daffThumbnail]", outputs: ["becameSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MismatchedSizesMediaGalleryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mismatched-sizes-media-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1551410224-699683e15636?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Drink\" width=\"640\" height=\"799\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1586788224331-947f68671cf1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80\" alt=\"Fruits\" width=\"640\" height=\"960\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Cherries\" width=\"640\" height=\"800\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1606926167690-07a1edafd407?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80\" alt=\"Lemons\" width=\"640\" height=\"426\"></daff-image>\n</daff-media-gallery>\n" }]
         }] });
 
+class SkeletonMediaGalleryComponent {
+}
+/** @nocollapse */ SkeletonMediaGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SkeletonMediaGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ SkeletonMediaGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: SkeletonMediaGalleryComponent, selector: "skeleton-media-gallery", ngImport: i0, template: "<daff-media-gallery [skeleton]=\"true\">\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Fruits\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Lemons\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Avocado\" width=\"946\" height=\"946\"></daff-image>\n</daff-media-gallery>\n", components: [{ type: i1.DaffMediaGalleryComponent, selector: "daff-media-gallery", inputs: ["skeleton", "name"] }, { type: i1.DaffImageComponent, selector: "daff-image", inputs: ["skeleton", "src", "alt", "width", "height"], outputs: ["load"] }], directives: [{ type: i1.DaffThumbnailDirective, selector: "[daffThumbnail]", outputs: ["becameSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SkeletonMediaGalleryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skeleton-media-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<daff-media-gallery [skeleton]=\"true\">\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Fruits\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Lemons\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Avocado\" width=\"946\" height=\"946\"></daff-image>\n</daff-media-gallery>\n" }]
+        }] });
+
 const MEDIA_GALLERY_EXAMPLES = [
     BasicMediaGalleryComponent,
     MismatchedSizesMediaGalleryComponent,
+    SkeletonMediaGalleryComponent,
 ];
 
 class BasicMediaGalleryModule {
@@ -78,9 +88,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }]
         }] });
 
+class SkeletonMediaGalleryModule {
+}
+/** @nocollapse */ SkeletonMediaGalleryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SkeletonMediaGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ SkeletonMediaGalleryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SkeletonMediaGalleryModule, declarations: [SkeletonMediaGalleryComponent], imports: [DaffImageModule,
+        DaffMediaGalleryModule], exports: [SkeletonMediaGalleryComponent] });
+/** @nocollapse */ SkeletonMediaGalleryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SkeletonMediaGalleryModule, providers: [], imports: [[
+            DaffImageModule,
+            DaffMediaGalleryModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SkeletonMediaGalleryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkeletonMediaGalleryComponent,
+                    ],
+                    exports: [
+                        SkeletonMediaGalleryComponent,
+                    ],
+                    imports: [
+                        DaffImageModule,
+                        DaffMediaGalleryModule,
+                    ],
+                    providers: [],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BasicMediaGalleryComponent, BasicMediaGalleryModule, MEDIA_GALLERY_EXAMPLES, MismatchedSizesMediaGalleryComponent, MismatchedSizesMediaGalleryModule };
+export { BasicMediaGalleryComponent, BasicMediaGalleryModule, MEDIA_GALLERY_EXAMPLES, MismatchedSizesMediaGalleryComponent, MismatchedSizesMediaGalleryModule, SkeletonMediaGalleryComponent, SkeletonMediaGalleryModule };
 //# sourceMappingURL=daffodil-design-media-gallery-examples.mjs.map

package/fesm2015/daffodil-design-media-gallery-examples.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-media-gallery-examples.mjs","sources":["../../../libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.component.ts","../../../libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.component.html","../../../libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.ts","../../../libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.html","../../../libs/design/media-gallery/examples/src/examples.ts","../../../libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts","../../../libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts","../../../libs/design/media-gallery/examples/src/daffodil-design-media-gallery-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'basic-media-gallery',\n  templateUrl: './basic-media-gallery.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BasicMediaGalleryComponent {\n\n\n}\n","<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Fruits\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Lemons\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Avocado\" width=\"946\" height=\"946\"></daff-image>\n</daff-media-gallery>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'mismatched-sizes-media-gallery',\n  templateUrl: './mismatched-sizes-media-gallery.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MismatchedSizesMediaGalleryComponent {}\n","<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1551410224-699683e15636?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Drink\" width=\"640\" height=\"799\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1586788224331-947f68671cf1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80\" alt=\"Fruits\" width=\"640\" height=\"960\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Cherries\" width=\"640\" height=\"800\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1606926167690-07a1edafd407?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80\" alt=\"Lemons\" width=\"640\" height=\"426\"></daff-image>\n</daff-media-gallery>\n","import { BasicMediaGalleryComponent } from './basic-media-gallery/basic-media-gallery.component';\nimport { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component';\n\nexport const MEDIA_GALLERY_EXAMPLES = [\n  BasicMediaGalleryComponent,\n  MismatchedSizesMediaGalleryComponent,\n];\n","import { NgModule } from '@angular/core';\n\nimport {\n  DaffMediaGalleryModule,\n  DaffImageModule,\n} from '@daffodil/design';\n\nimport { BasicMediaGalleryComponent } from './basic-media-gallery.component';\n\n@NgModule({\n  declarations: [\n    BasicMediaGalleryComponent,\n  ],\n  exports: [\n    BasicMediaGalleryComponent,\n  ],\n  imports: [\n    DaffImageModule,\n    DaffMediaGalleryModule,\n  ],\n  providers: [],\n})\nexport class BasicMediaGalleryModule { }\n","import { NgModule } from '@angular/core';\n\nimport {\n  DaffMediaGalleryModule,\n  DaffImageModule,\n} from '@daffodil/design';\n\nimport { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery.component';\n\n@NgModule({\n  declarations: [\n    MismatchedSizesMediaGalleryComponent,\n  ],\n  exports: [\n    MismatchedSizesMediaGalleryComponent,\n  ],\n  imports: [\n    DaffImageModule,\n    DaffMediaGalleryModule,\n  ],\n  providers: [],\n})\nexport class MismatchedSizesMediaGalleryModule { }\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-media-gallery-examples.mjs","sources":["../../../libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.component.ts","../../../libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.component.html","../../../libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.ts","../../../libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.html","../../../libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.component.ts","../../../libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.component.html","../../../libs/design/media-gallery/examples/src/examples.ts","../../../libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts","../../../libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts","../../../libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts","../../../libs/design/media-gallery/examples/src/daffodil-design-media-gallery-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'basic-media-gallery',\n  templateUrl: './basic-media-gallery.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BasicMediaGalleryComponent {\n\n\n}\n","<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Fruits\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Lemons\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Avocado\" width=\"946\" height=\"946\"></daff-image>\n</daff-media-gallery>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'mismatched-sizes-media-gallery',\n  templateUrl: './mismatched-sizes-media-gallery.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MismatchedSizesMediaGalleryComponent {}\n","<daff-media-gallery>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1551410224-699683e15636?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Drink\" width=\"640\" height=\"799\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1586788224331-947f68671cf1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80\" alt=\"Fruits\" width=\"640\" height=\"960\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1300&q=80\" alt=\"Cherries\" width=\"640\" height=\"800\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1606926167690-07a1edafd407?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80\" alt=\"Lemons\" width=\"640\" height=\"426\"></daff-image>\n</daff-media-gallery>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'skeleton-media-gallery',\n  templateUrl: './skeleton-media-gallery.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkeletonMediaGalleryComponent {\n\n\n}\n","<daff-media-gallery [skeleton]=\"true\">\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Drink\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Fruits\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Lemons\" width=\"946\" height=\"946\"></daff-image>\n\t<daff-image daffThumbnail src=\"https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80\" alt=\"Avocado\" width=\"946\" height=\"946\"></daff-image>\n</daff-media-gallery>\n","import { BasicMediaGalleryComponent } from './basic-media-gallery/basic-media-gallery.component';\nimport { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component';\nimport { SkeletonMediaGalleryComponent } from './skeleton-media-gallery/skeleton-media-gallery.component';\n\nexport const MEDIA_GALLERY_EXAMPLES = [\n  BasicMediaGalleryComponent,\n  MismatchedSizesMediaGalleryComponent,\n  SkeletonMediaGalleryComponent,\n];\n","import { NgModule } from '@angular/core';\n\nimport {\n  DaffMediaGalleryModule,\n  DaffImageModule,\n} from '@daffodil/design';\n\nimport { BasicMediaGalleryComponent } from './basic-media-gallery.component';\n\n@NgModule({\n  declarations: [\n    BasicMediaGalleryComponent,\n  ],\n  exports: [\n    BasicMediaGalleryComponent,\n  ],\n  imports: [\n    DaffImageModule,\n    DaffMediaGalleryModule,\n  ],\n  providers: [],\n})\nexport class BasicMediaGalleryModule { }\n","import { NgModule } from '@angular/core';\n\nimport {\n  DaffMediaGalleryModule,\n  DaffImageModule,\n} from '@daffodil/design';\n\nimport { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery.component';\n\n@NgModule({\n  declarations: [\n    MismatchedSizesMediaGalleryComponent,\n  ],\n  exports: [\n    MismatchedSizesMediaGalleryComponent,\n  ],\n  imports: [\n    DaffImageModule,\n    DaffMediaGalleryModule,\n  ],\n  providers: [],\n})\nexport class MismatchedSizesMediaGalleryModule { }\n","import { NgModule } from '@angular/core';\n\nimport {\n  DaffMediaGalleryModule,\n  DaffImageModule,\n} from '@daffodil/design';\n\nimport { SkeletonMediaGalleryComponent } from './skeleton-media-gallery.component';\n\n@NgModule({\n  declarations: [\n    SkeletonMediaGalleryComponent,\n  ],\n  exports: [\n    SkeletonMediaGalleryComponent,\n  ],\n  imports: [\n    DaffImageModule,\n    DaffMediaGalleryModule,\n  ],\n  providers: [],\n})\nexport class SkeletonMediaGalleryModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/daffodil-design.mjs

@@ -583,6 +583,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }]
         }] });
 
+function daffSkeletonableMixin(Base, defaultSkeleton = false) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this.skeleton = defaultSkeleton;
+        }
+        get skeleton() {
+            return this._skeleton;
+        }
+        set skeleton(value) {
+            // Handles the default skeleton
+            const incomingSkeleton = value || defaultSkeleton;
+            if (incomingSkeleton === this._skeleton) { // Only run the dom-render if a change occurs
+                return;
+            }
+            if (incomingSkeleton) {
+                this._renderer.addClass(this._elementRef.nativeElement, `daff-skeleton`);
+            }
+            else {
+                this._renderer.removeClass(this._elementRef.nativeElement, `daff-skeleton`);
+            }
+            this._skeleton = incomingSkeleton;
+        }
+    };
+}
+
 const DAFF_MEDIA_GALLERY_TOKEN = new InjectionToken('DAFF_MEDIA_GALLERY_TOKEN');
 
 const isGallery = (element) => !('gallery' in element);
@@ -751,7 +777,7 @@ class DaffMediaGalleryBase {
         this._renderer = _renderer;
     }
 }
-const _daffMediaGalleryBase = daffArticleEncapsulatedMixin((DaffMediaGalleryBase));
+const _daffMediaGalleryBase = daffSkeletonableMixin(daffArticleEncapsulatedMixin((DaffMediaGalleryBase)));
 class DaffMediaGalleryComponent extends _daffMediaGalleryBase {
     constructor(elementRef, renderer, registry) {
         super(elementRef, renderer);
@@ -776,16 +802,16 @@ class DaffMediaGalleryComponent extends _daffMediaGalleryBase {
     }
 }
 /** @nocollapse */ DaffMediaGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffMediaGalleryComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DaffMediaGalleryRegistry }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffMediaGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffMediaGalleryComponent, selector: "daff-media-gallery", inputs: { name: "name" }, host: { properties: { "class.daff-media-gallery": "this.class" } }, providers: [
+/** @nocollapse */ DaffMediaGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffMediaGalleryComponent, selector: "daff-media-gallery", inputs: { skeleton: "skeleton", name: "name" }, host: { properties: { "class.daff-media-gallery": "this.class" } }, providers: [
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@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;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"], components: [{ type: DaffMediaRendererComponent, selector: "daff-media-renderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@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;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:72px;width:72px;position:absolute;top:0;left:0}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:80px;width:80px;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}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1;position:relative}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"], components: [{ type: DaffMediaRendererComponent, selector: "daff-media-renderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffMediaGalleryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-media-gallery', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         // eslint-disable-next-line @typescript-eslint/no-use-before-define
                         { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
-                    ], template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@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;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"] }]
+                    ], inputs: ['skeleton'], template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@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;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:72px;width:72px;position:absolute;top:0;left:0}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:80px;width:80px;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}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1;position:relative}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DaffMediaGalleryRegistry }]; }, propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-media-gallery']
@@ -929,9 +955,22 @@ const validateProperties = (object, props) => {
         throw new Error(`DaffImageComponent must have the ${invalidProps.join(',')} attributes defined.`);
     }
 };
-class DaffImageComponent {
-    constructor(sanitizer) {
+/**
+ * An _elementRef is needed for the GolfGhostable mixin
+ */
+class DaffImageBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffImageBase = daffSkeletonableMixin(DaffImageBase);
+class DaffImageComponent extends _daffImageBase {
+    constructor(sanitizer, elementRef, renderer) {
+        super(elementRef, renderer);
         this.sanitizer = sanitizer;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
         // TODO: rename event to not collide with native event (unless that's intentional)
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.load = new EventEmitter();
@@ -986,13 +1025,13 @@ class DaffImageComponent {
         return this.width + 'px';
     }
 }
-/** @nocollapse */ DaffImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffImageComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffImageComponent, selector: "daff-image", inputs: { src: "src", alt: "alt", width: "width", height: "height" }, outputs: { load: "load" }, host: { properties: { "style.max-width": "this.maxWidth" } }, providers: [
+/** @nocollapse */ DaffImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffImageComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DaffImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffImageComponent, selector: "daff-image", inputs: { skeleton: "skeleton", src: "src", alt: "alt", width: "width", height: "height" }, outputs: { load: "load" }, host: { properties: { "style.max-width": "this.maxWidth" } }, providers: [
         {
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             provide: daffThumbnailCompatToken, useExisting: DaffImageComponent,
         },
-    ], ngImport: i0, template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>", styles: [":host{display:inline-block;border-radius:inherit;position:relative;width:100%}:host img{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;margin:auto;max-width:100%}.daff-image__wrapper{border-radius:inherit;height:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>", styles: [":host{display:inline-block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex}:host.daff-skeleton:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}:host.daff-skeleton img{opacity:0}:host img{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;margin:auto;max-width:100%}.daff-image__wrapper{border-radius:inherit;height:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-image', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1000,8 +1039,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                             // eslint-disable-next-line @typescript-eslint/no-use-before-define
                             provide: daffThumbnailCompatToken, useExisting: DaffImageComponent,
                         },
-                    ], template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>", styles: [":host{display:inline-block;border-radius:inherit;position:relative;width:100%}:host img{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;margin:auto;max-width:100%}.daff-image__wrapper{border-radius:inherit;height:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { src: [{
+                    ], inputs: ['skeleton'], template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>", styles: [":host{display:inline-block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex}:host.daff-skeleton:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}:host.daff-skeleton img{opacity:0}:host img{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;margin:auto;max-width:100%}.daff-image__wrapper{border-radius:inherit;height:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { src: [{
                 type: Input
             }], alt: [{
                 type: Input