@flywheel-io/vision 21.6.0 → 21.6.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.
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { NgClass, CommonModule, NgStyle, NgTemplateOutlet, DecimalPipe, SlicePipe, Location } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import {
|
|
4
|
-
import { DomSanitizer } from '@angular/platform-browser';
|
|
3
|
+
import { input, computed, ChangeDetectionStrategy, Component, output, NgModule, HostBinding, model, signal, effect, HostListener, ViewEncapsulation, EventEmitter, Output, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, Input, ViewChild, forwardRef, DestroyRef, ContentChild, contentChild, NgZone, untracked, Injectable, DOCUMENT, viewChildren, linkedSignal, ViewChildren, TemplateRef } from '@angular/core';
|
|
5
4
|
import { BehaviorSubject, debounce, timer, distinctUntilChanged, min, Subject, takeUntil, of, Subscription, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
6
5
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
7
6
|
import { CdkConnectedOverlay, OverlayModule, Overlay, CdkOverlayOrigin, OverlayContainer } from '@angular/cdk/overlay';
|
|
@@ -10,6 +9,7 @@ export { CdkTableModule } from '@angular/cdk/table';
|
|
|
10
9
|
import { trigger, transition, style, animate, state } from '@angular/animations';
|
|
11
10
|
import { _IdGenerator, LiveAnnouncer } from '@angular/cdk/a11y';
|
|
12
11
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
12
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
13
13
|
import * as i1 from '@angular/forms';
|
|
14
14
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, NgControl, FormControl, FormGroup } from '@angular/forms';
|
|
15
15
|
import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
@@ -37,36 +37,28 @@ const namedSizeToPxMap = {
|
|
|
37
37
|
*/
|
|
38
38
|
class FwIconComponent {
|
|
39
39
|
constructor() {
|
|
40
|
-
this.
|
|
41
|
-
this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
40
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
42
41
|
this.size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (input) => {
|
|
43
42
|
if (typeof input === 'string') {
|
|
44
43
|
return namedSizeToPxMap[input] || parseInt(input) || 24;
|
|
45
44
|
}
|
|
46
45
|
return input;
|
|
47
46
|
} });
|
|
48
|
-
this.color = input(
|
|
49
|
-
this.
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
const sizeStyle = `font-size: ${this.size()}px; min-width: ${this.size()}px; width: ${this.size()}px;`;
|
|
53
|
-
let colorStyle = '';
|
|
54
|
-
const color = this.color();
|
|
55
|
-
if (color) {
|
|
47
|
+
this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
48
|
+
this.parsedColor = computed(() => {
|
|
49
|
+
const color = this.color();
|
|
50
|
+
let parsed = '';
|
|
56
51
|
if (color === 'muted') {
|
|
57
|
-
|
|
52
|
+
parsed = 'var(--typography-muted)';
|
|
58
53
|
}
|
|
59
54
|
else {
|
|
60
|
-
|
|
55
|
+
parsed = `var(--${color}-base)`;
|
|
61
56
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
${sizeStyle}
|
|
65
|
-
${colorStyle}
|
|
66
|
-
`);
|
|
57
|
+
return parsed;
|
|
58
|
+
}, ...(ngDevMode ? [{ debugName: "parsedColor" }] : /* istanbul ignore next */ []));
|
|
67
59
|
}
|
|
68
60
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: FwIconComponent, isStandalone: true, selector: "fw-icon", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "ariaLabel() ? \"img\" : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "ariaLabel() ? null : \"true\"", "
|
|
61
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: FwIconComponent, isStandalone: true, selector: "fw-icon", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "ariaLabel() ? \"img\" : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "ariaLabel() ? null : \"true\"", "style.font-size": "`${size()}px`", "style.min-width": "`${size()}px`", "style.width": "`${size()}px`", "style.color": "parsedColor()" }, classAttribute: "vision-icon" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
70
62
|
}
|
|
71
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwIconComponent, decorators: [{
|
|
72
64
|
type: Component,
|
|
@@ -78,15 +70,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
78
70
|
'[attr.role]': 'ariaLabel() ? "img" : null',
|
|
79
71
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
80
72
|
'[attr.aria-hidden]': 'ariaLabel() ? null : "true"',
|
|
73
|
+
'class': 'vision-icon',
|
|
74
|
+
'[style.font-size]': '`${size()}px`',
|
|
75
|
+
'[style.min-width]': '`${size()}px`',
|
|
76
|
+
'[style.width]': '`${size()}px`',
|
|
77
|
+
'[style.color]': 'parsedColor()',
|
|
81
78
|
},
|
|
82
79
|
}]
|
|
83
|
-
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }]
|
|
84
|
-
type: HostBinding,
|
|
85
|
-
args: ['class']
|
|
86
|
-
}], style: [{
|
|
87
|
-
type: HostBinding,
|
|
88
|
-
args: ['style']
|
|
89
|
-
}] } });
|
|
80
|
+
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
90
81
|
|
|
91
82
|
/**
|
|
92
83
|
* Component for a clickable icon-only button with configurable color, size, and selected state
|
|
@@ -423,36 +414,43 @@ var LayoutWidth;
|
|
|
423
414
|
class FwLayoutContextComponent {
|
|
424
415
|
constructor() {
|
|
425
416
|
this.width = input(LayoutWidth.Small, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
426
|
-
this.
|
|
417
|
+
this.widthPx = computed(() => {
|
|
418
|
+
const widthMap = {
|
|
419
|
+
small: '444px',
|
|
420
|
+
medium: '600px',
|
|
421
|
+
large: '900px',
|
|
422
|
+
'extra-large': '1200px',
|
|
423
|
+
fill: '100%',
|
|
424
|
+
};
|
|
425
|
+
return widthMap[this.width()];
|
|
426
|
+
}, ...(ngDevMode ? [{ debugName: "widthPx" }] : /* istanbul ignore next */ []));
|
|
427
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
427
428
|
this.iconColor = input('secondary', ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
|
|
428
|
-
this.
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
}
|
|
441
|
-
return classes.join(' ');
|
|
429
|
+
this.parsedIconColor = computed(() => {
|
|
430
|
+
const colorMap = {
|
|
431
|
+
'primary': 'primary',
|
|
432
|
+
'secondary': 'secondary',
|
|
433
|
+
'danger': 'red',
|
|
434
|
+
'slate': 'slate',
|
|
435
|
+
'warning': 'orange',
|
|
436
|
+
'success': 'green',
|
|
437
|
+
};
|
|
438
|
+
return colorMap[this.iconColor()] || 'secondary';
|
|
439
|
+
}, ...(ngDevMode ? [{ debugName: "parsedIconColor" }] : /* istanbul ignore next */ []));
|
|
440
|
+
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
441
|
+
this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
442
442
|
}
|
|
443
443
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwLayoutContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
444
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "
|
|
444
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "widthPx()", "attr.title": "null" }, classAttribute: "fw-layout-context" }, ngImport: i0, template: "@if (icon()) {\n <fw-icon [color]=\"parsedIconColor()\">{{ icon() }}</fw-icon>\n}\n\n@if (title()) {\n <h3>{{ title() }}</h3>\n}\n\n@if (description()) {\n <p class=\"vision-p3\">{{ description() }}</p>\n} @else {\n <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }] }); }
|
|
445
445
|
}
|
|
446
446
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwLayoutContextComponent, decorators: [{
|
|
447
447
|
type: Component,
|
|
448
|
-
args: [{ selector: 'fw-layout-context', imports: [FwIconComponent
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
args: ['attr.class']
|
|
455
|
-
}] } });
|
|
448
|
+
args: [{ selector: 'fw-layout-context', imports: [FwIconComponent], host: {
|
|
449
|
+
class: 'fw-layout-context',
|
|
450
|
+
'[style.width]': 'widthPx()',
|
|
451
|
+
'[attr.title]': 'null',
|
|
452
|
+
}, template: "@if (icon()) {\n <fw-icon [color]=\"parsedIconColor()\">{{ icon() }}</fw-icon>\n}\n\n@if (title()) {\n <h3>{{ title() }}</h3>\n}\n\n@if (description()) {\n <p class=\"vision-p3\">{{ description() }}</p>\n} @else {\n <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}\n"] }]
|
|
453
|
+
}], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
|
|
456
454
|
|
|
457
455
|
/**
|
|
458
456
|
* Layout component for a 12-column responsive grid container
|