@flywheel-io/vision 0.15.2 → 0.16.0
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/layouts/layouts.module.d.ts +6 -4
- package/components/menu/menu-item/menu-item.component.d.ts +2 -3
- package/components/menu/menu.module.d.ts +2 -3
- package/components/select-menu/select-menu.module.d.ts +1 -2
- package/components/snackbar/snackbar/snackbar.component.d.ts +24 -0
- package/components/snackbar/snackbar-container/snackbar-container.component.d.ts +20 -0
- package/components/snackbar/snackbar-message.model.d.ts +12 -0
- package/components/snackbar/snackbar-timer.service.d.ts +10 -0
- package/components/snackbar/snackbar.module.d.ts +14 -0
- package/components/snackbar/snackbar.service.d.ts +13 -0
- package/components/stepper/step.component.d.ts +4 -0
- package/components/stepper/stepper.module.d.ts +1 -1
- package/esm2020/components/alert/alert.component.mjs +2 -2
- package/esm2020/components/app-icon/app-icon.component.mjs +2 -2
- package/esm2020/components/layouts/context/context.component.mjs +4 -2
- package/esm2020/components/layouts/layouts.module.mjs +13 -4
- package/esm2020/components/menu/menu-item/menu-item.component.mjs +9 -9
- package/esm2020/components/menu/menu.component.mjs +4 -4
- package/esm2020/components/menu/menu.module.mjs +1 -5
- package/esm2020/components/select-menu/multi-select-menu/multi-select-menu.component.mjs +3 -3
- package/esm2020/components/select-menu/select-menu.component.mjs +3 -3
- package/esm2020/components/select-menu/select-menu.module.mjs +3 -7
- package/esm2020/components/snackbar/snackbar/snackbar.component.mjs +111 -0
- package/esm2020/components/snackbar/snackbar-container/snackbar-container.component.mjs +63 -0
- package/esm2020/components/snackbar/snackbar-message.model.mjs +2 -0
- package/esm2020/components/snackbar/snackbar-timer.service.mjs +29 -0
- package/esm2020/components/snackbar/snackbar.module.mjs +55 -0
- package/esm2020/components/snackbar/snackbar.service.mjs +36 -0
- package/esm2020/components/stepper/step.component.mjs +9 -1
- package/esm2020/components/stepper/stepper.module.mjs +6 -2
- package/esm2020/public-api.mjs +6 -1
- package/fesm2015/flywheel-io-vision.mjs +311 -33
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +310 -33
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +5 -0
|
@@ -22,8 +22,6 @@ import * as i3$2 from '@angular/forms';
|
|
|
22
22
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
23
23
|
import * as i3$1 from '@angular/material/checkbox';
|
|
24
24
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
25
|
-
import * as i4$1 from '@angular/router';
|
|
26
|
-
import { RouterModule } from '@angular/router';
|
|
27
25
|
import * as i2$1 from '@angular/cdk/menu';
|
|
28
26
|
import { CdkMenuModule, CdkMenuTrigger } from '@angular/cdk/menu';
|
|
29
27
|
import { MatMenuModule } from '@angular/material/menu';
|
|
@@ -96,10 +94,10 @@ class FwAlertComponent {
|
|
|
96
94
|
}
|
|
97
95
|
}
|
|
98
96
|
FwAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
99
|
-
FwAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAlertComponent, selector: "fw-alert", inputs: { description: "description", icon: "icon", severity: "severity", title: "title", variant: "variant", showClose: "showClose" }, outputs: { close: "close" }, ngImport: i0, template: "<div [ngClass]=\"['alert', variant, severity]\">\n <fw-icon *ngIf=\"icon\" class=\"alert-icon\">{{ icon }}</fw-icon>\n <div class=\"alert-text\">\n <h4 *ngIf=\"title\">{{ title }}</h4>\n <p *ngIf=\"description\">{{ description }}</p>\n <p>\n <ng-content></ng-content>\n </p>\n </div>\n <fw-icon-button\n *ngIf=\"showClose\"\n icon=\"close\" size=\"small\"\n style=\"margin-right: -10px\"\n [color]=\"variant==='filled'?'overlay':severity\"\n (click)=\"close?close.emit():undefined\">\n </fw-icon-button>\n</div>\n", styles: [".alert{border-radius:8px;padding:6px 16px;margin-bottom:15px;display:flex}.alert .alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.alert .alert-text{padding:8px 0;flex:1}.alert h4{margin:
|
|
97
|
+
FwAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAlertComponent, selector: "fw-alert", inputs: { description: "description", icon: "icon", severity: "severity", title: "title", variant: "variant", showClose: "showClose" }, outputs: { close: "close" }, ngImport: i0, template: "<div [ngClass]=\"['alert', variant, severity]\">\n <fw-icon *ngIf=\"icon\" class=\"alert-icon\">{{ icon }}</fw-icon>\n <div class=\"alert-text\">\n <h4 *ngIf=\"title\">{{ title }}</h4>\n <p *ngIf=\"description\">{{ description }}</p>\n <p>\n <ng-content></ng-content>\n </p>\n </div>\n <fw-icon-button\n *ngIf=\"showClose\"\n icon=\"close\" size=\"small\"\n style=\"margin-right: -10px\"\n [color]=\"variant==='filled'?'overlay':severity\"\n (click)=\"close?close.emit():undefined\">\n </fw-icon-button>\n</div>\n", styles: [".alert{border-radius:8px;padding:6px 16px;margin-bottom:15px;display:flex}.alert .alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.alert .alert-text{padding:8px 0;flex:1}.alert h4{margin:2px 0 4px;color:var(--typography-contrast)}.alert p{margin:0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.alert.standard.info h4{color:var(--primary-base)}.alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.alert.standard.warning h4{color:var(--orange-base)}.alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.alert.standard.success h4{color:var(--green-base)}.alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.alert.standard.error h4{color:var(--red-base)}.alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.alert.outlined.info h4{color:var(--primary-base)}.alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.alert.outlined.warning h4{color:var(--orange-base)}.alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.alert.outlined.success h4{color:var(--green-base)}.alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.alert.outlined.error h4{color:var(--red-base)}.alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }] });
|
|
100
98
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAlertComponent, decorators: [{
|
|
101
99
|
type: Component,
|
|
102
|
-
args: [{ selector: 'fw-alert', template: "<div [ngClass]=\"['alert', variant, severity]\">\n <fw-icon *ngIf=\"icon\" class=\"alert-icon\">{{ icon }}</fw-icon>\n <div class=\"alert-text\">\n <h4 *ngIf=\"title\">{{ title }}</h4>\n <p *ngIf=\"description\">{{ description }}</p>\n <p>\n <ng-content></ng-content>\n </p>\n </div>\n <fw-icon-button\n *ngIf=\"showClose\"\n icon=\"close\" size=\"small\"\n style=\"margin-right: -10px\"\n [color]=\"variant==='filled'?'overlay':severity\"\n (click)=\"close?close.emit():undefined\">\n </fw-icon-button>\n</div>\n", styles: [".alert{border-radius:8px;padding:6px 16px;margin-bottom:15px;display:flex}.alert .alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.alert .alert-text{padding:8px 0;flex:1}.alert h4{margin:
|
|
100
|
+
args: [{ selector: 'fw-alert', template: "<div [ngClass]=\"['alert', variant, severity]\">\n <fw-icon *ngIf=\"icon\" class=\"alert-icon\">{{ icon }}</fw-icon>\n <div class=\"alert-text\">\n <h4 *ngIf=\"title\">{{ title }}</h4>\n <p *ngIf=\"description\">{{ description }}</p>\n <p>\n <ng-content></ng-content>\n </p>\n </div>\n <fw-icon-button\n *ngIf=\"showClose\"\n icon=\"close\" size=\"small\"\n style=\"margin-right: -10px\"\n [color]=\"variant==='filled'?'overlay':severity\"\n (click)=\"close?close.emit():undefined\">\n </fw-icon-button>\n</div>\n", styles: [".alert{border-radius:8px;padding:6px 16px;margin-bottom:15px;display:flex}.alert .alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.alert .alert-text{padding:8px 0;flex:1}.alert h4{margin:2px 0 4px;color:var(--typography-contrast)}.alert p{margin:0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.alert.standard.info h4{color:var(--primary-base)}.alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.alert.standard.warning h4{color:var(--orange-base)}.alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.alert.standard.success h4{color:var(--green-base)}.alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.alert.standard.error h4{color:var(--red-base)}.alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.alert.outlined.info h4{color:var(--primary-base)}.alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.alert.outlined.warning h4{color:var(--orange-base)}.alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.alert.outlined.success h4{color:var(--green-base)}.alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.alert.outlined.error h4{color:var(--red-base)}.alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"] }]
|
|
103
101
|
}], propDecorators: { description: [{
|
|
104
102
|
type: Input
|
|
105
103
|
}], icon: [{
|
|
@@ -200,10 +198,10 @@ class FwAppIconComponent {
|
|
|
200
198
|
}
|
|
201
199
|
}
|
|
202
200
|
FwAppIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
203
|
-
FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { label: "label", icon: "icon", color: "color", size: "size", variant: "variant", badge: "badge", tabindex: "tabindex", locked: "locked", animated: "animated" }, host: { properties: { "tabindex": "this.tabindex", "class.locked": "this.locked", "class.animated": "this.animated", "role": "this.role", "class": "this.cssClass" } }, ngImport: i0, template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n <div class=\"app-badge\" *ngIf=\"badge\">{{ badge }}</div>\n <div class=\"app-locked\" *ngIf=\"locked\">\n <fw-icon>lock</fw-icon>\n </div>\n <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:17px;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:start;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
|
|
201
|
+
FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { label: "label", icon: "icon", color: "color", size: "size", variant: "variant", badge: "badge", tabindex: "tabindex", locked: "locked", animated: "animated" }, host: { properties: { "tabindex": "this.tabindex", "class.locked": "this.locked", "class.animated": "this.animated", "role": "this.role", "class": "this.cssClass" } }, ngImport: i0, template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n <div class=\"app-badge\" *ngIf=\"badge\">{{ badge }}</div>\n <div class=\"app-locked\" *ngIf=\"locked\">\n <fw-icon>lock</fw-icon>\n </div>\n <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:17px;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
|
|
204
202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, decorators: [{
|
|
205
203
|
type: Component,
|
|
206
|
-
args: [{ selector: 'fw-app-icon', template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n <div class=\"app-badge\" *ngIf=\"badge\">{{ badge }}</div>\n <div class=\"app-locked\" *ngIf=\"locked\">\n <fw-icon>lock</fw-icon>\n </div>\n <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:17px;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:start;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"] }]
|
|
204
|
+
args: [{ selector: 'fw-app-icon', template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n <div class=\"app-badge\" *ngIf=\"badge\">{{ badge }}</div>\n <div class=\"app-locked\" *ngIf=\"locked\">\n <fw-icon>lock</fw-icon>\n </div>\n <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:17px;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"] }]
|
|
207
205
|
}], propDecorators: { label: [{
|
|
208
206
|
type: Input
|
|
209
207
|
}], icon: [{
|
|
@@ -1156,7 +1154,7 @@ class FwLayoutContextComponent {
|
|
|
1156
1154
|
;
|
|
1157
1155
|
}
|
|
1158
1156
|
FwLayoutContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1159
|
-
FwLayoutContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutContextComponent, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-icon *ngIf=\"icon\" [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n<h3 *ngIf=\"title\">{{ title }}</h3>\n<p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"] });
|
|
1157
|
+
FwLayoutContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutContextComponent, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-icon *ngIf=\"icon\" [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n<h3 *ngIf=\"title\">{{ title }}</h3>\n<p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
|
|
1160
1158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutContextComponent, decorators: [{
|
|
1161
1159
|
type: Component,
|
|
1162
1160
|
args: [{ selector: 'fw-layout-context', template: "<fw-icon *ngIf=\"icon\" [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n<h3 *ngIf=\"title\">{{ title }}</h3>\n<p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"] }]
|
|
@@ -1212,21 +1210,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1212
1210
|
class FwLayoutsModule {
|
|
1213
1211
|
}
|
|
1214
1212
|
FwLayoutsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1215
|
-
FwLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutsModule, declarations: [
|
|
1216
|
-
|
|
1213
|
+
FwLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutsModule, declarations: [FwLayoutContextComponent,
|
|
1214
|
+
FwLayoutToolbarComponent,
|
|
1215
|
+
FwLayoutGroupComponent], imports: [CommonModule,
|
|
1216
|
+
FwIconModule], exports: [FwLayoutContextComponent,
|
|
1217
|
+
FwLayoutToolbarComponent,
|
|
1217
1218
|
FwLayoutGroupComponent] });
|
|
1218
|
-
FwLayoutsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutsModule, imports: [CommonModule
|
|
1219
|
+
FwLayoutsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutsModule, imports: [CommonModule,
|
|
1220
|
+
FwIconModule] });
|
|
1219
1221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutsModule, decorators: [{
|
|
1220
1222
|
type: NgModule,
|
|
1221
1223
|
args: [{
|
|
1222
1224
|
imports: [
|
|
1223
1225
|
CommonModule,
|
|
1226
|
+
FwIconModule,
|
|
1224
1227
|
],
|
|
1225
1228
|
exports: [
|
|
1229
|
+
FwLayoutContextComponent,
|
|
1226
1230
|
FwLayoutToolbarComponent,
|
|
1227
1231
|
FwLayoutGroupComponent,
|
|
1228
1232
|
],
|
|
1229
1233
|
declarations: [
|
|
1234
|
+
FwLayoutContextComponent,
|
|
1230
1235
|
FwLayoutToolbarComponent,
|
|
1231
1236
|
FwLayoutGroupComponent,
|
|
1232
1237
|
],
|
|
@@ -2255,22 +2260,25 @@ class FwMenuItemComponent {
|
|
|
2255
2260
|
this.showCheckbox = false;
|
|
2256
2261
|
this.hidden = false;
|
|
2257
2262
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
2258
|
-
this.
|
|
2263
|
+
this.click = new EventEmitter();
|
|
2259
2264
|
this.focused = false;
|
|
2260
2265
|
this.selected = false;
|
|
2261
2266
|
}
|
|
2262
2267
|
handleClick(evt) {
|
|
2263
2268
|
evt.stopPropagation();
|
|
2264
2269
|
if (!this.disabled) {
|
|
2265
|
-
|
|
2270
|
+
if (this.href) {
|
|
2271
|
+
window.location.href = this.href;
|
|
2272
|
+
}
|
|
2273
|
+
this.click.emit(this.value);
|
|
2266
2274
|
}
|
|
2267
2275
|
}
|
|
2268
2276
|
}
|
|
2269
2277
|
FwMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2270
|
-
FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", variant: "variant", size: "size", label: "label", subtitle: "subtitle", icon: "icon", disabled: "disabled", showCheckbox: "showCheckbox", hidden: "hidden", collapsed: "collapsed", href: "href",
|
|
2278
|
+
FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", variant: "variant", size: "size", label: "label", subtitle: "subtitle", icon: "icon", disabled: "disabled", showCheckbox: "showCheckbox", hidden: "hidden", collapsed: "collapsed", href: "href", focused: "focused", selected: "selected" }, outputs: { click: "click" }, host: { properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox\">\n <mat-checkbox\n value=\"true\"\n [disabled]=\"disabled\"\n [checked]=\"selected\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"selected=$event.checked\"></mat-checkbox>\n </div>\n <fw-icon *ngIf=\"icon\" class=\"menu-icon\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"label\">\n <h4>{{ label }}</h4>\n <p *ngIf=\"subtitle\" class=\"vision-p4 subtitle\">{{ subtitle }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex}:host>div{display:flex;flex:1;text-decoration:none}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:100%}:host .menu-item .item-checkbox{padding:0 8px}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.subtitle{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .subtitle{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .subtitle{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
|
|
2271
2279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, decorators: [{
|
|
2272
2280
|
type: Component,
|
|
2273
|
-
args: [{ selector: 'fw-menu-item', template: "<
|
|
2281
|
+
args: [{ selector: 'fw-menu-item', template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox\">\n <mat-checkbox\n value=\"true\"\n [disabled]=\"disabled\"\n [checked]=\"selected\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"selected=$event.checked\"></mat-checkbox>\n </div>\n <fw-icon *ngIf=\"icon\" class=\"menu-icon\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"label\">\n <h4>{{ label }}</h4>\n <p *ngIf=\"subtitle\" class=\"vision-p4 subtitle\">{{ subtitle }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex}:host>div{display:flex;flex:1;text-decoration:none}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:100%}:host .menu-item .item-checkbox{padding:0 8px}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.subtitle{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .subtitle{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .subtitle{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"] }]
|
|
2274
2282
|
}], propDecorators: { value: [{
|
|
2275
2283
|
type: Input
|
|
2276
2284
|
}], variant: [{
|
|
@@ -2296,9 +2304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2296
2304
|
type: Input
|
|
2297
2305
|
}], href: [{
|
|
2298
2306
|
type: Input
|
|
2299
|
-
}],
|
|
2300
|
-
type: Input
|
|
2301
|
-
}], select: [{
|
|
2307
|
+
}], click: [{
|
|
2302
2308
|
type: Output
|
|
2303
2309
|
}], focused: [{
|
|
2304
2310
|
type: HostBinding,
|
|
@@ -2342,7 +2348,7 @@ class FwMenuComponent {
|
|
|
2342
2348
|
}
|
|
2343
2349
|
ngAfterContentInit() {
|
|
2344
2350
|
this.menuItems.forEach(item => {
|
|
2345
|
-
const sub = item.
|
|
2351
|
+
const sub = item.click.subscribe(value => this.handleSelect(value));
|
|
2346
2352
|
this.subscriptions.push(sub);
|
|
2347
2353
|
});
|
|
2348
2354
|
this.updateLayout();
|
|
@@ -2414,7 +2420,7 @@ FwMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
2414
2420
|
provide: NG_VALUE_ACCESSOR,
|
|
2415
2421
|
useExisting: FwMenuComponent,
|
|
2416
2422
|
multi: true,
|
|
2417
|
-
}], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"fw-menu\"\n cdkMenu\n [@openClose]=\"{value: collapsed?'closed':'open', params: {openWidth: openWidth, collapsedWidth: collapsedWidth}}\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }], animations: [
|
|
2423
|
+
}], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"fw-menu\"\n cdkMenu\n [@openClose]=\"{value: collapsed?'closed':'open', params: {openWidth: openWidth || 'inherit', collapsedWidth: collapsedWidth || '44px'}}\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }], animations: [
|
|
2418
2424
|
trigger('openClose', [
|
|
2419
2425
|
// ...
|
|
2420
2426
|
state('open', style({
|
|
@@ -2447,7 +2453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2447
2453
|
animate('.33s ease-in-out'),
|
|
2448
2454
|
]),
|
|
2449
2455
|
]),
|
|
2450
|
-
], template: "<div\n class=\"fw-menu\"\n cdkMenu\n [@openClose]=\"{value: collapsed?'closed':'open', params: {openWidth: openWidth, collapsedWidth: collapsedWidth}}\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%}\n"] }]
|
|
2456
|
+
], template: "<div\n class=\"fw-menu\"\n cdkMenu\n [@openClose]=\"{value: collapsed?'closed':'open', params: {openWidth: openWidth || 'inherit', collapsedWidth: collapsedWidth || '44px'}}\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%}\n"] }]
|
|
2451
2457
|
}], propDecorators: { disabled: [{
|
|
2452
2458
|
type: Input
|
|
2453
2459
|
}], size: [{
|
|
@@ -2666,7 +2672,6 @@ FwMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
|
2666
2672
|
FwIconModule,
|
|
2667
2673
|
MatCheckboxModule,
|
|
2668
2674
|
MatMenuModule,
|
|
2669
|
-
RouterModule,
|
|
2670
2675
|
FwTextInputModule], exports: [FwMenuComponent,
|
|
2671
2676
|
FwMenuContainerComponent,
|
|
2672
2677
|
FwMenuHeaderComponent,
|
|
@@ -2679,7 +2684,6 @@ FwMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
|
2679
2684
|
FwIconModule,
|
|
2680
2685
|
MatCheckboxModule,
|
|
2681
2686
|
MatMenuModule,
|
|
2682
|
-
RouterModule,
|
|
2683
2687
|
FwTextInputModule] });
|
|
2684
2688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuModule, decorators: [{
|
|
2685
2689
|
type: NgModule,
|
|
@@ -2692,7 +2696,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2692
2696
|
FwIconModule,
|
|
2693
2697
|
MatCheckboxModule,
|
|
2694
2698
|
MatMenuModule,
|
|
2695
|
-
RouterModule,
|
|
2696
2699
|
FwTextInputModule,
|
|
2697
2700
|
],
|
|
2698
2701
|
exports: [
|
|
@@ -2824,7 +2827,7 @@ class FwMultiSelectMenuComponent {
|
|
|
2824
2827
|
this.options = [];
|
|
2825
2828
|
this.menuItems.forEach(item => {
|
|
2826
2829
|
this.options.push({ value: item.value, label: item.label, icon: item.icon });
|
|
2827
|
-
const sub = item.
|
|
2830
|
+
const sub = item.click.subscribe(value => this.menu.writeValue(value));
|
|
2828
2831
|
this.subscriptions.push(sub);
|
|
2829
2832
|
});
|
|
2830
2833
|
this.updateFilteredItems();
|
|
@@ -2979,7 +2982,7 @@ FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
|
|
|
2979
2982
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
2980
2983
|
multi: true,
|
|
2981
2984
|
},
|
|
2982
|
-
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <div\n class=\"chip-grid\"\n [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of value | slice:0:maxSelectedShown\"\n [label]=\"chip[labelProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n more</span>\n <input\n type=\"text\" #textInput\n class=\"placeholder\"\n (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n </div>\n <input\n type=\"text\" #textInitialInput\n *ngIf=\"!value || value.length===0\"\n class=\"placeholder\" [placeholder]=\"placeholder\"\n (focus)=\"handleTouched()\"\n (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n <fw-menu\n [multiSelect]=\"true\"\n [useCheckbox]=\"useCheckbox\"\n [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n [ngModel]=\"selectedValues\"\n (ngModelChange)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of filteredOptions\"\n [label]=\"item[labelProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n <fw-menu-item\n *ngIf=\"filteredOptions && filteredOptions.length===0\"\n [disabled]=\"true\" label=\"No options\">\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "label", "secondaryLabel", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "label", "subtitle", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "
|
|
2985
|
+
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <div\n class=\"chip-grid\"\n [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of value | slice:0:maxSelectedShown\"\n [label]=\"chip[labelProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n more</span>\n <input\n type=\"text\" #textInput\n class=\"placeholder\"\n (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n </div>\n <input\n type=\"text\" #textInitialInput\n *ngIf=\"!value || value.length===0\"\n class=\"placeholder\" [placeholder]=\"placeholder\"\n (focus)=\"handleTouched()\"\n (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n <fw-menu\n [multiSelect]=\"true\"\n [useCheckbox]=\"useCheckbox\"\n [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n [ngModel]=\"selectedValues\"\n (ngModelChange)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of filteredOptions\"\n [label]=\"item[labelProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n <fw-menu-item\n *ngIf=\"filteredOptions && filteredOptions.length===0\"\n [disabled]=\"true\" label=\"No options\">\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "label", "secondaryLabel", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "label", "subtitle", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "focused", "selected"], outputs: ["click"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
|
|
2983
2986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
|
|
2984
2987
|
type: Component,
|
|
2985
2988
|
args: [{ selector: 'fw-multi-select', providers: [
|
|
@@ -3078,7 +3081,7 @@ class FwSelectMenuComponent {
|
|
|
3078
3081
|
this.options = [];
|
|
3079
3082
|
this.menuItems.forEach(item => {
|
|
3080
3083
|
this.options.push({ value: item.value, label: item.label, icon: item.icon });
|
|
3081
|
-
const sub = item.
|
|
3084
|
+
const sub = item.click.subscribe(value => this.menu.writeValue(value));
|
|
3082
3085
|
this.subscriptions.push(sub);
|
|
3083
3086
|
});
|
|
3084
3087
|
}
|
|
@@ -3112,7 +3115,7 @@ FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
3112
3115
|
useExisting: forwardRef(() => FwSelectMenuComponent),
|
|
3113
3116
|
multi: true,
|
|
3114
3117
|
},
|
|
3115
|
-
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [(ngModel)]=\"selectLabel\"\n [leftIcon]=\"selectIcon\"\n rightIcon=\"chevron-down\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n <fw-menu\n [disabled]=\"disabled\"\n [ngModel]=\"selectValue\"\n (ngModelChange)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [label]=\"item[labelProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "label", "subtitle", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "
|
|
3118
|
+
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [(ngModel)]=\"selectLabel\"\n [leftIcon]=\"selectIcon\"\n rightIcon=\"chevron-down\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n <fw-menu\n [disabled]=\"disabled\"\n [ngModel]=\"selectValue\"\n (ngModelChange)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [label]=\"item[labelProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "label", "subtitle", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["leftIcon", "rightIcon", "context", "helperText", "placeholder", "readOnly", "size", "error"] }] });
|
|
3116
3119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
3117
3120
|
type: Component,
|
|
3118
3121
|
args: [{ selector: 'fw-select', providers: [
|
|
@@ -3163,8 +3166,7 @@ FwSelectMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
|
|
|
3163
3166
|
FwChipModule,
|
|
3164
3167
|
FwIconModule,
|
|
3165
3168
|
FwMenuModule,
|
|
3166
|
-
FwTextInputModule,
|
|
3167
|
-
RouterModule], exports: [FwMultiSelectMenuComponent,
|
|
3169
|
+
FwTextInputModule], exports: [FwMultiSelectMenuComponent,
|
|
3168
3170
|
FwSelectMenuComponent] });
|
|
3169
3171
|
FwSelectMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuModule, imports: [CommonModule,
|
|
3170
3172
|
CdkMenuModule,
|
|
@@ -3172,8 +3174,7 @@ FwSelectMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
|
|
|
3172
3174
|
FwChipModule,
|
|
3173
3175
|
FwIconModule,
|
|
3174
3176
|
FwMenuModule,
|
|
3175
|
-
FwTextInputModule
|
|
3176
|
-
RouterModule] });
|
|
3177
|
+
FwTextInputModule] });
|
|
3177
3178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuModule, decorators: [{
|
|
3178
3179
|
type: NgModule,
|
|
3179
3180
|
args: [{
|
|
@@ -3185,7 +3186,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3185
3186
|
FwIconModule,
|
|
3186
3187
|
FwMenuModule,
|
|
3187
3188
|
FwTextInputModule,
|
|
3188
|
-
RouterModule,
|
|
3189
3189
|
],
|
|
3190
3190
|
exports: [
|
|
3191
3191
|
FwMultiSelectMenuComponent,
|
|
@@ -3198,6 +3198,271 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3198
3198
|
}]
|
|
3199
3199
|
}] });
|
|
3200
3200
|
|
|
3201
|
+
function genMessageId() {
|
|
3202
|
+
return String.prototype.padStart(24, Math.floor(Math.random() * Date.now()).toString(16));
|
|
3203
|
+
}
|
|
3204
|
+
class FwSnackbarService {
|
|
3205
|
+
constructor() {
|
|
3206
|
+
this.messages$ = new BehaviorSubject([]);
|
|
3207
|
+
this.messageQueue = [];
|
|
3208
|
+
}
|
|
3209
|
+
show(message) {
|
|
3210
|
+
if (!message.id) {
|
|
3211
|
+
message.id = genMessageId();
|
|
3212
|
+
}
|
|
3213
|
+
this.messageQueue.push(message);
|
|
3214
|
+
this.messages$.next(this.messageQueue);
|
|
3215
|
+
}
|
|
3216
|
+
dismiss(messageId) {
|
|
3217
|
+
this.messageQueue = this.messageQueue.filter((v) => v.id !== messageId);
|
|
3218
|
+
this.messages$.next(this.messageQueue);
|
|
3219
|
+
}
|
|
3220
|
+
dismissAll() {
|
|
3221
|
+
this.messageQueue = [];
|
|
3222
|
+
this.messages$.next(this.messageQueue);
|
|
3223
|
+
}
|
|
3224
|
+
}
|
|
3225
|
+
FwSnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3226
|
+
FwSnackbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarService, providedIn: 'root' });
|
|
3227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarService, decorators: [{
|
|
3228
|
+
type: Injectable,
|
|
3229
|
+
args: [{
|
|
3230
|
+
providedIn: 'root',
|
|
3231
|
+
}]
|
|
3232
|
+
}] });
|
|
3233
|
+
|
|
3234
|
+
class FwSnackbarTimerService {
|
|
3235
|
+
constructor() {
|
|
3236
|
+
this.now = 0;
|
|
3237
|
+
this.remainingDuration = 0;
|
|
3238
|
+
}
|
|
3239
|
+
start(duration) {
|
|
3240
|
+
return new Promise((resolve) => {
|
|
3241
|
+
this.remainingDuration = duration;
|
|
3242
|
+
this.resolver = resolve;
|
|
3243
|
+
this.continue();
|
|
3244
|
+
});
|
|
3245
|
+
}
|
|
3246
|
+
stop() {
|
|
3247
|
+
clearTimeout(this.timerId);
|
|
3248
|
+
this.remainingDuration = 0;
|
|
3249
|
+
}
|
|
3250
|
+
pause() {
|
|
3251
|
+
clearTimeout(this.timerId);
|
|
3252
|
+
this.remainingDuration =
|
|
3253
|
+
this.remainingDuration - new Date().getTime() - this.now;
|
|
3254
|
+
}
|
|
3255
|
+
continue() {
|
|
3256
|
+
this.now = new Date().getTime();
|
|
3257
|
+
this.timerId = window.setTimeout(() => {
|
|
3258
|
+
this.resolver();
|
|
3259
|
+
}, this.remainingDuration);
|
|
3260
|
+
}
|
|
3261
|
+
}
|
|
3262
|
+
|
|
3263
|
+
/* eslint-disable @rx-angular/no-explicit-change-detection-apis */
|
|
3264
|
+
class FwSnackbarComponent {
|
|
3265
|
+
constructor(cdr, timerService) {
|
|
3266
|
+
this.cdr = cdr;
|
|
3267
|
+
this.timerService = timerService;
|
|
3268
|
+
this.messageDuration = 9000;
|
|
3269
|
+
this.ready = new EventEmitter();
|
|
3270
|
+
this.dismiss = new EventEmitter();
|
|
3271
|
+
this.action = new EventEmitter();
|
|
3272
|
+
this.color = 'primary';
|
|
3273
|
+
}
|
|
3274
|
+
get cssClass() {
|
|
3275
|
+
const cssClass = 'fw-snackbar';
|
|
3276
|
+
if (this.message?.severity) {
|
|
3277
|
+
return cssClass + ' ' + this.color;
|
|
3278
|
+
}
|
|
3279
|
+
else {
|
|
3280
|
+
return cssClass;
|
|
3281
|
+
}
|
|
3282
|
+
}
|
|
3283
|
+
ngAfterViewInit() {
|
|
3284
|
+
this.ready.emit(this);
|
|
3285
|
+
this.cdr.markForCheck();
|
|
3286
|
+
}
|
|
3287
|
+
startTimer() {
|
|
3288
|
+
if (this.message && this.message.duration) {
|
|
3289
|
+
this.messageDuration = this.message.duration;
|
|
3290
|
+
}
|
|
3291
|
+
this.timerService.start(this.messageDuration).then(() => {
|
|
3292
|
+
this.handleDismiss();
|
|
3293
|
+
this.cdr.markForCheck();
|
|
3294
|
+
});
|
|
3295
|
+
}
|
|
3296
|
+
stopTimer() {
|
|
3297
|
+
this.timerService.stop();
|
|
3298
|
+
this.cdr.markForCheck();
|
|
3299
|
+
}
|
|
3300
|
+
ngOnInit() {
|
|
3301
|
+
switch (this.message.severity) {
|
|
3302
|
+
case 'success':
|
|
3303
|
+
if (!this.message.icon) {
|
|
3304
|
+
this.message.icon = 'done-check-tracked';
|
|
3305
|
+
}
|
|
3306
|
+
this.color = 'success';
|
|
3307
|
+
break;
|
|
3308
|
+
case 'warning':
|
|
3309
|
+
if (!this.message.icon) {
|
|
3310
|
+
this.message.icon = 'warning-circle';
|
|
3311
|
+
}
|
|
3312
|
+
this.color = 'warning';
|
|
3313
|
+
break;
|
|
3314
|
+
case 'error':
|
|
3315
|
+
if (!this.message.icon) {
|
|
3316
|
+
this.message.icon = 'warning';
|
|
3317
|
+
}
|
|
3318
|
+
if (this.message.showClose === undefined) {
|
|
3319
|
+
this.message.showClose = true;
|
|
3320
|
+
}
|
|
3321
|
+
if (!this.message.duration) {
|
|
3322
|
+
this.message.duration = 29000;
|
|
3323
|
+
}
|
|
3324
|
+
this.color = 'danger';
|
|
3325
|
+
break;
|
|
3326
|
+
case 'info':
|
|
3327
|
+
if (!this.message.icon) {
|
|
3328
|
+
this.message.icon = 'information-circle';
|
|
3329
|
+
}
|
|
3330
|
+
this.color = 'primary';
|
|
3331
|
+
break;
|
|
3332
|
+
}
|
|
3333
|
+
}
|
|
3334
|
+
handleDismiss() {
|
|
3335
|
+
this.dismiss.emit(this.message.id);
|
|
3336
|
+
this.cdr.markForCheck();
|
|
3337
|
+
}
|
|
3338
|
+
handleAction() {
|
|
3339
|
+
this.action.emit(this.message.id);
|
|
3340
|
+
if (this.message.action) {
|
|
3341
|
+
this.message.action();
|
|
3342
|
+
}
|
|
3343
|
+
this.cdr.markForCheck();
|
|
3344
|
+
}
|
|
3345
|
+
}
|
|
3346
|
+
FwSnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FwSnackbarTimerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3347
|
+
FwSnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSnackbarComponent, selector: "fw-snackbar", inputs: { message: "message", messageDuration: "messageDuration" }, outputs: { ready: "ready", dismiss: "dismiss", action: "action" }, host: { properties: { "class": "this.cssClass" } }, providers: [FwSnackbarTimerService], ngImport: i0, template: "<ng-container *ngIf=\"message\">\n <fw-icon *ngIf=\"message.icon\">{{ message.icon }}</fw-icon>\n <h4 *ngIf=\"message.message\">{{ message.message }}</h4>\n <fw-button\n *ngIf=\"message.actionText\" type=\"ghost\"\n [color]=\"color\" size=\"small\"\n (click)=\"handleAction()\">{{ message.actionText }}\n </fw-button>\n <fw-icon-button\n *ngIf=\"message.showClose\"\n icon=\"close\" size=\"small\" [color]=\"message.severity\"\n (click)=\"handleDismiss()\">\n </fw-icon-button>\n <div *ngIf=\"!message.actionText && !message.showClose\"></div>\n</ng-container>\n", styles: ["fw-snackbar{display:flex;align-items:start;box-sizing:border-box;max-width:320px;min-width:200px;min-height:30px;padding:8px 8px 8px 16px;gap:8px;transform-origin:center;background-color:var(--card-header);color:var(--typography-base);white-space:pre-wrap;border-radius:4px;border:1px solid var(--separations-base);box-shadow:0 5px 15px #0000001a;margin:8px}fw-snackbar>fw-icon{width:24px;height:24px;font-size:24px;white-space:nowrap;margin:3px 0}fw-snackbar h4{margin:6px 0 0;flex:1}fw-snackbar.primary fw-icon{color:var(--primary-base)}fw-snackbar.danger fw-icon{color:var(--red-base)}fw-snackbar.success fw-icon{color:var(--green-base)}fw-snackbar.warning fw-icon{color:var(--orange-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarComponent, decorators: [{
|
|
3349
|
+
type: Component,
|
|
3350
|
+
args: [{ selector: 'fw-snackbar', providers: [FwSnackbarTimerService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"message\">\n <fw-icon *ngIf=\"message.icon\">{{ message.icon }}</fw-icon>\n <h4 *ngIf=\"message.message\">{{ message.message }}</h4>\n <fw-button\n *ngIf=\"message.actionText\" type=\"ghost\"\n [color]=\"color\" size=\"small\"\n (click)=\"handleAction()\">{{ message.actionText }}\n </fw-button>\n <fw-icon-button\n *ngIf=\"message.showClose\"\n icon=\"close\" size=\"small\" [color]=\"message.severity\"\n (click)=\"handleDismiss()\">\n </fw-icon-button>\n <div *ngIf=\"!message.actionText && !message.showClose\"></div>\n</ng-container>\n", styles: ["fw-snackbar{display:flex;align-items:start;box-sizing:border-box;max-width:320px;min-width:200px;min-height:30px;padding:8px 8px 8px 16px;gap:8px;transform-origin:center;background-color:var(--card-header);color:var(--typography-base);white-space:pre-wrap;border-radius:4px;border:1px solid var(--separations-base);box-shadow:0 5px 15px #0000001a;margin:8px}fw-snackbar>fw-icon{width:24px;height:24px;font-size:24px;white-space:nowrap;margin:3px 0}fw-snackbar h4{margin:6px 0 0;flex:1}fw-snackbar.primary fw-icon{color:var(--primary-base)}fw-snackbar.danger fw-icon{color:var(--red-base)}fw-snackbar.success fw-icon{color:var(--green-base)}fw-snackbar.warning fw-icon{color:var(--orange-base)}\n"] }]
|
|
3351
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FwSnackbarTimerService }]; }, propDecorators: { message: [{
|
|
3352
|
+
type: Input
|
|
3353
|
+
}], messageDuration: [{
|
|
3354
|
+
type: Input
|
|
3355
|
+
}], ready: [{
|
|
3356
|
+
type: Output
|
|
3357
|
+
}], dismiss: [{
|
|
3358
|
+
type: Output
|
|
3359
|
+
}], action: [{
|
|
3360
|
+
type: Output
|
|
3361
|
+
}], cssClass: [{
|
|
3362
|
+
type: HostBinding,
|
|
3363
|
+
args: ['class']
|
|
3364
|
+
}] } });
|
|
3365
|
+
|
|
3366
|
+
class FwSnackbarContainerComponent {
|
|
3367
|
+
constructor(cdr, snackbarService) {
|
|
3368
|
+
this.cdr = cdr;
|
|
3369
|
+
this.snackbarService = snackbarService;
|
|
3370
|
+
this.limit = 10;
|
|
3371
|
+
this.messages = [];
|
|
3372
|
+
this.subscriptions = {
|
|
3373
|
+
messages: Subscription.EMPTY,
|
|
3374
|
+
};
|
|
3375
|
+
this.subscriptions.messages = this.snackbarService.messages$.subscribe((messages) => {
|
|
3376
|
+
this.messages = messages;
|
|
3377
|
+
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
3378
|
+
this.cdr.markForCheck();
|
|
3379
|
+
});
|
|
3380
|
+
}
|
|
3381
|
+
get classes() {
|
|
3382
|
+
return 'fw-snackbar-container';
|
|
3383
|
+
}
|
|
3384
|
+
;
|
|
3385
|
+
ngOnDestroy() {
|
|
3386
|
+
for (const subscription of Object.values(this.subscriptions)) {
|
|
3387
|
+
subscription.unsubscribe();
|
|
3388
|
+
}
|
|
3389
|
+
}
|
|
3390
|
+
onReady(snackbar) {
|
|
3391
|
+
const currentMessage = this.messages[this.messages.length - 1];
|
|
3392
|
+
currentMessage.ref = snackbar;
|
|
3393
|
+
snackbar.startTimer();
|
|
3394
|
+
}
|
|
3395
|
+
onDismiss(messageId) {
|
|
3396
|
+
const message = this.messages.find(currentMessage => currentMessage.id === messageId);
|
|
3397
|
+
if (message?.ref) {
|
|
3398
|
+
message.ref.stopTimer();
|
|
3399
|
+
}
|
|
3400
|
+
if (message?.id) {
|
|
3401
|
+
this.snackbarService.dismiss(message.id);
|
|
3402
|
+
}
|
|
3403
|
+
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
3404
|
+
this.cdr.markForCheck();
|
|
3405
|
+
}
|
|
3406
|
+
clearAll() {
|
|
3407
|
+
this.snackbarService.dismissAll();
|
|
3408
|
+
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
3409
|
+
this.cdr.markForCheck();
|
|
3410
|
+
}
|
|
3411
|
+
}
|
|
3412
|
+
FwSnackbarContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FwSnackbarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3413
|
+
FwSnackbarContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSnackbarContainerComponent, selector: "fw-snackbar-container", host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div role=\"list\">\n <div class=\"buttons\">\n <fw-button\n *ngIf=\"messages.length > 5\" (click)=\"clearAll()\"\n class=\"clear-all\" aria-label=\"clear all\"\n color=\"slate\" size=\"small\" type=\"ghost\">\n Clear All\n </fw-button>\n </div>\n <fw-snackbar\n *ngFor=\"let message of messages; index as $index\"\n (ready)=\"onReady($event)\"\n (dismiss)=\"onDismiss($event)\"\n [message]=\"message\"\n [attr.aria-label]=\"message.message\"\n role=\"listitem\"\n ></fw-snackbar>\n</div>\n", styles: ["fw-snackbar-container{position:absolute;right:6px;bottom:10px;z-index:999999}fw-snackbar-container .buttons{text-align:right;padding-right:10px}\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", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwSnackbarComponent, selector: "fw-snackbar", inputs: ["message", "messageDuration"], outputs: ["ready", "dismiss", "action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarContainerComponent, decorators: [{
|
|
3415
|
+
type: Component,
|
|
3416
|
+
args: [{ selector: 'fw-snackbar-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"list\">\n <div class=\"buttons\">\n <fw-button\n *ngIf=\"messages.length > 5\" (click)=\"clearAll()\"\n class=\"clear-all\" aria-label=\"clear all\"\n color=\"slate\" size=\"small\" type=\"ghost\">\n Clear All\n </fw-button>\n </div>\n <fw-snackbar\n *ngFor=\"let message of messages; index as $index\"\n (ready)=\"onReady($event)\"\n (dismiss)=\"onDismiss($event)\"\n [message]=\"message\"\n [attr.aria-label]=\"message.message\"\n role=\"listitem\"\n ></fw-snackbar>\n</div>\n", styles: ["fw-snackbar-container{position:absolute;right:6px;bottom:10px;z-index:999999}fw-snackbar-container .buttons{text-align:right;padding-right:10px}\n"] }]
|
|
3417
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FwSnackbarService }]; }, propDecorators: { classes: [{
|
|
3418
|
+
type: HostBinding,
|
|
3419
|
+
args: ['attr.class']
|
|
3420
|
+
}] } });
|
|
3421
|
+
|
|
3422
|
+
class FwSnackbarModule {
|
|
3423
|
+
}
|
|
3424
|
+
FwSnackbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3425
|
+
FwSnackbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarModule, declarations: [FwSnackbarComponent,
|
|
3426
|
+
FwSnackbarContainerComponent], imports: [CommonModule,
|
|
3427
|
+
FwButtonModule,
|
|
3428
|
+
MatButtonModule,
|
|
3429
|
+
MatIconModule,
|
|
3430
|
+
FwIconButtonModule,
|
|
3431
|
+
FwIconModule], exports: [FwSnackbarComponent,
|
|
3432
|
+
FwSnackbarContainerComponent] });
|
|
3433
|
+
FwSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarModule, providers: [
|
|
3434
|
+
FwSnackbarService,
|
|
3435
|
+
], imports: [CommonModule,
|
|
3436
|
+
FwButtonModule,
|
|
3437
|
+
MatButtonModule,
|
|
3438
|
+
MatIconModule,
|
|
3439
|
+
FwIconButtonModule,
|
|
3440
|
+
FwIconModule] });
|
|
3441
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarModule, decorators: [{
|
|
3442
|
+
type: NgModule,
|
|
3443
|
+
args: [{
|
|
3444
|
+
imports: [
|
|
3445
|
+
CommonModule,
|
|
3446
|
+
FwButtonModule,
|
|
3447
|
+
MatButtonModule,
|
|
3448
|
+
MatIconModule,
|
|
3449
|
+
FwIconButtonModule,
|
|
3450
|
+
FwIconModule,
|
|
3451
|
+
],
|
|
3452
|
+
exports: [
|
|
3453
|
+
FwSnackbarComponent,
|
|
3454
|
+
FwSnackbarContainerComponent,
|
|
3455
|
+
],
|
|
3456
|
+
declarations: [
|
|
3457
|
+
FwSnackbarComponent,
|
|
3458
|
+
FwSnackbarContainerComponent,
|
|
3459
|
+
],
|
|
3460
|
+
providers: [
|
|
3461
|
+
FwSnackbarService,
|
|
3462
|
+
],
|
|
3463
|
+
}]
|
|
3464
|
+
}] });
|
|
3465
|
+
|
|
3201
3466
|
class FwStepComponent {
|
|
3202
3467
|
constructor() {
|
|
3203
3468
|
this.color = 'slate';
|
|
@@ -3245,6 +3510,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3245
3510
|
}], select: [{
|
|
3246
3511
|
type: Output
|
|
3247
3512
|
}] } });
|
|
3513
|
+
class FwStepDecoratorComponent {
|
|
3514
|
+
}
|
|
3515
|
+
FwStepDecoratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepDecoratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3516
|
+
FwStepDecoratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepDecoratorComponent, selector: "fw-step-decorator", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
|
|
3517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepDecoratorComponent, decorators: [{
|
|
3518
|
+
type: Component,
|
|
3519
|
+
args: [{ selector: 'fw-step-decorator', template: '<ng-content></ng-content>' }]
|
|
3520
|
+
}] });
|
|
3248
3521
|
|
|
3249
3522
|
class FwStepperComponent {
|
|
3250
3523
|
constructor(sanitizer) {
|
|
@@ -3341,9 +3614,11 @@ class FwStepperModule {
|
|
|
3341
3614
|
}
|
|
3342
3615
|
FwStepperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3343
3616
|
FwStepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwStepperModule, declarations: [FwStepComponent,
|
|
3617
|
+
FwStepDecoratorComponent,
|
|
3344
3618
|
FwStepperComponent], imports: [CommonModule,
|
|
3345
3619
|
FwIconModule,
|
|
3346
3620
|
FwIconButtonModule], exports: [FwStepComponent,
|
|
3621
|
+
FwStepDecoratorComponent,
|
|
3347
3622
|
FwStepperComponent] });
|
|
3348
3623
|
FwStepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepperModule, imports: [CommonModule,
|
|
3349
3624
|
FwIconModule,
|
|
@@ -3358,10 +3633,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3358
3633
|
],
|
|
3359
3634
|
exports: [
|
|
3360
3635
|
FwStepComponent,
|
|
3636
|
+
FwStepDecoratorComponent,
|
|
3361
3637
|
FwStepperComponent,
|
|
3362
3638
|
],
|
|
3363
3639
|
declarations: [
|
|
3364
3640
|
FwStepComponent,
|
|
3641
|
+
FwStepDecoratorComponent,
|
|
3365
3642
|
FwStepperComponent,
|
|
3366
3643
|
],
|
|
3367
3644
|
}]
|
|
@@ -3371,5 +3648,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3371
3648
|
* Generated bundle index. Do not edit.
|
|
3372
3649
|
*/
|
|
3373
3650
|
|
|
3374
|
-
export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwChoiceDialogComponent, FwConfirmDialogComponent, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogModule, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwErrorDialogComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMultiSelectMenuComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPopoverComponent, FwPopoverModule, FwPopoverTriggerComponent, FwPopoverTriggerDirective, FwPortalDialogComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwStepComponent, FwStepperComponent, FwStepperModule, FwTextInputComponent, FwTextInputModule, MinimalTranslationService, TranslationService, genId };
|
|
3651
|
+
export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwChoiceDialogComponent, FwConfirmDialogComponent, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogModule, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwErrorDialogComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMultiSelectMenuComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPopoverComponent, FwPopoverModule, FwPopoverTriggerComponent, FwPopoverTriggerDirective, FwPortalDialogComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwTextInputComponent, FwTextInputModule, MinimalTranslationService, TranslationService, genId, genMessageId };
|
|
3375
3652
|
//# sourceMappingURL=flywheel-io-vision.mjs.map
|