@flywheel-io/vision 0.9.1 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/components/button/button.component.d.ts +3 -9
  2. package/esm2020/components/button/button.component.mjs +9 -25
  3. package/esm2020/components/notification/notification-container/notification-container.component.mjs +1 -1
  4. package/fesm2015/flywheel-io-vision.mjs +8 -23
  5. package/fesm2015/flywheel-io-vision.mjs.map +1 -1
  6. package/fesm2020/flywheel-io-vision.mjs +8 -23
  7. package/fesm2020/flywheel-io-vision.mjs.map +1 -1
  8. package/package.json +1 -1
package/components/button/button.component.d.ts CHANGED
@@ -1,17 +1,11 @@
1
1
  import * as i0 from "@angular/core";
2
2
  export declare class FwButtonComponent {
3
3
  color?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
4
- layout?: 'basic' | 'compact';
5
4
  size?: 'small' | 'medium' | 'large';
6
5
  type?: 'ghost' | 'solid' | 'outline';
7
6
  disabled?: boolean;
8
- leftIcon?: boolean;
9
- rightIcon?: boolean;
10
- leftIconSwap?: string;
11
- rightIconSwap?: string;
12
- dropDown?: boolean;
13
- showText?: boolean;
14
- dropDownValue: string;
7
+ leftIcon?: string;
8
+ rightIcon?: string;
15
9
  static ɵfac: i0.ɵɵFactoryDeclaration<FwButtonComponent, never>;
16
- static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonComponent, "fw-button", never, { "color": "color"; "layout": "layout"; "size": "size"; "type": "type"; "disabled": "disabled"; "leftIcon": "leftIcon"; "rightIcon": "rightIcon"; "leftIconSwap": "leftIconSwap"; "rightIconSwap": "rightIconSwap"; "dropDown": "dropDown"; "showText": "showText"; }, {}, never, ["*"], false>;
10
+ static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonComponent, "fw-button", never, { "color": "color"; "size": "size"; "type": "type"; "disabled": "disabled"; "leftIcon": "leftIcon"; "rightIcon": "rightIcon"; }, {}, never, ["*"], false>;
17
11
  }
package/esm2020/components/button/button.component.mjs CHANGED
@@ -1,38 +1,30 @@
1
1
  import { Component, Input } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "@angular/common";
4
- import * as i2 from "@angular/material/button";
5
- import * as i3 from "../icon/icon.component";
4
+ import * as i2 from "../icon/icon.component";
6
5
  export class FwButtonComponent {
7
6
  constructor() {
8
- this.layout = 'basic';
7
+ this.color = 'primary';
9
8
  this.size = 'medium';
10
- this.type = 'ghost';
9
+ this.type = 'solid';
11
10
  this.disabled = false;
12
- this.leftIcon = false;
13
- this.rightIcon = false;
14
- this.leftIconSwap = '';
15
- this.rightIconSwap = '';
16
- this.dropDown = false;
17
- this.showText = true;
18
- this.dropDownValue = 'chevron-down';
11
+ this.leftIcon = '';
12
+ this.rightIcon = '';
19
13
  }
20
14
  }
21
15
  FwButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
22
- FwButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonComponent, selector: "fw-button", inputs: { color: "color", layout: "layout", size: "size", type: "type", disabled: "disabled", leftIcon: "leftIcon", rightIcon: "rightIcon", leftIconSwap: "leftIconSwap", rightIconSwap: "rightIconSwap", dropDown: "dropDown", showText: "showText" }, host: { properties: { "class.small": "size === \"small\"", "class.medium": "size === \"medium\"", "class.large": "size === \"large\"", "class.compact": "layout === \"compact\"" }, classAttribute: "fw-button" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <button *ngSwitchCase=\"'outline'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'invisible': !showText && !rightIcon && !leftIcon && !dropDown, \n 'button-disabled': disabled,\n 'text-color border-color': true }\" mat-stroked-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n <button *ngSwitchCase=\"'solid'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'button-disabled': disabled,\n 'w-28': !showText && !rightIcon && !leftIcon && !dropDown }\" mat-flat-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n <button *ngSwitchCase=\"'ghost'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'hidden': !showText && !rightIcon && !leftIcon && !dropDown, \n 'button-disabled': disabled,\n 'text-color': true }\" mat-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #content>\n <fw-icon [class.pr-2]=\"showText\" *ngIf=\"leftIcon\">{{ leftIconSwap }}</fw-icon>\n <ng-content *ngIf=\"showText\"></ng-content>\n <fw-icon [class.pl-2]=\"showText\" *ngIf=\"rightIcon && !leftIcon\">{{ rightIconSwap }}</fw-icon>\n <fw-icon [class.pl-2]=\"showText || rightIcon || leftIcon\" *ngIf=\"dropDown\">{{ dropDownValue }}</fw-icon>\n</ng-template>", styles: [".white{color:#fff!important}.fill-white{background-color:#fff!important}.border-white{border-color:#fff!important}.border-top-white{border-top:1px solid;border-color:#fff!important}.border-right-white{border-right:1px solid;border-color:#fff!important}.border-bottom-white{border-bottom:1px solid;border-color:#fff!important}.border-left-white{border-left:1px solid;border-color:#fff!important}.black{color:#000!important}.fill-black{background-color:#000!important}.border-black{border-color:#000!important}.border-top-black{border-top:1px solid;border-color:#000!important}.border-right-black{border-right:1px solid;border-color:#000!important}.border-bottom-black{border-bottom:1px solid;border-color:#000!important}.border-left-black{border-left:1px solid;border-color:#000!important}.green{color:#59b96b!important}.fill-green{background-color:#59b96b!important}.border-green{border-color:#59b96b!important}.border-top-green{border-top:1px solid;border-color:#59b96b!important}.border-right-green{border-right:1px solid;border-color:#59b96b!important}.border-bottom-green{border-bottom:1px solid;border-color:#59b96b!important}.border-left-green{border-left:1px solid;border-color:#59b96b!important}.orange{color:#f7941d!important}.fill-orange{background-color:#f7941d!important}.border-orange{border-color:#f7941d!important}.border-top-orange{border-top:1px solid;border-color:#f7941d!important}.border-right-orange{border-right:1px solid;border-color:#f7941d!important}.border-bottom-orange{border-bottom:1px solid;border-color:#f7941d!important}.border-left-orange{border-left:1px solid;border-color:#f7941d!important}.red{color:#de584c!important}.fill-red{background-color:#de584c!important}.border-red{border-color:#de584c!important}.border-top-red{border-top:1px solid;border-color:#de584c!important}.border-right-red{border-right:1px solid;border-color:#de584c!important}.border-bottom-red{border-bottom:1px solid;border-color:#de584c!important}.border-left-red{border-left:1px solid;border-color:#de584c!important}.light-red{color:#f8e5e4!important}.fill-light-red{background-color:#f8e5e4!important}.border-light-red{border-color:#f8e5e4!important}.border-top-light-red{border-top:1px solid;border-color:#f8e5e4!important}.border-right-light-red{border-right:1px solid;border-color:#f8e5e4!important}.border-bottom-light-red{border-bottom:1px solid;border-color:#f8e5e4!important}.border-left-light-red{border-left:1px solid;border-color:#f8e5e4!important}.blue{color:#5871a2!important}.fill-blue{background-color:#5871a2!important}.border-blue{border-color:#5871a2!important}.border-top-blue{border-top:1px solid;border-color:#5871a2!important}.border-right-blue{border-right:1px solid;border-color:#5871a2!important}.border-bottom-blue{border-bottom:1px solid;border-color:#5871a2!important}.border-left-blue{border-left:1px solid;border-color:#5871a2!important}.focus-blue{color:#23527c!important}.fill-focus-blue{background-color:#23527c!important}.border-focus-blue{border-color:#23527c!important}.border-top-focus-blue{border-top:1px solid;border-color:#23527c!important}.border-right-focus-blue{border-right:1px solid;border-color:#23527c!important}.border-bottom-focus-blue{border-bottom:1px solid;border-color:#23527c!important}.border-left-focus-blue{border-left:1px solid;border-color:#23527c!important}.dark-blue{color:#394256!important}.fill-dark-blue{background-color:#394256!important}.border-dark-blue{border-color:#394256!important}.border-top-dark-blue{border-top:1px solid;border-color:#394256!important}.border-right-dark-blue{border-right:1px solid;border-color:#394256!important}.border-bottom-dark-blue{border-bottom:1px solid;border-color:#394256!important}.border-left-dark-blue{border-left:1px solid;border-color:#394256!important}.light-blue{color:#e7effe!important}.fill-light-blue{background-color:#e7effe!important}.border-light-blue{border-color:#e7effe!important}.border-top-light-blue{border-top:1px solid;border-color:#e7effe!important}.border-right-light-blue{border-right:1px solid;border-color:#e7effe!important}.border-bottom-light-blue{border-bottom:1px solid;border-color:#e7effe!important}.border-left-light-blue{border-left:1px solid;border-color:#e7effe!important}.bright-blue{color:#1b68fa!important}.fill-bright-blue{background-color:#1b68fa!important}.border-bright-blue{border-color:#1b68fa!important}.border-top-bright-blue{border-top:1px solid;border-color:#1b68fa!important}.border-right-bright-blue{border-right:1px solid;border-color:#1b68fa!important}.border-bottom-bright-blue{border-bottom:1px solid;border-color:#1b68fa!important}.border-left-bright-blue{border-left:1px solid;border-color:#1b68fa!important}.admin-black{color:#01010a!important}.fill-admin-black{background-color:#01010a!important}.border-admin-black{border-color:#01010a!important}.border-top-admin-black{border-top:1px solid;border-color:#01010a!important}.border-right-admin-black{border-right:1px solid;border-color:#01010a!important}.border-bottom-admin-black{border-bottom:1px solid;border-color:#01010a!important}.border-left-admin-black{border-left:1px solid;border-color:#01010a!important}.accent-purple{color:#b080fc!important}.fill-accent-purple{background-color:#b080fc!important}.border-accent-purple{border-color:#b080fc!important}.border-top-accent-purple{border-top:1px solid;border-color:#b080fc!important}.border-right-accent-purple{border-right:1px solid;border-color:#b080fc!important}.border-bottom-accent-purple{border-bottom:1px solid;border-color:#b080fc!important}.border-left-accent-purple{border-left:1px solid;border-color:#b080fc!important}.grey{color:#58595b!important}.fill-grey{background-color:#58595b!important}.border-grey{border-color:#58595b!important}.border-top-grey{border-top:1px solid;border-color:#58595b!important}.border-right-grey{border-right:1px solid;border-color:#58595b!important}.border-bottom-grey{border-bottom:1px solid;border-color:#58595b!important}.border-left-grey{border-left:1px solid;border-color:#58595b!important}.soft-grey{color:#dddede!important}.fill-soft-grey{background-color:#dddede!important}.border-soft-grey{border-color:#dddede!important}.border-top-soft-grey{border-top:1px solid;border-color:#dddede!important}.border-right-soft-grey{border-right:1px solid;border-color:#dddede!important}.border-bottom-soft-grey{border-bottom:1px solid;border-color:#dddede!important}.border-left-soft-grey{border-left:1px solid;border-color:#dddede!important}.light-grey{color:#eee!important}.fill-light-grey{background-color:#eee!important}.border-light-grey{border-color:#eee!important}.border-top-light-grey{border-top:1px solid;border-color:#eee!important}.border-right-light-grey{border-right:1px solid;border-color:#eee!important}.border-bottom-light-grey{border-bottom:1px solid;border-color:#eee!important}.border-left-light-grey{border-left:1px solid;border-color:#eee!important}.medium-grey{color:#ccc!important}.fill-medium-grey{background-color:#ccc!important}.border-medium-grey{border-color:#ccc!important}.border-top-medium-grey{border-top:1px solid;border-color:#ccc!important}.border-right-medium-grey{border-right:1px solid;border-color:#ccc!important}.border-bottom-medium-grey{border-bottom:1px solid;border-color:#ccc!important}.border-left-medium-grey{border-left:1px solid;border-color:#ccc!important}.medium-dark-grey{color:#999!important}.fill-medium-dark-grey{background-color:#999!important}.border-medium-dark-grey{border-color:#999!important}.border-top-medium-dark-grey{border-top:1px solid;border-color:#999!important}.border-right-medium-dark-grey{border-right:1px solid;border-color:#999!important}.border-bottom-medium-dark-grey{border-bottom:1px solid;border-color:#999!important}.border-left-medium-dark-grey{border-left:1px solid;border-color:#999!important}.dark-grey{color:#222!important}.fill-dark-grey{background-color:#222!important}.border-dark-grey{border-color:#222!important}.border-top-dark-grey{border-top:1px solid;border-color:#222!important}.border-right-dark-grey{border-right:1px solid;border-color:#222!important}.border-bottom-dark-grey{border-bottom:1px solid;border-color:#222!important}.border-left-dark-grey{border-left:1px solid;border-color:#222!important}.shuttle-gray{color:#5d6877!important}.fill-shuttle-gray{background-color:#5d6877!important}.border-shuttle-gray{border-color:#5d6877!important}.border-top-shuttle-gray{border-top:1px solid;border-color:#5d6877!important}.border-right-shuttle-gray{border-right:1px solid;border-color:#5d6877!important}.border-bottom-shuttle-gray{border-bottom:1px solid;border-color:#5d6877!important}.border-left-shuttle-gray{border-left:1px solid;border-color:#5d6877!important}.gull-gray{color:#9ea8b5!important}.fill-gull-gray{background-color:#9ea8b5!important}.border-gull-gray{border-color:#9ea8b5!important}.border-top-gull-gray{border-top:1px solid;border-color:#9ea8b5!important}.border-right-gull-gray{border-right:1px solid;border-color:#9ea8b5!important}.border-bottom-gull-gray{border-bottom:1px solid;border-color:#9ea8b5!important}.border-left-gull-gray{border-left:1px solid;border-color:#9ea8b5!important}.soft-blue{color:#eff1f5!important}.fill-soft-blue{background-color:#eff1f5!important}.border-soft-blue{border-color:#eff1f5!important}.border-top-soft-blue{border-top:1px solid;border-color:#eff1f5!important}.border-right-soft-blue{border-right:1px solid;border-color:#eff1f5!important}.border-bottom-soft-blue{border-bottom:1px solid;border-color:#eff1f5!important}.border-left-soft-blue{border-left:1px solid;border-color:#eff1f5!important}.dark-soft-blue{color:#e9ecf1!important}.fill-dark-soft-blue{background-color:#e9ecf1!important}.border-dark-soft-blue{border-color:#e9ecf1!important}.border-top-dark-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-dark-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-dark-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-dark-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.darker-soft-blue{color:#e6e9ef!important}.fill-darker-soft-blue{background-color:#e6e9ef!important}.border-darker-soft-blue{border-color:#e6e9ef!important}.border-top-darker-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-darker-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-darker-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-darker-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.light-soft-blue{color:#f5f6f9!important}.fill-light-soft-blue{background-color:#f5f6f9!important}.border-light-soft-blue{border-color:#f5f6f9!important}.border-top-light-soft-blue{border-top:1px solid;border-color:#f5f6f9!important}.border-right-light-soft-blue{border-right:1px solid;border-color:#f5f6f9!important}.border-bottom-light-soft-blue{border-bottom:1px solid;border-color:#f5f6f9!important}.border-left-light-soft-blue{border-left:1px solid;border-color:#f5f6f9!important}.lighter-soft-blue{color:#f8f9fb!important}.fill-lighter-soft-blue{background-color:#f8f9fb!important}.border-lighter-soft-blue{border-color:#f8f9fb!important}.border-top-lighter-soft-blue{border-top:1px solid;border-color:#f8f9fb!important}.border-right-lighter-soft-blue{border-right:1px solid;border-color:#f8f9fb!important}.border-bottom-lighter-soft-blue{border-bottom:1px solid;border-color:#f8f9fb!important}.border-left-lighter-soft-blue{border-left:1px solid;border-color:#f8f9fb!important}.eucalyptus{color:#1b9e4b!important}.fill-eucalyptus{background-color:#1b9e4b!important}.border-eucalyptus{border-color:#1b9e4b!important}.border-top-eucalyptus{border-top:1px solid;border-color:#1b9e4b!important}.border-right-eucalyptus{border-right:1px solid;border-color:#1b9e4b!important}.border-bottom-eucalyptus{border-bottom:1px solid;border-color:#1b9e4b!important}.border-left-eucalyptus{border-left:1px solid;border-color:#1b9e4b!important}.gamboge{color:#dd8e0a!important}.fill-gamboge{background-color:#dd8e0a!important}.border-gamboge{border-color:#dd8e0a!important}.border-top-gamboge{border-top:1px solid;border-color:#dd8e0a!important}.border-right-gamboge{border-right:1px solid;border-color:#dd8e0a!important}.border-bottom-gamboge{border-bottom:1px solid;border-color:#dd8e0a!important}.border-left-gamboge{border-left:1px solid;border-color:#dd8e0a!important}.valencia{color:#d73d3d!important}.fill-valencia{background-color:#d73d3d!important}.border-valencia{border-color:#d73d3d!important}.border-top-valencia{border-top:1px solid;border-color:#d73d3d!important}.border-right-valencia{border-right:1px solid;border-color:#d73d3d!important}.border-bottom-valencia{border-bottom:1px solid;border-color:#d73d3d!important}.border-left-valencia{border-left:1px solid;border-color:#d73d3d!important}:host.compact>button{line-height:24px;min-height:24px}:host.small{font-size:12px}:host.medium{font-size:14px}:host.large{font-size:18px}button{font-size:inherit;padding:0 12px;min-height:36px;min-width:44px}.primary-button{background:#1b68fa;color:#fff}.primary-button.text-color{color:#1b68fa;background:none}.primary-button.text-color:hover{background:#e4edfe}.primary-button.text-color:active{background:#bbd2fe}.primary-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.primary-button.border-color:hover,.primary-button.border-color:active{border:1px solid #ebefff}.primary-button:hover{background:#104bf8}.primary-button:active{background:#083af6}.secondary-button{background:#b080fc;color:#fff}.secondary-button.text-color{color:#b080fc;background:none}.secondary-button.text-color:hover{background:#f6f0ff}.secondary-button.text-color:active{background:#e7d9fe}.secondary-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.secondary-button.border-color:hover,.secondary-button.border-color:active{border:1px solid #e3d7ff}.secondary-button:hover{background:#a06dfb}.secondary-button:active{background:#9763fb}.danger-button{background:#d73d3d;color:#fff}.danger-button.text-color{color:#d73d3d;background:none}.danger-button.text-color:hover{background:#faeae9}.danger-button.text-color:active{background:#f4cbc9}.danger-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.danger-button.border-color:hover,.danger-button.border-color:active{border:1px solid #ffcac9}.danger-button:hover{background:#d9534b}.danger-button:active{background:#d54c44}.slate-button{background:var(--color-shuttle-gray-400);color:#fff}.slate-button.text-color{color:var(--color-shuttle-gray-400);background:none}.slate-button.text-color:hover{background:var(--color-shuttle-gray-100)}.slate-button.text-color:active{background:var(--color-shuttle-gray-200)}.slate-button.border-color,.slate-button.border-color:hover,.slate-button.border-color:active{border:1px solid var(--color-shuttle-gray-100)}.slate-button:hover{background:var(--color-shuttle-gray-500)}.slate-button:active{background:var(--color-shuttle-gray-700)}.skeleton-button{background:var(--color-shuttle-gray-400);color:#fff}.skeleton-button.text-color{color:var(--color-shuttle-gray-400);background:none}.skeleton-button.text-color:hover{background:var(--color-shuttle-gray-100)}.skeleton-button.text-color:active{background:var(--color-shuttle-gray-200)}.skeleton-button.border-color,.skeleton-button.border-color:hover,.skeleton-button.border-color:active{border:1px solid var(--color-shuttle-gray-100)}.skeleton-button:hover{background:var(--color-shuttle-gray-500)}.skeleton-button:active{background:var(--color-shuttle-gray-700)}.warning-button{background:var(--color-gamboge-500);color:#fff}.warning-button.text-color{color:var(--color-gamboge-500);background:none}.warning-button.text-color:hover{background:var(--color-gamboge-50)}.warning-button.text-color:active{background:var(--color-gamboge-100)}.warning-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.warning-button.border-color:hover,.warning-button.border-color:active{border:1px solid var(--color-gamboge-A200)}.warning-button:hover{background:var(--color-gamboge-600)}.warning-button:active{background:var(--color-gamboge-700)}.success-button{background:#1B9E4B;color:#fff}.success-button.text-color{color:#1b9e4b;background:none}.success-button.text-color:hover{background:#cdead3}.success-button.text-color:active{background:#acdcb5}.success-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.success-button.border-color:hover,.success-button.border-color:active{border:1px solid #d9ffde}.success-button:hover{background:#3ea24e}.success-button:active{background:#2e933c}.button-disabled{opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.FwIconComponent, selector: "fw-icon" }] });
16
+ FwButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonComponent, selector: "fw-button", inputs: { color: "color", size: "size", type: "type", disabled: "disabled", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { properties: { "class.small": "size === \"small\"", "class.medium": "size === \"medium\"", "class.large": "size === \"large\"", "class.compact": "layout === \"compact\"" }, classAttribute: "button[fw-button]" }, ngImport: i0, template: "<button [class]=\"[color + '-' + type, size]\" [disabled]=\"disabled\">\n <fw-icon *ngIf=\"!!leftIcon\">{{leftIcon}}</fw-icon>\n <ng-content></ng-content>\n <fw-icon *ngIf=\"!!rightIcon\">{{rightIcon}}</fw-icon>\n</button>", styles: ["button{cursor:pointer;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button fw-icon{font-size:20px}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{color:var(--primary-base);border:1px solid var(--separations-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.secondary-solid{background-color:var(--secondary-base);color:var(--typography-contrast)}.secondary-solid:hover{background-color:var(--secondary-medium)}.secondary-solid:active{background-color:var(--secondary-dark)}.secondary-ghost{color:var(--secondary-base)}.secondary-ghost:hover{background-color:var(--secondary-hover)}.secondary-ghost:active{background-color:var(--secondary-focus)}.secondary-outline{color:var(--secondary-base);border:1px solid var(--separations-base)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.slate-solid{background-color:var(--slate-base);color:var(--typography-contrast)}.slate-solid:hover{background-color:var(--slate-medium)}.slate-solid:active{background-color:var(--slate-dark)}.slate-ghost{color:var(--slate-base)}.slate-ghost:hover{background-color:var(--slate-hover)}.slate-ghost:active{background-color:var(--slate-focus)}.slate-outline{color:var(--slate-base);border:1px solid var(--separations-base)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.danger-solid{background-color:var(--red-base);color:var(--typography-contrast)}.danger-solid:hover{background-color:var(--red-medium)}.danger-solid:active{background-color:var(--red-dark)}.danger-ghost{color:var(--red-base)}.danger-ghost:hover{background-color:var(--red-hover)}.danger-ghost:active{background-color:var(--red-focus)}.danger-outline{color:var(--red-base);border:1px solid var(--separations-base)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.skeleton-solid{background-color:var(---base);color:var(--typography-contrast)}.skeleton-solid:hover{background-color:var(---medium)}.skeleton-solid:active{background-color:var(---dark)}.skeleton-ghost{color:var(---base)}.skeleton-ghost:hover{background-color:var(---hover)}.skeleton-ghost:active{background-color:var(---focus)}.skeleton-outline{color:var(---base);border:1px solid var(--separations-base)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.warning-solid{background-color:var(--orange-base);color:var(--typography-contrast)}.warning-solid:hover{background-color:var(--orange-medium)}.warning-solid:active{background-color:var(--orange-dark)}.warning-ghost{color:var(--orange-base)}.warning-ghost:hover{background-color:var(--orange-hover)}.warning-ghost:active{background-color:var(--orange-focus)}.warning-outline{color:var(--orange-base);border:1px solid var(--separations-base)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.success-solid{background-color:var(--green-base);color:var(--typography-contrast)}.success-solid:hover{background-color:var(--green-medium)}.success-solid:active{background-color:var(--green-dark)}.success-ghost{color:var(--green-base)}.success-ghost:hover{background-color:var(--green-hover)}.success-ghost:active{background-color:var(--green-focus)}.success-outline{color:var(--green-base);border:1px solid var(--separations-base)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon" }] });
23
17
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonComponent, decorators: [{
24
18
  type: Component,
25
19
  args: [{ host: {
26
- 'class': 'fw-button',
20
+ 'class': 'button[fw-button]',
27
21
  '[class.small]': 'size === "small"',
28
22
  '[class.medium]': 'size === "medium"',
29
23
  '[class.large]': 'size === "large"',
30
24
  '[class.compact]': 'layout === "compact"',
31
- }, selector: 'fw-button', template: "<ng-container [ngSwitch]=\"type\">\n <button *ngSwitchCase=\"'outline'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'invisible': !showText && !rightIcon && !leftIcon && !dropDown, \n 'button-disabled': disabled,\n 'text-color border-color': true }\" mat-stroked-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n <button *ngSwitchCase=\"'solid'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'button-disabled': disabled,\n 'w-28': !showText && !rightIcon && !leftIcon && !dropDown }\" mat-flat-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n <button *ngSwitchCase=\"'ghost'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'hidden': !showText && !rightIcon && !leftIcon && !dropDown, \n 'button-disabled': disabled,\n 'text-color': true }\" mat-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #content>\n <fw-icon [class.pr-2]=\"showText\" *ngIf=\"leftIcon\">{{ leftIconSwap }}</fw-icon>\n <ng-content *ngIf=\"showText\"></ng-content>\n <fw-icon [class.pl-2]=\"showText\" *ngIf=\"rightIcon && !leftIcon\">{{ rightIconSwap }}</fw-icon>\n <fw-icon [class.pl-2]=\"showText || rightIcon || leftIcon\" *ngIf=\"dropDown\">{{ dropDownValue }}</fw-icon>\n</ng-template>", styles: [".white{color:#fff!important}.fill-white{background-color:#fff!important}.border-white{border-color:#fff!important}.border-top-white{border-top:1px solid;border-color:#fff!important}.border-right-white{border-right:1px solid;border-color:#fff!important}.border-bottom-white{border-bottom:1px solid;border-color:#fff!important}.border-left-white{border-left:1px solid;border-color:#fff!important}.black{color:#000!important}.fill-black{background-color:#000!important}.border-black{border-color:#000!important}.border-top-black{border-top:1px solid;border-color:#000!important}.border-right-black{border-right:1px solid;border-color:#000!important}.border-bottom-black{border-bottom:1px solid;border-color:#000!important}.border-left-black{border-left:1px solid;border-color:#000!important}.green{color:#59b96b!important}.fill-green{background-color:#59b96b!important}.border-green{border-color:#59b96b!important}.border-top-green{border-top:1px solid;border-color:#59b96b!important}.border-right-green{border-right:1px solid;border-color:#59b96b!important}.border-bottom-green{border-bottom:1px solid;border-color:#59b96b!important}.border-left-green{border-left:1px solid;border-color:#59b96b!important}.orange{color:#f7941d!important}.fill-orange{background-color:#f7941d!important}.border-orange{border-color:#f7941d!important}.border-top-orange{border-top:1px solid;border-color:#f7941d!important}.border-right-orange{border-right:1px solid;border-color:#f7941d!important}.border-bottom-orange{border-bottom:1px solid;border-color:#f7941d!important}.border-left-orange{border-left:1px solid;border-color:#f7941d!important}.red{color:#de584c!important}.fill-red{background-color:#de584c!important}.border-red{border-color:#de584c!important}.border-top-red{border-top:1px solid;border-color:#de584c!important}.border-right-red{border-right:1px solid;border-color:#de584c!important}.border-bottom-red{border-bottom:1px solid;border-color:#de584c!important}.border-left-red{border-left:1px solid;border-color:#de584c!important}.light-red{color:#f8e5e4!important}.fill-light-red{background-color:#f8e5e4!important}.border-light-red{border-color:#f8e5e4!important}.border-top-light-red{border-top:1px solid;border-color:#f8e5e4!important}.border-right-light-red{border-right:1px solid;border-color:#f8e5e4!important}.border-bottom-light-red{border-bottom:1px solid;border-color:#f8e5e4!important}.border-left-light-red{border-left:1px solid;border-color:#f8e5e4!important}.blue{color:#5871a2!important}.fill-blue{background-color:#5871a2!important}.border-blue{border-color:#5871a2!important}.border-top-blue{border-top:1px solid;border-color:#5871a2!important}.border-right-blue{border-right:1px solid;border-color:#5871a2!important}.border-bottom-blue{border-bottom:1px solid;border-color:#5871a2!important}.border-left-blue{border-left:1px solid;border-color:#5871a2!important}.focus-blue{color:#23527c!important}.fill-focus-blue{background-color:#23527c!important}.border-focus-blue{border-color:#23527c!important}.border-top-focus-blue{border-top:1px solid;border-color:#23527c!important}.border-right-focus-blue{border-right:1px solid;border-color:#23527c!important}.border-bottom-focus-blue{border-bottom:1px solid;border-color:#23527c!important}.border-left-focus-blue{border-left:1px solid;border-color:#23527c!important}.dark-blue{color:#394256!important}.fill-dark-blue{background-color:#394256!important}.border-dark-blue{border-color:#394256!important}.border-top-dark-blue{border-top:1px solid;border-color:#394256!important}.border-right-dark-blue{border-right:1px solid;border-color:#394256!important}.border-bottom-dark-blue{border-bottom:1px solid;border-color:#394256!important}.border-left-dark-blue{border-left:1px solid;border-color:#394256!important}.light-blue{color:#e7effe!important}.fill-light-blue{background-color:#e7effe!important}.border-light-blue{border-color:#e7effe!important}.border-top-light-blue{border-top:1px solid;border-color:#e7effe!important}.border-right-light-blue{border-right:1px solid;border-color:#e7effe!important}.border-bottom-light-blue{border-bottom:1px solid;border-color:#e7effe!important}.border-left-light-blue{border-left:1px solid;border-color:#e7effe!important}.bright-blue{color:#1b68fa!important}.fill-bright-blue{background-color:#1b68fa!important}.border-bright-blue{border-color:#1b68fa!important}.border-top-bright-blue{border-top:1px solid;border-color:#1b68fa!important}.border-right-bright-blue{border-right:1px solid;border-color:#1b68fa!important}.border-bottom-bright-blue{border-bottom:1px solid;border-color:#1b68fa!important}.border-left-bright-blue{border-left:1px solid;border-color:#1b68fa!important}.admin-black{color:#01010a!important}.fill-admin-black{background-color:#01010a!important}.border-admin-black{border-color:#01010a!important}.border-top-admin-black{border-top:1px solid;border-color:#01010a!important}.border-right-admin-black{border-right:1px solid;border-color:#01010a!important}.border-bottom-admin-black{border-bottom:1px solid;border-color:#01010a!important}.border-left-admin-black{border-left:1px solid;border-color:#01010a!important}.accent-purple{color:#b080fc!important}.fill-accent-purple{background-color:#b080fc!important}.border-accent-purple{border-color:#b080fc!important}.border-top-accent-purple{border-top:1px solid;border-color:#b080fc!important}.border-right-accent-purple{border-right:1px solid;border-color:#b080fc!important}.border-bottom-accent-purple{border-bottom:1px solid;border-color:#b080fc!important}.border-left-accent-purple{border-left:1px solid;border-color:#b080fc!important}.grey{color:#58595b!important}.fill-grey{background-color:#58595b!important}.border-grey{border-color:#58595b!important}.border-top-grey{border-top:1px solid;border-color:#58595b!important}.border-right-grey{border-right:1px solid;border-color:#58595b!important}.border-bottom-grey{border-bottom:1px solid;border-color:#58595b!important}.border-left-grey{border-left:1px solid;border-color:#58595b!important}.soft-grey{color:#dddede!important}.fill-soft-grey{background-color:#dddede!important}.border-soft-grey{border-color:#dddede!important}.border-top-soft-grey{border-top:1px solid;border-color:#dddede!important}.border-right-soft-grey{border-right:1px solid;border-color:#dddede!important}.border-bottom-soft-grey{border-bottom:1px solid;border-color:#dddede!important}.border-left-soft-grey{border-left:1px solid;border-color:#dddede!important}.light-grey{color:#eee!important}.fill-light-grey{background-color:#eee!important}.border-light-grey{border-color:#eee!important}.border-top-light-grey{border-top:1px solid;border-color:#eee!important}.border-right-light-grey{border-right:1px solid;border-color:#eee!important}.border-bottom-light-grey{border-bottom:1px solid;border-color:#eee!important}.border-left-light-grey{border-left:1px solid;border-color:#eee!important}.medium-grey{color:#ccc!important}.fill-medium-grey{background-color:#ccc!important}.border-medium-grey{border-color:#ccc!important}.border-top-medium-grey{border-top:1px solid;border-color:#ccc!important}.border-right-medium-grey{border-right:1px solid;border-color:#ccc!important}.border-bottom-medium-grey{border-bottom:1px solid;border-color:#ccc!important}.border-left-medium-grey{border-left:1px solid;border-color:#ccc!important}.medium-dark-grey{color:#999!important}.fill-medium-dark-grey{background-color:#999!important}.border-medium-dark-grey{border-color:#999!important}.border-top-medium-dark-grey{border-top:1px solid;border-color:#999!important}.border-right-medium-dark-grey{border-right:1px solid;border-color:#999!important}.border-bottom-medium-dark-grey{border-bottom:1px solid;border-color:#999!important}.border-left-medium-dark-grey{border-left:1px solid;border-color:#999!important}.dark-grey{color:#222!important}.fill-dark-grey{background-color:#222!important}.border-dark-grey{border-color:#222!important}.border-top-dark-grey{border-top:1px solid;border-color:#222!important}.border-right-dark-grey{border-right:1px solid;border-color:#222!important}.border-bottom-dark-grey{border-bottom:1px solid;border-color:#222!important}.border-left-dark-grey{border-left:1px solid;border-color:#222!important}.shuttle-gray{color:#5d6877!important}.fill-shuttle-gray{background-color:#5d6877!important}.border-shuttle-gray{border-color:#5d6877!important}.border-top-shuttle-gray{border-top:1px solid;border-color:#5d6877!important}.border-right-shuttle-gray{border-right:1px solid;border-color:#5d6877!important}.border-bottom-shuttle-gray{border-bottom:1px solid;border-color:#5d6877!important}.border-left-shuttle-gray{border-left:1px solid;border-color:#5d6877!important}.gull-gray{color:#9ea8b5!important}.fill-gull-gray{background-color:#9ea8b5!important}.border-gull-gray{border-color:#9ea8b5!important}.border-top-gull-gray{border-top:1px solid;border-color:#9ea8b5!important}.border-right-gull-gray{border-right:1px solid;border-color:#9ea8b5!important}.border-bottom-gull-gray{border-bottom:1px solid;border-color:#9ea8b5!important}.border-left-gull-gray{border-left:1px solid;border-color:#9ea8b5!important}.soft-blue{color:#eff1f5!important}.fill-soft-blue{background-color:#eff1f5!important}.border-soft-blue{border-color:#eff1f5!important}.border-top-soft-blue{border-top:1px solid;border-color:#eff1f5!important}.border-right-soft-blue{border-right:1px solid;border-color:#eff1f5!important}.border-bottom-soft-blue{border-bottom:1px solid;border-color:#eff1f5!important}.border-left-soft-blue{border-left:1px solid;border-color:#eff1f5!important}.dark-soft-blue{color:#e9ecf1!important}.fill-dark-soft-blue{background-color:#e9ecf1!important}.border-dark-soft-blue{border-color:#e9ecf1!important}.border-top-dark-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-dark-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-dark-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-dark-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.darker-soft-blue{color:#e6e9ef!important}.fill-darker-soft-blue{background-color:#e6e9ef!important}.border-darker-soft-blue{border-color:#e6e9ef!important}.border-top-darker-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-darker-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-darker-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-darker-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.light-soft-blue{color:#f5f6f9!important}.fill-light-soft-blue{background-color:#f5f6f9!important}.border-light-soft-blue{border-color:#f5f6f9!important}.border-top-light-soft-blue{border-top:1px solid;border-color:#f5f6f9!important}.border-right-light-soft-blue{border-right:1px solid;border-color:#f5f6f9!important}.border-bottom-light-soft-blue{border-bottom:1px solid;border-color:#f5f6f9!important}.border-left-light-soft-blue{border-left:1px solid;border-color:#f5f6f9!important}.lighter-soft-blue{color:#f8f9fb!important}.fill-lighter-soft-blue{background-color:#f8f9fb!important}.border-lighter-soft-blue{border-color:#f8f9fb!important}.border-top-lighter-soft-blue{border-top:1px solid;border-color:#f8f9fb!important}.border-right-lighter-soft-blue{border-right:1px solid;border-color:#f8f9fb!important}.border-bottom-lighter-soft-blue{border-bottom:1px solid;border-color:#f8f9fb!important}.border-left-lighter-soft-blue{border-left:1px solid;border-color:#f8f9fb!important}.eucalyptus{color:#1b9e4b!important}.fill-eucalyptus{background-color:#1b9e4b!important}.border-eucalyptus{border-color:#1b9e4b!important}.border-top-eucalyptus{border-top:1px solid;border-color:#1b9e4b!important}.border-right-eucalyptus{border-right:1px solid;border-color:#1b9e4b!important}.border-bottom-eucalyptus{border-bottom:1px solid;border-color:#1b9e4b!important}.border-left-eucalyptus{border-left:1px solid;border-color:#1b9e4b!important}.gamboge{color:#dd8e0a!important}.fill-gamboge{background-color:#dd8e0a!important}.border-gamboge{border-color:#dd8e0a!important}.border-top-gamboge{border-top:1px solid;border-color:#dd8e0a!important}.border-right-gamboge{border-right:1px solid;border-color:#dd8e0a!important}.border-bottom-gamboge{border-bottom:1px solid;border-color:#dd8e0a!important}.border-left-gamboge{border-left:1px solid;border-color:#dd8e0a!important}.valencia{color:#d73d3d!important}.fill-valencia{background-color:#d73d3d!important}.border-valencia{border-color:#d73d3d!important}.border-top-valencia{border-top:1px solid;border-color:#d73d3d!important}.border-right-valencia{border-right:1px solid;border-color:#d73d3d!important}.border-bottom-valencia{border-bottom:1px solid;border-color:#d73d3d!important}.border-left-valencia{border-left:1px solid;border-color:#d73d3d!important}:host.compact>button{line-height:24px;min-height:24px}:host.small{font-size:12px}:host.medium{font-size:14px}:host.large{font-size:18px}button{font-size:inherit;padding:0 12px;min-height:36px;min-width:44px}.primary-button{background:#1b68fa;color:#fff}.primary-button.text-color{color:#1b68fa;background:none}.primary-button.text-color:hover{background:#e4edfe}.primary-button.text-color:active{background:#bbd2fe}.primary-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.primary-button.border-color:hover,.primary-button.border-color:active{border:1px solid #ebefff}.primary-button:hover{background:#104bf8}.primary-button:active{background:#083af6}.secondary-button{background:#b080fc;color:#fff}.secondary-button.text-color{color:#b080fc;background:none}.secondary-button.text-color:hover{background:#f6f0ff}.secondary-button.text-color:active{background:#e7d9fe}.secondary-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.secondary-button.border-color:hover,.secondary-button.border-color:active{border:1px solid #e3d7ff}.secondary-button:hover{background:#a06dfb}.secondary-button:active{background:#9763fb}.danger-button{background:#d73d3d;color:#fff}.danger-button.text-color{color:#d73d3d;background:none}.danger-button.text-color:hover{background:#faeae9}.danger-button.text-color:active{background:#f4cbc9}.danger-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.danger-button.border-color:hover,.danger-button.border-color:active{border:1px solid #ffcac9}.danger-button:hover{background:#d9534b}.danger-button:active{background:#d54c44}.slate-button{background:var(--color-shuttle-gray-400);color:#fff}.slate-button.text-color{color:var(--color-shuttle-gray-400);background:none}.slate-button.text-color:hover{background:var(--color-shuttle-gray-100)}.slate-button.text-color:active{background:var(--color-shuttle-gray-200)}.slate-button.border-color,.slate-button.border-color:hover,.slate-button.border-color:active{border:1px solid var(--color-shuttle-gray-100)}.slate-button:hover{background:var(--color-shuttle-gray-500)}.slate-button:active{background:var(--color-shuttle-gray-700)}.skeleton-button{background:var(--color-shuttle-gray-400);color:#fff}.skeleton-button.text-color{color:var(--color-shuttle-gray-400);background:none}.skeleton-button.text-color:hover{background:var(--color-shuttle-gray-100)}.skeleton-button.text-color:active{background:var(--color-shuttle-gray-200)}.skeleton-button.border-color,.skeleton-button.border-color:hover,.skeleton-button.border-color:active{border:1px solid var(--color-shuttle-gray-100)}.skeleton-button:hover{background:var(--color-shuttle-gray-500)}.skeleton-button:active{background:var(--color-shuttle-gray-700)}.warning-button{background:var(--color-gamboge-500);color:#fff}.warning-button.text-color{color:var(--color-gamboge-500);background:none}.warning-button.text-color:hover{background:var(--color-gamboge-50)}.warning-button.text-color:active{background:var(--color-gamboge-100)}.warning-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.warning-button.border-color:hover,.warning-button.border-color:active{border:1px solid var(--color-gamboge-A200)}.warning-button:hover{background:var(--color-gamboge-600)}.warning-button:active{background:var(--color-gamboge-700)}.success-button{background:#1B9E4B;color:#fff}.success-button.text-color{color:#1b9e4b;background:none}.success-button.text-color:hover{background:#cdead3}.success-button.text-color:active{background:#acdcb5}.success-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.success-button.border-color:hover,.success-button.border-color:active{border:1px solid #d9ffde}.success-button:hover{background:#3ea24e}.success-button:active{background:#2e933c}.button-disabled{opacity:.4}\n"] }]
25
+ }, selector: 'fw-button', template: "<button [class]=\"[color + '-' + type, size]\" [disabled]=\"disabled\">\n <fw-icon *ngIf=\"!!leftIcon\">{{leftIcon}}</fw-icon>\n <ng-content></ng-content>\n <fw-icon *ngIf=\"!!rightIcon\">{{rightIcon}}</fw-icon>\n</button>", styles: ["button{cursor:pointer;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button fw-icon{font-size:20px}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{color:var(--primary-base);border:1px solid var(--separations-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.secondary-solid{background-color:var(--secondary-base);color:var(--typography-contrast)}.secondary-solid:hover{background-color:var(--secondary-medium)}.secondary-solid:active{background-color:var(--secondary-dark)}.secondary-ghost{color:var(--secondary-base)}.secondary-ghost:hover{background-color:var(--secondary-hover)}.secondary-ghost:active{background-color:var(--secondary-focus)}.secondary-outline{color:var(--secondary-base);border:1px solid var(--separations-base)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.slate-solid{background-color:var(--slate-base);color:var(--typography-contrast)}.slate-solid:hover{background-color:var(--slate-medium)}.slate-solid:active{background-color:var(--slate-dark)}.slate-ghost{color:var(--slate-base)}.slate-ghost:hover{background-color:var(--slate-hover)}.slate-ghost:active{background-color:var(--slate-focus)}.slate-outline{color:var(--slate-base);border:1px solid var(--separations-base)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.danger-solid{background-color:var(--red-base);color:var(--typography-contrast)}.danger-solid:hover{background-color:var(--red-medium)}.danger-solid:active{background-color:var(--red-dark)}.danger-ghost{color:var(--red-base)}.danger-ghost:hover{background-color:var(--red-hover)}.danger-ghost:active{background-color:var(--red-focus)}.danger-outline{color:var(--red-base);border:1px solid var(--separations-base)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.skeleton-solid{background-color:var(---base);color:var(--typography-contrast)}.skeleton-solid:hover{background-color:var(---medium)}.skeleton-solid:active{background-color:var(---dark)}.skeleton-ghost{color:var(---base)}.skeleton-ghost:hover{background-color:var(---hover)}.skeleton-ghost:active{background-color:var(---focus)}.skeleton-outline{color:var(---base);border:1px solid var(--separations-base)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.warning-solid{background-color:var(--orange-base);color:var(--typography-contrast)}.warning-solid:hover{background-color:var(--orange-medium)}.warning-solid:active{background-color:var(--orange-dark)}.warning-ghost{color:var(--orange-base)}.warning-ghost:hover{background-color:var(--orange-hover)}.warning-ghost:active{background-color:var(--orange-focus)}.warning-outline{color:var(--orange-base);border:1px solid var(--separations-base)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.success-solid{background-color:var(--green-base);color:var(--typography-contrast)}.success-solid:hover{background-color:var(--green-medium)}.success-solid:active{background-color:var(--green-dark)}.success-ghost{color:var(--green-base)}.success-ghost:hover{background-color:var(--green-hover)}.success-ghost:active{background-color:var(--green-focus)}.success-outline{color:var(--green-base);border:1px solid var(--separations-base)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}\n"] }]
32
26
  }], propDecorators: { color: [{
33
27
  type: Input
34
- }], layout: [{
35
- type: Input
36
28
  }], size: [{
37
29
  type: Input
38
30
  }], type: [{
@@ -43,13 +35,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
43
35
  type: Input
44
36
  }], rightIcon: [{
45
37
  type: Input
46
- }], leftIconSwap: [{
47
- type: Input
48
- }], rightIconSwap: [{
49
- type: Input
50
- }], dropDown: [{
51
- type: Input
52
- }], showText: [{
53
- type: Input
54
38
  }] } });
55
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFjakQsTUFBTSxPQUFPLGlCQUFpQjtJQVo5QjtRQWNXLFdBQU0sR0FBeUIsT0FBTyxDQUFBO1FBQ3RDLFNBQUksR0FBa0MsUUFBUSxDQUFBO1FBQzlDLFNBQUksR0FBbUMsT0FBTyxDQUFBO1FBQzlDLGFBQVEsR0FBYSxLQUFLLENBQUE7UUFDMUIsYUFBUSxHQUFhLEtBQUssQ0FBQTtRQUMxQixjQUFTLEdBQWEsS0FBSyxDQUFBO1FBQzNCLGlCQUFZLEdBQVksRUFBRSxDQUFBO1FBQzFCLGtCQUFhLEdBQVksRUFBRSxDQUFBO1FBQzNCLGFBQVEsR0FBYSxLQUFLLENBQUE7UUFDMUIsYUFBUSxHQUFhLElBQUksQ0FBQTtRQUVsQyxrQkFBYSxHQUFHLGNBQWMsQ0FBQTtLQUMvQjs7OEdBZFksaUJBQWlCO2tHQUFqQixpQkFBaUIsNGZDZDlCLHUwQ0F5QmM7MkZEWEQsaUJBQWlCO2tCQVo3QixTQUFTOzJCQUNGO3dCQUNKLE9BQU8sRUFBRSxXQUFXO3dCQUNwQixlQUFlLEVBQUUsa0JBQWtCO3dCQUNuQyxnQkFBZ0IsRUFBRSxtQkFBbUI7d0JBQ3JDLGVBQWUsRUFBRSxrQkFBa0I7d0JBQ25DLGlCQUFpQixFQUFFLHNCQUFzQjtxQkFDMUMsWUFDUyxXQUFXOzhCQUtaLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgaG9zdDoge1xuICAgICdjbGFzcyc6ICdmdy1idXR0b24nLFxuICAgICdbY2xhc3Muc21hbGxdJzogJ3NpemUgPT09IFwic21hbGxcIicsXG4gICAgJ1tjbGFzcy5tZWRpdW1dJzogJ3NpemUgPT09IFwibWVkaXVtXCInLFxuICAgICdbY2xhc3MubGFyZ2VdJzogJ3NpemUgPT09IFwibGFyZ2VcIicsXG4gICAgJ1tjbGFzcy5jb21wYWN0XSc6ICdsYXlvdXQgPT09IFwiY29tcGFjdFwiJyxcbiAgfSxcbiAgc2VsZWN0b3I6ICdmdy1idXR0b24nLFxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG59KVxuZXhwb3J0IGNsYXNzIEZ3QnV0dG9uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgY29sb3I/OiAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdkYW5nZXInIHwgJ3NsYXRlJyB8ICdza2VsZXRvbicgfCAnd2FybmluZycgfCAnc3VjY2VzcydcbiAgQElucHV0KCkgbGF5b3V0PzogJ2Jhc2ljJyB8ICdjb21wYWN0JyA9ICdiYXNpYydcbiAgQElucHV0KCkgc2l6ZT86ICdzbWFsbCcgfCAnbWVkaXVtJyB8ICdsYXJnZScgPSAnbWVkaXVtJ1xuICBASW5wdXQoKSB0eXBlPzogJ2dob3N0JyB8ICdzb2xpZCcgfCAnb3V0bGluZScgPSAnZ2hvc3QnXG4gIEBJbnB1dCgpIGRpc2FibGVkPzogYm9vbGVhbiA9IGZhbHNlXG4gIEBJbnB1dCgpIGxlZnRJY29uPzogYm9vbGVhbiA9IGZhbHNlXG4gIEBJbnB1dCgpIHJpZ2h0SWNvbj86IGJvb2xlYW4gPSBmYWxzZVxuICBASW5wdXQoKSBsZWZ0SWNvblN3YXA/OiBzdHJpbmcgPSAnJ1xuICBASW5wdXQoKSByaWdodEljb25Td2FwPzogc3RyaW5nID0gJydcbiAgQElucHV0KCkgZHJvcERvd24/OiBib29sZWFuID0gZmFsc2VcbiAgQElucHV0KCkgc2hvd1RleHQ/OiBib29sZWFuID0gdHJ1ZVxuXG4gIGRyb3BEb3duVmFsdWUgPSAnY2hldnJvbi1kb3duJ1xufVxuIiwiPG5nLWNvbnRhaW5lciBbbmdTd2l0Y2hdPVwidHlwZVwiPlxuICA8YnV0dG9uICpuZ1N3aXRjaENhc2U9XCInb3V0bGluZSdcIiBbY2xhc3NdPVwiY29sb3IgKyAnLWJ1dHRvbidcIiBbbmdDbGFzc109XCJ7XG4gICAgICAnaW52aXNpYmxlJzogIXNob3dUZXh0ICYmICFyaWdodEljb24gJiYgIWxlZnRJY29uICYmICFkcm9wRG93biwgXG4gICAgICAnYnV0dG9uLWRpc2FibGVkJzogZGlzYWJsZWQsXG4gICAgICAndGV4dC1jb2xvciBib3JkZXItY29sb3InOiB0cnVlIH1cIiBtYXQtc3Ryb2tlZC1idXR0b24+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cbiAgPC9idXR0b24+XG4gIDxidXR0b24gKm5nU3dpdGNoQ2FzZT1cIidzb2xpZCdcIiBbY2xhc3NdPVwiY29sb3IgKyAnLWJ1dHRvbidcIiBbbmdDbGFzc109XCJ7XG4gICAgJ2J1dHRvbi1kaXNhYmxlZCc6IGRpc2FibGVkLFxuICAgICd3LTI4JzogIXNob3dUZXh0ICYmICFyaWdodEljb24gJiYgIWxlZnRJY29uICYmICFkcm9wRG93biB9XCIgbWF0LWZsYXQtYnV0dG9uPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50XCI+PC9uZy1jb250YWluZXI+XG4gIDwvYnV0dG9uPlxuICA8YnV0dG9uICpuZ1N3aXRjaENhc2U9XCInZ2hvc3QnXCIgW2NsYXNzXT1cImNvbG9yICsgJy1idXR0b24nXCIgW25nQ2xhc3NdPVwie1xuICAgICdoaWRkZW4nOiAhc2hvd1RleHQgJiYgIXJpZ2h0SWNvbiAmJiAhbGVmdEljb24gJiYgIWRyb3BEb3duLCBcbiAgICAnYnV0dG9uLWRpc2FibGVkJzogZGlzYWJsZWQsXG4gICAgJ3RleHQtY29sb3InOiB0cnVlIH1cIiBtYXQtYnV0dG9uPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50XCI+PC9uZy1jb250YWluZXI+XG4gIDwvYnV0dG9uPlxuPC9uZy1jb250YWluZXI+XG5cbjxuZy10ZW1wbGF0ZSAjY29udGVudD5cbiAgPGZ3LWljb24gW2NsYXNzLnByLTJdPVwic2hvd1RleHRcIiAqbmdJZj1cImxlZnRJY29uXCI+e3sgbGVmdEljb25Td2FwIH19PC9mdy1pY29uPlxuICA8bmctY29udGVudCAqbmdJZj1cInNob3dUZXh0XCI+PC9uZy1jb250ZW50PlxuICA8ZnctaWNvbiBbY2xhc3MucGwtMl09XCJzaG93VGV4dFwiICpuZ0lmPVwicmlnaHRJY29uICYmICFsZWZ0SWNvblwiPnt7IHJpZ2h0SWNvblN3YXAgfX08L2Z3LWljb24+XG4gIDxmdy1pY29uIFtjbGFzcy5wbC0yXT1cInNob3dUZXh0IHx8IHJpZ2h0SWNvbiB8fCBsZWZ0SWNvblwiICpuZ0lmPVwiZHJvcERvd25cIj57eyBkcm9wRG93blZhbHVlIH19PC9mdy1pY29uPlxuPC9uZy10ZW1wbGF0ZT4iXX0=
39
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQWNqRCxNQUFNLE9BQU8saUJBQWlCO0lBWjlCO1FBYVcsVUFBSyxHQUF1RixTQUFTLENBQUM7UUFDdEcsU0FBSSxHQUFrQyxRQUFRLENBQUE7UUFDOUMsU0FBSSxHQUFtQyxPQUFPLENBQUE7UUFDOUMsYUFBUSxHQUFhLEtBQUssQ0FBQTtRQUMxQixhQUFRLEdBQVksRUFBRSxDQUFBO1FBQ3RCLGNBQVMsR0FBWSxFQUFFLENBQUE7S0FDakM7OzhHQVBZLGlCQUFpQjtrR0FBakIsaUJBQWlCLHdZQ2Q5QixtT0FJUzsyRkRVSSxpQkFBaUI7a0JBWjdCLFNBQVM7MkJBQ0Y7d0JBQ0osT0FBTyxFQUFFLG1CQUFtQjt3QkFDNUIsZUFBZSxFQUFFLGtCQUFrQjt3QkFDbkMsZ0JBQWdCLEVBQUUsbUJBQW1CO3dCQUNyQyxlQUFlLEVBQUUsa0JBQWtCO3dCQUNuQyxpQkFBaUIsRUFBRSxzQkFBc0I7cUJBQzFDLFlBQ1MsV0FBVzs4QkFLWixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIGhvc3Q6IHtcbiAgICAnY2xhc3MnOiAnYnV0dG9uW2Z3LWJ1dHRvbl0nLFxuICAgICdbY2xhc3Muc21hbGxdJzogJ3NpemUgPT09IFwic21hbGxcIicsXG4gICAgJ1tjbGFzcy5tZWRpdW1dJzogJ3NpemUgPT09IFwibWVkaXVtXCInLFxuICAgICdbY2xhc3MubGFyZ2VdJzogJ3NpemUgPT09IFwibGFyZ2VcIicsXG4gICAgJ1tjbGFzcy5jb21wYWN0XSc6ICdsYXlvdXQgPT09IFwiY29tcGFjdFwiJyxcbiAgfSxcbiAgc2VsZWN0b3I6ICdmdy1idXR0b24nLFxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG59KVxuZXhwb3J0IGNsYXNzIEZ3QnV0dG9uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgY29sb3I/OiAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdkYW5nZXInIHwgJ3NsYXRlJyB8ICdza2VsZXRvbicgfCAnd2FybmluZycgfCAnc3VjY2VzcycgPSAncHJpbWFyeSc7XG4gIEBJbnB1dCgpIHNpemU/OiAnc21hbGwnIHwgJ21lZGl1bScgfCAnbGFyZ2UnID0gJ21lZGl1bSdcbiAgQElucHV0KCkgdHlwZT86ICdnaG9zdCcgfCAnc29saWQnIHwgJ291dGxpbmUnID0gJ3NvbGlkJ1xuICBASW5wdXQoKSBkaXNhYmxlZD86IGJvb2xlYW4gPSBmYWxzZVxuICBASW5wdXQoKSBsZWZ0SWNvbj86IHN0cmluZyA9ICcnXG4gIEBJbnB1dCgpIHJpZ2h0SWNvbj86IHN0cmluZyA9ICcnXG59XG4iLCI8YnV0dG9uIFtjbGFzc109XCJbY29sb3IgKyAnLScgKyB0eXBlLCBzaXplXVwiIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiPlxuICA8ZnctaWNvbiAqbmdJZj1cIiEhbGVmdEljb25cIj57e2xlZnRJY29ufX08L2Z3LWljb24+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPGZ3LWljb24gKm5nSWY9XCIhIXJpZ2h0SWNvblwiPnt7cmlnaHRJY29ufX08L2Z3LWljb24+XG48L2J1dHRvbj4iXX0=
package/esm2020/components/notification/notification-container/notification-container.component.mjs CHANGED
@@ -74,7 +74,7 @@ export class FwNotificationContainerComponent {
74
74
  }
75
75
  }
76
76
  FwNotificationContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FwNotificationService }], target: i0.ɵɵFactoryTarget.Component });
77
- FwNotificationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNotificationContainerComponent, selector: "fw-notification-container", host: { properties: { "class.duo": "notifications.length === 2", "class.triple": "notifications.length >= 3" }, classAttribute: "fw-notification-container" }, ngImport: i0, template: "<div role=\"list\">\n <fw-notification *ngFor=\"let notification of notifications; index as $index\"\n (ready)=\"onReady($event)\"\n (dismiss)=\"onDismiss($event)\"\n [class]=\"notificationClass($index)\"\n [notification]=\"expanded || $index === notifications.length - 1 ? notification : getEmptyNotification(notification)\"\n [attr.aria-label]=\"notification.type + ' : ' + notification.message\"\n role=\"listitem\"\n ></fw-notification>\n <div class=\"buttons\">\n <fw-button *ngIf=\"expanded\" (click)=\"onShowLess()\" mat-button aria-label=\"show less\" layout=\"compact\" size=\"small\">\n <mat-icon>expand_less</mat-icon>\n </fw-button>\n <fw-button *ngIf=\"!expanded && notifications.length > 1\" (click)=\"onShowMore()\" mat-button aria-label=\"show more\" layout=\"compact\" size=\"small\">\n <mat-icon>expand_more</mat-icon>\n </fw-button>\n <fw-button (click)=\"clearAll()\" mat-button class=\"clear-all\" aria-label=\"clear all\" layout=\"compact\" size=\"small\">\n Clear All\n </fw-button>\n </div>\n</div>\n", styles: ["fw-notification-container{position:absolute;right:0;top:0;margin-top:20px;z-index:999999}fw-notification-container>div{display:flex;flex-direction:column-reverse}fw-notification-container .buttons{display:none;position:absolute;top:-5px;right:25px}fw-notification-container .buttons button{color:#fff;background-color:#919292;margin-left:2px}fw-notification-container .buttons button.mat-button{line-height:24px!important;margin:0 0 0 2px!important}fw-notification-container:hover .buttons{display:flex}fw-notification-container .hidden{display:none}fw-notification-container fw-notification:last-of-type{margin-top:24px}fw-notification-container.duo fw-notification.level-0{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-1{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-0{transform:scale(.9) translateY(-108px)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FwButtonComponent, selector: "fw-button", inputs: ["color", "layout", "size", "type", "disabled", "leftIcon", "rightIcon", "leftIconSwap", "rightIconSwap", "dropDown", "showText"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.FwNotificationComponent, selector: "fw-notification", inputs: ["notification", "notificationDuration"], outputs: ["ready", "dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
77
+ FwNotificationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNotificationContainerComponent, selector: "fw-notification-container", host: { properties: { "class.duo": "notifications.length === 2", "class.triple": "notifications.length >= 3" }, classAttribute: "fw-notification-container" }, ngImport: i0, template: "<div role=\"list\">\n <fw-notification *ngFor=\"let notification of notifications; index as $index\"\n (ready)=\"onReady($event)\"\n (dismiss)=\"onDismiss($event)\"\n [class]=\"notificationClass($index)\"\n [notification]=\"expanded || $index === notifications.length - 1 ? notification : getEmptyNotification(notification)\"\n [attr.aria-label]=\"notification.type + ' : ' + notification.message\"\n role=\"listitem\"\n ></fw-notification>\n <div class=\"buttons\">\n <fw-button *ngIf=\"expanded\" (click)=\"onShowLess()\" mat-button aria-label=\"show less\" layout=\"compact\" size=\"small\">\n <mat-icon>expand_less</mat-icon>\n </fw-button>\n <fw-button *ngIf=\"!expanded && notifications.length > 1\" (click)=\"onShowMore()\" mat-button aria-label=\"show more\" layout=\"compact\" size=\"small\">\n <mat-icon>expand_more</mat-icon>\n </fw-button>\n <fw-button (click)=\"clearAll()\" mat-button class=\"clear-all\" aria-label=\"clear all\" layout=\"compact\" size=\"small\">\n Clear All\n </fw-button>\n </div>\n</div>\n", styles: ["fw-notification-container{position:absolute;right:0;top:0;margin-top:20px;z-index:999999}fw-notification-container>div{display:flex;flex-direction:column-reverse}fw-notification-container .buttons{display:none;position:absolute;top:-5px;right:25px}fw-notification-container .buttons button{color:#fff;background-color:#919292;margin-left:2px}fw-notification-container .buttons button.mat-button{line-height:24px!important;margin:0 0 0 2px!important}fw-notification-container:hover .buttons{display:flex}fw-notification-container .hidden{display:none}fw-notification-container fw-notification:last-of-type{margin-top:24px}fw-notification-container.duo fw-notification.level-0{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-1{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-0{transform:scale(.9) translateY(-108px)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "type", "disabled", "leftIcon", "rightIcon"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.FwNotificationComponent, selector: "fw-notification", inputs: ["notification", "notificationDuration"], outputs: ["ready", "dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
78
78
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationContainerComponent, decorators: [{
79
79
  type: Component,
80
80
  args: [{ host: {
package/fesm2015/flywheel-io-vision.mjs CHANGED
@@ -181,34 +181,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
181
181
 
182
182
  class FwButtonComponent {
183
183
  constructor() {
184
- this.layout = 'basic';
184
+ this.color = 'primary';
185
185
  this.size = 'medium';
186
- this.type = 'ghost';
186
+ this.type = 'solid';
187
187
  this.disabled = false;
188
- this.leftIcon = false;
189
- this.rightIcon = false;
190
- this.leftIconSwap = '';
191
- this.rightIconSwap = '';
192
- this.dropDown = false;
193
- this.showText = true;
194
- this.dropDownValue = 'chevron-down';
188
+ this.leftIcon = '';
189
+ this.rightIcon = '';
195
190
  }
196
191
  }
197
192
  FwButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
198
- FwButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonComponent, selector: "fw-button", inputs: { color: "color", layout: "layout", size: "size", type: "type", disabled: "disabled", leftIcon: "leftIcon", rightIcon: "rightIcon", leftIconSwap: "leftIconSwap", rightIconSwap: "rightIconSwap", dropDown: "dropDown", showText: "showText" }, host: { properties: { "class.small": "size === \"small\"", "class.medium": "size === \"medium\"", "class.large": "size === \"large\"", "class.compact": "layout === \"compact\"" }, classAttribute: "fw-button" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <button *ngSwitchCase=\"'outline'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'invisible': !showText && !rightIcon && !leftIcon && !dropDown, \n 'button-disabled': disabled,\n 'text-color border-color': true }\" mat-stroked-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n <button *ngSwitchCase=\"'solid'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'button-disabled': disabled,\n 'w-28': !showText && !rightIcon && !leftIcon && !dropDown }\" mat-flat-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n <button *ngSwitchCase=\"'ghost'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'hidden': !showText && !rightIcon && !leftIcon && !dropDown, \n 'button-disabled': disabled,\n 'text-color': true }\" mat-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #content>\n <fw-icon [class.pr-2]=\"showText\" *ngIf=\"leftIcon\">{{ leftIconSwap }}</fw-icon>\n <ng-content *ngIf=\"showText\"></ng-content>\n <fw-icon [class.pl-2]=\"showText\" *ngIf=\"rightIcon && !leftIcon\">{{ rightIconSwap }}</fw-icon>\n <fw-icon [class.pl-2]=\"showText || rightIcon || leftIcon\" *ngIf=\"dropDown\">{{ dropDownValue }}</fw-icon>\n</ng-template>", styles: [".white{color:#fff!important}.fill-white{background-color:#fff!important}.border-white{border-color:#fff!important}.border-top-white{border-top:1px solid;border-color:#fff!important}.border-right-white{border-right:1px solid;border-color:#fff!important}.border-bottom-white{border-bottom:1px solid;border-color:#fff!important}.border-left-white{border-left:1px solid;border-color:#fff!important}.black{color:#000!important}.fill-black{background-color:#000!important}.border-black{border-color:#000!important}.border-top-black{border-top:1px solid;border-color:#000!important}.border-right-black{border-right:1px solid;border-color:#000!important}.border-bottom-black{border-bottom:1px solid;border-color:#000!important}.border-left-black{border-left:1px solid;border-color:#000!important}.green{color:#59b96b!important}.fill-green{background-color:#59b96b!important}.border-green{border-color:#59b96b!important}.border-top-green{border-top:1px solid;border-color:#59b96b!important}.border-right-green{border-right:1px solid;border-color:#59b96b!important}.border-bottom-green{border-bottom:1px solid;border-color:#59b96b!important}.border-left-green{border-left:1px solid;border-color:#59b96b!important}.orange{color:#f7941d!important}.fill-orange{background-color:#f7941d!important}.border-orange{border-color:#f7941d!important}.border-top-orange{border-top:1px solid;border-color:#f7941d!important}.border-right-orange{border-right:1px solid;border-color:#f7941d!important}.border-bottom-orange{border-bottom:1px solid;border-color:#f7941d!important}.border-left-orange{border-left:1px solid;border-color:#f7941d!important}.red{color:#de584c!important}.fill-red{background-color:#de584c!important}.border-red{border-color:#de584c!important}.border-top-red{border-top:1px solid;border-color:#de584c!important}.border-right-red{border-right:1px solid;border-color:#de584c!important}.border-bottom-red{border-bottom:1px solid;border-color:#de584c!important}.border-left-red{border-left:1px solid;border-color:#de584c!important}.light-red{color:#f8e5e4!important}.fill-light-red{background-color:#f8e5e4!important}.border-light-red{border-color:#f8e5e4!important}.border-top-light-red{border-top:1px solid;border-color:#f8e5e4!important}.border-right-light-red{border-right:1px solid;border-color:#f8e5e4!important}.border-bottom-light-red{border-bottom:1px solid;border-color:#f8e5e4!important}.border-left-light-red{border-left:1px solid;border-color:#f8e5e4!important}.blue{color:#5871a2!important}.fill-blue{background-color:#5871a2!important}.border-blue{border-color:#5871a2!important}.border-top-blue{border-top:1px solid;border-color:#5871a2!important}.border-right-blue{border-right:1px solid;border-color:#5871a2!important}.border-bottom-blue{border-bottom:1px solid;border-color:#5871a2!important}.border-left-blue{border-left:1px solid;border-color:#5871a2!important}.focus-blue{color:#23527c!important}.fill-focus-blue{background-color:#23527c!important}.border-focus-blue{border-color:#23527c!important}.border-top-focus-blue{border-top:1px solid;border-color:#23527c!important}.border-right-focus-blue{border-right:1px solid;border-color:#23527c!important}.border-bottom-focus-blue{border-bottom:1px solid;border-color:#23527c!important}.border-left-focus-blue{border-left:1px solid;border-color:#23527c!important}.dark-blue{color:#394256!important}.fill-dark-blue{background-color:#394256!important}.border-dark-blue{border-color:#394256!important}.border-top-dark-blue{border-top:1px solid;border-color:#394256!important}.border-right-dark-blue{border-right:1px solid;border-color:#394256!important}.border-bottom-dark-blue{border-bottom:1px solid;border-color:#394256!important}.border-left-dark-blue{border-left:1px solid;border-color:#394256!important}.light-blue{color:#e7effe!important}.fill-light-blue{background-color:#e7effe!important}.border-light-blue{border-color:#e7effe!important}.border-top-light-blue{border-top:1px solid;border-color:#e7effe!important}.border-right-light-blue{border-right:1px solid;border-color:#e7effe!important}.border-bottom-light-blue{border-bottom:1px solid;border-color:#e7effe!important}.border-left-light-blue{border-left:1px solid;border-color:#e7effe!important}.bright-blue{color:#1b68fa!important}.fill-bright-blue{background-color:#1b68fa!important}.border-bright-blue{border-color:#1b68fa!important}.border-top-bright-blue{border-top:1px solid;border-color:#1b68fa!important}.border-right-bright-blue{border-right:1px solid;border-color:#1b68fa!important}.border-bottom-bright-blue{border-bottom:1px solid;border-color:#1b68fa!important}.border-left-bright-blue{border-left:1px solid;border-color:#1b68fa!important}.admin-black{color:#01010a!important}.fill-admin-black{background-color:#01010a!important}.border-admin-black{border-color:#01010a!important}.border-top-admin-black{border-top:1px solid;border-color:#01010a!important}.border-right-admin-black{border-right:1px solid;border-color:#01010a!important}.border-bottom-admin-black{border-bottom:1px solid;border-color:#01010a!important}.border-left-admin-black{border-left:1px solid;border-color:#01010a!important}.accent-purple{color:#b080fc!important}.fill-accent-purple{background-color:#b080fc!important}.border-accent-purple{border-color:#b080fc!important}.border-top-accent-purple{border-top:1px solid;border-color:#b080fc!important}.border-right-accent-purple{border-right:1px solid;border-color:#b080fc!important}.border-bottom-accent-purple{border-bottom:1px solid;border-color:#b080fc!important}.border-left-accent-purple{border-left:1px solid;border-color:#b080fc!important}.grey{color:#58595b!important}.fill-grey{background-color:#58595b!important}.border-grey{border-color:#58595b!important}.border-top-grey{border-top:1px solid;border-color:#58595b!important}.border-right-grey{border-right:1px solid;border-color:#58595b!important}.border-bottom-grey{border-bottom:1px solid;border-color:#58595b!important}.border-left-grey{border-left:1px solid;border-color:#58595b!important}.soft-grey{color:#dddede!important}.fill-soft-grey{background-color:#dddede!important}.border-soft-grey{border-color:#dddede!important}.border-top-soft-grey{border-top:1px solid;border-color:#dddede!important}.border-right-soft-grey{border-right:1px solid;border-color:#dddede!important}.border-bottom-soft-grey{border-bottom:1px solid;border-color:#dddede!important}.border-left-soft-grey{border-left:1px solid;border-color:#dddede!important}.light-grey{color:#eee!important}.fill-light-grey{background-color:#eee!important}.border-light-grey{border-color:#eee!important}.border-top-light-grey{border-top:1px solid;border-color:#eee!important}.border-right-light-grey{border-right:1px solid;border-color:#eee!important}.border-bottom-light-grey{border-bottom:1px solid;border-color:#eee!important}.border-left-light-grey{border-left:1px solid;border-color:#eee!important}.medium-grey{color:#ccc!important}.fill-medium-grey{background-color:#ccc!important}.border-medium-grey{border-color:#ccc!important}.border-top-medium-grey{border-top:1px solid;border-color:#ccc!important}.border-right-medium-grey{border-right:1px solid;border-color:#ccc!important}.border-bottom-medium-grey{border-bottom:1px solid;border-color:#ccc!important}.border-left-medium-grey{border-left:1px solid;border-color:#ccc!important}.medium-dark-grey{color:#999!important}.fill-medium-dark-grey{background-color:#999!important}.border-medium-dark-grey{border-color:#999!important}.border-top-medium-dark-grey{border-top:1px solid;border-color:#999!important}.border-right-medium-dark-grey{border-right:1px solid;border-color:#999!important}.border-bottom-medium-dark-grey{border-bottom:1px solid;border-color:#999!important}.border-left-medium-dark-grey{border-left:1px solid;border-color:#999!important}.dark-grey{color:#222!important}.fill-dark-grey{background-color:#222!important}.border-dark-grey{border-color:#222!important}.border-top-dark-grey{border-top:1px solid;border-color:#222!important}.border-right-dark-grey{border-right:1px solid;border-color:#222!important}.border-bottom-dark-grey{border-bottom:1px solid;border-color:#222!important}.border-left-dark-grey{border-left:1px solid;border-color:#222!important}.shuttle-gray{color:#5d6877!important}.fill-shuttle-gray{background-color:#5d6877!important}.border-shuttle-gray{border-color:#5d6877!important}.border-top-shuttle-gray{border-top:1px solid;border-color:#5d6877!important}.border-right-shuttle-gray{border-right:1px solid;border-color:#5d6877!important}.border-bottom-shuttle-gray{border-bottom:1px solid;border-color:#5d6877!important}.border-left-shuttle-gray{border-left:1px solid;border-color:#5d6877!important}.gull-gray{color:#9ea8b5!important}.fill-gull-gray{background-color:#9ea8b5!important}.border-gull-gray{border-color:#9ea8b5!important}.border-top-gull-gray{border-top:1px solid;border-color:#9ea8b5!important}.border-right-gull-gray{border-right:1px solid;border-color:#9ea8b5!important}.border-bottom-gull-gray{border-bottom:1px solid;border-color:#9ea8b5!important}.border-left-gull-gray{border-left:1px solid;border-color:#9ea8b5!important}.soft-blue{color:#eff1f5!important}.fill-soft-blue{background-color:#eff1f5!important}.border-soft-blue{border-color:#eff1f5!important}.border-top-soft-blue{border-top:1px solid;border-color:#eff1f5!important}.border-right-soft-blue{border-right:1px solid;border-color:#eff1f5!important}.border-bottom-soft-blue{border-bottom:1px solid;border-color:#eff1f5!important}.border-left-soft-blue{border-left:1px solid;border-color:#eff1f5!important}.dark-soft-blue{color:#e9ecf1!important}.fill-dark-soft-blue{background-color:#e9ecf1!important}.border-dark-soft-blue{border-color:#e9ecf1!important}.border-top-dark-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-dark-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-dark-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-dark-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.darker-soft-blue{color:#e6e9ef!important}.fill-darker-soft-blue{background-color:#e6e9ef!important}.border-darker-soft-blue{border-color:#e6e9ef!important}.border-top-darker-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-darker-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-darker-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-darker-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.light-soft-blue{color:#f5f6f9!important}.fill-light-soft-blue{background-color:#f5f6f9!important}.border-light-soft-blue{border-color:#f5f6f9!important}.border-top-light-soft-blue{border-top:1px solid;border-color:#f5f6f9!important}.border-right-light-soft-blue{border-right:1px solid;border-color:#f5f6f9!important}.border-bottom-light-soft-blue{border-bottom:1px solid;border-color:#f5f6f9!important}.border-left-light-soft-blue{border-left:1px solid;border-color:#f5f6f9!important}.lighter-soft-blue{color:#f8f9fb!important}.fill-lighter-soft-blue{background-color:#f8f9fb!important}.border-lighter-soft-blue{border-color:#f8f9fb!important}.border-top-lighter-soft-blue{border-top:1px solid;border-color:#f8f9fb!important}.border-right-lighter-soft-blue{border-right:1px solid;border-color:#f8f9fb!important}.border-bottom-lighter-soft-blue{border-bottom:1px solid;border-color:#f8f9fb!important}.border-left-lighter-soft-blue{border-left:1px solid;border-color:#f8f9fb!important}.eucalyptus{color:#1b9e4b!important}.fill-eucalyptus{background-color:#1b9e4b!important}.border-eucalyptus{border-color:#1b9e4b!important}.border-top-eucalyptus{border-top:1px solid;border-color:#1b9e4b!important}.border-right-eucalyptus{border-right:1px solid;border-color:#1b9e4b!important}.border-bottom-eucalyptus{border-bottom:1px solid;border-color:#1b9e4b!important}.border-left-eucalyptus{border-left:1px solid;border-color:#1b9e4b!important}.gamboge{color:#dd8e0a!important}.fill-gamboge{background-color:#dd8e0a!important}.border-gamboge{border-color:#dd8e0a!important}.border-top-gamboge{border-top:1px solid;border-color:#dd8e0a!important}.border-right-gamboge{border-right:1px solid;border-color:#dd8e0a!important}.border-bottom-gamboge{border-bottom:1px solid;border-color:#dd8e0a!important}.border-left-gamboge{border-left:1px solid;border-color:#dd8e0a!important}.valencia{color:#d73d3d!important}.fill-valencia{background-color:#d73d3d!important}.border-valencia{border-color:#d73d3d!important}.border-top-valencia{border-top:1px solid;border-color:#d73d3d!important}.border-right-valencia{border-right:1px solid;border-color:#d73d3d!important}.border-bottom-valencia{border-bottom:1px solid;border-color:#d73d3d!important}.border-left-valencia{border-left:1px solid;border-color:#d73d3d!important}:host.compact>button{line-height:24px;min-height:24px}:host.small{font-size:12px}:host.medium{font-size:14px}:host.large{font-size:18px}button{font-size:inherit;padding:0 12px;min-height:36px;min-width:44px}.primary-button{background:#1b68fa;color:#fff}.primary-button.text-color{color:#1b68fa;background:none}.primary-button.text-color:hover{background:#e4edfe}.primary-button.text-color:active{background:#bbd2fe}.primary-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.primary-button.border-color:hover,.primary-button.border-color:active{border:1px solid #ebefff}.primary-button:hover{background:#104bf8}.primary-button:active{background:#083af6}.secondary-button{background:#b080fc;color:#fff}.secondary-button.text-color{color:#b080fc;background:none}.secondary-button.text-color:hover{background:#f6f0ff}.secondary-button.text-color:active{background:#e7d9fe}.secondary-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.secondary-button.border-color:hover,.secondary-button.border-color:active{border:1px solid #e3d7ff}.secondary-button:hover{background:#a06dfb}.secondary-button:active{background:#9763fb}.danger-button{background:#d73d3d;color:#fff}.danger-button.text-color{color:#d73d3d;background:none}.danger-button.text-color:hover{background:#faeae9}.danger-button.text-color:active{background:#f4cbc9}.danger-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.danger-button.border-color:hover,.danger-button.border-color:active{border:1px solid #ffcac9}.danger-button:hover{background:#d9534b}.danger-button:active{background:#d54c44}.slate-button{background:var(--color-shuttle-gray-400);color:#fff}.slate-button.text-color{color:var(--color-shuttle-gray-400);background:none}.slate-button.text-color:hover{background:var(--color-shuttle-gray-100)}.slate-button.text-color:active{background:var(--color-shuttle-gray-200)}.slate-button.border-color,.slate-button.border-color:hover,.slate-button.border-color:active{border:1px solid var(--color-shuttle-gray-100)}.slate-button:hover{background:var(--color-shuttle-gray-500)}.slate-button:active{background:var(--color-shuttle-gray-700)}.skeleton-button{background:var(--color-shuttle-gray-400);color:#fff}.skeleton-button.text-color{color:var(--color-shuttle-gray-400);background:none}.skeleton-button.text-color:hover{background:var(--color-shuttle-gray-100)}.skeleton-button.text-color:active{background:var(--color-shuttle-gray-200)}.skeleton-button.border-color,.skeleton-button.border-color:hover,.skeleton-button.border-color:active{border:1px solid var(--color-shuttle-gray-100)}.skeleton-button:hover{background:var(--color-shuttle-gray-500)}.skeleton-button:active{background:var(--color-shuttle-gray-700)}.warning-button{background:var(--color-gamboge-500);color:#fff}.warning-button.text-color{color:var(--color-gamboge-500);background:none}.warning-button.text-color:hover{background:var(--color-gamboge-50)}.warning-button.text-color:active{background:var(--color-gamboge-100)}.warning-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.warning-button.border-color:hover,.warning-button.border-color:active{border:1px solid var(--color-gamboge-A200)}.warning-button:hover{background:var(--color-gamboge-600)}.warning-button:active{background:var(--color-gamboge-700)}.success-button{background:#1B9E4B;color:#fff}.success-button.text-color{color:#1b9e4b;background:none}.success-button.text-color:hover{background:#cdead3}.success-button.text-color:active{background:#acdcb5}.success-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.success-button.border-color:hover,.success-button.border-color:active{border:1px solid #d9ffde}.success-button:hover{background:#3ea24e}.success-button:active{background:#2e933c}.button-disabled{opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
193
+ FwButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonComponent, selector: "fw-button", inputs: { color: "color", size: "size", type: "type", disabled: "disabled", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { properties: { "class.small": "size === \"small\"", "class.medium": "size === \"medium\"", "class.large": "size === \"large\"", "class.compact": "layout === \"compact\"" }, classAttribute: "button[fw-button]" }, ngImport: i0, template: "<button [class]=\"[color + '-' + type, size]\" [disabled]=\"disabled\">\n <fw-icon *ngIf=\"!!leftIcon\">{{leftIcon}}</fw-icon>\n <ng-content></ng-content>\n <fw-icon *ngIf=\"!!rightIcon\">{{rightIcon}}</fw-icon>\n</button>", styles: ["button{cursor:pointer;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button fw-icon{font-size:20px}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{color:var(--primary-base);border:1px solid var(--separations-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.secondary-solid{background-color:var(--secondary-base);color:var(--typography-contrast)}.secondary-solid:hover{background-color:var(--secondary-medium)}.secondary-solid:active{background-color:var(--secondary-dark)}.secondary-ghost{color:var(--secondary-base)}.secondary-ghost:hover{background-color:var(--secondary-hover)}.secondary-ghost:active{background-color:var(--secondary-focus)}.secondary-outline{color:var(--secondary-base);border:1px solid var(--separations-base)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.slate-solid{background-color:var(--slate-base);color:var(--typography-contrast)}.slate-solid:hover{background-color:var(--slate-medium)}.slate-solid:active{background-color:var(--slate-dark)}.slate-ghost{color:var(--slate-base)}.slate-ghost:hover{background-color:var(--slate-hover)}.slate-ghost:active{background-color:var(--slate-focus)}.slate-outline{color:var(--slate-base);border:1px solid var(--separations-base)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.danger-solid{background-color:var(--red-base);color:var(--typography-contrast)}.danger-solid:hover{background-color:var(--red-medium)}.danger-solid:active{background-color:var(--red-dark)}.danger-ghost{color:var(--red-base)}.danger-ghost:hover{background-color:var(--red-hover)}.danger-ghost:active{background-color:var(--red-focus)}.danger-outline{color:var(--red-base);border:1px solid var(--separations-base)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.skeleton-solid{background-color:var(---base);color:var(--typography-contrast)}.skeleton-solid:hover{background-color:var(---medium)}.skeleton-solid:active{background-color:var(---dark)}.skeleton-ghost{color:var(---base)}.skeleton-ghost:hover{background-color:var(---hover)}.skeleton-ghost:active{background-color:var(---focus)}.skeleton-outline{color:var(---base);border:1px solid var(--separations-base)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.warning-solid{background-color:var(--orange-base);color:var(--typography-contrast)}.warning-solid:hover{background-color:var(--orange-medium)}.warning-solid:active{background-color:var(--orange-dark)}.warning-ghost{color:var(--orange-base)}.warning-ghost:hover{background-color:var(--orange-hover)}.warning-ghost:active{background-color:var(--orange-focus)}.warning-outline{color:var(--orange-base);border:1px solid var(--separations-base)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.success-solid{background-color:var(--green-base);color:var(--typography-contrast)}.success-solid:hover{background-color:var(--green-medium)}.success-solid:active{background-color:var(--green-dark)}.success-ghost{color:var(--green-base)}.success-ghost:hover{background-color:var(--green-hover)}.success-ghost:active{background-color:var(--green-focus)}.success-outline{color:var(--green-base);border:1px solid var(--separations-base)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
199
194
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonComponent, decorators: [{
200
195
  type: Component,
201
196
  args: [{ host: {
202
- 'class': 'fw-button',
197
+ 'class': 'button[fw-button]',
203
198
  '[class.small]': 'size === "small"',
204
199
  '[class.medium]': 'size === "medium"',
205
200
  '[class.large]': 'size === "large"',
206
201
  '[class.compact]': 'layout === "compact"',
207
- }, selector: 'fw-button', template: "<ng-container [ngSwitch]=\"type\">\n <button *ngSwitchCase=\"'outline'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'invisible': !showText && !rightIcon && !leftIcon && !dropDown, \n 'button-disabled': disabled,\n 'text-color border-color': true }\" mat-stroked-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n <button *ngSwitchCase=\"'solid'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'button-disabled': disabled,\n 'w-28': !showText && !rightIcon && !leftIcon && !dropDown }\" mat-flat-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n <button *ngSwitchCase=\"'ghost'\" [class]=\"color + '-button'\" [ngClass]=\"{\n 'hidden': !showText && !rightIcon && !leftIcon && !dropDown, \n 'button-disabled': disabled,\n 'text-color': true }\" mat-button>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #content>\n <fw-icon [class.pr-2]=\"showText\" *ngIf=\"leftIcon\">{{ leftIconSwap }}</fw-icon>\n <ng-content *ngIf=\"showText\"></ng-content>\n <fw-icon [class.pl-2]=\"showText\" *ngIf=\"rightIcon && !leftIcon\">{{ rightIconSwap }}</fw-icon>\n <fw-icon [class.pl-2]=\"showText || rightIcon || leftIcon\" *ngIf=\"dropDown\">{{ dropDownValue }}</fw-icon>\n</ng-template>", styles: [".white{color:#fff!important}.fill-white{background-color:#fff!important}.border-white{border-color:#fff!important}.border-top-white{border-top:1px solid;border-color:#fff!important}.border-right-white{border-right:1px solid;border-color:#fff!important}.border-bottom-white{border-bottom:1px solid;border-color:#fff!important}.border-left-white{border-left:1px solid;border-color:#fff!important}.black{color:#000!important}.fill-black{background-color:#000!important}.border-black{border-color:#000!important}.border-top-black{border-top:1px solid;border-color:#000!important}.border-right-black{border-right:1px solid;border-color:#000!important}.border-bottom-black{border-bottom:1px solid;border-color:#000!important}.border-left-black{border-left:1px solid;border-color:#000!important}.green{color:#59b96b!important}.fill-green{background-color:#59b96b!important}.border-green{border-color:#59b96b!important}.border-top-green{border-top:1px solid;border-color:#59b96b!important}.border-right-green{border-right:1px solid;border-color:#59b96b!important}.border-bottom-green{border-bottom:1px solid;border-color:#59b96b!important}.border-left-green{border-left:1px solid;border-color:#59b96b!important}.orange{color:#f7941d!important}.fill-orange{background-color:#f7941d!important}.border-orange{border-color:#f7941d!important}.border-top-orange{border-top:1px solid;border-color:#f7941d!important}.border-right-orange{border-right:1px solid;border-color:#f7941d!important}.border-bottom-orange{border-bottom:1px solid;border-color:#f7941d!important}.border-left-orange{border-left:1px solid;border-color:#f7941d!important}.red{color:#de584c!important}.fill-red{background-color:#de584c!important}.border-red{border-color:#de584c!important}.border-top-red{border-top:1px solid;border-color:#de584c!important}.border-right-red{border-right:1px solid;border-color:#de584c!important}.border-bottom-red{border-bottom:1px solid;border-color:#de584c!important}.border-left-red{border-left:1px solid;border-color:#de584c!important}.light-red{color:#f8e5e4!important}.fill-light-red{background-color:#f8e5e4!important}.border-light-red{border-color:#f8e5e4!important}.border-top-light-red{border-top:1px solid;border-color:#f8e5e4!important}.border-right-light-red{border-right:1px solid;border-color:#f8e5e4!important}.border-bottom-light-red{border-bottom:1px solid;border-color:#f8e5e4!important}.border-left-light-red{border-left:1px solid;border-color:#f8e5e4!important}.blue{color:#5871a2!important}.fill-blue{background-color:#5871a2!important}.border-blue{border-color:#5871a2!important}.border-top-blue{border-top:1px solid;border-color:#5871a2!important}.border-right-blue{border-right:1px solid;border-color:#5871a2!important}.border-bottom-blue{border-bottom:1px solid;border-color:#5871a2!important}.border-left-blue{border-left:1px solid;border-color:#5871a2!important}.focus-blue{color:#23527c!important}.fill-focus-blue{background-color:#23527c!important}.border-focus-blue{border-color:#23527c!important}.border-top-focus-blue{border-top:1px solid;border-color:#23527c!important}.border-right-focus-blue{border-right:1px solid;border-color:#23527c!important}.border-bottom-focus-blue{border-bottom:1px solid;border-color:#23527c!important}.border-left-focus-blue{border-left:1px solid;border-color:#23527c!important}.dark-blue{color:#394256!important}.fill-dark-blue{background-color:#394256!important}.border-dark-blue{border-color:#394256!important}.border-top-dark-blue{border-top:1px solid;border-color:#394256!important}.border-right-dark-blue{border-right:1px solid;border-color:#394256!important}.border-bottom-dark-blue{border-bottom:1px solid;border-color:#394256!important}.border-left-dark-blue{border-left:1px solid;border-color:#394256!important}.light-blue{color:#e7effe!important}.fill-light-blue{background-color:#e7effe!important}.border-light-blue{border-color:#e7effe!important}.border-top-light-blue{border-top:1px solid;border-color:#e7effe!important}.border-right-light-blue{border-right:1px solid;border-color:#e7effe!important}.border-bottom-light-blue{border-bottom:1px solid;border-color:#e7effe!important}.border-left-light-blue{border-left:1px solid;border-color:#e7effe!important}.bright-blue{color:#1b68fa!important}.fill-bright-blue{background-color:#1b68fa!important}.border-bright-blue{border-color:#1b68fa!important}.border-top-bright-blue{border-top:1px solid;border-color:#1b68fa!important}.border-right-bright-blue{border-right:1px solid;border-color:#1b68fa!important}.border-bottom-bright-blue{border-bottom:1px solid;border-color:#1b68fa!important}.border-left-bright-blue{border-left:1px solid;border-color:#1b68fa!important}.admin-black{color:#01010a!important}.fill-admin-black{background-color:#01010a!important}.border-admin-black{border-color:#01010a!important}.border-top-admin-black{border-top:1px solid;border-color:#01010a!important}.border-right-admin-black{border-right:1px solid;border-color:#01010a!important}.border-bottom-admin-black{border-bottom:1px solid;border-color:#01010a!important}.border-left-admin-black{border-left:1px solid;border-color:#01010a!important}.accent-purple{color:#b080fc!important}.fill-accent-purple{background-color:#b080fc!important}.border-accent-purple{border-color:#b080fc!important}.border-top-accent-purple{border-top:1px solid;border-color:#b080fc!important}.border-right-accent-purple{border-right:1px solid;border-color:#b080fc!important}.border-bottom-accent-purple{border-bottom:1px solid;border-color:#b080fc!important}.border-left-accent-purple{border-left:1px solid;border-color:#b080fc!important}.grey{color:#58595b!important}.fill-grey{background-color:#58595b!important}.border-grey{border-color:#58595b!important}.border-top-grey{border-top:1px solid;border-color:#58595b!important}.border-right-grey{border-right:1px solid;border-color:#58595b!important}.border-bottom-grey{border-bottom:1px solid;border-color:#58595b!important}.border-left-grey{border-left:1px solid;border-color:#58595b!important}.soft-grey{color:#dddede!important}.fill-soft-grey{background-color:#dddede!important}.border-soft-grey{border-color:#dddede!important}.border-top-soft-grey{border-top:1px solid;border-color:#dddede!important}.border-right-soft-grey{border-right:1px solid;border-color:#dddede!important}.border-bottom-soft-grey{border-bottom:1px solid;border-color:#dddede!important}.border-left-soft-grey{border-left:1px solid;border-color:#dddede!important}.light-grey{color:#eee!important}.fill-light-grey{background-color:#eee!important}.border-light-grey{border-color:#eee!important}.border-top-light-grey{border-top:1px solid;border-color:#eee!important}.border-right-light-grey{border-right:1px solid;border-color:#eee!important}.border-bottom-light-grey{border-bottom:1px solid;border-color:#eee!important}.border-left-light-grey{border-left:1px solid;border-color:#eee!important}.medium-grey{color:#ccc!important}.fill-medium-grey{background-color:#ccc!important}.border-medium-grey{border-color:#ccc!important}.border-top-medium-grey{border-top:1px solid;border-color:#ccc!important}.border-right-medium-grey{border-right:1px solid;border-color:#ccc!important}.border-bottom-medium-grey{border-bottom:1px solid;border-color:#ccc!important}.border-left-medium-grey{border-left:1px solid;border-color:#ccc!important}.medium-dark-grey{color:#999!important}.fill-medium-dark-grey{background-color:#999!important}.border-medium-dark-grey{border-color:#999!important}.border-top-medium-dark-grey{border-top:1px solid;border-color:#999!important}.border-right-medium-dark-grey{border-right:1px solid;border-color:#999!important}.border-bottom-medium-dark-grey{border-bottom:1px solid;border-color:#999!important}.border-left-medium-dark-grey{border-left:1px solid;border-color:#999!important}.dark-grey{color:#222!important}.fill-dark-grey{background-color:#222!important}.border-dark-grey{border-color:#222!important}.border-top-dark-grey{border-top:1px solid;border-color:#222!important}.border-right-dark-grey{border-right:1px solid;border-color:#222!important}.border-bottom-dark-grey{border-bottom:1px solid;border-color:#222!important}.border-left-dark-grey{border-left:1px solid;border-color:#222!important}.shuttle-gray{color:#5d6877!important}.fill-shuttle-gray{background-color:#5d6877!important}.border-shuttle-gray{border-color:#5d6877!important}.border-top-shuttle-gray{border-top:1px solid;border-color:#5d6877!important}.border-right-shuttle-gray{border-right:1px solid;border-color:#5d6877!important}.border-bottom-shuttle-gray{border-bottom:1px solid;border-color:#5d6877!important}.border-left-shuttle-gray{border-left:1px solid;border-color:#5d6877!important}.gull-gray{color:#9ea8b5!important}.fill-gull-gray{background-color:#9ea8b5!important}.border-gull-gray{border-color:#9ea8b5!important}.border-top-gull-gray{border-top:1px solid;border-color:#9ea8b5!important}.border-right-gull-gray{border-right:1px solid;border-color:#9ea8b5!important}.border-bottom-gull-gray{border-bottom:1px solid;border-color:#9ea8b5!important}.border-left-gull-gray{border-left:1px solid;border-color:#9ea8b5!important}.soft-blue{color:#eff1f5!important}.fill-soft-blue{background-color:#eff1f5!important}.border-soft-blue{border-color:#eff1f5!important}.border-top-soft-blue{border-top:1px solid;border-color:#eff1f5!important}.border-right-soft-blue{border-right:1px solid;border-color:#eff1f5!important}.border-bottom-soft-blue{border-bottom:1px solid;border-color:#eff1f5!important}.border-left-soft-blue{border-left:1px solid;border-color:#eff1f5!important}.dark-soft-blue{color:#e9ecf1!important}.fill-dark-soft-blue{background-color:#e9ecf1!important}.border-dark-soft-blue{border-color:#e9ecf1!important}.border-top-dark-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-dark-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-dark-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-dark-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.darker-soft-blue{color:#e6e9ef!important}.fill-darker-soft-blue{background-color:#e6e9ef!important}.border-darker-soft-blue{border-color:#e6e9ef!important}.border-top-darker-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-darker-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-darker-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-darker-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.light-soft-blue{color:#f5f6f9!important}.fill-light-soft-blue{background-color:#f5f6f9!important}.border-light-soft-blue{border-color:#f5f6f9!important}.border-top-light-soft-blue{border-top:1px solid;border-color:#f5f6f9!important}.border-right-light-soft-blue{border-right:1px solid;border-color:#f5f6f9!important}.border-bottom-light-soft-blue{border-bottom:1px solid;border-color:#f5f6f9!important}.border-left-light-soft-blue{border-left:1px solid;border-color:#f5f6f9!important}.lighter-soft-blue{color:#f8f9fb!important}.fill-lighter-soft-blue{background-color:#f8f9fb!important}.border-lighter-soft-blue{border-color:#f8f9fb!important}.border-top-lighter-soft-blue{border-top:1px solid;border-color:#f8f9fb!important}.border-right-lighter-soft-blue{border-right:1px solid;border-color:#f8f9fb!important}.border-bottom-lighter-soft-blue{border-bottom:1px solid;border-color:#f8f9fb!important}.border-left-lighter-soft-blue{border-left:1px solid;border-color:#f8f9fb!important}.eucalyptus{color:#1b9e4b!important}.fill-eucalyptus{background-color:#1b9e4b!important}.border-eucalyptus{border-color:#1b9e4b!important}.border-top-eucalyptus{border-top:1px solid;border-color:#1b9e4b!important}.border-right-eucalyptus{border-right:1px solid;border-color:#1b9e4b!important}.border-bottom-eucalyptus{border-bottom:1px solid;border-color:#1b9e4b!important}.border-left-eucalyptus{border-left:1px solid;border-color:#1b9e4b!important}.gamboge{color:#dd8e0a!important}.fill-gamboge{background-color:#dd8e0a!important}.border-gamboge{border-color:#dd8e0a!important}.border-top-gamboge{border-top:1px solid;border-color:#dd8e0a!important}.border-right-gamboge{border-right:1px solid;border-color:#dd8e0a!important}.border-bottom-gamboge{border-bottom:1px solid;border-color:#dd8e0a!important}.border-left-gamboge{border-left:1px solid;border-color:#dd8e0a!important}.valencia{color:#d73d3d!important}.fill-valencia{background-color:#d73d3d!important}.border-valencia{border-color:#d73d3d!important}.border-top-valencia{border-top:1px solid;border-color:#d73d3d!important}.border-right-valencia{border-right:1px solid;border-color:#d73d3d!important}.border-bottom-valencia{border-bottom:1px solid;border-color:#d73d3d!important}.border-left-valencia{border-left:1px solid;border-color:#d73d3d!important}:host.compact>button{line-height:24px;min-height:24px}:host.small{font-size:12px}:host.medium{font-size:14px}:host.large{font-size:18px}button{font-size:inherit;padding:0 12px;min-height:36px;min-width:44px}.primary-button{background:#1b68fa;color:#fff}.primary-button.text-color{color:#1b68fa;background:none}.primary-button.text-color:hover{background:#e4edfe}.primary-button.text-color:active{background:#bbd2fe}.primary-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.primary-button.border-color:hover,.primary-button.border-color:active{border:1px solid #ebefff}.primary-button:hover{background:#104bf8}.primary-button:active{background:#083af6}.secondary-button{background:#b080fc;color:#fff}.secondary-button.text-color{color:#b080fc;background:none}.secondary-button.text-color:hover{background:#f6f0ff}.secondary-button.text-color:active{background:#e7d9fe}.secondary-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.secondary-button.border-color:hover,.secondary-button.border-color:active{border:1px solid #e3d7ff}.secondary-button:hover{background:#a06dfb}.secondary-button:active{background:#9763fb}.danger-button{background:#d73d3d;color:#fff}.danger-button.text-color{color:#d73d3d;background:none}.danger-button.text-color:hover{background:#faeae9}.danger-button.text-color:active{background:#f4cbc9}.danger-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.danger-button.border-color:hover,.danger-button.border-color:active{border:1px solid #ffcac9}.danger-button:hover{background:#d9534b}.danger-button:active{background:#d54c44}.slate-button{background:var(--color-shuttle-gray-400);color:#fff}.slate-button.text-color{color:var(--color-shuttle-gray-400);background:none}.slate-button.text-color:hover{background:var(--color-shuttle-gray-100)}.slate-button.text-color:active{background:var(--color-shuttle-gray-200)}.slate-button.border-color,.slate-button.border-color:hover,.slate-button.border-color:active{border:1px solid var(--color-shuttle-gray-100)}.slate-button:hover{background:var(--color-shuttle-gray-500)}.slate-button:active{background:var(--color-shuttle-gray-700)}.skeleton-button{background:var(--color-shuttle-gray-400);color:#fff}.skeleton-button.text-color{color:var(--color-shuttle-gray-400);background:none}.skeleton-button.text-color:hover{background:var(--color-shuttle-gray-100)}.skeleton-button.text-color:active{background:var(--color-shuttle-gray-200)}.skeleton-button.border-color,.skeleton-button.border-color:hover,.skeleton-button.border-color:active{border:1px solid var(--color-shuttle-gray-100)}.skeleton-button:hover{background:var(--color-shuttle-gray-500)}.skeleton-button:active{background:var(--color-shuttle-gray-700)}.warning-button{background:var(--color-gamboge-500);color:#fff}.warning-button.text-color{color:var(--color-gamboge-500);background:none}.warning-button.text-color:hover{background:var(--color-gamboge-50)}.warning-button.text-color:active{background:var(--color-gamboge-100)}.warning-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.warning-button.border-color:hover,.warning-button.border-color:active{border:1px solid var(--color-gamboge-A200)}.warning-button:hover{background:var(--color-gamboge-600)}.warning-button:active{background:var(--color-gamboge-700)}.success-button{background:#1B9E4B;color:#fff}.success-button.text-color{color:#1b9e4b;background:none}.success-button.text-color:hover{background:#cdead3}.success-button.text-color:active{background:#acdcb5}.success-button.border-color{border:1px solid var(--color-shuttle-gray-100)}.success-button.border-color:hover,.success-button.border-color:active{border:1px solid #d9ffde}.success-button:hover{background:#3ea24e}.success-button:active{background:#2e933c}.button-disabled{opacity:.4}\n"] }]
202
+ }, selector: 'fw-button', template: "<button [class]=\"[color + '-' + type, size]\" [disabled]=\"disabled\">\n <fw-icon *ngIf=\"!!leftIcon\">{{leftIcon}}</fw-icon>\n <ng-content></ng-content>\n <fw-icon *ngIf=\"!!rightIcon\">{{rightIcon}}</fw-icon>\n</button>", styles: ["button{cursor:pointer;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button fw-icon{font-size:20px}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{color:var(--primary-base);border:1px solid var(--separations-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.secondary-solid{background-color:var(--secondary-base);color:var(--typography-contrast)}.secondary-solid:hover{background-color:var(--secondary-medium)}.secondary-solid:active{background-color:var(--secondary-dark)}.secondary-ghost{color:var(--secondary-base)}.secondary-ghost:hover{background-color:var(--secondary-hover)}.secondary-ghost:active{background-color:var(--secondary-focus)}.secondary-outline{color:var(--secondary-base);border:1px solid var(--separations-base)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.slate-solid{background-color:var(--slate-base);color:var(--typography-contrast)}.slate-solid:hover{background-color:var(--slate-medium)}.slate-solid:active{background-color:var(--slate-dark)}.slate-ghost{color:var(--slate-base)}.slate-ghost:hover{background-color:var(--slate-hover)}.slate-ghost:active{background-color:var(--slate-focus)}.slate-outline{color:var(--slate-base);border:1px solid var(--separations-base)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.danger-solid{background-color:var(--red-base);color:var(--typography-contrast)}.danger-solid:hover{background-color:var(--red-medium)}.danger-solid:active{background-color:var(--red-dark)}.danger-ghost{color:var(--red-base)}.danger-ghost:hover{background-color:var(--red-hover)}.danger-ghost:active{background-color:var(--red-focus)}.danger-outline{color:var(--red-base);border:1px solid var(--separations-base)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.skeleton-solid{background-color:var(---base);color:var(--typography-contrast)}.skeleton-solid:hover{background-color:var(---medium)}.skeleton-solid:active{background-color:var(---dark)}.skeleton-ghost{color:var(---base)}.skeleton-ghost:hover{background-color:var(---hover)}.skeleton-ghost:active{background-color:var(---focus)}.skeleton-outline{color:var(---base);border:1px solid var(--separations-base)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.warning-solid{background-color:var(--orange-base);color:var(--typography-contrast)}.warning-solid:hover{background-color:var(--orange-medium)}.warning-solid:active{background-color:var(--orange-dark)}.warning-ghost{color:var(--orange-base)}.warning-ghost:hover{background-color:var(--orange-hover)}.warning-ghost:active{background-color:var(--orange-focus)}.warning-outline{color:var(--orange-base);border:1px solid var(--separations-base)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.success-solid{background-color:var(--green-base);color:var(--typography-contrast)}.success-solid:hover{background-color:var(--green-medium)}.success-solid:active{background-color:var(--green-dark)}.success-ghost{color:var(--green-base)}.success-ghost:hover{background-color:var(--green-hover)}.success-ghost:active{background-color:var(--green-focus)}.success-outline{color:var(--green-base);border:1px solid var(--separations-base)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}\n"] }]
208
203
  }], propDecorators: { color: [{
209
204
  type: Input
210
- }], layout: [{
211
- type: Input
212
205
  }], size: [{
213
206
  type: Input
214
207
  }], type: [{
@@ -219,14 +212,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
219
212
  type: Input
220
213
  }], rightIcon: [{
221
214
  type: Input
222
- }], leftIconSwap: [{
223
- type: Input
224
- }], rightIconSwap: [{
225
- type: Input
226
- }], dropDown: [{
227
- type: Input
228
- }], showText: [{
229
- type: Input
230
215
  }] } });
231
216
 
232
217
  class FwButtonModule {
@@ -945,7 +930,7 @@ class FwNotificationContainerComponent {
945
930
  }
946
931
  }
947
932
  FwNotificationContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FwNotificationService }], target: i0.ɵɵFactoryTarget.Component });
948
- FwNotificationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNotificationContainerComponent, selector: "fw-notification-container", host: { properties: { "class.duo": "notifications.length === 2", "class.triple": "notifications.length >= 3" }, classAttribute: "fw-notification-container" }, ngImport: i0, template: "<div role=\"list\">\n <fw-notification *ngFor=\"let notification of notifications; index as $index\"\n (ready)=\"onReady($event)\"\n (dismiss)=\"onDismiss($event)\"\n [class]=\"notificationClass($index)\"\n [notification]=\"expanded || $index === notifications.length - 1 ? notification : getEmptyNotification(notification)\"\n [attr.aria-label]=\"notification.type + ' : ' + notification.message\"\n role=\"listitem\"\n ></fw-notification>\n <div class=\"buttons\">\n <fw-button *ngIf=\"expanded\" (click)=\"onShowLess()\" mat-button aria-label=\"show less\" layout=\"compact\" size=\"small\">\n <mat-icon>expand_less</mat-icon>\n </fw-button>\n <fw-button *ngIf=\"!expanded && notifications.length > 1\" (click)=\"onShowMore()\" mat-button aria-label=\"show more\" layout=\"compact\" size=\"small\">\n <mat-icon>expand_more</mat-icon>\n </fw-button>\n <fw-button (click)=\"clearAll()\" mat-button class=\"clear-all\" aria-label=\"clear all\" layout=\"compact\" size=\"small\">\n Clear All\n </fw-button>\n </div>\n</div>\n", styles: ["fw-notification-container{position:absolute;right:0;top:0;margin-top:20px;z-index:999999}fw-notification-container>div{display:flex;flex-direction:column-reverse}fw-notification-container .buttons{display:none;position:absolute;top:-5px;right:25px}fw-notification-container .buttons button{color:#fff;background-color:#919292;margin-left:2px}fw-notification-container .buttons button.mat-button{line-height:24px!important;margin:0 0 0 2px!important}fw-notification-container:hover .buttons{display:flex}fw-notification-container .hidden{display:none}fw-notification-container fw-notification:last-of-type{margin-top:24px}fw-notification-container.duo fw-notification.level-0{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-1{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-0{transform:scale(.9) translateY(-108px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "layout", "size", "type", "disabled", "leftIcon", "rightIcon", "leftIconSwap", "rightIconSwap", "dropDown", "showText"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FwNotificationComponent, selector: "fw-notification", inputs: ["notification", "notificationDuration"], outputs: ["ready", "dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
933
+ FwNotificationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNotificationContainerComponent, selector: "fw-notification-container", host: { properties: { "class.duo": "notifications.length === 2", "class.triple": "notifications.length >= 3" }, classAttribute: "fw-notification-container" }, ngImport: i0, template: "<div role=\"list\">\n <fw-notification *ngFor=\"let notification of notifications; index as $index\"\n (ready)=\"onReady($event)\"\n (dismiss)=\"onDismiss($event)\"\n [class]=\"notificationClass($index)\"\n [notification]=\"expanded || $index === notifications.length - 1 ? notification : getEmptyNotification(notification)\"\n [attr.aria-label]=\"notification.type + ' : ' + notification.message\"\n role=\"listitem\"\n ></fw-notification>\n <div class=\"buttons\">\n <fw-button *ngIf=\"expanded\" (click)=\"onShowLess()\" mat-button aria-label=\"show less\" layout=\"compact\" size=\"small\">\n <mat-icon>expand_less</mat-icon>\n </fw-button>\n <fw-button *ngIf=\"!expanded && notifications.length > 1\" (click)=\"onShowMore()\" mat-button aria-label=\"show more\" layout=\"compact\" size=\"small\">\n <mat-icon>expand_more</mat-icon>\n </fw-button>\n <fw-button (click)=\"clearAll()\" mat-button class=\"clear-all\" aria-label=\"clear all\" layout=\"compact\" size=\"small\">\n Clear All\n </fw-button>\n </div>\n</div>\n", styles: ["fw-notification-container{position:absolute;right:0;top:0;margin-top:20px;z-index:999999}fw-notification-container>div{display:flex;flex-direction:column-reverse}fw-notification-container .buttons{display:none;position:absolute;top:-5px;right:25px}fw-notification-container .buttons button{color:#fff;background-color:#919292;margin-left:2px}fw-notification-container .buttons button.mat-button{line-height:24px!important;margin:0 0 0 2px!important}fw-notification-container:hover .buttons{display:flex}fw-notification-container .hidden{display:none}fw-notification-container fw-notification:last-of-type{margin-top:24px}fw-notification-container.duo fw-notification.level-0{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-1{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-0{transform:scale(.9) translateY(-108px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "type", "disabled", "leftIcon", "rightIcon"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FwNotificationComponent, selector: "fw-notification", inputs: ["notification", "notificationDuration"], outputs: ["ready", "dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
949
934
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationContainerComponent, decorators: [{
950
935
  type: Component,
951
936
  args: [{ host: {