@theseam/ui-common 0.3.10 → 0.4.0-beta.0

package/fesm2015/theseam-ui-common-icon.mjs

@@ -0,0 +1,588 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, Input, HostBinding, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i2 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { __decorate } from 'tslib';
+import { InputBoolean } from '@theseam/ui-common/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { animation, style, animate, keyframes, trigger, transition, useAnimation } from '@angular/animations';
+import { faCircle, faBan, faChartLine, faChartArea, faChartBar, faCheck, faCloudUploadAlt, faCog, faEdit, faExclamation, faExclamationCircle, faExclamationTriangle, faExternalLinkSquareAlt, faFileContract, faFileCsv, faFileDownload, faFileExport, faFileImport, faFileInvoice, faFileInvoiceDollar, faFileMedical, faFileMedicalAlt, faFilePrescription, faFileSignature, faFileUpload, faInbox, faInfoCircle, faLock, faLockOpen, faPrint, faReceipt, faReply, faShare, faSignature, faTimes, faTrash, faUserCheck, faUserEdit, faUserTimes, faUsers, faUserPlus } from '@fortawesome/free-solid-svg-icons';
+import { faFilePdf, faFileWord, faFileExcel, faFileImage, faFileArchive, faFilePowerpoint, faFileAlt, faFile, faAddressCard, faBell, faBookmark, faCheckCircle, faClock, faComment, faEnvelope, faEnvelopeOpen, faFileAudio, faFileCode, faFileVideo, faFolder, faFolderOpen, faImage, faImages, faQuestionCircle, faSave, faStickyNote, faTimesCircle, faTrashAlt, faUser, faUserCircle } from '@fortawesome/free-regular-svg-icons';
+
+//
+// TODO: Ensure all inputs correctly update the state whenever changed, not just
+// on initial load.
+//
+// Browsers that do not support css grayscale filter.
+const needToFix = /(MSIE 10)|(Trident.*rv:11\.0)|( Edge\/[\d\.]+$)/.test(navigator.userAgent);
+class IconComponent {
+    constructor() {
+        this.needToFix = needToFix;
+        /** Toggles whether the img/icon will attempt to be grayscale when disabled is true. */
+        this.grayscaleOnDisable = true;
+        /** Toggles the img/icon to grayscale if `grayscaleOnDisable` is true. */
+        this.disabled = false;
+        this._showDefaultOnError = false;
+        this._hasError = false;
+    }
+    /**
+     * The icon to display.
+     *
+     * If the input icon is a string an `img` element will be used with icon as `src`.
+     * If the input is not a string it will be assumed to be a font-awesome IconProp object.
+     */
+    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;
+        }
+        this._iconUrlBeforeError = undefined;
+        this._iconObjBeforeError = undefined;
+        if (!this._iconUrl && !this._iconObj) {
+            this._iconUrl = this._defaultIconUrl;
+            this._iconObj = this._defaultIconObj;
+        }
+    }
+    /**
+     * Toggles whether an image that has thrown the `onerror` event should show
+     * the `defaultIcon` instead.
+     */
+    get showDefaultOnError() { return this._showDefaultOnError; }
+    set showDefaultOnError(value) {
+        this._showDefaultOnError = coerceBooleanProperty(value);
+        if (this._hasError) {
+            if (this._iconUrlBeforeError || this._iconObjBeforeError) {
+                this._iconUrl = this._iconUrlBeforeError;
+                this._iconObj = this._iconObjBeforeError;
+                this._iconUrlBeforeError = undefined;
+                this._iconObjBeforeError = undefined;
+            }
+            else if (this._showDefaultOnError) {
+                this._iconUrl = this._defaultIconUrl;
+                this._iconObj = this._defaultIconObj;
+            }
+        }
+    }
+    /**
+     * Shown if icon is not set or if showDefaultOnError is true and img has thrown an error.
+     */
+    get defaultIcon() { return this._defaultIconUrl || this._defaultIconObj; }
+    set defaultIcon(value) {
+        if (typeof value === 'string') {
+            this._defaultIconUrl = value;
+            this._defaultIconObj = undefined;
+        }
+        else {
+            this._defaultIconUrl = undefined;
+            this._defaultIconObj = value;
+        }
+        if (!this._defaultIconUrl && !this._defaultIconObj) {
+            this._iconUrl = this._iconUrlBeforeError;
+            this._iconObj = this._iconObjBeforeError;
+        }
+        if (!this._iconUrl && !this._iconObj) {
+            this._iconUrl = this._defaultIconUrl;
+            this._iconObj = this._defaultIconObj;
+        }
+    }
+    get _iconTypeAttr() { return this.iconType; }
+    _imgError(event) {
+        this._hasError = true;
+        if (this._showDefaultOnError && (this._defaultIconUrl || this._defaultIconObj)) {
+            this._iconUrlBeforeError = this._iconUrl;
+            this._iconObjBeforeError = this._iconObj;
+            this._iconUrl = this._defaultIconUrl;
+            this._iconObj = this._defaultIconObj;
+        }
+    }
+    get _cssDisabled() { return this.disabled || null; }
+    get _cssNoGreyscale() { return !this.grayscaleOnDisable; }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: IconComponent, selector: "seam-icon", inputs: { grayscaleOnDisable: "grayscaleOnDisable", disabled: "disabled", iconClass: "iconClass", icon: "icon", size: "size", showDefaultOnError: "showDefaultOnError", defaultIcon: "defaultIcon", iconType: "iconType" }, host: { properties: { "attr.icon-type": "this._iconTypeAttr", "class.disabled": "this._cssDisabled", "class.no-grayscale": "this._cssNoGreyscale" } }, ngImport: i0, template: "<fa-icon *ngIf=\"_iconObj\"\n  class=\"seam-icon--fa {{ iconClass }}\"\n  [icon]=\"_iconObj\"\n  [size]=\"size || undefined\">\n</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=\"seam-icon--img {{ iconClass }}\" style=\"display: block; visibility: hidden;\" alt=\"Icon\" [src]=\"_iconUrl\" (error)=\"_imgError($event)\">\n      </span>\n    </ng-container>\n    <ng-container *ngIf=\"!disabled\">\n      <img class=\"seam-icon--img {{ iconClass }}\" [src]=\"_iconUrl\" alt=\"Icon\" (error)=\"_imgError($event)\">\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!needToFix\">\n    <img class=\"seam-icon--img {{ iconClass }}\" [src]=\"_iconUrl\" alt=\"Icon\" (error)=\"_imgError($event)\">\n  </ng-container>\n</ng-container>\n\n<ng-content select=\".sr-only,seam-icon-notification\"></ng-content>\n", styles: [":host{display:inline-block}:host:disabled:not(.no-grayscale),:host.disabled:not(.no-grayscale){filter:grayscale(1)}:host[icon-type=styled-square]{border:1px solid #dee2e6;border-radius:8px}:host[icon-type=styled-square],:host[icon-type=borderless-styled-square]{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;min-width:39px;width:39px;min-height:39px;height:39px;padding:1px;align-items:center;display:inline-flex;vertical-align:top}:host[icon-type=styled-square] img,:host[icon-type=borderless-styled-square] img{max-width:100%;max-height:100%;margin:0 auto}:host[icon-type=styled-square] .seam-icon--fa,:host[icon-type=borderless-styled-square] .seam-icon--fa{height:100%;display:flex;flex-direction:row;justify-content:center;text-align:center;width:100%;padding:2px}:host[icon-type=styled-square] .seam-icon--fa ::ng-deep .svg-inline--fa,:host[icon-type=borderless-styled-square] .seam-icon--fa ::ng-deep .svg-inline--fa{max-width:100%;height:100%;width:100%}:host[icon-type=image-fill]{max-height:100%;max-width:100%;width:100%;height:100%}:host[icon-type=image-fill] img{max-width:100%;max-height:100%;margin:0 auto}:host[icon-type=image-fill] .seam-icon--fa{height:100%;display:flex;flex-direction:row;justify-content:center;text-align:center;width:100%}:host[icon-type=image-fill] .seam-icon--fa ::ng-deep .svg-inline--fa{max-width:100%;height:100%;width:100%}.grey-fix{visibility:hidden;display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+__decorate([
+    InputBoolean()
+], IconComponent.prototype, "grayscaleOnDisable", void 0);
+__decorate([
+    InputBoolean()
+], IconComponent.prototype, "disabled", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-icon', template: "<fa-icon *ngIf=\"_iconObj\"\n  class=\"seam-icon--fa {{ iconClass }}\"\n  [icon]=\"_iconObj\"\n  [size]=\"size || undefined\">\n</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=\"seam-icon--img {{ iconClass }}\" style=\"display: block; visibility: hidden;\" alt=\"Icon\" [src]=\"_iconUrl\" (error)=\"_imgError($event)\">\n      </span>\n    </ng-container>\n    <ng-container *ngIf=\"!disabled\">\n      <img class=\"seam-icon--img {{ iconClass }}\" [src]=\"_iconUrl\" alt=\"Icon\" (error)=\"_imgError($event)\">\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!needToFix\">\n    <img class=\"seam-icon--img {{ iconClass }}\" [src]=\"_iconUrl\" alt=\"Icon\" (error)=\"_imgError($event)\">\n  </ng-container>\n</ng-container>\n\n<ng-content select=\".sr-only,seam-icon-notification\"></ng-content>\n", styles: [":host{display:inline-block}:host:disabled:not(.no-grayscale),:host.disabled:not(.no-grayscale){filter:grayscale(1)}:host[icon-type=styled-square]{border:1px solid #dee2e6;border-radius:8px}:host[icon-type=styled-square],:host[icon-type=borderless-styled-square]{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;min-width:39px;width:39px;min-height:39px;height:39px;padding:1px;align-items:center;display:inline-flex;vertical-align:top}:host[icon-type=styled-square] img,:host[icon-type=borderless-styled-square] img{max-width:100%;max-height:100%;margin:0 auto}:host[icon-type=styled-square] .seam-icon--fa,:host[icon-type=borderless-styled-square] .seam-icon--fa{height:100%;display:flex;flex-direction:row;justify-content:center;text-align:center;width:100%;padding:2px}:host[icon-type=styled-square] .seam-icon--fa ::ng-deep .svg-inline--fa,:host[icon-type=borderless-styled-square] .seam-icon--fa ::ng-deep .svg-inline--fa{max-width:100%;height:100%;width:100%}:host[icon-type=image-fill]{max-height:100%;max-width:100%;width:100%;height:100%}:host[icon-type=image-fill] img{max-width:100%;max-height:100%;margin:0 auto}:host[icon-type=image-fill] .seam-icon--fa{height:100%;display:flex;flex-direction:row;justify-content:center;text-align:center;width:100%}:host[icon-type=image-fill] .seam-icon--fa ::ng-deep .svg-inline--fa{max-width:100%;height:100%;width:100%}.grey-fix{visibility:hidden;display:block}\n"] }]
+        }], propDecorators: { grayscaleOnDisable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], showDefaultOnError: [{
+                type: Input
+            }], defaultIcon: [{
+                type: Input
+            }], iconType: [{
+                type: Input
+            }], _iconTypeAttr: [{
+                type: HostBinding,
+                args: ['attr.icon-type']
+            }], _cssDisabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], _cssNoGreyscale: [{
+                type: HostBinding,
+                args: ['class.no-grayscale']
+            }] } });
+
+class IconBtnComponent {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        /** Toggles whether the img/icon will attempt to be grayscale when disabled is true. */
+        this.grayscaleOnDisable = true;
+        /** Toggles the img/icon to grayscale if `grayscaleOnDisable` is true. */
+        this.disabled = false;
+        /**
+         * Toggles whether an image that has thrown the `onerror` event should show
+         * the `defaultIcon` instead.
+         */
+        this.showDefaultOnError = false;
+        /**
+         * Shown if icon is not set or if showDefaultOnError is true and img has thrown an error.
+         *
+         * NOTE: Not supported for icon-btn yet.
+         */
+        // @Input() defaultIcon: SeamIcon
+        this.iconType = 'image-fill';
+        this._cssPadding0 = true;
+        this._btn = true;
+        this._textNoWrap = true;
+        this.btnTheme = 'default';
+        this.badgeTheme = 'light';
+        this.badgeText = '';
+    }
+    get _btnDefault() { return this.isBtnTheme('default'); }
+    get _btnPrimary() { return this.isBtnTheme('primary'); }
+    get _btnSecondary() { return this.isBtnTheme('secondary'); }
+    get _btnSuccess() { return this.isBtnTheme('success'); }
+    get _btnDanger() { return this.isBtnTheme('danger'); }
+    get _btnWarning() { return this.isBtnTheme('warning'); }
+    get _btnInfo() { return this.isBtnTheme('info'); }
+    get _btnLight() { return this.isBtnTheme('light'); }
+    get _btnDark() { return this.isBtnTheme('dark'); }
+    get _btnLightGray() { return this.isBtnTheme('lightgray'); }
+    get _btnSizeSm() { return this.btnSize === 'sm'; }
+    get _btnSizeLg() { return this.btnSize === 'lg'; }
+    get type() { return this._type; }
+    set type(value) {
+        this._type = value;
+    }
+    get role() { return this._role; }
+    set role(value) {
+        this._role = value;
+    }
+    ngOnInit() { }
+    ngDoCheck() {
+        if (this._isButton()) {
+            this._renderer.setAttribute(this._elementRef.nativeElement, 'type', this._type || 'button');
+        }
+        else if (this._isAnchor()) {
+            this._renderer.setAttribute(this._elementRef.nativeElement, 'role', this._role || 'button');
+        }
+    }
+    isBtnTheme(type) {
+        return this.btnTheme === type;
+    }
+    _isButton() {
+        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'button';
+    }
+    _isAnchor() {
+        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'button';
+    }
+}
+IconBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IconBtnComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+IconBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: IconBtnComponent, selector: "button[seamIconBtn]", inputs: { grayscaleOnDisable: "grayscaleOnDisable", disabled: "disabled", iconClass: "iconClass", icon: "icon", size: "size", showDefaultOnError: "showDefaultOnError", iconType: "iconType", btnTheme: "btnTheme", badgeTheme: "badgeTheme", badgeText: "badgeText", btnSize: "btnSize", type: "type", role: "role" }, host: { properties: { "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null", "class.p-0": "this._cssPadding0", "class.btn": "this._btn", "class.text-nowrap": "this._textNoWrap", "class.btn-default": "this._btnDefault", "class.btn-primary": "this._btnPrimary", "class.btn-secondary": "this._btnSecondary", "class.btn-success": "this._btnSuccess", "class.btn-danger": "this._btnDanger", "class.btn-warning": "this._btnWarning", "class.btn-info": "this._btnInfo", "class.btn-light": "this._btnLight", "class.btn-dark": "this._btnDark", "class.btn-lightgray": "this._btnLightGray", "class.btn-sm": "this._btnSizeSm", "class.btn-lg": "this._btnSizeLg" } }, ngImport: i0, template: `
+    <seam-icon *ngIf="icon"
+      [grayscaleOnDisable]="grayscaleOnDisable"
+      [disabled]="disabled"
+      [iconClass]="iconClass"
+      [icon]="icon"
+      [size]="size"
+      [showDefaultOnError]="showDefaultOnError"
+      [iconType]="iconType">
+    </seam-icon>
+    <ng-content select=".sr-only,seam-icon-notification"></ng-content>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }] });
+__decorate([
+    InputBoolean()
+], IconBtnComponent.prototype, "grayscaleOnDisable", void 0);
+__decorate([
+    InputBoolean()
+], IconBtnComponent.prototype, "disabled", void 0);
+__decorate([
+    InputBoolean()
+], IconBtnComponent.prototype, "showDefaultOnError", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IconBtnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[seamIconBtn]', template: `
+    <seam-icon *ngIf="icon"
+      [grayscaleOnDisable]="grayscaleOnDisable"
+      [disabled]="disabled"
+      [iconClass]="iconClass"
+      [icon]="icon"
+      [size]="size"
+      [showDefaultOnError]="showDefaultOnError"
+      [iconType]="iconType">
+    </seam-icon>
+    <ng-content select=".sr-only,seam-icon-notification"></ng-content>
+  `, host: {
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.disabled]': 'disabled || null',
+                    } }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { grayscaleOnDisable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], showDefaultOnError: [{
+                type: Input
+            }], iconType: [{
+                type: Input
+            }], _cssPadding0: [{
+                type: HostBinding,
+                args: ['class.p-0']
+            }], _btn: [{
+                type: HostBinding,
+                args: ['class.btn']
+            }], _textNoWrap: [{
+                type: HostBinding,
+                args: ['class.text-nowrap']
+            }], _btnDefault: [{
+                type: HostBinding,
+                args: ['class.btn-default']
+            }], _btnPrimary: [{
+                type: HostBinding,
+                args: ['class.btn-primary']
+            }], _btnSecondary: [{
+                type: HostBinding,
+                args: ['class.btn-secondary']
+            }], _btnSuccess: [{
+                type: HostBinding,
+                args: ['class.btn-success']
+            }], _btnDanger: [{
+                type: HostBinding,
+                args: ['class.btn-danger']
+            }], _btnWarning: [{
+                type: HostBinding,
+                args: ['class.btn-warning']
+            }], _btnInfo: [{
+                type: HostBinding,
+                args: ['class.btn-info']
+            }], _btnLight: [{
+                type: HostBinding,
+                args: ['class.btn-light']
+            }], _btnDark: [{
+                type: HostBinding,
+                args: ['class.btn-dark']
+            }], _btnLightGray: [{
+                type: HostBinding,
+                args: ['class.btn-lightgray']
+            }], _btnSizeSm: [{
+                type: HostBinding,
+                args: ['class.btn-sm']
+            }], _btnSizeLg: [{
+                type: HostBinding,
+                args: ['class.btn-lg']
+            }], btnTheme: [{
+                type: Input
+            }], badgeTheme: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], btnSize: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }] } });
+
+const pulseAnimation = animation([
+    style({ transform: 'scale(1)' }),
+    animate('{{ timings }}', keyframes([
+        style({ transform: 'scale(1)', offset: 0 }),
+        style({ transform: 'scale({{ scale }})', offset: 0.5 }),
+        style({ transform: 'scale(1)', offset: 1 })
+    ]))
+]);
+class IconNotificationComponent {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this.hidden = false;
+        /** Toggles whether the img/icon will attempt to be grayscale when disabled is true. */
+        this.grayscaleOnDisable = true;
+        /** Toggles the img/icon to grayscale if `grayscaleOnDisable` is true. */
+        this.disabled = false;
+        /**
+         * The icon to display.
+         *
+         * If the input icon is a string an `img` element will be used with icon as `src`.
+         * If the input is not a string it will be assumed to be a font-awesome IconProp object.
+         */
+        this.icon = faCircle;
+        /**
+         * Toggles whether an image that has thrown the `onerror` event should show
+         * the `defaultIcon` instead.
+         */
+        this.showDefaultOnError = false;
+        this.iconType = 'image-fill';
+    }
+    ngOnInit() {
+        if (this._elementRef && this._elementRef.nativeElement && this._elementRef.nativeElement.parentElement) {
+            this._elementRef.nativeElement.parentElement.style.position = 'relative';
+        }
+    }
+}
+IconNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IconNotificationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+IconNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: IconNotificationComponent, selector: "seam-icon-notification", inputs: { count: "count", hidden: "hidden", grayscaleOnDisable: "grayscaleOnDisable", disabled: "disabled", iconClass: "iconClass", icon: "icon", showDefaultOnError: "showDefaultOnError", size: "size", iconType: "iconType" }, host: { properties: { "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null" } }, ngImport: i0, template: `
+    <seam-icon *ngIf="icon && !hidden" [@counterChange]="count"
+      [grayscaleOnDisable]="grayscaleOnDisable"
+      [disabled]="disabled"
+      [iconClass]="iconClass"
+      [icon]="icon"
+      [size]="size"
+      [showDefaultOnError]="showDefaultOnError"
+      [iconType]="iconType">
+    </seam-icon>
+    <ng-content select=".sr-only"></ng-content>
+  `, isInline: true, styles: [":host{position:absolute;inset:0}seam-icon{position:absolute;top:4px;right:4px;width:25%!important;height:25%!important;min-width:15px;min-height:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], animations: [
+        trigger('counterChange', [
+            transition(':increment', useAnimation(pulseAnimation, {
+                params: {
+                    timings: '400ms ease-in-out',
+                    scale: 1.2
+                }
+            }))
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    InputBoolean()
+], IconNotificationComponent.prototype, "hidden", void 0);
+__decorate([
+    InputBoolean()
+], IconNotificationComponent.prototype, "grayscaleOnDisable", void 0);
+__decorate([
+    InputBoolean()
+], IconNotificationComponent.prototype, "disabled", void 0);
+__decorate([
+    InputBoolean()
+], IconNotificationComponent.prototype, "showDefaultOnError", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: IconNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-icon-notification', template: `
+    <seam-icon *ngIf="icon && !hidden" [@counterChange]="count"
+      [grayscaleOnDisable]="grayscaleOnDisable"
+      [disabled]="disabled"
+      [iconClass]="iconClass"
+      [icon]="icon"
+      [size]="size"
+      [showDefaultOnError]="showDefaultOnError"
+      [iconType]="iconType">
+    </seam-icon>
+    <ng-content select=".sr-only"></ng-content>
+  `, host: {
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.disabled]': 'disabled || null',
+                    }, animations: [
+                        trigger('counterChange', [
+                            transition(':increment', useAnimation(pulseAnimation, {
+                                params: {
+                                    timings: '400ms ease-in-out',
+                                    scale: 1.2
+                                }
+                            }))
+                        ])
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;inset:0}seam-icon{position:absolute;top:4px;right:4px;width:25%!important;height:25%!important;min-width:15px;min-height:15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { count: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], grayscaleOnDisable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], showDefaultOnError: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], iconType: [{
+                type: Input
+            }] } });
+
+class TheSeamIconModule {
+}
+TheSeamIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamIconModule, declarations: [IconComponent,
+        IconBtnComponent,
+        IconNotificationComponent], imports: [CommonModule,
+        FontAwesomeModule], exports: [IconComponent,
+        IconBtnComponent,
+        IconNotificationComponent] });
+TheSeamIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamIconModule, imports: [CommonModule,
+        FontAwesomeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        IconComponent,
+                        IconBtnComponent,
+                        IconNotificationComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FontAwesomeModule
+                    ],
+                    exports: [
+                        IconComponent,
+                        IconBtnComponent,
+                        IconNotificationComponent
+                    ]
+                }]
+        }] });
+
+const FILE_EXTENSION_ICONS = {
+    'pdf': faFilePdf,
+    'doc': faFileWord,
+    'docx': faFileWord,
+    'xls': faFileExcel,
+    'xlsx': faFileExcel,
+    'gif': faFileImage,
+    'jpg': faFileImage,
+    'jpeg': faFileImage,
+    'png': faFileImage,
+    'zip': faFileArchive,
+    'ppt': faFilePowerpoint,
+    'pptx': faFilePowerpoint,
+    'txt': faFileAlt,
+    'json': faFileAlt
+};
+const DEFAULT_FILE_EXTENSION_ICON = faFile;
+function fileExtensionIcon(extension, defaultIfNotFound = true) {
+    if (!extension) {
+        return defaultIfNotFound ? DEFAULT_FILE_EXTENSION_ICON : undefined;
+    }
+    let ext = extension;
+    if (ext.charAt(0) === '.') {
+        ext = ext.substr(1);
+    }
+    const icon = FILE_EXTENSION_ICONS[ext];
+    if (!icon && defaultIfNotFound) {
+        return DEFAULT_FILE_EXTENSION_ICON;
+    }
+    return icon;
+}
+
+// TODO: Decide a good way to do this, so that we don't have to import full icon
+// libraries, but still provide icon choices to use from a string. One way could
+// be to define a dictionary of app icons that we can use that map a unique
+// string to an icon definition.
+const knownIcons = {
+    'faAddressCard': faAddressCard,
+    'faBan': faBan,
+    'faBell': faBell,
+    'faBookmark': faBookmark,
+    'faChartLine': faChartLine,
+    'faChartArea': faChartArea,
+    'faChartBar': faChartBar,
+    'faCheck': faCheck,
+    'faCheckCircle': faCheckCircle,
+    'faClock': faClock,
+    'faCloudUploadAlt': faCloudUploadAlt,
+    'faComment': faComment,
+    'faCog': faCog,
+    'faEdit': faEdit,
+    'faEnvelope': faEnvelope,
+    'faEnvelopeOpen': faEnvelopeOpen,
+    'faExclamation': faExclamation,
+    'faExclamationCircle': faExclamationCircle,
+    'faExclamationTriangle': faExclamationTriangle,
+    'faExternalLinkSquareAlt': faExternalLinkSquareAlt,
+    'faFile': faFile,
+    'faFileAlt': faFileAlt,
+    'faFileArchive': faFileArchive,
+    'faFileAudio': faFileAudio,
+    'faFileCode': faFileCode,
+    'faFileContract': faFileContract,
+    'faFileCsv': faFileCsv,
+    'faFileDownload': faFileDownload,
+    'faFileExcel': faFileExcel,
+    'faFileExport': faFileExport,
+    'faFileImage': faFileImage,
+    'faFileImport': faFileImport,
+    'faFileInvoice': faFileInvoice,
+    'faFileInvoiceDollar': faFileInvoiceDollar,
+    'faFileMedical': faFileMedical,
+    'faFileMedicalAlt': faFileMedicalAlt,
+    'faFilePdf': faFilePdf,
+    'faFilePowerpoint': faFilePowerpoint,
+    'faFilePrescription': faFilePrescription,
+    'faFileSignature': faFileSignature,
+    'faFileUpload': faFileUpload,
+    'faFileVideo': faFileVideo,
+    'faFileWord': faFileWord,
+    'faFolder': faFolder,
+    'faFolderOpen': faFolderOpen,
+    'faImage': faImage,
+    'faImages': faImages,
+    'faInbox': faInbox,
+    'faInfoCircle': faInfoCircle,
+    'faLock': faLock,
+    'faLockOpen': faLockOpen,
+    'faPrint': faPrint,
+    'faQuestionCircle': faQuestionCircle,
+    'faReceipt': faReceipt,
+    'faReply': faReply,
+    'faSave': faSave,
+    'faShare': faShare,
+    'faSignature': faSignature,
+    'faStickyNote': faStickyNote,
+    'faTimes': faTimes,
+    'faTimesCircle': faTimesCircle,
+    'faTrash': faTrash,
+    'faTrashAlt': faTrashAlt,
+    'faUser': faUser,
+    'faUserCheck': faUserCheck,
+    'faUserCircle': faUserCircle,
+    'faUserEdit': faUserEdit,
+    'faUserTimes': faUserTimes,
+    'faUsers': faUsers,
+    'faUserPlus': faUserPlus
+};
+function getKnownIcon(iconStr) {
+    return knownIcons[iconStr];
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_FILE_EXTENSION_ICON, IconBtnComponent, IconComponent, IconNotificationComponent, TheSeamIconModule, fileExtensionIcon, getKnownIcon, pulseAnimation };
+//# sourceMappingURL=theseam-ui-common-icon.mjs.map