@flywheel-io/vision 2.9.0 → 2.9.1
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/radio/radio-group.component.d.ts +9 -11
- package/components/radio/radio.component.d.ts +3 -3
- package/esm2022/components/chip-list/chip-list.component.mjs +8 -4
- package/esm2022/components/icon/icon.component.mjs +2 -2
- package/esm2022/components/menu/menu-item/menu-item.component.mjs +1 -1
- package/esm2022/components/radio/radio-group.component.mjs +50 -50
- package/esm2022/components/radio/radio.component.mjs +7 -10
- package/fesm2022/flywheel-io-vision.mjs +63 -62
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ViewEncapsulation, HostListener, signal, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, output, Host, ViewChildren, Self, TemplateRef, viewChildren } from '@angular/core';
|
|
2
|
+
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ViewEncapsulation, HostListener, signal, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, DestroyRef, output, Host, ViewChildren, Self, TemplateRef, viewChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
6
7
|
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
7
8
|
import * as i1$2 from '@angular/cdk/overlay';
|
|
8
9
|
import { OverlayModule, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
@@ -19,11 +20,11 @@ import { parseISO, isBefore, isSameDay, isAfter } from 'date-fns';
|
|
|
19
20
|
import { isValidPhoneNumber, getExampleNumber, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
|
|
20
21
|
import * as i1$4 from '@angular/cdk/menu';
|
|
21
22
|
import { CdkMenuTrigger, CdkMenuModule } from '@angular/cdk/menu';
|
|
23
|
+
import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
22
24
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
23
25
|
import { _DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY } from '@angular/cdk/collections';
|
|
24
26
|
import * as i2 from '@angular/cdk/text-field';
|
|
25
27
|
import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
|
|
26
|
-
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
27
28
|
|
|
28
29
|
const namedSizeToPxMap = {
|
|
29
30
|
large: 28,
|
|
@@ -76,7 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
76
77
|
return namedSizeToPxMap[input] || parseInt(input) || 24;
|
|
77
78
|
}
|
|
78
79
|
return input;
|
|
79
|
-
}
|
|
80
|
+
},
|
|
80
81
|
}]
|
|
81
82
|
}], color: [{
|
|
82
83
|
type: Input
|
|
@@ -4251,7 +4252,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4251
4252
|
|
|
4252
4253
|
class FwRadioComponent {
|
|
4253
4254
|
constructor() {
|
|
4254
|
-
this.
|
|
4255
|
+
this.value = input();
|
|
4256
|
+
this.checked = model(false);
|
|
4255
4257
|
this.disabled = false;
|
|
4256
4258
|
this.size = 'medium';
|
|
4257
4259
|
this.color = 'default';
|
|
@@ -4272,16 +4274,12 @@ class FwRadioComponent {
|
|
|
4272
4274
|
this.change.emit(event.target.value);
|
|
4273
4275
|
}
|
|
4274
4276
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4275
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4277
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwRadioComponent, selector: "fw-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", change: "change" }, ngImport: i0, template: "<div [ngClass]=\"['fw-radio-wrapper', disabled?'disabled':'']\">\n <div [ngClass]=\"radioStyles\">\n <input\n type=\"radio\"\n class=\"fw-radio\"\n [id]=\"group+value()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [name]=\"group\"\n [disabled]=\"disabled\"\n (change)=\"handleChange($event)\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n\n @if (title) {\n <label [htmlFor]=\"group+value()\" class=\"vision-h4\">{{ title }}\n <ng-content></ng-content>\n </label>\n }\n</div>\n", styles: [":host .fw-radio-wrapper{display:flex;align-items:center;width:fit-content;cursor:pointer}:host .fw-radio-wrapper label{margin:0 6px 0 0;color:var(--typography-base)}:host .fw-radio-wrapper label:empty{display:none}:host .fw-radio-wrapper .fw-radio{height:36px;width:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}:host .fw-radio-wrapper .fw-radio:hover{background-color:var(--slate-hover)}:host .fw-radio-wrapper .fw-radio.focused{background-color:var(--slate-focus)}:host .fw-radio-wrapper .fw-radio input[type=radio]{appearance:none;display:inline-block;width:20px;height:20px;margin:6px;background-clip:content-box;border:2px solid var(--typography-light);background-color:transparent;border-radius:50%;cursor:pointer}:host .fw-radio-wrapper .fw-radio input[type=radio]:checked{width:16px;height:16px;background-color:var(--typography-light);outline:2px solid var(--typography-light);border:2px solid white;margin:8px}:host .fw-radio-wrapper .fw-radio.primary.focused{background-color:var(--primary-focus)}:host .fw-radio-wrapper .fw-radio.primary.focused input[type=radio]{border:2px solid var(--primary-base)}:host .fw-radio-wrapper .fw-radio.primary input[type=radio]:checked{border:2px solid white;background-color:var(--primary-base);outline:2px solid var(--primary-base)}:host .fw-radio-wrapper .fw-radio.secondary.focused{background-color:var(--secondary-focus)}:host .fw-radio-wrapper .fw-radio.secondary.focused input[type=radio]{border:2px solid var(--secondary-base)}:host .fw-radio-wrapper .fw-radio.secondary input[type=radio]:checked{border:2px solid white;background-color:var(--secondary-base);outline:2px solid var(--secondary-base)}:host .fw-radio-wrapper .fw-radio.disabled{cursor:not-allowed}:host .fw-radio-wrapper .fw-radio.disabled input[type=radio]:checked{border:2px solid white;background-color:var(--typography-light);outline:2px solid var(--typography-light)}:host .fw-radio-wrapper .fw-radio.compact{width:30px;height:30px}:host .fw-radio-wrapper .fw-radio.compact input[type=radio]{width:18px;height:18px;margin:5px}:host .fw-radio-wrapper .fw-radio.compact input[type=radio]:checked{width:14px;height:14px;margin:7px}:host .fw-radio-wrapper.disabled{cursor:not-allowed;opacity:.4}:host .fw-radio-wrapper.disabled label{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
4276
4278
|
}
|
|
4277
4279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioComponent, decorators: [{
|
|
4278
4280
|
type: Component,
|
|
4279
|
-
args: [{ selector: 'fw-radio-button', template: "<div [ngClass]=\"['fw-radio-wrapper', disabled?'disabled':'']\">\n <div [ngClass]=\"radioStyles\">\n <input\n type=\"radio\"\n class=\"fw-radio\"\n [id]=\"group+value\"\n [value]=\"value\"\n [checked]=\"checked\"\n [name]=\"group\"\n [disabled]=\"disabled\"\n (change)=\"handleChange($event)\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n
|
|
4280
|
-
}], propDecorators: {
|
|
4281
|
-
type: Input
|
|
4282
|
-
}], value: [{
|
|
4283
|
-
type: Input
|
|
4284
|
-
}], group: [{
|
|
4281
|
+
args: [{ selector: 'fw-radio-button', template: "<div [ngClass]=\"['fw-radio-wrapper', disabled?'disabled':'']\">\n <div [ngClass]=\"radioStyles\">\n <input\n type=\"radio\"\n class=\"fw-radio\"\n [id]=\"group+value()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [name]=\"group\"\n [disabled]=\"disabled\"\n (change)=\"handleChange($event)\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n\n @if (title) {\n <label [htmlFor]=\"group+value()\" class=\"vision-h4\">{{ title }}\n <ng-content></ng-content>\n </label>\n }\n</div>\n", styles: [":host .fw-radio-wrapper{display:flex;align-items:center;width:fit-content;cursor:pointer}:host .fw-radio-wrapper label{margin:0 6px 0 0;color:var(--typography-base)}:host .fw-radio-wrapper label:empty{display:none}:host .fw-radio-wrapper .fw-radio{height:36px;width:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}:host .fw-radio-wrapper .fw-radio:hover{background-color:var(--slate-hover)}:host .fw-radio-wrapper .fw-radio.focused{background-color:var(--slate-focus)}:host .fw-radio-wrapper .fw-radio input[type=radio]{appearance:none;display:inline-block;width:20px;height:20px;margin:6px;background-clip:content-box;border:2px solid var(--typography-light);background-color:transparent;border-radius:50%;cursor:pointer}:host .fw-radio-wrapper .fw-radio input[type=radio]:checked{width:16px;height:16px;background-color:var(--typography-light);outline:2px solid var(--typography-light);border:2px solid white;margin:8px}:host .fw-radio-wrapper .fw-radio.primary.focused{background-color:var(--primary-focus)}:host .fw-radio-wrapper .fw-radio.primary.focused input[type=radio]{border:2px solid var(--primary-base)}:host .fw-radio-wrapper .fw-radio.primary input[type=radio]:checked{border:2px solid white;background-color:var(--primary-base);outline:2px solid var(--primary-base)}:host .fw-radio-wrapper .fw-radio.secondary.focused{background-color:var(--secondary-focus)}:host .fw-radio-wrapper .fw-radio.secondary.focused input[type=radio]{border:2px solid var(--secondary-base)}:host .fw-radio-wrapper .fw-radio.secondary input[type=radio]:checked{border:2px solid white;background-color:var(--secondary-base);outline:2px solid var(--secondary-base)}:host .fw-radio-wrapper .fw-radio.disabled{cursor:not-allowed}:host .fw-radio-wrapper .fw-radio.disabled input[type=radio]:checked{border:2px solid white;background-color:var(--typography-light);outline:2px solid var(--typography-light)}:host .fw-radio-wrapper .fw-radio.compact{width:30px;height:30px}:host .fw-radio-wrapper .fw-radio.compact input[type=radio]{width:18px;height:18px;margin:5px}:host .fw-radio-wrapper .fw-radio.compact input[type=radio]:checked{width:14px;height:14px;margin:7px}:host .fw-radio-wrapper.disabled{cursor:not-allowed;opacity:.4}:host .fw-radio-wrapper.disabled label{color:var(--typography-light)}\n"] }]
|
|
4282
|
+
}], propDecorators: { group: [{
|
|
4285
4283
|
type: Input
|
|
4286
4284
|
}], disabled: [{
|
|
4287
4285
|
type: Input
|
|
@@ -4380,7 +4378,7 @@ class FwMenuItemComponent {
|
|
|
4380
4378
|
}
|
|
4381
4379
|
;
|
|
4382
4380
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4383
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, checkboxColor: { classPropertyName: "checkboxColor", publicName: "checkboxColor", isSignal: false, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: false, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: false, isRequired: false, transformFunction: null }, mouseEnterHandler: { classPropertyName: "mouseEnterHandler", publicName: "mouseEnterHandler", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mouseEnterHandler: "mouseEnterHandlerChange", click: "click" }, host: { listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected", "attr.title": "this.attrTitle" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n *ngIf=\"subItems.length>0\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\n </div>\n </div>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused .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.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:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;min-width:18px;width: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.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["name", "disabled", "size", "color", "title", "focused", "checked"], outputs: ["change"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["
|
|
4381
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, checkboxColor: { classPropertyName: "checkboxColor", publicName: "checkboxColor", isSignal: false, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: false, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: false, isRequired: false, transformFunction: null }, mouseEnterHandler: { classPropertyName: "mouseEnterHandler", publicName: "mouseEnterHandler", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mouseEnterHandler: "mouseEnterHandlerChange", click: "click" }, host: { listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected", "attr.title": "this.attrTitle" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n *ngIf=\"subItems.length>0\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\n </div>\n </div>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused .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.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:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;min-width:18px;width: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.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["name", "disabled", "size", "color", "title", "focused", "checked"], outputs: ["change"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["value", "checked", "group", "disabled", "size", "color", "title", "focused"], outputs: ["checkedChange", "change"] }] }); }
|
|
4384
4382
|
}
|
|
4385
4383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuItemComponent, decorators: [{
|
|
4386
4384
|
type: Component,
|
|
@@ -4571,63 +4569,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4571
4569
|
|
|
4572
4570
|
class FwRadioGroupComponent {
|
|
4573
4571
|
get style() {
|
|
4574
|
-
|
|
4575
|
-
if (this.direction === 'vertical') {
|
|
4576
|
-
direction = 'column';
|
|
4577
|
-
}
|
|
4572
|
+
const dir = this.direction === 'vertical' ? 'column' : 'row';
|
|
4578
4573
|
return this.sanitizer.bypassSecurityTrustStyle(`
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4574
|
+
display: flex;
|
|
4575
|
+
flex-direction: ${dir};
|
|
4576
|
+
`);
|
|
4582
4577
|
}
|
|
4583
|
-
constructor(
|
|
4584
|
-
this.sanitizer = sanitizer;
|
|
4578
|
+
constructor() {
|
|
4585
4579
|
this.direction = 'horizontal';
|
|
4586
4580
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
4587
4581
|
this.change = new EventEmitter();
|
|
4588
|
-
this.
|
|
4582
|
+
this.sanitizer = inject(DomSanitizer);
|
|
4583
|
+
this.dr = inject(DestroyRef);
|
|
4584
|
+
this.radioButtons = contentChildren(FwRadioComponent);
|
|
4585
|
+
this._value = signal(null);
|
|
4586
|
+
this.radioSubs = new Map();
|
|
4589
4587
|
this.onTouch = () => {
|
|
4590
4588
|
};
|
|
4591
4589
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
4592
4590
|
this.onChange = (value) => {
|
|
4593
4591
|
};
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4601
|
-
|
|
4602
|
-
|
|
4603
|
-
|
|
4604
|
-
|
|
4605
|
-
|
|
4606
|
-
|
|
4607
|
-
this.subscriptions.push(sub);
|
|
4608
|
-
});
|
|
4609
|
-
}
|
|
4610
|
-
this.updateLayout();
|
|
4611
|
-
}
|
|
4612
|
-
updateLayout() {
|
|
4613
|
-
if (this.radioButtons) {
|
|
4614
|
-
this.radioButtons.forEach(rb => {
|
|
4615
|
-
rb.group = this.group;
|
|
4616
|
-
rb.checked = rb.value === this.value;
|
|
4617
|
-
if (this.color) {
|
|
4618
|
-
rb.color = this.color;
|
|
4592
|
+
effect(() => {
|
|
4593
|
+
const radios = this.radioButtons();
|
|
4594
|
+
const value = this._value();
|
|
4595
|
+
const disabled = this.disabled;
|
|
4596
|
+
const group = this.group;
|
|
4597
|
+
const color = this.color;
|
|
4598
|
+
const size = this.size;
|
|
4599
|
+
radios.forEach(rb => {
|
|
4600
|
+
rb.group = group;
|
|
4601
|
+
rb.checked.set(rb.value() === value);
|
|
4602
|
+
rb.disabled = Boolean(disabled);
|
|
4603
|
+
if (color) {
|
|
4604
|
+
rb.color = color;
|
|
4619
4605
|
}
|
|
4620
|
-
if (
|
|
4621
|
-
rb.size =
|
|
4606
|
+
if (size) {
|
|
4607
|
+
rb.size = size;
|
|
4622
4608
|
}
|
|
4623
|
-
|
|
4624
|
-
|
|
4609
|
+
});
|
|
4610
|
+
});
|
|
4611
|
+
effect(() => {
|
|
4612
|
+
const radios = this.radioButtons();
|
|
4613
|
+
this.radioSubs.forEach((sub, rb) => {
|
|
4614
|
+
if (!radios.includes(rb)) {
|
|
4615
|
+
sub.unsubscribe();
|
|
4616
|
+
this.radioSubs.delete(rb);
|
|
4625
4617
|
}
|
|
4626
4618
|
});
|
|
4627
|
-
|
|
4619
|
+
radios.forEach(rb => {
|
|
4620
|
+
if (!this.radioSubs.has(rb)) {
|
|
4621
|
+
const sub = rb.change.pipe(takeUntilDestroyed(this.dr)).subscribe(value => this.handleChange(value));
|
|
4622
|
+
this.radioSubs.set(rb, sub);
|
|
4623
|
+
}
|
|
4624
|
+
});
|
|
4625
|
+
});
|
|
4628
4626
|
}
|
|
4629
4627
|
writeValue(value) {
|
|
4630
4628
|
this.value = value;
|
|
4629
|
+
this._value.set(value);
|
|
4631
4630
|
}
|
|
4632
4631
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4633
4632
|
registerOnChange(fn) {
|
|
@@ -4642,15 +4641,16 @@ class FwRadioGroupComponent {
|
|
|
4642
4641
|
}
|
|
4643
4642
|
handleChange(value) {
|
|
4644
4643
|
this.value = value;
|
|
4644
|
+
this._value.set(value);
|
|
4645
4645
|
this.onChange(value);
|
|
4646
4646
|
this.change.emit(this.value);
|
|
4647
4647
|
}
|
|
4648
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioGroupComponent, deps: [
|
|
4649
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4648
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4649
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwRadioGroupComponent, selector: "fw-radio-group", inputs: { value: "value", group: "group", color: "color", size: "size", disabled: "disabled", direction: "direction" }, outputs: { change: "change" }, host: { properties: { "style": "this.style" } }, providers: [{
|
|
4650
4650
|
provide: NG_VALUE_ACCESSOR,
|
|
4651
4651
|
useExisting: FwRadioGroupComponent,
|
|
4652
4652
|
multi: true,
|
|
4653
|
-
}], queries: [{ propertyName: "radioButtons", predicate: FwRadioComponent
|
|
4653
|
+
}], queries: [{ propertyName: "radioButtons", predicate: FwRadioComponent, isSignal: true }], ngImport: i0, template: '<ng-content select="fw-radio-button"></ng-content>', isInline: true }); }
|
|
4654
4654
|
}
|
|
4655
4655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioGroupComponent, decorators: [{
|
|
4656
4656
|
type: Component,
|
|
@@ -4659,7 +4659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4659
4659
|
useExisting: FwRadioGroupComponent,
|
|
4660
4660
|
multi: true,
|
|
4661
4661
|
}] }]
|
|
4662
|
-
}], ctorParameters: () => [
|
|
4662
|
+
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
4663
4663
|
type: Input
|
|
4664
4664
|
}], group: [{
|
|
4665
4665
|
type: Input
|
|
@@ -4673,9 +4673,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4673
4673
|
type: Input
|
|
4674
4674
|
}], change: [{
|
|
4675
4675
|
type: Output
|
|
4676
|
-
}], radioButtons: [{
|
|
4677
|
-
type: ContentChildren,
|
|
4678
|
-
args: [FwRadioComponent]
|
|
4679
4676
|
}], style: [{
|
|
4680
4677
|
type: HostBinding,
|
|
4681
4678
|
args: ['style']
|
|
@@ -8791,7 +8788,7 @@ class FwChipListComponent {
|
|
|
8791
8788
|
this.changeDetector = inject(ChangeDetectorRef);
|
|
8792
8789
|
this.hostElement = inject(ElementRef);
|
|
8793
8790
|
this.childChipElementRefs = contentChildren(FwChipComponent, { read: ElementRef });
|
|
8794
|
-
this.moreText = viewChild
|
|
8791
|
+
this.moreText = viewChild('moreText');
|
|
8795
8792
|
this.subscriptions = [];
|
|
8796
8793
|
this.hiddenElementCount = signal(0);
|
|
8797
8794
|
this.hiddenChips = signal([]);
|
|
@@ -8828,9 +8825,13 @@ class FwChipListComponent {
|
|
|
8828
8825
|
if (this.disableOverflow()) {
|
|
8829
8826
|
return;
|
|
8830
8827
|
}
|
|
8828
|
+
const moreTextRef = this.moreText();
|
|
8829
|
+
if (!moreTextRef) {
|
|
8830
|
+
return;
|
|
8831
|
+
}
|
|
8831
8832
|
const hostRect = this.hostElement.nativeElement.getBoundingClientRect();
|
|
8832
8833
|
const chipElements = this.childChipElementRefs().map(ref => ref.nativeElement);
|
|
8833
|
-
const moreTextElement =
|
|
8834
|
+
const moreTextElement = moreTextRef.nativeElement;
|
|
8834
8835
|
chipElements.forEach(chip => chip.classList.remove('hidden'));
|
|
8835
8836
|
moreTextElement.classList.remove('hidden');
|
|
8836
8837
|
const visibleChips = chipElements.filter(chip => {
|
|
@@ -8850,7 +8851,7 @@ class FwChipListComponent {
|
|
|
8850
8851
|
});
|
|
8851
8852
|
}
|
|
8852
8853
|
else {
|
|
8853
|
-
|
|
8854
|
+
moreTextElement.classList.add('hidden');
|
|
8854
8855
|
}
|
|
8855
8856
|
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
8856
8857
|
this.changeDetector.detectChanges();
|