@flywheel-io/vision 2.6.1 → 2.6.3
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/dialog/dialog-confirm.component.d.ts +3 -1
- package/components/form-heading/form-heading.component.d.ts +3 -1
- package/components/form-heading/form-heading.module.d.ts +2 -1
- package/components/menu/menu-close-triggers.directive.d.ts +1 -1
- package/components/tag/tag.component.d.ts +10 -0
- package/components/tag/tag.module.d.ts +9 -0
- package/components/tooltip/tooltip.component.d.ts +1 -1
- package/components/wrapped-input/wrapped-input.component.d.ts +4 -1
- package/esm2022/components/avatar/avatar.component.mjs +7 -3
- package/esm2022/components/avatar-list/avatar-list.component.mjs +3 -2
- package/esm2022/components/chip-list/chip-list.component.mjs +3 -2
- package/esm2022/components/dialog/dialog-confirm.component.mjs +9 -3
- package/esm2022/components/form-heading/form-heading.component.mjs +9 -3
- package/esm2022/components/form-heading/form-heading.module.mjs +7 -3
- package/esm2022/components/menu/menu-close-triggers.directive.mjs +15 -9
- package/esm2022/components/tag/tag.component.mjs +25 -0
- package/esm2022/components/tag/tag.module.mjs +28 -0
- package/esm2022/components/tooltip/tooltip.component.mjs +2 -1
- package/esm2022/components/typeahead/typeahead.component.mjs +8 -4
- package/esm2022/components/wrapped-input/wrapped-input.component.mjs +10 -3
- package/fesm2022/flywheel-io-vision.mjs +102 -20
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -355,8 +355,12 @@ class FwAvatarComponent {
|
|
|
355
355
|
return [this.size, this.variant, this.content, 'selected'].filter(Boolean).join(' ');
|
|
356
356
|
}
|
|
357
357
|
;
|
|
358
|
-
get borderClass() {
|
|
359
|
-
|
|
358
|
+
get borderClass() {
|
|
359
|
+
return this.bordered;
|
|
360
|
+
}
|
|
361
|
+
get selectedClassApplied() {
|
|
362
|
+
return this.selected();
|
|
363
|
+
}
|
|
360
364
|
loadImage() {
|
|
361
365
|
this.isImageBroken = false;
|
|
362
366
|
}
|
|
@@ -979,6 +983,7 @@ class FwTooltipComponent {
|
|
|
979
983
|
this.openDelayTimer = window.setTimeout(() => {
|
|
980
984
|
this.isOpen = true;
|
|
981
985
|
this.openDelayTimer = null;
|
|
986
|
+
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
982
987
|
this.cdRef.detectChanges();
|
|
983
988
|
}, delayMs);
|
|
984
989
|
}
|
|
@@ -1139,6 +1144,7 @@ class FwAvatarListComponent {
|
|
|
1139
1144
|
else {
|
|
1140
1145
|
this.moreText().nativeElement.classList.add('hidden');
|
|
1141
1146
|
}
|
|
1147
|
+
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
1142
1148
|
this.changeDetector.detectChanges();
|
|
1143
1149
|
}
|
|
1144
1150
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -3030,6 +3036,8 @@ class FwDialogConfirmComponent {
|
|
|
3030
3036
|
this.confirmButtonIcon = 'done-check';
|
|
3031
3037
|
this.cancelButtonText = 'Cancel';
|
|
3032
3038
|
this.contentTitle = 'Are you sure?';
|
|
3039
|
+
this.showClose = false;
|
|
3040
|
+
this.width = 'extra-small';
|
|
3033
3041
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
3034
3042
|
this.close = new EventEmitter();
|
|
3035
3043
|
this.confirm = new EventEmitter();
|
|
@@ -3076,11 +3084,11 @@ class FwDialogConfirmComponent {
|
|
|
3076
3084
|
}, 300);
|
|
3077
3085
|
}
|
|
3078
3086
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, deps: [{ token: i1$3.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3079
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogConfirmComponent, selector: "fw-dialog-confirm", inputs: { title: "title", icon: "icon", iconColor: "iconColor", confirmColor: "confirmColor", confirmButtonText: "confirmButtonText", confirmButtonIcon: "confirmButtonIcon", cancelButtonText: "cancelButtonText", contentIcon: "contentIcon", contentTitle: "contentTitle", contentText: "contentText", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n [width]=\"
|
|
3087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogConfirmComponent, selector: "fw-dialog-confirm", inputs: { title: "title", icon: "icon", iconColor: "iconColor", confirmColor: "confirmColor", confirmButtonText: "confirmButtonText", confirmButtonIcon: "confirmButtonIcon", cancelButtonText: "cancelButtonText", contentIcon: "contentIcon", contentTitle: "contentTitle", contentText: "contentText", showClose: "showClose", width: "width", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n {{ contentIcon }}\n </fw-icon>\n <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n {{ contentTitle }}\n </p>\n <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n {{ contentText }}\n </p>\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n <fw-button\n variant=\"outline\"\n *ngIf=\"cancelButtonText\"\n color=\"slate\"\n (click)=\"handleCloseButton()\">\n {{ cancelButtonText }}\n </fw-button>\n <fw-button\n variant=\"solid\"\n *ngIf=\"confirmButtonText\"\n [color]=\"confirmColor\"\n [leftIcon]=\"confirmButtonIcon\"\n (click)=\"confirm.emit()\">\n {{ confirmButtonText }}\n </fw-button>\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\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: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
|
|
3080
3088
|
}
|
|
3081
3089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, decorators: [{
|
|
3082
3090
|
type: Component,
|
|
3083
|
-
args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n [width]=\"
|
|
3091
|
+
args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n {{ contentIcon }}\n </fw-icon>\n <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n {{ contentTitle }}\n </p>\n <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n {{ contentText }}\n </p>\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n <fw-button\n variant=\"outline\"\n *ngIf=\"cancelButtonText\"\n color=\"slate\"\n (click)=\"handleCloseButton()\">\n {{ cancelButtonText }}\n </fw-button>\n <fw-button\n variant=\"solid\"\n *ngIf=\"confirmButtonText\"\n [color]=\"confirmColor\"\n [leftIcon]=\"confirmButtonIcon\"\n (click)=\"confirm.emit()\">\n {{ confirmButtonText }}\n </fw-button>\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"] }]
|
|
3084
3092
|
}], ctorParameters: () => [{ type: i1$3.DialogRef, decorators: [{
|
|
3085
3093
|
type: Optional
|
|
3086
3094
|
}] }, { type: i0.ElementRef }], propDecorators: { title: [{
|
|
@@ -3103,6 +3111,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3103
3111
|
type: Input
|
|
3104
3112
|
}], contentText: [{
|
|
3105
3113
|
type: Input
|
|
3114
|
+
}], showClose: [{
|
|
3115
|
+
type: Input
|
|
3116
|
+
}], width: [{
|
|
3117
|
+
type: Input
|
|
3106
3118
|
}], externalClasses: [{
|
|
3107
3119
|
type: Input,
|
|
3108
3120
|
args: ['class']
|
|
@@ -3411,16 +3423,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3411
3423
|
}]
|
|
3412
3424
|
}] });
|
|
3413
3425
|
|
|
3426
|
+
class FwTagComponent {
|
|
3427
|
+
constructor() {
|
|
3428
|
+
this.size = 'small';
|
|
3429
|
+
this.color = 'slate';
|
|
3430
|
+
}
|
|
3431
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3432
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwTagComponent, selector: "fw-tag", inputs: { size: "size", color: "color", icon: "icon", title: "title" }, ngImport: i0, template: "<div [ngClass]=\"['tag', 'tag-'+size, 'tag-'+color]\">\n <fw-icon *ngIf=\"icon\" class=\"tag-icon\">{{ icon }}</fw-icon>\n <div class=\"tag-text\" *ngIf=\"title\">\n <span>{{ title }}</span>\n </div>\n</div>\n", styles: [".tag{box-sizing:border-box;border-radius:4px;padding:0 6px 0 4px;display:inline-flex;gap:4px;align-items:center}.tag .tag-text{font-family:Inter,sans-serif;font-size:10px;font-style:normal;font-weight:500;line-height:120%;white-space:wrap}.tag.tag-small{height:16px}.tag.tag-small .tag-icon{align-items:flex-start;font-size:12px;min-width:12px;width:12px}.tag.tag-large{height:24px}.tag.tag-large .tag-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.tag.tag-slate{color:var(--slate-base);background-color:var(--slate-hover)}.tag.tag-slate:hover{background-color:var(--slate-focus)}.tag.tag-primary{color:var(--primary-base);background-color:var(--primary-hover)}.tag.tag-primary:hover{background-color:var(--primary-focus)}.tag.tag-secondary{color:var(--secondary-base);background-color:var(--secondary-hover)}.tag.tag-secondary:hover{background-color:var(--secondary-focus)}.tag.tag-orange{color:var(--orange-base);background-color:var(--orange-hover)}.tag.tag-orange:hover{background-color:var(--orange-focus)}.tag.tag-green{color:var(--green-base);background-color:var(--green-hover)}.tag.tag-green:hover{background-color:var(--green-focus)}.tag.tag-red{color:var(--red-base);background-color:var(--red-hover)}.tag.tag-red:hover{background-color:var(--red-focus)}\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: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
3433
|
+
}
|
|
3434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagComponent, decorators: [{
|
|
3435
|
+
type: Component,
|
|
3436
|
+
args: [{ selector: 'fw-tag', template: "<div [ngClass]=\"['tag', 'tag-'+size, 'tag-'+color]\">\n <fw-icon *ngIf=\"icon\" class=\"tag-icon\">{{ icon }}</fw-icon>\n <div class=\"tag-text\" *ngIf=\"title\">\n <span>{{ title }}</span>\n </div>\n</div>\n", styles: [".tag{box-sizing:border-box;border-radius:4px;padding:0 6px 0 4px;display:inline-flex;gap:4px;align-items:center}.tag .tag-text{font-family:Inter,sans-serif;font-size:10px;font-style:normal;font-weight:500;line-height:120%;white-space:wrap}.tag.tag-small{height:16px}.tag.tag-small .tag-icon{align-items:flex-start;font-size:12px;min-width:12px;width:12px}.tag.tag-large{height:24px}.tag.tag-large .tag-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.tag.tag-slate{color:var(--slate-base);background-color:var(--slate-hover)}.tag.tag-slate:hover{background-color:var(--slate-focus)}.tag.tag-primary{color:var(--primary-base);background-color:var(--primary-hover)}.tag.tag-primary:hover{background-color:var(--primary-focus)}.tag.tag-secondary{color:var(--secondary-base);background-color:var(--secondary-hover)}.tag.tag-secondary:hover{background-color:var(--secondary-focus)}.tag.tag-orange{color:var(--orange-base);background-color:var(--orange-hover)}.tag.tag-orange:hover{background-color:var(--orange-focus)}.tag.tag-green{color:var(--green-base);background-color:var(--green-hover)}.tag.tag-green:hover{background-color:var(--green-focus)}.tag.tag-red{color:var(--red-base);background-color:var(--red-hover)}.tag.tag-red:hover{background-color:var(--red-focus)}\n"] }]
|
|
3437
|
+
}], propDecorators: { size: [{
|
|
3438
|
+
type: Input
|
|
3439
|
+
}], color: [{
|
|
3440
|
+
type: Input
|
|
3441
|
+
}], icon: [{
|
|
3442
|
+
type: Input
|
|
3443
|
+
}], title: [{
|
|
3444
|
+
type: Input
|
|
3445
|
+
}] } });
|
|
3446
|
+
|
|
3414
3447
|
class FwFormHeadingComponent {
|
|
3415
3448
|
constructor() {
|
|
3416
3449
|
this.class = 'fw-form-heading';
|
|
3450
|
+
this.statusColor = 'slate';
|
|
3417
3451
|
}
|
|
3418
3452
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: { title: "title", description: "description", status: "status" }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<div class=\"heading-area\">\n <div>\n <h4 class=\"vision-h4
|
|
3453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: { title: "title", description: "description", required: "required", status: "status", statusColor: "statusColor" }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<div class=\"heading-area\">\n <div>\n <div class=\"section-heading\">\n <h4 class=\"vision-h4\">\n <span>{{ title }}</span>\n <span *ngIf=\"required\" class=\"required\">*</span>\n </h4>\n <fw-tag *ngIf=\"status\" [color]=\"statusColor\" [title]=\"status\"></fw-tag>\n <ng-content select=\"fw-tooltip\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-chip\"></ng-content>\n </div>\n <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n <ng-content select=\"p\"></ng-content>\n </div>\n</div>\n<div class=\"right-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".fw-form-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}.fw-form-heading .heading-area{display:flex;align-items:center;padding-left:4px;margin-bottom:8px}.fw-form-heading .heading-area .section-heading{display:flex;align-items:center;gap:5px}.fw-form-heading .heading-area h4{color:var(--typography-base);margin:0}.fw-form-heading .heading-area h4 .required{margin-left:4px;color:var(--red-base)}.fw-form-heading .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}.fw-form-heading .heading-area p a{color:var(--typography-muted)}.fw-form-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-form-heading .right-content{display:flex;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwTagComponent, selector: "fw-tag", inputs: ["size", "color", "icon", "title"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3420
3454
|
}
|
|
3421
3455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingComponent, decorators: [{
|
|
3422
3456
|
type: Component,
|
|
3423
|
-
args: [{ selector: 'fw-form-heading', encapsulation: ViewEncapsulation.None, template: "<div class=\"heading-area\">\n <div>\n <h4 class=\"vision-h4
|
|
3457
|
+
args: [{ selector: 'fw-form-heading', encapsulation: ViewEncapsulation.None, template: "<div class=\"heading-area\">\n <div>\n <div class=\"section-heading\">\n <h4 class=\"vision-h4\">\n <span>{{ title }}</span>\n <span *ngIf=\"required\" class=\"required\">*</span>\n </h4>\n <fw-tag *ngIf=\"status\" [color]=\"statusColor\" [title]=\"status\"></fw-tag>\n <ng-content select=\"fw-tooltip\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-chip\"></ng-content>\n </div>\n <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n <ng-content select=\"p\"></ng-content>\n </div>\n</div>\n<div class=\"right-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".fw-form-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}.fw-form-heading .heading-area{display:flex;align-items:center;padding-left:4px;margin-bottom:8px}.fw-form-heading .heading-area .section-heading{display:flex;align-items:center;gap:5px}.fw-form-heading .heading-area h4{color:var(--typography-base);margin:0}.fw-form-heading .heading-area h4 .required{margin-left:4px;color:var(--red-base)}.fw-form-heading .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}.fw-form-heading .heading-area p a{color:var(--typography-muted)}.fw-form-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-form-heading .right-content{display:flex;gap:8px}\n"] }]
|
|
3424
3458
|
}], ctorParameters: () => [], propDecorators: { class: [{
|
|
3425
3459
|
type: HostBinding,
|
|
3426
3460
|
args: ['attr.class']
|
|
@@ -3428,18 +3462,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3428
3462
|
type: Input
|
|
3429
3463
|
}], description: [{
|
|
3430
3464
|
type: Input
|
|
3465
|
+
}], required: [{
|
|
3466
|
+
type: Input
|
|
3431
3467
|
}], status: [{
|
|
3432
3468
|
type: Input
|
|
3469
|
+
}], statusColor: [{
|
|
3470
|
+
type: Input
|
|
3433
3471
|
}] } });
|
|
3434
3472
|
|
|
3473
|
+
class FwTagModule {
|
|
3474
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3475
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FwTagModule, declarations: [FwTagComponent], imports: [CommonModule,
|
|
3476
|
+
FwIconModule], exports: [FwTagComponent] }); }
|
|
3477
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagModule, imports: [CommonModule,
|
|
3478
|
+
FwIconModule] }); }
|
|
3479
|
+
}
|
|
3480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagModule, decorators: [{
|
|
3481
|
+
type: NgModule,
|
|
3482
|
+
args: [{
|
|
3483
|
+
imports: [
|
|
3484
|
+
CommonModule,
|
|
3485
|
+
FwIconModule,
|
|
3486
|
+
],
|
|
3487
|
+
exports: [
|
|
3488
|
+
FwTagComponent,
|
|
3489
|
+
],
|
|
3490
|
+
declarations: [
|
|
3491
|
+
FwTagComponent,
|
|
3492
|
+
],
|
|
3493
|
+
}]
|
|
3494
|
+
}] });
|
|
3495
|
+
|
|
3435
3496
|
class FwFormHeadingModule {
|
|
3436
3497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3437
3498
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingModule, declarations: [FwFormHeadingComponent], imports: [CommonModule,
|
|
3438
3499
|
FwButtonModule,
|
|
3439
|
-
FwIconModule
|
|
3500
|
+
FwIconModule,
|
|
3501
|
+
FwTagModule], exports: [FwFormHeadingComponent] }); }
|
|
3440
3502
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingModule, imports: [CommonModule,
|
|
3441
3503
|
FwButtonModule,
|
|
3442
|
-
FwIconModule
|
|
3504
|
+
FwIconModule,
|
|
3505
|
+
FwTagModule] }); }
|
|
3443
3506
|
}
|
|
3444
3507
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingModule, decorators: [{
|
|
3445
3508
|
type: NgModule,
|
|
@@ -3448,6 +3511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3448
3511
|
CommonModule,
|
|
3449
3512
|
FwButtonModule,
|
|
3450
3513
|
FwIconModule,
|
|
3514
|
+
FwTagModule,
|
|
3451
3515
|
],
|
|
3452
3516
|
exports: [
|
|
3453
3517
|
FwFormHeadingComponent,
|
|
@@ -4581,14 +4645,20 @@ class FwMenuCloseTriggersDirective {
|
|
|
4581
4645
|
constructor() {
|
|
4582
4646
|
this._isOpen = false;
|
|
4583
4647
|
}
|
|
4584
|
-
outsideClick() {
|
|
4585
|
-
|
|
4648
|
+
outsideClick(event) {
|
|
4649
|
+
const target = event.target;
|
|
4650
|
+
// Check is close under fw-menu-container (overlay)
|
|
4651
|
+
const clickedInsideMenu = target.closest('fw-menu-container') !== null;
|
|
4652
|
+
// Check is clicked on trigger
|
|
4653
|
+
const clickedOnTrigger = target.closest('[cdkMenuTriggerFor]') !== null;
|
|
4654
|
+
if (!clickedInsideMenu && !clickedOnTrigger && this._isOpen && this.triggers?.length > 0) {
|
|
4655
|
+
// Close menu if click outside menu and trigger
|
|
4586
4656
|
this.triggers.forEach(trigger => {
|
|
4587
4657
|
trigger.close();
|
|
4588
4658
|
});
|
|
4589
4659
|
this._isOpen = false;
|
|
4590
4660
|
}
|
|
4591
|
-
if (this.triggers
|
|
4661
|
+
if (this.triggers?.length > 0) {
|
|
4592
4662
|
this.triggers.forEach(trigger => {
|
|
4593
4663
|
if (trigger.isOpen()) {
|
|
4594
4664
|
this._isOpen = true;
|
|
@@ -4597,19 +4667,19 @@ class FwMenuCloseTriggersDirective {
|
|
|
4597
4667
|
}
|
|
4598
4668
|
}
|
|
4599
4669
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuCloseTriggersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4600
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FwMenuCloseTriggersDirective, selector: "[fwMenuCloseTriggers]", host: { listeners: { "document:click": "outsideClick()" } }, queries: [{ propertyName: "triggers", predicate: CdkMenuTrigger, descendants: true }], ngImport: i0 }); }
|
|
4670
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FwMenuCloseTriggersDirective, selector: "[fwMenuCloseTriggers]", host: { listeners: { "document:click": "outsideClick($event)" } }, queries: [{ propertyName: "triggers", predicate: CdkMenuTrigger, descendants: true }], ngImport: i0 }); }
|
|
4601
4671
|
}
|
|
4602
4672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuCloseTriggersDirective, decorators: [{
|
|
4603
4673
|
type: Directive,
|
|
4604
4674
|
args: [{
|
|
4605
4675
|
selector: '[fwMenuCloseTriggers]',
|
|
4606
4676
|
}]
|
|
4607
|
-
}], propDecorators: {
|
|
4608
|
-
type: HostListener,
|
|
4609
|
-
args: ['document:click']
|
|
4610
|
-
}], triggers: [{
|
|
4677
|
+
}], propDecorators: { triggers: [{
|
|
4611
4678
|
type: ContentChildren,
|
|
4612
4679
|
args: [CdkMenuTrigger, { descendants: true }]
|
|
4680
|
+
}], outsideClick: [{
|
|
4681
|
+
type: HostListener,
|
|
4682
|
+
args: ['document:click', ['$event']]
|
|
4613
4683
|
}] } });
|
|
4614
4684
|
|
|
4615
4685
|
class FwMenuContainerComponent {
|
|
@@ -8558,6 +8628,7 @@ class FwChipListComponent {
|
|
|
8558
8628
|
else {
|
|
8559
8629
|
this.moreText().nativeElement.classList.add('hidden');
|
|
8560
8630
|
}
|
|
8631
|
+
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
8561
8632
|
this.changeDetector.detectChanges();
|
|
8562
8633
|
}
|
|
8563
8634
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -8581,8 +8652,10 @@ class FwTypeaheadComponent {
|
|
|
8581
8652
|
this.changeDetector = inject(ChangeDetectorRef);
|
|
8582
8653
|
this.loading = model(false);
|
|
8583
8654
|
this.disabled = model(false);
|
|
8584
|
-
this.onChange = (_) => {
|
|
8585
|
-
|
|
8655
|
+
this.onChange = (_) => {
|
|
8656
|
+
};
|
|
8657
|
+
this.onTouched = () => {
|
|
8658
|
+
};
|
|
8586
8659
|
this.value = model([]);
|
|
8587
8660
|
this.optionsInput = input([], { alias: 'options' });
|
|
8588
8661
|
this.maxOptionsHeight = input('400px');
|
|
@@ -8709,12 +8782,14 @@ class FwTypeaheadComponent {
|
|
|
8709
8782
|
const newValue = currentValue.filter(val => val !== chipValue);
|
|
8710
8783
|
this.value.set(newValue);
|
|
8711
8784
|
this.focusInput();
|
|
8785
|
+
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
8712
8786
|
this.changeDetector.detectChanges();
|
|
8713
8787
|
}
|
|
8714
8788
|
focusInput(e = null) {
|
|
8715
8789
|
e?.preventDefault();
|
|
8716
8790
|
e?.stopPropagation();
|
|
8717
8791
|
e?.stopImmediatePropagation();
|
|
8792
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
8718
8793
|
this.inputRef().nativeElement.focus();
|
|
8719
8794
|
}
|
|
8720
8795
|
/* eslint-enable */
|
|
@@ -8785,22 +8860,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8785
8860
|
|
|
8786
8861
|
class FwWrappedInputComponent {
|
|
8787
8862
|
constructor() {
|
|
8863
|
+
this.statusColor = 'slate';
|
|
8788
8864
|
this.class = true;
|
|
8789
8865
|
}
|
|
8790
8866
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwWrappedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8791
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: { title: "title", description: "description", helperText: "helperText", errorText: "errorText" }, host: { properties: { "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n <fw-form-heading
|
|
8867
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: { title: "title", status: "status", statusColor: "statusColor", description: "description", helperText: "helperText", errorText: "errorText", required: "required" }, host: { properties: { "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n <fw-form-heading\n *ngIf=\"title\" [title]=\"title\" [description]=\"description\"\n [required]=\"required\" [status]=\"status\" [statusColor]=\"statusColor\">\n </fw-form-heading>\n <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n <ng-content\n select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "required", "status", "statusColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8792
8868
|
}
|
|
8793
8869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwWrappedInputComponent, decorators: [{
|
|
8794
8870
|
type: Component,
|
|
8795
|
-
args: [{ selector: 'fw-wrapped-input', encapsulation: ViewEncapsulation.None, template: "<label>\n <fw-form-heading
|
|
8871
|
+
args: [{ selector: 'fw-wrapped-input', encapsulation: ViewEncapsulation.None, template: "<label>\n <fw-form-heading\n *ngIf=\"title\" [title]=\"title\" [description]=\"description\"\n [required]=\"required\" [status]=\"status\" [statusColor]=\"statusColor\">\n </fw-form-heading>\n <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n <ng-content\n select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"] }]
|
|
8796
8872
|
}], propDecorators: { title: [{
|
|
8797
8873
|
type: Input
|
|
8874
|
+
}], status: [{
|
|
8875
|
+
type: Input
|
|
8876
|
+
}], statusColor: [{
|
|
8877
|
+
type: Input
|
|
8798
8878
|
}], description: [{
|
|
8799
8879
|
type: Input
|
|
8800
8880
|
}], helperText: [{
|
|
8801
8881
|
type: Input
|
|
8802
8882
|
}], errorText: [{
|
|
8803
8883
|
type: Input
|
|
8884
|
+
}], required: [{
|
|
8885
|
+
type: Input
|
|
8804
8886
|
}], class: [{
|
|
8805
8887
|
type: HostBinding,
|
|
8806
8888
|
args: ['class.fw-wrapped-input']
|