@flywheel-io/vision 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/badge/badge.component.d.ts +4 -1
- package/components/select-menu/multi-select-menu/multi-select-menu.component.d.ts +2 -0
- package/components/select-menu/select-menu.component.d.ts +2 -0
- package/esm2020/components/badge/badge.component.mjs +20 -3
- package/esm2020/components/select-menu/multi-select-menu/multi-select-menu.component.mjs +17 -4
- package/esm2020/components/select-menu/select-menu.component.mjs +19 -6
- package/esm2020/components/text-input/text-input.component.mjs +4 -4
- package/fesm2015/flywheel-io-vision.mjs +52 -10
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +52 -10
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -336,22 +336,38 @@ class FwBadgeComponent {
|
|
|
336
336
|
this.color = 'default';
|
|
337
337
|
this.variant = 'standard';
|
|
338
338
|
this.value = '';
|
|
339
|
+
this.hideZero = false;
|
|
340
|
+
this.hideEmpty = false;
|
|
339
341
|
}
|
|
340
342
|
get cssClass() {
|
|
341
343
|
return ['fw-badge', this.color, this.variant].join(' ');
|
|
342
344
|
}
|
|
345
|
+
showBadge() {
|
|
346
|
+
let show = true;
|
|
347
|
+
if (this.hideEmpty) {
|
|
348
|
+
show = !(this.value.length === 0);
|
|
349
|
+
}
|
|
350
|
+
if (this.hideZero) {
|
|
351
|
+
show = !(this.value || this.value === '0');
|
|
352
|
+
}
|
|
353
|
+
return show;
|
|
354
|
+
}
|
|
343
355
|
}
|
|
344
356
|
FwBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
345
|
-
FwBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwBadgeComponent, selector: "fw-badge", inputs: { color: "color", variant: "variant", value: "value" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\">\n {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
357
|
+
FwBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwBadgeComponent, selector: "fw-badge", inputs: { color: "color", variant: "variant", value: "value", hideZero: "hideZero", hideEmpty: "hideEmpty" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\" *ngIf=\"showBadge()\">\n {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
346
358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwBadgeComponent, decorators: [{
|
|
347
359
|
type: Component,
|
|
348
|
-
args: [{ selector: 'fw-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\">\n {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"] }]
|
|
360
|
+
args: [{ selector: 'fw-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\" *ngIf=\"showBadge()\">\n {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"] }]
|
|
349
361
|
}], propDecorators: { color: [{
|
|
350
362
|
type: Input
|
|
351
363
|
}], variant: [{
|
|
352
364
|
type: Input
|
|
353
365
|
}], value: [{
|
|
354
366
|
type: Input
|
|
367
|
+
}], hideZero: [{
|
|
368
|
+
type: Input
|
|
369
|
+
}], hideEmpty: [{
|
|
370
|
+
type: Input
|
|
355
371
|
}], cssClass: [{
|
|
356
372
|
type: HostBinding,
|
|
357
373
|
args: ['class']
|
|
@@ -2625,14 +2641,14 @@ FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
2625
2641
|
provide: NG_VALUE_ACCESSOR,
|
|
2626
2642
|
useExisting: FwTextInputComponent,
|
|
2627
2643
|
multi: true,
|
|
2628
|
-
}], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n <input\n *ngIf=\"!textInput\"\n [type]=\"type\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [maxLength]=\"maxLength\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\">\n <ng-content select=\"input\"></ng-content>\n <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n <ng-content></ng-content>\n </div>\n <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }]
|
|
2644
|
+
}], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n <input\n *ngIf=\"!textInput\"\n [type]=\"type\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [maxLength]=\"maxLength\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\">\n <ng-content select=\"input\"></ng-content>\n <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n <ng-content></ng-content>\n </div>\n <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
|
|
2629
2645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, decorators: [{
|
|
2630
2646
|
type: Component,
|
|
2631
2647
|
args: [{ selector: 'fw-text-input', providers: [{
|
|
2632
2648
|
provide: NG_VALUE_ACCESSOR,
|
|
2633
2649
|
useExisting: FwTextInputComponent,
|
|
2634
2650
|
multi: true,
|
|
2635
|
-
}],
|
|
2651
|
+
}], template: "<div class=\"full-container\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n <input\n *ngIf=\"!textInput\"\n [type]=\"type\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [maxLength]=\"maxLength\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\">\n <ng-content select=\"input\"></ng-content>\n <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n <ng-content></ng-content>\n </div>\n <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
|
|
2636
2652
|
}], propDecorators: { disabled: [{
|
|
2637
2653
|
type: Input
|
|
2638
2654
|
}], leftIcon: [{
|
|
@@ -2985,9 +3001,19 @@ class FwMultiSelectMenuComponent {
|
|
|
2985
3001
|
this.subscriptions = [];
|
|
2986
3002
|
this.focused = 0;
|
|
2987
3003
|
this.touched = false;
|
|
3004
|
+
this._isOpen = false;
|
|
2988
3005
|
this.onTouched = () => {
|
|
2989
3006
|
};
|
|
2990
3007
|
}
|
|
3008
|
+
outsideClick() {
|
|
3009
|
+
if (this._isOpen) {
|
|
3010
|
+
this.trigger.close();
|
|
3011
|
+
this._isOpen = false;
|
|
3012
|
+
}
|
|
3013
|
+
if (this.trigger && this.trigger.isOpen()) {
|
|
3014
|
+
this._isOpen = true;
|
|
3015
|
+
}
|
|
3016
|
+
}
|
|
2991
3017
|
get value() {
|
|
2992
3018
|
return this._value;
|
|
2993
3019
|
}
|
|
@@ -3195,7 +3221,7 @@ class FwMultiSelectMenuComponent {
|
|
|
3195
3221
|
}
|
|
3196
3222
|
}
|
|
3197
3223
|
FwMultiSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3198
|
-
FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", disabled: "disabled", useCheckbox: "useCheckbox", closeOnSelect: "closeOnSelect", filterItemsOnSelect: "filterItemsOnSelect", maxSelectedShown: "maxSelectedShown", width: "width", minHeight: "minHeight", maxHeight: "maxHeight", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, providers: [
|
|
3224
|
+
FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", disabled: "disabled", useCheckbox: "useCheckbox", closeOnSelect: "closeOnSelect", filterItemsOnSelect: "filterItemsOnSelect", maxSelectedShown: "maxSelectedShown", width: "width", minHeight: "minHeight", maxHeight: "maxHeight", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, host: { listeners: { "document:click": "outsideClick()" } }, providers: [
|
|
3199
3225
|
{
|
|
3200
3226
|
provide: NG_VALUE_ACCESSOR,
|
|
3201
3227
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
@@ -3211,7 +3237,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3211
3237
|
multi: true,
|
|
3212
3238
|
},
|
|
3213
3239
|
], 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 selectedOptions | slice:0:maxSelectedShown\"\n [title]=\"chip[titleProperty]\"\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 [value]=\"selectedValues\"\n (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of filteredOptions\"\n [title]=\"item[titleProperty]\"\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"] }]
|
|
3214
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
3240
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
|
|
3241
|
+
type: HostListener,
|
|
3242
|
+
args: ['document:click']
|
|
3243
|
+
}], options: [{
|
|
3215
3244
|
type: Input
|
|
3216
3245
|
}], valueProperty: [{
|
|
3217
3246
|
type: Input
|
|
@@ -3279,9 +3308,19 @@ class FwSelectMenuComponent {
|
|
|
3279
3308
|
this.selectTitle = '';
|
|
3280
3309
|
this.selectIcon = '';
|
|
3281
3310
|
this.subscriptions = [];
|
|
3311
|
+
this._isOpen = false;
|
|
3282
3312
|
this.onTouched = () => {
|
|
3283
3313
|
};
|
|
3284
3314
|
}
|
|
3315
|
+
outsideClick() {
|
|
3316
|
+
if (this._isOpen) {
|
|
3317
|
+
this.trigger.close();
|
|
3318
|
+
this._isOpen = false;
|
|
3319
|
+
}
|
|
3320
|
+
if (this.trigger && this.trigger.isOpen()) {
|
|
3321
|
+
this._isOpen = true;
|
|
3322
|
+
}
|
|
3323
|
+
}
|
|
3285
3324
|
get value() {
|
|
3286
3325
|
return this._value;
|
|
3287
3326
|
}
|
|
@@ -3392,13 +3431,13 @@ class FwSelectMenuComponent {
|
|
|
3392
3431
|
}
|
|
3393
3432
|
}
|
|
3394
3433
|
FwSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3395
|
-
FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", showFilter: "showFilter", disabled: "disabled", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, providers: [
|
|
3434
|
+
FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", showFilter: "showFilter", disabled: "disabled", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, host: { listeners: { "document:click": "outsideClick()" } }, providers: [
|
|
3396
3435
|
{
|
|
3397
3436
|
provide: NG_VALUE_ACCESSOR,
|
|
3398
3437
|
useExisting: forwardRef(() => FwSelectMenuComponent),
|
|
3399
3438
|
multi: true,
|
|
3400
3439
|
},
|
|
3401
|
-
], 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 [value]=\"selectTitle\"\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 [value]=\"selectValue\"\n (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [value]=\"item[valueProperty].toString()\"\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: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "multiSelect", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "error", "value"] }] });
|
|
3440
|
+
], 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, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\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 [value]=\"selectValue\"\n (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [value]=\"item[valueProperty].toString()\"\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: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "multiSelect", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "error", "value"] }] });
|
|
3402
3441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
3403
3442
|
type: Component,
|
|
3404
3443
|
args: [{ selector: 'fw-select', providers: [
|
|
@@ -3407,8 +3446,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3407
3446
|
useExisting: forwardRef(() => FwSelectMenuComponent),
|
|
3408
3447
|
multi: true,
|
|
3409
3448
|
},
|
|
3410
|
-
], template: "<div [ngStyle]=\"{width: width}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\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 [value]=\"selectValue\"\n (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [value]=\"item[valueProperty].toString()\"\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"] }]
|
|
3411
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
3449
|
+
], template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\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 [value]=\"selectValue\"\n (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [value]=\"item[valueProperty].toString()\"\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"] }]
|
|
3450
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
|
|
3451
|
+
type: HostListener,
|
|
3452
|
+
args: ['document:click']
|
|
3453
|
+
}], options: [{
|
|
3412
3454
|
type: Input
|
|
3413
3455
|
}], valueProperty: [{
|
|
3414
3456
|
type: Input
|