@flywheel-io/vision 21.2.1 → 21.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -556,11 +556,11 @@ class FwLayoutPanelComponent {
556
556
  this.padded = input(true, ...(ngDevMode ? [{ debugName: "padded" }] : /* istanbul ignore next */ []));
557
557
  }
558
558
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwLayoutPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
559
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: FwLayoutPanelComponent, isStandalone: true, selector: "fw-layout-panel", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fitted: { classPropertyName: "fitted", publicName: "fitted", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<main\n [ngClass]=\"[fitted() ? 'fitted' : '', margin() ? 'margin' : '', rounded() ? 'rounded' : '', 'border-' + border()]\"\n [ngStyle]=\"{ height: height() }\"\n>\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded() ? 'padded' : '']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:16px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header :first-child{flex:1;margin:0;overflow:hidden}main article{flex-grow:1;overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
559
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: FwLayoutPanelComponent, isStandalone: true, selector: "fw-layout-panel", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fitted: { classPropertyName: "fitted", publicName: "fitted", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<main\n [ngClass]=\"[fitted() ? 'fitted' : '', margin() ? 'margin' : '', rounded() ? 'rounded' : '', 'border-' + border()]\"\n [ngStyle]=\"{ height: height() }\"\n>\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded() ? 'padded' : '']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:16px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header>:first-child{flex:1;margin:0;overflow:hidden}main article{flex-grow:1;overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
560
560
  }
561
561
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwLayoutPanelComponent, decorators: [{
562
562
  type: Component,
563
- args: [{ selector: 'fw-layout-panel', encapsulation: ViewEncapsulation.None, imports: [NgClass, NgStyle], template: "<main\n [ngClass]=\"[fitted() ? 'fitted' : '', margin() ? 'margin' : '', rounded() ? 'rounded' : '', 'border-' + border()]\"\n [ngStyle]=\"{ height: height() }\"\n>\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded() ? 'padded' : '']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:16px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header :first-child{flex:1;margin:0;overflow:hidden}main article{flex-grow:1;overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"] }]
563
+ args: [{ selector: 'fw-layout-panel', encapsulation: ViewEncapsulation.None, imports: [NgClass, NgStyle], template: "<main\n [ngClass]=\"[fitted() ? 'fitted' : '', margin() ? 'margin' : '', rounded() ? 'rounded' : '', 'border-' + border()]\"\n [ngStyle]=\"{ height: height() }\"\n>\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded() ? 'padded' : '']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:16px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header>:first-child{flex:1;margin:0;overflow:hidden}main article{flex-grow:1;overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"] }]
564
564
  }], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], fitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitted", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }] } });
565
565
 
566
566
  /**
@@ -2891,7 +2891,7 @@ class FwContainedInputComponent {
2891
2891
  useExisting: FwContainedInputComponent,
2892
2892
  multi: true,
2893
2893
  },
2894
- ], ngImport: i0, template: "<div class=\"heading-area\">\n <ng-content select=\"fw-avatar\"></ng-content>\n <div>\n <h4 class=\"vision-h4 section-heading\">\n {{ title() }}\n @if (status()) {\n <span class=\"status\">{{ status().toUpperCase() }}</span>\n }\n <ng-content select=\"fw-icon\"></ng-content>\n </h4>\n @if (description()) {\n <p class=\"vision-p3\">{{ description() }}</p>\n }\n </div>\n</div>\n<div class=\"input-content\">\n @if (inputVariant() === 'switch') {\n <fw-switch [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-switch>\n }\n @if (inputVariant() === 'checkbox') {\n <fw-checkbox [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-checkbox>\n }\n</div>\n", styles: [":host{display:flex;flex:1;justify-content:space-between;align-items:center;gap:16px;border:1px var(--separations-base) solid;padding:16px;border-radius:8px;cursor:pointer}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start{flex-direction:row-reverse}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .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}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: FwSwitchComponent, selector: "fw-switch", inputs: ["name", "title", "titlePosition", "size", "color", "disabled", "checked", "ariaLabel"], outputs: ["disabledChange", "checkedChange", "change"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["value", "checked", "name", "disabled", "size", "color", "title", "focused", "ariaLabel"], outputs: ["checkedChange", "disabledChange", "sizeChange", "colorChange", "focusedChange", "change"] }] }); }
2894
+ ], ngImport: i0, template: "<div class=\"content\">\n <div class=\"heading-area\">\n <ng-content select=\"fw-avatar\"></ng-content>\n <div>\n <h4 class=\"vision-h4 section-heading\">\n {{ title() }}\n @if (status()) {\n <span class=\"status\">{{ status().toUpperCase() }}</span>\n }\n <ng-content select=\"fw-icon\"></ng-content>\n </h4>\n @if (description()) {\n <p class=\"vision-p3\">{{ description() }}</p>\n }\n </div>\n </div>\n <div class=\"input-content\">\n @if (inputVariant() === 'switch') {\n <fw-switch [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-switch>\n }\n @if (inputVariant() === 'checkbox') {\n <fw-checkbox [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-checkbox>\n }\n </div>\n</div>\n\n<div class=\"custom-content\" (click)=\"$event.stopPropagation()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{align-items:center;border-radius:8px;border:1px var(--separations-base) solid;cursor:pointer;display:flex;flex-direction:column;gap:16px;padding:16px}:host .content{align-items:center;display:flex;flex:1;gap:16px;justify-content:space-between;width:100%}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start .content{flex-direction:row-reverse}:host .custom-content{width:100%;cursor:auto}:host .custom-content:empty{display:none}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .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}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: FwSwitchComponent, selector: "fw-switch", inputs: ["name", "title", "titlePosition", "size", "color", "disabled", "checked", "ariaLabel"], outputs: ["disabledChange", "checkedChange", "change"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["value", "checked", "name", "disabled", "size", "color", "title", "focused", "ariaLabel"], outputs: ["checkedChange", "disabledChange", "sizeChange", "colorChange", "focusedChange", "change"] }] }); }
2895
2895
  }
2896
2896
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwContainedInputComponent, decorators: [{
2897
2897
  type: Component,
@@ -2901,7 +2901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
2901
2901
  useExisting: FwContainedInputComponent,
2902
2902
  multi: true,
2903
2903
  },
2904
- ], imports: [FwSwitchComponent, FwCheckboxComponent], template: "<div class=\"heading-area\">\n <ng-content select=\"fw-avatar\"></ng-content>\n <div>\n <h4 class=\"vision-h4 section-heading\">\n {{ title() }}\n @if (status()) {\n <span class=\"status\">{{ status().toUpperCase() }}</span>\n }\n <ng-content select=\"fw-icon\"></ng-content>\n </h4>\n @if (description()) {\n <p class=\"vision-p3\">{{ description() }}</p>\n }\n </div>\n</div>\n<div class=\"input-content\">\n @if (inputVariant() === 'switch') {\n <fw-switch [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-switch>\n }\n @if (inputVariant() === 'checkbox') {\n <fw-checkbox [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-checkbox>\n }\n</div>\n", styles: [":host{display:flex;flex:1;justify-content:space-between;align-items:center;gap:16px;border:1px var(--separations-base) solid;padding:16px;border-radius:8px;cursor:pointer}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start{flex-direction:row-reverse}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .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}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"] }]
2904
+ ], imports: [FwSwitchComponent, FwCheckboxComponent], template: "<div class=\"content\">\n <div class=\"heading-area\">\n <ng-content select=\"fw-avatar\"></ng-content>\n <div>\n <h4 class=\"vision-h4 section-heading\">\n {{ title() }}\n @if (status()) {\n <span class=\"status\">{{ status().toUpperCase() }}</span>\n }\n <ng-content select=\"fw-icon\"></ng-content>\n </h4>\n @if (description()) {\n <p class=\"vision-p3\">{{ description() }}</p>\n }\n </div>\n </div>\n <div class=\"input-content\">\n @if (inputVariant() === 'switch') {\n <fw-switch [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-switch>\n }\n @if (inputVariant() === 'checkbox') {\n <fw-checkbox [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-checkbox>\n }\n </div>\n</div>\n\n<div class=\"custom-content\" (click)=\"$event.stopPropagation()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{align-items:center;border-radius:8px;border:1px var(--separations-base) solid;cursor:pointer;display:flex;flex-direction:column;gap:16px;padding:16px}:host .content{align-items:center;display:flex;flex:1;gap:16px;justify-content:space-between;width:100%}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start .content{flex-direction:row-reverse}:host .custom-content{width:100%;cursor:auto}:host .custom-content:empty{display:none}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .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}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"] }]
2905
2905
  }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], inputPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPosition", required: false }] }], inputVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputVariant", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], change: [{
2906
2906
  type: Output
2907
2907
  }], clicked: [{