@flywheel-io/vision 0.9.0 → 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.
- package/components/button/button.component.d.ts +3 -9
- package/esm2020/components/button/button.component.mjs +9 -25
- package/esm2020/components/notification/notification-container/notification-container.component.mjs +1 -1
- package/fesm2015/flywheel-io-vision.mjs +8 -23
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +8 -23
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -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.
|
|
184
|
+
this.color = 'primary';
|
|
185
185
|
this.size = 'medium';
|
|
186
|
-
this.type = '
|
|
186
|
+
this.type = 'solid';
|
|
187
187
|
this.disabled = false;
|
|
188
|
-
this.leftIcon =
|
|
189
|
-
this.rightIcon =
|
|
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 {
|
|
@@ -937,7 +922,7 @@ class FwNotificationContainerComponent {
|
|
|
937
922
|
}
|
|
938
923
|
}
|
|
939
924
|
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 });
|
|
940
|
-
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", "
|
|
925
|
+
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 });
|
|
941
926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationContainerComponent, decorators: [{
|
|
942
927
|
type: Component,
|
|
943
928
|
args: [{ host: {
|