@theseam/ui-common 0.4.29 → 1.0.0-beta.0

package/fesm2022/theseam-ui-common-tiled-select.mjs

@@ -0,0 +1,584 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { __decorate } from 'tslib';
+import { animation, animate, keyframes, style, trigger, transition, useAnimation, stagger, query } from '@angular/animations';
+import { coerceArray } from '@angular/cdk/coercion';
+import { Platform } from '@angular/cdk/platform';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Input, Directive, ContentChild, HostBinding, Component, ChangeDetectorRef, EventEmitter, Output, forwardRef, Renderer2, ElementRef, ContentChildren, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { InputBoolean } from '@theseam/ui-common/core';
+import { NgIf, NgTemplateOutlet, NgFor, NgClass } from '@angular/common';
+import { faCheckCircle } from '@fortawesome/free-regular-svg-icons';
+import * as i1 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+class TheSeamTiledSelectTileHarness extends ComponentHarness {
+    static hostSelector = 'seam-tiled-select-tile';
+    /** Creates a `HarnessPredicate` used to locate a particular `MyMenuHarness`. */
+    static with(options) {
+        return new HarnessPredicate(TheSeamTiledSelectTileHarness, options)
+            .addOption('tile index', options.tileIndex, (harness, index) => HarnessPredicate.stringMatches(harness.getTileIndex(), `${index}`))
+            .addOption('tile name', options.tileName, (harness, name) => HarnessPredicate.stringMatches(harness.getTileName(), name));
+    }
+    async getTileIndex() {
+        return (await this.host()).getAttribute('data-tile-index');
+    }
+    async getTileName() {
+        return (await this.host()).getAttribute('data-tile-name');
+    }
+    async getValue() {
+        return (await this.host()).getProperty('value');
+    }
+    async getButtonElement() {
+        return this.locatorFor('button')();
+    }
+}
+
+class TheSeamTiledSelectHarness extends ComponentHarness {
+    static hostSelector = 'seam-tiled-select';
+    async getTiles() {
+        return this.locatorForAll(TheSeamTiledSelectTileHarness);
+    }
+    getTileAtIndex(index) {
+        const getTileAtIndex = this.locatorFor(TheSeamTiledSelectTileHarness.with({ tileIndex: index }));
+        return getTileAtIndex();
+        // return this.locatorFor(TheSeamTiledSelectTileHarness.with({ tileIndex: index }))
+    }
+    async getTileByName(name) {
+        const getTileByName = this.locatorFor(TheSeamTiledSelectTileHarness.with({ tileName: name }));
+        return getTileByName();
+    }
+    async getValue() {
+        return (await this.host()).getProperty('value');
+    }
+}
+
+class TheSeamTiledSelectTileOverlayDirective {
+    template = inject((TemplateRef));
+    record;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamTiledSelectTileOverlayDirective, isStandalone: true, selector: "[seamTiledSelectTileOverlay]", inputs: { record: "record" }, exportAs: ["seamTiledSelectTileOverlay"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTiledSelectTileOverlay]',
+                    exportAs: 'seamTiledSelectTileOverlay',
+                }]
+        }], propDecorators: { record: [{
+                type: Input
+            }] } });
+
+class TheSeamTiledSelectTileLabelTplDirective {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileLabelTplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamTiledSelectTileLabelTplDirective, isStandalone: true, selector: "[seamTiledSelectTileLabelTpl]", exportAs: ["seamTiledSelectTileLabelTpl"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileLabelTplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTiledSelectTileLabelTpl]',
+                    exportAs: 'seamTiledSelectTileLabelTpl',
+                }]
+        }] });
+
+class TheSeamTiledSelectTileIconTplDirective {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileIconTplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamTiledSelectTileIconTplDirective, isStandalone: true, selector: "[seamTiledSelectTileIconTpl]", exportAs: ["seamTiledSelectTileIconTpl"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileIconTplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamTiledSelectTileIconTpl]',
+                    exportAs: 'seamTiledSelectTileIconTpl',
+                }]
+        }] });
+
+const needToFix = /(MSIE 10)|(Trident.*rv:11\.0)|( Edge\/[\d.]+$)/.test(navigator.userAgent);
+class TheSeamTiledSelectTileIconComponent {
+    static ngAcceptInputType_grayscaleOnDisable;
+    static ngAcceptInputType_disabled;
+    needToFix = needToFix;
+    get _cssClassGrid() { return this.layout === 'grid'; }
+    get _cssClassList() { return this.layout === 'list'; }
+    set layout(value) { this._layout = value || 'grid'; }
+    get layout() { return this._layout; }
+    _layout = 'grid';
+    grayscaleOnDisable = false;
+    disabled = false;
+    iconClass;
+    get icon() { return this._iconUrl || this._iconObj; }
+    set icon(value) {
+        if (typeof value === 'string') {
+            this._iconUrl = value;
+            this._iconObj = undefined;
+        }
+        else {
+            this._iconUrl = undefined;
+            this._iconObj = value;
+        }
+    }
+    _iconUrl;
+    _iconObj;
+    iconTpl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamTiledSelectTileIconComponent, isStandalone: true, selector: "seam-tiled-select-tile-icon", inputs: { layout: "layout", grayscaleOnDisable: "grayscaleOnDisable", disabled: "disabled", iconClass: "iconClass", icon: "icon" }, host: { properties: { "class.grid": "this._cssClassGrid", "class.list": "this._cssClassList" } }, queries: [{ propertyName: "iconTpl", first: true, predicate: TheSeamTiledSelectTileIconTplDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"iconTpl; else noIconTpl\">\n  <ng-template\n    [ngTemplateOutlet]=\"iconTpl.template\"\n    [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon }\">\n  </ng-template>\n</ng-container>\n<ng-template #noIconTpl>\n\n  <fa-icon *ngIf=\"_iconObj\"\n    class=\"tiled-select-tile-icon--fa {{ iconClass }}\"\n    [icon]=\"_iconObj\"></fa-icon>\n\n  <ng-container *ngIf=\"_iconUrl\">\n    <!-- Partial fix for IE greyscale -->\n    <ng-container *ngIf=\"needToFix\">\n      <ng-container *ngIf=\"disabled && grayscaleOnDisable\">\n        <span class=\"grayscale-fix\" style=\"display: inline-block; position: relative;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" id=\"svgroot\" style=\"position: absolute; left: 0; right: 0;\" viewBox=\"0 0 48 48\" width=\"100%\" height=\"100%\">\n            <defs><filter id=\"gray\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\" /></filter></defs>\n            <image filter=\"url(&quot;#gray&quot;)\" preserveAspectRatio=\"none meet\" x=\"0\" y=\"0\" width=\"48\" height=\"48\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n              [attr.xlink:href]=\"_iconUrl\" />\n          </svg>\n          <img class=\"tiled-select-tile-panel--icon-img {{ iconClass }}\" style=\"display: block; visibility: hidden;\" alt=\"Icon\" [src]=\"_iconUrl\">\n        </span>\n      </ng-container>\n      <ng-container *ngIf=\"!disabled\">\n        <img class=\"tiled-select-tile-panel--icon-img {{ iconClass }}\" [src]=\"_iconUrl\" alt=\"Icon\">\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!needToFix\">\n      <img class=\"tiled-select-tile-panel--icon-img {{ iconClass }}\" [src]=\"_iconUrl\" alt=\"Icon\">\n    </ng-container>\n  </ng-container>\n\n</ng-template>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;overflow:hidden}:host.grid{flex:1 1 auto;margin:0 auto;display:flex;align-items:center;width:100%}:host.grid .tiled-select-tile-panel--icon-img{width:100%;max-width:75px;max-height:75px;margin:0 auto}:host.grid .tiled-select-tile-panel--icon-img[src$=\".svg\"]{height:100%}:host.grid>.grayscale-fix{max-width:75px;max-height:75px;margin:0 auto}:host.list{border:1px solid rgb(230,230,230);border-radius:8px;min-width:39px;width:39px;min-height:39px;height:39px;padding:1px;align-items:center;display:flex}:host.list img{max-width:100%;max-height:100%;margin:0 auto}.grey-fix{visibility:hidden;display:block}.tiled-select-tile-icon--fa{height:100%;display:flex;flex-direction:row;justify-content:center;text-align:center;width:100%;padding:2px}.tiled-select-tile-icon--fa ::ng-deep .svg-inline--fa{max-width:100%;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+}
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectTileIconComponent.prototype, "grayscaleOnDisable", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectTileIconComponent.prototype, "disabled", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-tiled-select-tile-icon', imports: [
+                        NgIf,
+                        NgTemplateOutlet,
+                        FontAwesomeModule,
+                    ], template: "<ng-container *ngIf=\"iconTpl; else noIconTpl\">\n  <ng-template\n    [ngTemplateOutlet]=\"iconTpl.template\"\n    [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon }\">\n  </ng-template>\n</ng-container>\n<ng-template #noIconTpl>\n\n  <fa-icon *ngIf=\"_iconObj\"\n    class=\"tiled-select-tile-icon--fa {{ iconClass }}\"\n    [icon]=\"_iconObj\"></fa-icon>\n\n  <ng-container *ngIf=\"_iconUrl\">\n    <!-- Partial fix for IE greyscale -->\n    <ng-container *ngIf=\"needToFix\">\n      <ng-container *ngIf=\"disabled && grayscaleOnDisable\">\n        <span class=\"grayscale-fix\" style=\"display: inline-block; position: relative;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" id=\"svgroot\" style=\"position: absolute; left: 0; right: 0;\" viewBox=\"0 0 48 48\" width=\"100%\" height=\"100%\">\n            <defs><filter id=\"gray\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\" /></filter></defs>\n            <image filter=\"url(&quot;#gray&quot;)\" preserveAspectRatio=\"none meet\" x=\"0\" y=\"0\" width=\"48\" height=\"48\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n              [attr.xlink:href]=\"_iconUrl\" />\n          </svg>\n          <img class=\"tiled-select-tile-panel--icon-img {{ iconClass }}\" style=\"display: block; visibility: hidden;\" alt=\"Icon\" [src]=\"_iconUrl\">\n        </span>\n      </ng-container>\n      <ng-container *ngIf=\"!disabled\">\n        <img class=\"tiled-select-tile-panel--icon-img {{ iconClass }}\" [src]=\"_iconUrl\" alt=\"Icon\">\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!needToFix\">\n      <img class=\"tiled-select-tile-panel--icon-img {{ iconClass }}\" [src]=\"_iconUrl\" alt=\"Icon\">\n    </ng-container>\n  </ng-container>\n\n</ng-template>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;overflow:hidden}:host.grid{flex:1 1 auto;margin:0 auto;display:flex;align-items:center;width:100%}:host.grid .tiled-select-tile-panel--icon-img{width:100%;max-width:75px;max-height:75px;margin:0 auto}:host.grid .tiled-select-tile-panel--icon-img[src$=\".svg\"]{height:100%}:host.grid>.grayscale-fix{max-width:75px;max-height:75px;margin:0 auto}:host.list{border:1px solid rgb(230,230,230);border-radius:8px;min-width:39px;width:39px;min-height:39px;height:39px;padding:1px;align-items:center;display:flex}:host.list img{max-width:100%;max-height:100%;margin:0 auto}.grey-fix{visibility:hidden;display:block}.tiled-select-tile-icon--fa{height:100%;display:flex;flex-direction:row;justify-content:center;text-align:center;width:100%;padding:2px}.tiled-select-tile-icon--fa ::ng-deep .svg-inline--fa{max-width:100%;height:100%;width:100%}\n"] }]
+        }], propDecorators: { _cssClassGrid: [{
+                type: HostBinding,
+                args: ['class.grid']
+            }], _cssClassList: [{
+                type: HostBinding,
+                args: ['class.list']
+            }], layout: [{
+                type: Input
+            }], grayscaleOnDisable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconTpl: [{
+                type: ContentChild,
+                args: [TheSeamTiledSelectTileIconTplDirective, { static: true }]
+            }] } });
+
+const tilePulse = animation(animate('{{ timing }}s {{ delay }}s', keyframes([
+    style({ transform: 'scale3d(1, 1, 1)' }),
+    style({ transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})' }),
+    style({ transform: 'scale3d(1, 1, 1)' }),
+])), { params: { scale: 1.05, timing: 0.75, delay: 0 } });
+const tileScaleUp = animation(animate('{{ timing }}s {{ delay }}s', keyframes([
+    style({ transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})' }),
+])), { params: { scale: 1.05, timing: 0.75, delay: 0 } });
+const tileScaleDown = animation(animate('{{ timing }}s {{ delay }}s', keyframes([
+    style({ transform: 'scale3d(1, 1, 1)' }),
+])), { params: { scale: 1.05, timing: 0.75, delay: 0 } });
+class TheSeamTiledSelectTileComponent {
+    static ngAcceptInputType_disabled;
+    static ngAcceptInputType_selected;
+    static ngAcceptInputType_tileBackdrop;
+    static ngAcceptInputType_selectable;
+    static ngAcceptInputType_grayscaleOnDisable;
+    static ngAcceptInputType_showLabel;
+    static ngAcceptInputType_showSelectedIcon;
+    _cdr = inject(ChangeDetectorRef);
+    faCheckCircle = faCheckCircle;
+    pulseAnimationState = true;
+    get _tileNameAttr() { return this.name; }
+    layout = 'grid';
+    name;
+    label;
+    icon;
+    disabled = false;
+    selected = false;
+    tileBackdrop = false;
+    selectable = false;
+    grayscaleOnDisable = true;
+    showLabel = true;
+    showSelectedIcon = true;
+    iconClass;
+    overlayTpl;
+    activated = new EventEmitter();
+    labelTpl;
+    pulsing = false;
+    pulsingTimeout;
+    onTileClick(event) {
+        if (!this.selectable) {
+            return;
+        }
+        this.activated.emit(event);
+        // this.pulsing = true
+        // setTimeout(() => {
+        //   this.pulsing = false
+        // }, 750)
+    }
+    mDown() {
+        if (this.pulsingTimeout) {
+            clearTimeout(this.pulsingTimeout);
+        }
+        if (!this.pulsing) {
+            this.pulsing = true;
+            // this._cdr.detectChanges()
+        }
+        // console.log('start')
+        this.pulsingTimeout = window.setTimeout(() => {
+            this.pulsing = false;
+            // this._cdr.detectChanges()
+            this.pulsingTimeout = undefined;
+        }, 750);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamTiledSelectTileComponent, isStandalone: true, selector: "seam-tiled-select-tile", inputs: { layout: "layout", name: "name", label: "label", icon: "icon", disabled: "disabled", selected: "selected", tileBackdrop: "tileBackdrop", selectable: "selectable", grayscaleOnDisable: "grayscaleOnDisable", showLabel: "showLabel", showSelectedIcon: "showSelectedIcon", iconClass: "iconClass", overlayTpl: "overlayTpl" }, outputs: { activated: "activated" }, host: { properties: { "@pulse": "this.pulseAnimationState", "attr.data-tile-name": "this._tileNameAttr" } }, queries: [{ propertyName: "labelTpl", first: true, predicate: TheSeamTiledSelectTileLabelTplDirective, descendants: true, static: true }], ngImport: i0, template: "<button\n  class=\"btn tiled-select-tile-panel\"\n  [disabled]=\"disabled\"\n  [class.grid]=\"layout === 'grid'\"\n  [class.list]=\"layout === 'list'\"\n  [class.selected]=\"selectable && selected\"\n  [class.selectable]=\"selectable\"\n  [class.no-grayscale]=\"!grayscaleOnDisable\"\n  (click)=\"onTileClick($event)\"\n  [@pulse]=\"pulsing ? true : false\"\n  [attr.data-category]=\"name\"\n  [attr.title]=\"showLabel ? '' : label\"\n  type=\"button\">\n  <div class=\"tiled-select-tile-panel--content\">\n    <seam-tiled-select-tile-icon\n      class=\"tiled-select-tile-panel--icon\"\n      [class.invisible]=\"!icon\"\n      [icon]=\"icon\"\n      [iconClass]=\"iconClass\"\n      [layout]=\"layout\"\n      [grayscaleOnDisable]=\"grayscaleOnDisable\"\n      [disabled]=\"disabled\">\n    </seam-tiled-select-tile-icon>\n    <div class=\"tiled-select-tile-panel--label-container\" *ngIf=\"showLabel\">\n      <span *ngIf=\"!labelTpl\" class=\"tiled-select-tile-panel--label\">{{ label }}</span>\n      <ng-template *ngIf=\"labelTpl\"\n        [ngTemplateOutlet]=\"labelTpl.template\"\n        [ngTemplateOutletContext]=\"{ $implicit: label, label: label }\">\n      </ng-template>\n    </div>\n    <div *ngIf=\"tileBackdrop\" class=\"selected-backdrop\"\n      [class.bg-success]=\"selected\"></div>\n    <fa-icon\n      *ngIf=\"selected && showSelectedIcon\"\n      class=\"tiled-select-tile-panel--selected text-success\"\n      [icon]=\"faCheckCircle\"\n      size=\"3x\">\n    </fa-icon>\n  </div>\n  <div class=\"tiled-select-tile-panel--overlay\" *ngIf=\"overlayTpl\">\n    <ng-template [ngTemplateOutlet]=\"overlayTpl.template\"></ng-template>\n  </div>\n</button>\n", styles: [":host{display:block}.tiled-select-tile-panel{width:100%;height:100%;box-sizing:border-box;border:1px solid rgb(230,230,230);background-color:#fff;color:#505050;position:relative;overflow:hidden}.tiled-select-tile-panel:disabled:not(.no-grayscale){filter:grayscale(1)}.tiled-select-tile-panel .grey-fix{visibility:hidden;display:block}.tiled-select-tile-panel.selected{border:1px solid rgb(60,150,200)}.tiled-select-tile-panel.selectable:hover:not(:disabled){box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.tiled-select-tile-panel.selectable:focus:not(:disabled){outline:none}.tiled-select-tile-panel:not(.selectable){box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.tiled-select-tile-panel .tiled-select-tile-panel--content{display:flex;height:100%;width:100%}.tiled-select-tile-panel .tiled-select-tile-panel--content .tiled-select-tile-panel--selected{position:absolute;top:4px;right:4px}.tiled-select-tile-panel .tiled-select-tile-panel--content .selected-backdrop{opacity:.2;position:absolute;inset:0;border-radius:15px;transition:ease-in-out .2s background-color;pointer-events:none}.tiled-select-tile-panel .tiled-select-tile-panel--overlay{position:absolute;inset:0}.tiled-select-tile-panel.grid{border-radius:15px;padding:0;margin:0}.tiled-select-tile-panel.grid .tiled-select-tile-panel--content{flex-direction:column}.tiled-select-tile-panel.grid .tiled-select-tile-panel--content .selected-backdrop{border-radius:15px}.tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container{flex:0 0 auto;height:2.5em;line-height:1em}.tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container .tiled-select-tile-panel--label{display:block;font-size:90%;padding:0 1em;white-space:initial}@media screen and (max-width: 600px){.tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container{height:2rem;line-height:.9em}.tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container .tiled-select-tile-panel--label{font-size:13px;padding:0 .7em}}.tiled-select-tile-panel.list{border-radius:10px;padding:4px}.tiled-select-tile-panel.list .tiled-select-tile-panel--content{flex-direction:row}.tiled-select-tile-panel.list .tiled-select-tile-panel--content .selected-backdrop{border-radius:10px}.tiled-select-tile-panel.list .tiled-select-tile-panel--label-container{display:flex;max-height:100%;flex-direction:column;padding-right:40px}.tiled-select-tile-panel.list .tiled-select-tile-panel--label-container .tiled-select-tile-panel--label{padding:0 6px;text-align:left;margin:auto 0;font-size:80%;white-space:initial}.tiled-select-tile-panel.list .tiled-select-tile-panel--selected ::ng-deep .svg-inline--fa{height:39px}:host(.other-org) .tiled-select-tile-panel.grid{border:0}:host(.other-org) .tiled-select-tile-panel.grid.selectable:hover:not(:disabled){box-shadow:0 0}:host(.other-org) .tiled-select-tile-panel.grid.selectable:hover:not(:disabled) .tiled-select-tile-panel--label-container{text-decoration:underline}:host(.other-org) .tiled-select-tile-panel.grid .tiled-select-tile-panel--icon,:host(.other-org) .tiled-select-tile-panel.grid .tiled-select-tile-panel--selected.text-success{display:none}:host(.other-org) .tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container{height:auto;color:#357ebd}:host(.other-org) .tiled-select-tile-panel.grid .tiled-select-tile-panel--label{padding:.5rem 1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: TheSeamTiledSelectTileIconComponent, selector: "seam-tiled-select-tile-icon", inputs: ["layout", "grayscaleOnDisable", "disabled", "iconClass", "icon"] }], animations: [
+            trigger('pulse', [
+                transition('false => true', [
+                    useAnimation(tilePulse)
+                    // useAnimation(tileScaleUp)
+                ]),
+                // transition('true => false', [
+                //   useAnimation(tileScaleDown)
+                // ]),
+            ]),
+            // trigger('openClose', [
+            //   state('true', style({ height: '*' })),
+            //   state('false', style({ height: '0px' })),
+            //   transition('false <=> true', animate(500))
+            // ]),
+        ] });
+}
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectTileComponent.prototype, "disabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectTileComponent.prototype, "selected", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectTileComponent.prototype, "tileBackdrop", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectTileComponent.prototype, "selectable", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectTileComponent.prototype, "grayscaleOnDisable", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectTileComponent.prototype, "showLabel", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectTileComponent.prototype, "showSelectedIcon", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-tiled-select-tile', animations: [
+                        trigger('pulse', [
+                            transition('false => true', [
+                                useAnimation(tilePulse)
+                                // useAnimation(tileScaleUp)
+                            ]),
+                            // transition('true => false', [
+                            //   useAnimation(tileScaleDown)
+                            // ]),
+                        ]),
+                        // trigger('openClose', [
+                        //   state('true', style({ height: '*' })),
+                        //   state('false', style({ height: '0px' })),
+                        //   transition('false <=> true', animate(500))
+                        // ]),
+                    ], imports: [
+                        NgIf,
+                        NgTemplateOutlet,
+                        FontAwesomeModule,
+                        TheSeamTiledSelectTileIconComponent,
+                    ], template: "<button\n  class=\"btn tiled-select-tile-panel\"\n  [disabled]=\"disabled\"\n  [class.grid]=\"layout === 'grid'\"\n  [class.list]=\"layout === 'list'\"\n  [class.selected]=\"selectable && selected\"\n  [class.selectable]=\"selectable\"\n  [class.no-grayscale]=\"!grayscaleOnDisable\"\n  (click)=\"onTileClick($event)\"\n  [@pulse]=\"pulsing ? true : false\"\n  [attr.data-category]=\"name\"\n  [attr.title]=\"showLabel ? '' : label\"\n  type=\"button\">\n  <div class=\"tiled-select-tile-panel--content\">\n    <seam-tiled-select-tile-icon\n      class=\"tiled-select-tile-panel--icon\"\n      [class.invisible]=\"!icon\"\n      [icon]=\"icon\"\n      [iconClass]=\"iconClass\"\n      [layout]=\"layout\"\n      [grayscaleOnDisable]=\"grayscaleOnDisable\"\n      [disabled]=\"disabled\">\n    </seam-tiled-select-tile-icon>\n    <div class=\"tiled-select-tile-panel--label-container\" *ngIf=\"showLabel\">\n      <span *ngIf=\"!labelTpl\" class=\"tiled-select-tile-panel--label\">{{ label }}</span>\n      <ng-template *ngIf=\"labelTpl\"\n        [ngTemplateOutlet]=\"labelTpl.template\"\n        [ngTemplateOutletContext]=\"{ $implicit: label, label: label }\">\n      </ng-template>\n    </div>\n    <div *ngIf=\"tileBackdrop\" class=\"selected-backdrop\"\n      [class.bg-success]=\"selected\"></div>\n    <fa-icon\n      *ngIf=\"selected && showSelectedIcon\"\n      class=\"tiled-select-tile-panel--selected text-success\"\n      [icon]=\"faCheckCircle\"\n      size=\"3x\">\n    </fa-icon>\n  </div>\n  <div class=\"tiled-select-tile-panel--overlay\" *ngIf=\"overlayTpl\">\n    <ng-template [ngTemplateOutlet]=\"overlayTpl.template\"></ng-template>\n  </div>\n</button>\n", styles: [":host{display:block}.tiled-select-tile-panel{width:100%;height:100%;box-sizing:border-box;border:1px solid rgb(230,230,230);background-color:#fff;color:#505050;position:relative;overflow:hidden}.tiled-select-tile-panel:disabled:not(.no-grayscale){filter:grayscale(1)}.tiled-select-tile-panel .grey-fix{visibility:hidden;display:block}.tiled-select-tile-panel.selected{border:1px solid rgb(60,150,200)}.tiled-select-tile-panel.selectable:hover:not(:disabled){box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.tiled-select-tile-panel.selectable:focus:not(:disabled){outline:none}.tiled-select-tile-panel:not(.selectable){box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.tiled-select-tile-panel .tiled-select-tile-panel--content{display:flex;height:100%;width:100%}.tiled-select-tile-panel .tiled-select-tile-panel--content .tiled-select-tile-panel--selected{position:absolute;top:4px;right:4px}.tiled-select-tile-panel .tiled-select-tile-panel--content .selected-backdrop{opacity:.2;position:absolute;inset:0;border-radius:15px;transition:ease-in-out .2s background-color;pointer-events:none}.tiled-select-tile-panel .tiled-select-tile-panel--overlay{position:absolute;inset:0}.tiled-select-tile-panel.grid{border-radius:15px;padding:0;margin:0}.tiled-select-tile-panel.grid .tiled-select-tile-panel--content{flex-direction:column}.tiled-select-tile-panel.grid .tiled-select-tile-panel--content .selected-backdrop{border-radius:15px}.tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container{flex:0 0 auto;height:2.5em;line-height:1em}.tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container .tiled-select-tile-panel--label{display:block;font-size:90%;padding:0 1em;white-space:initial}@media screen and (max-width: 600px){.tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container{height:2rem;line-height:.9em}.tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container .tiled-select-tile-panel--label{font-size:13px;padding:0 .7em}}.tiled-select-tile-panel.list{border-radius:10px;padding:4px}.tiled-select-tile-panel.list .tiled-select-tile-panel--content{flex-direction:row}.tiled-select-tile-panel.list .tiled-select-tile-panel--content .selected-backdrop{border-radius:10px}.tiled-select-tile-panel.list .tiled-select-tile-panel--label-container{display:flex;max-height:100%;flex-direction:column;padding-right:40px}.tiled-select-tile-panel.list .tiled-select-tile-panel--label-container .tiled-select-tile-panel--label{padding:0 6px;text-align:left;margin:auto 0;font-size:80%;white-space:initial}.tiled-select-tile-panel.list .tiled-select-tile-panel--selected ::ng-deep .svg-inline--fa{height:39px}:host(.other-org) .tiled-select-tile-panel.grid{border:0}:host(.other-org) .tiled-select-tile-panel.grid.selectable:hover:not(:disabled){box-shadow:0 0}:host(.other-org) .tiled-select-tile-panel.grid.selectable:hover:not(:disabled) .tiled-select-tile-panel--label-container{text-decoration:underline}:host(.other-org) .tiled-select-tile-panel.grid .tiled-select-tile-panel--icon,:host(.other-org) .tiled-select-tile-panel.grid .tiled-select-tile-panel--selected.text-success{display:none}:host(.other-org) .tiled-select-tile-panel.grid .tiled-select-tile-panel--label-container{height:auto;color:#357ebd}:host(.other-org) .tiled-select-tile-panel.grid .tiled-select-tile-panel--label{padding:.5rem 1rem}\n"] }]
+        }], propDecorators: { pulseAnimationState: [{
+                type: HostBinding,
+                args: ['@pulse']
+            }], _tileNameAttr: [{
+                type: HostBinding,
+                args: ['attr.data-tile-name']
+            }], layout: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], tileBackdrop: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], grayscaleOnDisable: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], showSelectedIcon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], overlayTpl: [{
+                type: Input
+            }], activated: [{
+                type: Output
+            }], labelTpl: [{
+                type: ContentChild,
+                args: [TheSeamTiledSelectTileLabelTplDirective, { static: true }]
+            }] } });
+
+const slideEnterAnimation = animation([
+    style({ opacity: 0, transform: 'translateX(-15px)' }),
+    stagger(100, [
+        animate('0.5s', style({ opacity: 1, transform: 'translateX(0)' })),
+    ]),
+]);
+const TILED_SELECT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TheSeamTiledSelectComponent),
+    multi: true,
+};
+class TheSeamTiledSelectComponent {
+    static ngAcceptInputType_val;
+    static ngAcceptInputType_disabled;
+    static ngAcceptInputType_multiple;
+    static ngAcceptInputType_selectionToggleable;
+    static ngAcceptInputType_tileBackdrop;
+    static ngAcceptInputType_showSelectedIcon;
+    static ngAcceptInputType_animationsDisabled;
+    _platform = inject(Platform);
+    _cdr = inject(ChangeDetectorRef);
+    _renderer = inject(Renderer2);
+    _elementRef = inject(ElementRef);
+    layout = 'grid';
+    get tiles() { return this._tiles; }
+    set tiles(value) {
+        const _value = [...(value || [])];
+        for (const v of _value) {
+            if (v.value === undefined) {
+                if (v.name === undefined) {
+                    throw new Error('If value is undefined then name must be defined.');
+                }
+                v.value = v.name;
+            }
+        }
+        const prev = this._tiles;
+        if (prev.length !== _value.length) {
+            this.tilesAnimationState = !this.tilesAnimationState;
+        }
+        else {
+            for (const t of _value) {
+                if (!prev.find(p => p.name === t.name)) {
+                    this.tilesAnimationState = !this.tilesAnimationState;
+                    break;
+                }
+            }
+        }
+        this._tiles = _value;
+    }
+    _tiles = [];
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    val;
+    disabled = false;
+    multiple = false;
+    selectionToggleable = true;
+    tileBackdrop = false;
+    showSelectedIcon = true;
+    animationsDisabled = this._platform.IOS;
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    change = new EventEmitter();
+    tilesAnimationState = false;
+    onChange;
+    onTouched;
+    overlayTpls;
+    get value() {
+        return this.val;
+    }
+    set value(value) {
+        this.val = (this.multiple) ? [...(value || [])] : value || '';
+        this._renderer.setProperty(this._elementRef.nativeElement, 'value', this.val);
+        if (this.onChange) {
+            this.onChange(this.val);
+            this.change.emit(this.val);
+            this._cdr.markForCheck();
+        }
+        if (this.onTouched) {
+            this.onTouched();
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onTileSelected(event, tile) {
+        this.toggleTileSelected(tile);
+    }
+    isSelected(tile) {
+        if (!this.multiple) {
+            if (this.value === tile.value) {
+                return true;
+            }
+        }
+        else {
+            if (this.value) {
+                for (const v of this.value) {
+                    if (v === tile.value) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+    toggleTileSelected(tile) {
+        if (!this.selectionToggleable && this.isSelected(tile)) {
+            return;
+        }
+        if (this.isSelected(tile)) {
+            this.unselectTile(tile);
+        }
+        else {
+            this.selectTile(tile);
+        }
+    }
+    selectTile(tile) {
+        if (this.multiple) {
+            if (!this.isSelected(tile)) {
+                const value = this.value || [];
+                this.value = [...coerceArray(value), tile.value];
+            }
+        }
+        else {
+            this.value = tile.value;
+        }
+    }
+    unselectTile(tile) {
+        if (this.multiple) {
+            const value = this.value || [];
+            this.value = value.filter(v => v !== tile.value);
+        }
+        else {
+            this.value = undefined;
+        }
+    }
+    getSelectedTiles() {
+        return this.tiles.filter(t => this.isSelected(t));
+    }
+    getOverlayTpl(tile) {
+        // console.log('overlayTpls', this.overlayTpls)
+        return (this.overlayTpls || []).find(t => t.record?.name === tile.name);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamTiledSelectComponent, isStandalone: true, selector: "seam-tiled-select", inputs: { layout: "layout", tiles: "tiles", val: ["value", "val"], disabled: "disabled", multiple: "multiple", selectionToggleable: "selectionToggleable", tileBackdrop: "tileBackdrop", showSelectedIcon: "showSelectedIcon", animationsDisabled: "animationsDisabled" }, outputs: { change: "change" }, host: { properties: { "attr.data-testid": "\"tiled-select\"" } }, providers: [TILED_SELECT_VALUE_ACCESSOR], queries: [{ propertyName: "overlayTpls", predicate: TheSeamTiledSelectTileOverlayDirective }], ngImport: i0, template: "<div class=\"tiled-select--container\"\n  [class.grid]=\"layout === 'grid'\"\n  [class.list]=\"layout === 'list'\"\n  [@tiles]=\"tilesAnimationState\"\n  [@.disabled]=\"animationsDisabled\">\n  <ng-container *ngFor=\"let tile of tiles; let index = index\">\n    <div class=\"tile-wrapper\" [ngClass]=\"tile.customClass || ''\">\n      <seam-tiled-select-tile\n        class=\"tiled-select-tile\"\n        [ngClass]=\"tile.customClass || ''\"\n        [name]=\"tile.name\"\n        [label]=\"tile.label\"\n        [icon]=\"tile.icon\"\n        [disabled]=\"disabled || tile.disabled\"\n        [attr.hidden]=\"tile.hidden\"\n        [layout]=\"layout\"\n        [selected]=\"isSelected(tile)\"\n        [selectable]=\"true\"\n        [tileBackdrop]=\"tileBackdrop\"\n        [showSelectedIcon]=\"showSelectedIcon\"\n        [overlayTpl]=\"getOverlayTpl(tile)\"\n        (activated)=\"onTileSelected($event, tile)\"\n        [attr.data-tile-index]=\"index\"\n        [attr.data-testid]=\"tile.name\">\n      </seam-tiled-select-tile>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:block;width:100%}.tiled-select--container{display:flex;flex-wrap:wrap;justify-content:center}.tiled-select--container.grid{flex-direction:row}.tiled-select--container.grid .tile-wrapper{padding:12px;width:200px;height:180px}.tiled-select--container.grid .tile-wrapper .tiled-select-tile{height:100%}.tiled-select--container.grid .tile-wrapper.other-org{width:auto;height:auto}@media screen and (max-width: 600px){.tiled-select--container.grid .tile-wrapper{padding:6px;width:150px;height:135px}}.tiled-select--container.list{flex-direction:column}.tiled-select--container.list .tile-wrapper{width:100%;height:50px}.tiled-select--container.list .tile-wrapper:not(:last-child){margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TheSeamTiledSelectTileComponent, selector: "seam-tiled-select-tile", inputs: ["layout", "name", "label", "icon", "disabled", "selected", "tileBackdrop", "selectable", "grayscaleOnDisable", "showLabel", "showSelectedIcon", "iconClass", "overlayTpl"], outputs: ["activated"] }], animations: [
+            trigger('tiles', [
+                transition('* => *', [
+                    query(':enter', useAnimation(slideEnterAnimation), { optional: true }),
+                ]),
+            ]),
+        ] });
+}
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectComponent.prototype, "multiple", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectComponent.prototype, "selectionToggleable", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectComponent.prototype, "tileBackdrop", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectComponent.prototype, "showSelectedIcon", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamTiledSelectComponent.prototype, "animationsDisabled", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-tiled-select', providers: [TILED_SELECT_VALUE_ACCESSOR], host: {
+                        '[attr.data-testid]': '"tiled-select"',
+                    }, animations: [
+                        trigger('tiles', [
+                            transition('* => *', [
+                                query(':enter', useAnimation(slideEnterAnimation), { optional: true }),
+                            ]),
+                        ]),
+                    ], imports: [
+                        NgFor,
+                        NgClass,
+                        TheSeamTiledSelectTileComponent,
+                    ], template: "<div class=\"tiled-select--container\"\n  [class.grid]=\"layout === 'grid'\"\n  [class.list]=\"layout === 'list'\"\n  [@tiles]=\"tilesAnimationState\"\n  [@.disabled]=\"animationsDisabled\">\n  <ng-container *ngFor=\"let tile of tiles; let index = index\">\n    <div class=\"tile-wrapper\" [ngClass]=\"tile.customClass || ''\">\n      <seam-tiled-select-tile\n        class=\"tiled-select-tile\"\n        [ngClass]=\"tile.customClass || ''\"\n        [name]=\"tile.name\"\n        [label]=\"tile.label\"\n        [icon]=\"tile.icon\"\n        [disabled]=\"disabled || tile.disabled\"\n        [attr.hidden]=\"tile.hidden\"\n        [layout]=\"layout\"\n        [selected]=\"isSelected(tile)\"\n        [selectable]=\"true\"\n        [tileBackdrop]=\"tileBackdrop\"\n        [showSelectedIcon]=\"showSelectedIcon\"\n        [overlayTpl]=\"getOverlayTpl(tile)\"\n        (activated)=\"onTileSelected($event, tile)\"\n        [attr.data-tile-index]=\"index\"\n        [attr.data-testid]=\"tile.name\">\n      </seam-tiled-select-tile>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:block;width:100%}.tiled-select--container{display:flex;flex-wrap:wrap;justify-content:center}.tiled-select--container.grid{flex-direction:row}.tiled-select--container.grid .tile-wrapper{padding:12px;width:200px;height:180px}.tiled-select--container.grid .tile-wrapper .tiled-select-tile{height:100%}.tiled-select--container.grid .tile-wrapper.other-org{width:auto;height:auto}@media screen and (max-width: 600px){.tiled-select--container.grid .tile-wrapper{padding:6px;width:150px;height:135px}}.tiled-select--container.list{flex-direction:column}.tiled-select--container.list .tile-wrapper{width:100%;height:50px}.tiled-select--container.list .tile-wrapper:not(:last-child){margin-bottom:4px}\n"] }]
+        }], propDecorators: { layout: [{
+                type: Input
+            }], tiles: [{
+                type: Input
+            }], val: [{
+                type: Input,
+                args: ['value']
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], selectionToggleable: [{
+                type: Input
+            }], tileBackdrop: [{
+                type: Input
+            }], showSelectedIcon: [{
+                type: Input
+            }], animationsDisabled: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], overlayTpls: [{
+                type: ContentChildren,
+                args: [TheSeamTiledSelectTileOverlayDirective]
+            }] } });
+
+class TheSeamTiledSelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectModule, imports: [TheSeamTiledSelectComponent,
+            TheSeamTiledSelectTileComponent,
+            TheSeamTiledSelectTileOverlayDirective,
+            TheSeamTiledSelectTileIconTplDirective,
+            TheSeamTiledSelectTileLabelTplDirective], exports: [TheSeamTiledSelectComponent,
+            TheSeamTiledSelectTileComponent,
+            TheSeamTiledSelectTileOverlayDirective,
+            TheSeamTiledSelectTileIconTplDirective,
+            TheSeamTiledSelectTileLabelTplDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectModule, imports: [TheSeamTiledSelectComponent,
+            TheSeamTiledSelectTileComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTiledSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TheSeamTiledSelectComponent,
+                        TheSeamTiledSelectTileComponent,
+                        TheSeamTiledSelectTileOverlayDirective,
+                        TheSeamTiledSelectTileIconTplDirective,
+                        TheSeamTiledSelectTileLabelTplDirective,
+                    ],
+                    exports: [
+                        TheSeamTiledSelectComponent,
+                        TheSeamTiledSelectTileComponent,
+                        TheSeamTiledSelectTileOverlayDirective,
+                        TheSeamTiledSelectTileIconTplDirective,
+                        TheSeamTiledSelectTileLabelTplDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TILED_SELECT_VALUE_ACCESSOR, TheSeamTiledSelectComponent, TheSeamTiledSelectHarness, TheSeamTiledSelectModule, TheSeamTiledSelectTileComponent, TheSeamTiledSelectTileHarness, TheSeamTiledSelectTileIconComponent, TheSeamTiledSelectTileIconTplDirective, TheSeamTiledSelectTileLabelTplDirective, TheSeamTiledSelectTileOverlayDirective, slideEnterAnimation, tilePulse, tileScaleDown, tileScaleUp };
+//# sourceMappingURL=theseam-ui-common-tiled-select.mjs.map