@flywheel-io/vision 21.0.0-beta.0 → 21.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, CommonModule, NgStyle, NgTemplateOutlet, SlicePipe, Location } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, input, HostBinding, ChangeDetectionStrategy, Component, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, Input, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, NgZone, untracked, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
|
|
3
|
+
import { inject, input, HostBinding, ChangeDetectionStrategy, Component, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, Input, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, contentChild, NgZone, untracked, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
|
|
4
4
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
5
5
|
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
6
6
|
import { CdkConnectedOverlay, OverlayModule, Overlay, CdkOverlayOrigin, OverlayContainer } from '@angular/cdk/overlay';
|
|
@@ -446,11 +446,11 @@ class FwGridComponent {
|
|
|
446
446
|
return ['fw-grid'].join(' ');
|
|
447
447
|
}
|
|
448
448
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
449
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: FwGridComponent, isStandalone: true, selector: "fw-grid", host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: '<ng-content select="fw-grid-item"></ng-content>', isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,.fw-grid{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-grid{display:grid;width:100%;gap:16px;grid-template-columns:repeat(12,1fr)}.fw-grid .page-light{background-color:var(--page-light)}.fw-grid .page-shaded{background-color:var(--page-shaded)}.fw-grid .card-header{background-color:var(--card-header)}.fw-grid .card-background{background-color:var(--card-background)}.fw-grid .grid-item-padded{padding:16px}.fw-grid .grid-item-rounded{border-radius:8px}.fw-grid .fw-grid-col-1{grid-column:span 1/auto}.fw-grid .fw-grid-col-2{grid-column:span 2/auto}.fw-grid .fw-grid-col-3{grid-column:span 3/auto}.fw-grid .fw-grid-col-4{grid-column:span 4/auto}.fw-grid .fw-grid-col-5{grid-column:span 5/auto}.fw-grid .fw-grid-col-6{grid-column:span 6/auto}.fw-grid .fw-grid-col-7{grid-column:span 7/auto}.fw-grid .fw-grid-col-8{grid-column:span 8/auto}.fw-grid .fw-grid-col-9{grid-column:span 9/auto}.fw-grid .fw-grid-col-10{grid-column:span 10/auto}.fw-grid .fw-grid-col-11{grid-column:span 11/auto}.fw-grid .fw-grid-col-12{grid-column:span 12/auto}@media only screen and (
|
|
449
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: FwGridComponent, isStandalone: true, selector: "fw-grid", host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: '<ng-content select="fw-grid-item"></ng-content>', isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,.fw-grid{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-grid{display:grid;width:100%;gap:16px;grid-template-columns:repeat(12,1fr)}.fw-grid .page-light{background-color:var(--page-light)}.fw-grid .page-shaded{background-color:var(--page-shaded)}.fw-grid .card-header{background-color:var(--card-header)}.fw-grid .card-background{background-color:var(--card-background)}.fw-grid .grid-item-padded{padding:16px}.fw-grid .grid-item-rounded{border-radius:8px}.fw-grid .fw-grid-col-1{grid-column:span 1/auto}.fw-grid .fw-grid-col-2{grid-column:span 2/auto}.fw-grid .fw-grid-col-3{grid-column:span 3/auto}.fw-grid .fw-grid-col-4{grid-column:span 4/auto}.fw-grid .fw-grid-col-5{grid-column:span 5/auto}.fw-grid .fw-grid-col-6{grid-column:span 6/auto}.fw-grid .fw-grid-col-7{grid-column:span 7/auto}.fw-grid .fw-grid-col-8{grid-column:span 8/auto}.fw-grid .fw-grid-col-9{grid-column:span 9/auto}.fw-grid .fw-grid-col-10{grid-column:span 10/auto}.fw-grid .fw-grid-col-11{grid-column:span 11/auto}.fw-grid .fw-grid-col-12{grid-column:span 12/auto}@media only screen and (width>=576px){.fw-grid-col-sm-1{grid-column:span 1/auto!important}.fw-grid-col-sm-2{grid-column:span 2/auto!important}.fw-grid-col-sm-3{grid-column:span 3/auto!important}.fw-grid-col-sm-4{grid-column:span 4/auto!important}.fw-grid-col-sm-5{grid-column:span 5/auto!important}.fw-grid-col-sm-6{grid-column:span 6/auto!important}.fw-grid-col-sm-7{grid-column:span 7/auto!important}.fw-grid-col-sm-8{grid-column:span 8/auto!important}.fw-grid-col-sm-9{grid-column:span 9/auto!important}.fw-grid-col-sm-10{grid-column:span 10/auto!important}.fw-grid-col-sm-11{grid-column:span 11/auto!important}.fw-grid-col-sm-12{grid-column:span 12/auto!important}}@media only screen and (width>=768px){.fw-grid-col-md-1{grid-column:span 1/auto!important}.fw-grid-col-md-2{grid-column:span 2/auto!important}.fw-grid-col-md-3{grid-column:span 3/auto!important}.fw-grid-col-md-4{grid-column:span 4/auto!important}.fw-grid-col-md-5{grid-column:span 5/auto!important}.fw-grid-col-md-6{grid-column:span 6/auto!important}.fw-grid-col-md-7{grid-column:span 7/auto!important}.fw-grid-col-md-8{grid-column:span 8/auto!important}.fw-grid-col-md-9{grid-column:span 9/auto!important}.fw-grid-col-md-10{grid-column:span 10/auto!important}.fw-grid-col-md-11{grid-column:span 11/auto!important}.fw-grid-col-md-12{grid-column:span 12/auto!important}}@media only screen and (width>=992px){.fw-grid-col-lg-1{grid-column:span 1/auto!important}.fw-grid-col-lg-2{grid-column:span 2/auto!important}.fw-grid-col-lg-3{grid-column:span 3/auto!important}.fw-grid-col-lg-4{grid-column:span 4/auto!important}.fw-grid-col-lg-5{grid-column:span 5/auto!important}.fw-grid-col-lg-6{grid-column:span 6/auto!important}.fw-grid-col-lg-7{grid-column:span 7/auto!important}.fw-grid-col-lg-8{grid-column:span 8/auto!important}.fw-grid-col-lg-9{grid-column:span 9/auto!important}.fw-grid-col-lg-10{grid-column:span 10/auto!important}.fw-grid-col-lg-11{grid-column:span 11/auto!important}.fw-grid-col-lg-12{grid-column:span 12/auto!important}}@media only screen and (width>=1200px){.fw-grid-col-xl-1{grid-column:span 1/auto!important}.fw-grid-col-xl-2{grid-column:span 2/auto!important}.fw-grid-col-xl-3{grid-column:span 3/auto!important}.fw-grid-col-xl-4{grid-column:span 4/auto!important}.fw-grid-col-xl-5{grid-column:span 5/auto!important}.fw-grid-col-xl-6{grid-column:span 6/auto!important}.fw-grid-col-xl-7{grid-column:span 7/auto!important}.fw-grid-col-xl-8{grid-column:span 8/auto!important}.fw-grid-col-xl-9{grid-column:span 9/auto!important}.fw-grid-col-xl-10{grid-column:span 10/auto!important}.fw-grid-col-xl-11{grid-column:span 11/auto!important}.fw-grid-col-xl-12{grid-column:span 12/auto!important}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
450
450
|
}
|
|
451
451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwGridComponent, decorators: [{
|
|
452
452
|
type: Component,
|
|
453
|
-
args: [{ selector: 'fw-grid', template: '<ng-content select="fw-grid-item"></ng-content>', encapsulation: ViewEncapsulation.None, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,.fw-grid{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-grid{display:grid;width:100%;gap:16px;grid-template-columns:repeat(12,1fr)}.fw-grid .page-light{background-color:var(--page-light)}.fw-grid .page-shaded{background-color:var(--page-shaded)}.fw-grid .card-header{background-color:var(--card-header)}.fw-grid .card-background{background-color:var(--card-background)}.fw-grid .grid-item-padded{padding:16px}.fw-grid .grid-item-rounded{border-radius:8px}.fw-grid .fw-grid-col-1{grid-column:span 1/auto}.fw-grid .fw-grid-col-2{grid-column:span 2/auto}.fw-grid .fw-grid-col-3{grid-column:span 3/auto}.fw-grid .fw-grid-col-4{grid-column:span 4/auto}.fw-grid .fw-grid-col-5{grid-column:span 5/auto}.fw-grid .fw-grid-col-6{grid-column:span 6/auto}.fw-grid .fw-grid-col-7{grid-column:span 7/auto}.fw-grid .fw-grid-col-8{grid-column:span 8/auto}.fw-grid .fw-grid-col-9{grid-column:span 9/auto}.fw-grid .fw-grid-col-10{grid-column:span 10/auto}.fw-grid .fw-grid-col-11{grid-column:span 11/auto}.fw-grid .fw-grid-col-12{grid-column:span 12/auto}@media only screen and (
|
|
453
|
+
args: [{ selector: 'fw-grid', template: '<ng-content select="fw-grid-item"></ng-content>', encapsulation: ViewEncapsulation.None, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,.fw-grid{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-grid{display:grid;width:100%;gap:16px;grid-template-columns:repeat(12,1fr)}.fw-grid .page-light{background-color:var(--page-light)}.fw-grid .page-shaded{background-color:var(--page-shaded)}.fw-grid .card-header{background-color:var(--card-header)}.fw-grid .card-background{background-color:var(--card-background)}.fw-grid .grid-item-padded{padding:16px}.fw-grid .grid-item-rounded{border-radius:8px}.fw-grid .fw-grid-col-1{grid-column:span 1/auto}.fw-grid .fw-grid-col-2{grid-column:span 2/auto}.fw-grid .fw-grid-col-3{grid-column:span 3/auto}.fw-grid .fw-grid-col-4{grid-column:span 4/auto}.fw-grid .fw-grid-col-5{grid-column:span 5/auto}.fw-grid .fw-grid-col-6{grid-column:span 6/auto}.fw-grid .fw-grid-col-7{grid-column:span 7/auto}.fw-grid .fw-grid-col-8{grid-column:span 8/auto}.fw-grid .fw-grid-col-9{grid-column:span 9/auto}.fw-grid .fw-grid-col-10{grid-column:span 10/auto}.fw-grid .fw-grid-col-11{grid-column:span 11/auto}.fw-grid .fw-grid-col-12{grid-column:span 12/auto}@media only screen and (width>=576px){.fw-grid-col-sm-1{grid-column:span 1/auto!important}.fw-grid-col-sm-2{grid-column:span 2/auto!important}.fw-grid-col-sm-3{grid-column:span 3/auto!important}.fw-grid-col-sm-4{grid-column:span 4/auto!important}.fw-grid-col-sm-5{grid-column:span 5/auto!important}.fw-grid-col-sm-6{grid-column:span 6/auto!important}.fw-grid-col-sm-7{grid-column:span 7/auto!important}.fw-grid-col-sm-8{grid-column:span 8/auto!important}.fw-grid-col-sm-9{grid-column:span 9/auto!important}.fw-grid-col-sm-10{grid-column:span 10/auto!important}.fw-grid-col-sm-11{grid-column:span 11/auto!important}.fw-grid-col-sm-12{grid-column:span 12/auto!important}}@media only screen and (width>=768px){.fw-grid-col-md-1{grid-column:span 1/auto!important}.fw-grid-col-md-2{grid-column:span 2/auto!important}.fw-grid-col-md-3{grid-column:span 3/auto!important}.fw-grid-col-md-4{grid-column:span 4/auto!important}.fw-grid-col-md-5{grid-column:span 5/auto!important}.fw-grid-col-md-6{grid-column:span 6/auto!important}.fw-grid-col-md-7{grid-column:span 7/auto!important}.fw-grid-col-md-8{grid-column:span 8/auto!important}.fw-grid-col-md-9{grid-column:span 9/auto!important}.fw-grid-col-md-10{grid-column:span 10/auto!important}.fw-grid-col-md-11{grid-column:span 11/auto!important}.fw-grid-col-md-12{grid-column:span 12/auto!important}}@media only screen and (width>=992px){.fw-grid-col-lg-1{grid-column:span 1/auto!important}.fw-grid-col-lg-2{grid-column:span 2/auto!important}.fw-grid-col-lg-3{grid-column:span 3/auto!important}.fw-grid-col-lg-4{grid-column:span 4/auto!important}.fw-grid-col-lg-5{grid-column:span 5/auto!important}.fw-grid-col-lg-6{grid-column:span 6/auto!important}.fw-grid-col-lg-7{grid-column:span 7/auto!important}.fw-grid-col-lg-8{grid-column:span 8/auto!important}.fw-grid-col-lg-9{grid-column:span 9/auto!important}.fw-grid-col-lg-10{grid-column:span 10/auto!important}.fw-grid-col-lg-11{grid-column:span 11/auto!important}.fw-grid-col-lg-12{grid-column:span 12/auto!important}}@media only screen and (width>=1200px){.fw-grid-col-xl-1{grid-column:span 1/auto!important}.fw-grid-col-xl-2{grid-column:span 2/auto!important}.fw-grid-col-xl-3{grid-column:span 3/auto!important}.fw-grid-col-xl-4{grid-column:span 4/auto!important}.fw-grid-col-xl-5{grid-column:span 5/auto!important}.fw-grid-col-xl-6{grid-column:span 6/auto!important}.fw-grid-col-xl-7{grid-column:span 7/auto!important}.fw-grid-col-xl-8{grid-column:span 8/auto!important}.fw-grid-col-xl-9{grid-column:span 9/auto!important}.fw-grid-col-xl-10{grid-column:span 10/auto!important}.fw-grid-col-xl-11{grid-column:span 11/auto!important}.fw-grid-col-xl-12{grid-column:span 12/auto!important}}\n"] }]
|
|
454
454
|
}], propDecorators: { cssClass: [{
|
|
455
455
|
type: HostBinding,
|
|
456
456
|
args: ['class']
|
|
@@ -485,11 +485,11 @@ class FwGridItemComponent {
|
|
|
485
485
|
.join(' ');
|
|
486
486
|
}
|
|
487
487
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwGridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
488
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: FwGridItemComponent, isStandalone: true, selector: "fw-grid-item", inputs: { cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,.fw-grid{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-grid{display:grid;width:100%;gap:16px;grid-template-columns:repeat(12,1fr)}.fw-grid .page-light{background-color:var(--page-light)}.fw-grid .page-shaded{background-color:var(--page-shaded)}.fw-grid .card-header{background-color:var(--card-header)}.fw-grid .card-background{background-color:var(--card-background)}.fw-grid .grid-item-padded{padding:16px}.fw-grid .grid-item-rounded{border-radius:8px}.fw-grid .fw-grid-col-1{grid-column:span 1/auto}.fw-grid .fw-grid-col-2{grid-column:span 2/auto}.fw-grid .fw-grid-col-3{grid-column:span 3/auto}.fw-grid .fw-grid-col-4{grid-column:span 4/auto}.fw-grid .fw-grid-col-5{grid-column:span 5/auto}.fw-grid .fw-grid-col-6{grid-column:span 6/auto}.fw-grid .fw-grid-col-7{grid-column:span 7/auto}.fw-grid .fw-grid-col-8{grid-column:span 8/auto}.fw-grid .fw-grid-col-9{grid-column:span 9/auto}.fw-grid .fw-grid-col-10{grid-column:span 10/auto}.fw-grid .fw-grid-col-11{grid-column:span 11/auto}.fw-grid .fw-grid-col-12{grid-column:span 12/auto}@media only screen and (
|
|
488
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: FwGridItemComponent, isStandalone: true, selector: "fw-grid-item", inputs: { cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,.fw-grid{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-grid{display:grid;width:100%;gap:16px;grid-template-columns:repeat(12,1fr)}.fw-grid .page-light{background-color:var(--page-light)}.fw-grid .page-shaded{background-color:var(--page-shaded)}.fw-grid .card-header{background-color:var(--card-header)}.fw-grid .card-background{background-color:var(--card-background)}.fw-grid .grid-item-padded{padding:16px}.fw-grid .grid-item-rounded{border-radius:8px}.fw-grid .fw-grid-col-1{grid-column:span 1/auto}.fw-grid .fw-grid-col-2{grid-column:span 2/auto}.fw-grid .fw-grid-col-3{grid-column:span 3/auto}.fw-grid .fw-grid-col-4{grid-column:span 4/auto}.fw-grid .fw-grid-col-5{grid-column:span 5/auto}.fw-grid .fw-grid-col-6{grid-column:span 6/auto}.fw-grid .fw-grid-col-7{grid-column:span 7/auto}.fw-grid .fw-grid-col-8{grid-column:span 8/auto}.fw-grid .fw-grid-col-9{grid-column:span 9/auto}.fw-grid .fw-grid-col-10{grid-column:span 10/auto}.fw-grid .fw-grid-col-11{grid-column:span 11/auto}.fw-grid .fw-grid-col-12{grid-column:span 12/auto}@media only screen and (width>=576px){.fw-grid-col-sm-1{grid-column:span 1/auto!important}.fw-grid-col-sm-2{grid-column:span 2/auto!important}.fw-grid-col-sm-3{grid-column:span 3/auto!important}.fw-grid-col-sm-4{grid-column:span 4/auto!important}.fw-grid-col-sm-5{grid-column:span 5/auto!important}.fw-grid-col-sm-6{grid-column:span 6/auto!important}.fw-grid-col-sm-7{grid-column:span 7/auto!important}.fw-grid-col-sm-8{grid-column:span 8/auto!important}.fw-grid-col-sm-9{grid-column:span 9/auto!important}.fw-grid-col-sm-10{grid-column:span 10/auto!important}.fw-grid-col-sm-11{grid-column:span 11/auto!important}.fw-grid-col-sm-12{grid-column:span 12/auto!important}}@media only screen and (width>=768px){.fw-grid-col-md-1{grid-column:span 1/auto!important}.fw-grid-col-md-2{grid-column:span 2/auto!important}.fw-grid-col-md-3{grid-column:span 3/auto!important}.fw-grid-col-md-4{grid-column:span 4/auto!important}.fw-grid-col-md-5{grid-column:span 5/auto!important}.fw-grid-col-md-6{grid-column:span 6/auto!important}.fw-grid-col-md-7{grid-column:span 7/auto!important}.fw-grid-col-md-8{grid-column:span 8/auto!important}.fw-grid-col-md-9{grid-column:span 9/auto!important}.fw-grid-col-md-10{grid-column:span 10/auto!important}.fw-grid-col-md-11{grid-column:span 11/auto!important}.fw-grid-col-md-12{grid-column:span 12/auto!important}}@media only screen and (width>=992px){.fw-grid-col-lg-1{grid-column:span 1/auto!important}.fw-grid-col-lg-2{grid-column:span 2/auto!important}.fw-grid-col-lg-3{grid-column:span 3/auto!important}.fw-grid-col-lg-4{grid-column:span 4/auto!important}.fw-grid-col-lg-5{grid-column:span 5/auto!important}.fw-grid-col-lg-6{grid-column:span 6/auto!important}.fw-grid-col-lg-7{grid-column:span 7/auto!important}.fw-grid-col-lg-8{grid-column:span 8/auto!important}.fw-grid-col-lg-9{grid-column:span 9/auto!important}.fw-grid-col-lg-10{grid-column:span 10/auto!important}.fw-grid-col-lg-11{grid-column:span 11/auto!important}.fw-grid-col-lg-12{grid-column:span 12/auto!important}}@media only screen and (width>=1200px){.fw-grid-col-xl-1{grid-column:span 1/auto!important}.fw-grid-col-xl-2{grid-column:span 2/auto!important}.fw-grid-col-xl-3{grid-column:span 3/auto!important}.fw-grid-col-xl-4{grid-column:span 4/auto!important}.fw-grid-col-xl-5{grid-column:span 5/auto!important}.fw-grid-col-xl-6{grid-column:span 6/auto!important}.fw-grid-col-xl-7{grid-column:span 7/auto!important}.fw-grid-col-xl-8{grid-column:span 8/auto!important}.fw-grid-col-xl-9{grid-column:span 9/auto!important}.fw-grid-col-xl-10{grid-column:span 10/auto!important}.fw-grid-col-xl-11{grid-column:span 11/auto!important}.fw-grid-col-xl-12{grid-column:span 12/auto!important}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
489
489
|
}
|
|
490
490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwGridItemComponent, decorators: [{
|
|
491
491
|
type: Component,
|
|
492
|
-
args: [{ selector: 'fw-grid-item', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,.fw-grid{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-grid{display:grid;width:100%;gap:16px;grid-template-columns:repeat(12,1fr)}.fw-grid .page-light{background-color:var(--page-light)}.fw-grid .page-shaded{background-color:var(--page-shaded)}.fw-grid .card-header{background-color:var(--card-header)}.fw-grid .card-background{background-color:var(--card-background)}.fw-grid .grid-item-padded{padding:16px}.fw-grid .grid-item-rounded{border-radius:8px}.fw-grid .fw-grid-col-1{grid-column:span 1/auto}.fw-grid .fw-grid-col-2{grid-column:span 2/auto}.fw-grid .fw-grid-col-3{grid-column:span 3/auto}.fw-grid .fw-grid-col-4{grid-column:span 4/auto}.fw-grid .fw-grid-col-5{grid-column:span 5/auto}.fw-grid .fw-grid-col-6{grid-column:span 6/auto}.fw-grid .fw-grid-col-7{grid-column:span 7/auto}.fw-grid .fw-grid-col-8{grid-column:span 8/auto}.fw-grid .fw-grid-col-9{grid-column:span 9/auto}.fw-grid .fw-grid-col-10{grid-column:span 10/auto}.fw-grid .fw-grid-col-11{grid-column:span 11/auto}.fw-grid .fw-grid-col-12{grid-column:span 12/auto}@media only screen and (
|
|
492
|
+
args: [{ selector: 'fw-grid-item', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,.fw-grid{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-grid{display:grid;width:100%;gap:16px;grid-template-columns:repeat(12,1fr)}.fw-grid .page-light{background-color:var(--page-light)}.fw-grid .page-shaded{background-color:var(--page-shaded)}.fw-grid .card-header{background-color:var(--card-header)}.fw-grid .card-background{background-color:var(--card-background)}.fw-grid .grid-item-padded{padding:16px}.fw-grid .grid-item-rounded{border-radius:8px}.fw-grid .fw-grid-col-1{grid-column:span 1/auto}.fw-grid .fw-grid-col-2{grid-column:span 2/auto}.fw-grid .fw-grid-col-3{grid-column:span 3/auto}.fw-grid .fw-grid-col-4{grid-column:span 4/auto}.fw-grid .fw-grid-col-5{grid-column:span 5/auto}.fw-grid .fw-grid-col-6{grid-column:span 6/auto}.fw-grid .fw-grid-col-7{grid-column:span 7/auto}.fw-grid .fw-grid-col-8{grid-column:span 8/auto}.fw-grid .fw-grid-col-9{grid-column:span 9/auto}.fw-grid .fw-grid-col-10{grid-column:span 10/auto}.fw-grid .fw-grid-col-11{grid-column:span 11/auto}.fw-grid .fw-grid-col-12{grid-column:span 12/auto}@media only screen and (width>=576px){.fw-grid-col-sm-1{grid-column:span 1/auto!important}.fw-grid-col-sm-2{grid-column:span 2/auto!important}.fw-grid-col-sm-3{grid-column:span 3/auto!important}.fw-grid-col-sm-4{grid-column:span 4/auto!important}.fw-grid-col-sm-5{grid-column:span 5/auto!important}.fw-grid-col-sm-6{grid-column:span 6/auto!important}.fw-grid-col-sm-7{grid-column:span 7/auto!important}.fw-grid-col-sm-8{grid-column:span 8/auto!important}.fw-grid-col-sm-9{grid-column:span 9/auto!important}.fw-grid-col-sm-10{grid-column:span 10/auto!important}.fw-grid-col-sm-11{grid-column:span 11/auto!important}.fw-grid-col-sm-12{grid-column:span 12/auto!important}}@media only screen and (width>=768px){.fw-grid-col-md-1{grid-column:span 1/auto!important}.fw-grid-col-md-2{grid-column:span 2/auto!important}.fw-grid-col-md-3{grid-column:span 3/auto!important}.fw-grid-col-md-4{grid-column:span 4/auto!important}.fw-grid-col-md-5{grid-column:span 5/auto!important}.fw-grid-col-md-6{grid-column:span 6/auto!important}.fw-grid-col-md-7{grid-column:span 7/auto!important}.fw-grid-col-md-8{grid-column:span 8/auto!important}.fw-grid-col-md-9{grid-column:span 9/auto!important}.fw-grid-col-md-10{grid-column:span 10/auto!important}.fw-grid-col-md-11{grid-column:span 11/auto!important}.fw-grid-col-md-12{grid-column:span 12/auto!important}}@media only screen and (width>=992px){.fw-grid-col-lg-1{grid-column:span 1/auto!important}.fw-grid-col-lg-2{grid-column:span 2/auto!important}.fw-grid-col-lg-3{grid-column:span 3/auto!important}.fw-grid-col-lg-4{grid-column:span 4/auto!important}.fw-grid-col-lg-5{grid-column:span 5/auto!important}.fw-grid-col-lg-6{grid-column:span 6/auto!important}.fw-grid-col-lg-7{grid-column:span 7/auto!important}.fw-grid-col-lg-8{grid-column:span 8/auto!important}.fw-grid-col-lg-9{grid-column:span 9/auto!important}.fw-grid-col-lg-10{grid-column:span 10/auto!important}.fw-grid-col-lg-11{grid-column:span 11/auto!important}.fw-grid-col-lg-12{grid-column:span 12/auto!important}}@media only screen and (width>=1200px){.fw-grid-col-xl-1{grid-column:span 1/auto!important}.fw-grid-col-xl-2{grid-column:span 2/auto!important}.fw-grid-col-xl-3{grid-column:span 3/auto!important}.fw-grid-col-xl-4{grid-column:span 4/auto!important}.fw-grid-col-xl-5{grid-column:span 5/auto!important}.fw-grid-col-xl-6{grid-column:span 6/auto!important}.fw-grid-col-xl-7{grid-column:span 7/auto!important}.fw-grid-col-xl-8{grid-column:span 8/auto!important}.fw-grid-col-xl-9{grid-column:span 9/auto!important}.fw-grid-col-xl-10{grid-column:span 10/auto!important}.fw-grid-col-xl-11{grid-column:span 11/auto!important}.fw-grid-col-xl-12{grid-column:span 12/auto!important}}\n"] }]
|
|
493
493
|
}], propDecorators: { cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cssClass: [{
|
|
494
494
|
type: HostBinding,
|
|
495
495
|
args: ['class']
|
|
@@ -3090,11 +3090,11 @@ class FwDialogComponent {
|
|
|
3090
3090
|
}, 300);
|
|
3091
3091
|
}
|
|
3092
3092
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3093
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwDialogComponent, isStandalone: true, selector: "fw-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", 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 }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, externalClasses: { classPropertyName: "externalClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { properties: { "attr.title": "this.hostTitle", "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n @if (showClose()) {\n <fw-icon-button tabindex=\"-1\" icon=\"close\" color=\"slate\" (click)=\"handleCloseButton()\"> </fw-icon-button>\n }\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n @if (title()) {\n <div class=\"dialog-title\">\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\">{{ icon() }}</fw-icon>\n }\n <h3 class=\"vision-h3\">{{ title() }}</h3>\n </div>\n }\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\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;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (
|
|
3093
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwDialogComponent, isStandalone: true, selector: "fw-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", 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 }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, externalClasses: { classPropertyName: "externalClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { properties: { "attr.title": "this.hostTitle", "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n @if (showClose()) {\n <fw-icon-button tabindex=\"-1\" icon=\"close\" color=\"slate\" (click)=\"handleCloseButton()\"> </fw-icon-button>\n }\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n @if (title()) {\n <div class=\"dialog-title\">\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\">{{ icon() }}</fw-icon>\n }\n <h3 class=\"vision-h3\">{{ title() }}</h3>\n </div>\n }\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\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;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width<=575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width>=576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width>=768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width>=992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width>=1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
3094
3094
|
}
|
|
3095
3095
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwDialogComponent, decorators: [{
|
|
3096
3096
|
type: Component,
|
|
3097
|
-
args: [{ selector: 'fw-dialog', imports: [FwIconButtonComponent, FwIconComponent], template: "<div class=\"fw-dialog\">\n @if (showClose()) {\n <fw-icon-button tabindex=\"-1\" icon=\"close\" color=\"slate\" (click)=\"handleCloseButton()\"> </fw-icon-button>\n }\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n @if (title()) {\n <div class=\"dialog-title\">\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\">{{ icon() }}</fw-icon>\n }\n <h3 class=\"vision-h3\">{{ title() }}</h3>\n </div>\n }\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\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;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (
|
|
3097
|
+
args: [{ selector: 'fw-dialog', imports: [FwIconButtonComponent, FwIconComponent], template: "<div class=\"fw-dialog\">\n @if (showClose()) {\n <fw-icon-button tabindex=\"-1\" icon=\"close\" color=\"slate\" (click)=\"handleCloseButton()\"> </fw-icon-button>\n }\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n @if (title()) {\n <div class=\"dialog-title\">\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\">{{ icon() }}</fw-icon>\n }\n <h3 class=\"vision-h3\">{{ title() }}</h3>\n </div>\n }\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\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;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width<=575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width>=576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width>=768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width>=992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width>=1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"] }]
|
|
3098
3098
|
}], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], externalClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], close: [{
|
|
3099
3099
|
type: Output
|
|
3100
3100
|
}], hostTitle: [{
|
|
@@ -3265,16 +3265,16 @@ class FwDialogConfirmComponent {
|
|
|
3265
3265
|
this.dialogRef = inject(DialogRef, { optional: true });
|
|
3266
3266
|
this.elementRef = inject(ElementRef);
|
|
3267
3267
|
this.title = input('Confirm', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3268
|
-
this.icon = input(
|
|
3268
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
3269
3269
|
this.iconColor = input('primary', ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
|
|
3270
3270
|
this.confirmColor = input('primary', ...(ngDevMode ? [{ debugName: "confirmColor" }] : /* istanbul ignore next */ []));
|
|
3271
3271
|
this.cancelColor = input('slate', ...(ngDevMode ? [{ debugName: "cancelColor" }] : /* istanbul ignore next */ []));
|
|
3272
3272
|
this.confirmButtonText = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmButtonText" }] : /* istanbul ignore next */ []));
|
|
3273
3273
|
this.confirmButtonIcon = input('done-check', ...(ngDevMode ? [{ debugName: "confirmButtonIcon" }] : /* istanbul ignore next */ []));
|
|
3274
3274
|
this.cancelButtonText = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelButtonText" }] : /* istanbul ignore next */ []));
|
|
3275
|
-
this.contentIcon = input(
|
|
3275
|
+
this.contentIcon = input('', ...(ngDevMode ? [{ debugName: "contentIcon" }] : /* istanbul ignore next */ []));
|
|
3276
3276
|
this.contentTitle = input('Are you sure?', ...(ngDevMode ? [{ debugName: "contentTitle" }] : /* istanbul ignore next */ []));
|
|
3277
|
-
this.contentText = input(
|
|
3277
|
+
this.contentText = input('', ...(ngDevMode ? [{ debugName: "contentText" }] : /* istanbul ignore next */ []));
|
|
3278
3278
|
this.showConfirmButtonIcon = input(true, ...(ngDevMode ? [{ debugName: "showConfirmButtonIcon" }] : /* istanbul ignore next */ []));
|
|
3279
3279
|
this.showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
|
|
3280
3280
|
this.width = input('extra-small', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
@@ -4270,41 +4270,28 @@ class FwMenuItemComponent {
|
|
|
4270
4270
|
evt.stopPropagation();
|
|
4271
4271
|
}
|
|
4272
4272
|
}
|
|
4273
|
-
/**
|
|
4274
|
-
* stops the browser built-in tooltip from showing up
|
|
4275
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title
|
|
4276
|
-
*/
|
|
4277
|
-
get attrTitle() {
|
|
4278
|
-
return '';
|
|
4279
|
-
}
|
|
4280
4273
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4281
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwMenuItemComponent, isStandalone: true, selector: "fw-menu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkboxColor: { classPropertyName: "checkboxColor", publicName: "checkboxColor", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: true, isRequired: false, transformFunction: null }, mouseEnterHandler: { classPropertyName: "mouseEnterHandler", publicName: "mouseEnterHandler", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", disabled: "disabledChange", showCheckbox: "showCheckboxChange", multiSelect: "multiSelectChange", hidden: "hiddenChange", subItemsOpen: "subItemsOpenChange", mouseEnterHandler: "mouseEnterHandlerChange", click: "click", focused: "focusedChange", selected: "selectedChange" }, host: { listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.focused": "focused()", "
|
|
4274
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwMenuItemComponent, isStandalone: true, selector: "fw-menu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkboxColor: { classPropertyName: "checkboxColor", publicName: "checkboxColor", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: true, isRequired: false, transformFunction: null }, mouseEnterHandler: { classPropertyName: "mouseEnterHandler", publicName: "mouseEnterHandler", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", disabled: "disabledChange", showCheckbox: "showCheckboxChange", multiSelect: "multiSelectChange", hidden: "hiddenChange", subItemsOpen: "subItemsOpenChange", mouseEnterHandler: "mouseEnterHandlerChange", click: "click", focused: "focusedChange", selected: "selectedChange" }, host: { attributes: { "attr.title": "" }, listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.focused": "focused()", "class.collapsed": "collapsed()", "class.selected": "selected()", "class.disabled": "disabled()", "class.multi-select": "multiSelect()", "hidden": "hidden()" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\">\n <div [ngClass]=\"['menu-item', 'size-' + size(), disabled() ? 'disabled' : '']\" [class.disabled]=\"disabled()\">\n @if (showCheckbox() && multiSelect()) {\n <div class=\"item-checkbox\">\n <fw-checkbox [disabled]=\"disabled()\" [color]=\"checkboxColor()\" [checked]=\"selected()\"> </fw-checkbox>\n </div>\n }\n @if (showCheckbox() && !multiSelect()) {\n <div class=\"item-radiobutton\">\n <fw-radio-button [value]=\"value()\" [color]=\"checkboxColor()\" [disabled]=\"disabled()\" [checked]=\"selected()\">\n </fw-radio-button>\n </div>\n }\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\" class=\"menu-icon {{ iconColor() }}\">{{ icon() }}</fw-icon>\n }\n <ng-content select=\"fw-avatar\"></ng-content>\n @if (title()) {\n <div class=\"menu-text\">\n <h4 class=\"vision-h4\">{{ title() }}</h4>\n @if (description()) {\n <p class=\"vision-p4 description\">{{ description() }}</p>\n }\n </div>\n }\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 @if (subItems.length > 0) {\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen() ? 'chevron-up' : 'chevron-down'\"\n (click)=\"toggleSubItemsView()\"\n >\n </fw-icon-button>\n }\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-context(fw-menu-item-group) div.menu-item{padding-left:16px}:host{position:relative;display:flex;flex-direction:column;scroll-margin:4px}:host[hidden]{display:none}: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;border-radius:4px;color:var(--typography-muted);min-height:40px;width:-webkit-fill-available;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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["value", "checked", "name", "disabled", "size", "color", "title", "focused"], outputs: ["checkedChange", "disabledChange", "sizeChange", "colorChange", "focusedChange", "change"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["value", "checked", "group", "disabled", "size", "color", "title", "focused"], outputs: ["checkedChange", "groupChange", "disabledChange", "sizeChange", "colorChange", "focusedChange", "change"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }] }); }
|
|
4282
4275
|
}
|
|
4283
4276
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMenuItemComponent, decorators: [{
|
|
4284
4277
|
type: Component,
|
|
4285
4278
|
args: [{ selector: 'fw-menu-item', host: {
|
|
4286
4279
|
'[class.focused]': 'focused()',
|
|
4280
|
+
'[class.collapsed]': 'collapsed()',
|
|
4281
|
+
'[class.selected]': 'selected()',
|
|
4282
|
+
'[class.disabled]': 'disabled()',
|
|
4283
|
+
'[class.multi-select]': 'multiSelect()',
|
|
4284
|
+
'[hidden]': 'hidden()',
|
|
4285
|
+
'attr.title': '', // prevent default browser tooltip from showing on hover
|
|
4287
4286
|
}, imports: [NgClass, FwCheckboxComponent, FwRadioComponent, FwIconComponent, FwIconButtonComponent], template: "<div (click)=\"handleClick($event)\">\n <div [ngClass]=\"['menu-item', 'size-' + size(), disabled() ? 'disabled' : '']\" [class.disabled]=\"disabled()\">\n @if (showCheckbox() && multiSelect()) {\n <div class=\"item-checkbox\">\n <fw-checkbox [disabled]=\"disabled()\" [color]=\"checkboxColor()\" [checked]=\"selected()\"> </fw-checkbox>\n </div>\n }\n @if (showCheckbox() && !multiSelect()) {\n <div class=\"item-radiobutton\">\n <fw-radio-button [value]=\"value()\" [color]=\"checkboxColor()\" [disabled]=\"disabled()\" [checked]=\"selected()\">\n </fw-radio-button>\n </div>\n }\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\" class=\"menu-icon {{ iconColor() }}\">{{ icon() }}</fw-icon>\n }\n <ng-content select=\"fw-avatar\"></ng-content>\n @if (title()) {\n <div class=\"menu-text\">\n <h4 class=\"vision-h4\">{{ title() }}</h4>\n @if (description()) {\n <p class=\"vision-p4 description\">{{ description() }}</p>\n }\n </div>\n }\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 @if (subItems.length > 0) {\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen() ? 'chevron-up' : 'chevron-down'\"\n (click)=\"toggleSubItemsView()\"\n >\n </fw-icon-button>\n }\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-context(fw-menu-item-group) div.menu-item{padding-left:16px}:host{position:relative;display:flex;flex-direction:column;scroll-margin:4px}:host[hidden]{display:none}: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;border-radius:4px;color:var(--typography-muted);min-height:40px;width:-webkit-fill-available;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"] }]
|
|
4288
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }, { type: i0.Output, args: ["showCheckboxChange"] }], checkboxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxColor", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }, { type: i0.Output, args: ["multiSelectChange"] }], hidden: [{
|
|
4289
|
-
type: HostBinding,
|
|
4290
|
-
args: ['hidden']
|
|
4291
|
-
}], collapsed: [{
|
|
4292
|
-
type: HostBinding,
|
|
4293
|
-
args: ['class.collapsed']
|
|
4294
|
-
}], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], subItemsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemsOpen", required: false }] }, { type: i0.Output, args: ["subItemsOpenChange"] }], mouseEnterHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "mouseEnterHandler", required: false }] }, { type: i0.Output, args: ["mouseEnterHandlerChange"] }], click: [{
|
|
4287
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }, { type: i0.Output, args: ["showCheckboxChange"] }], checkboxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxColor", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }, { type: i0.Output, args: ["multiSelectChange"] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], subItemsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemsOpen", required: false }] }, { type: i0.Output, args: ["subItemsOpenChange"] }], mouseEnterHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "mouseEnterHandler", required: false }] }, { type: i0.Output, args: ["mouseEnterHandlerChange"] }], click: [{
|
|
4295
4288
|
type: Output
|
|
4296
|
-
}], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }, { type: i0.Output, args: ["focusedChange"] }], selected: [{
|
|
4297
|
-
type: HostBinding,
|
|
4298
|
-
args: ['class.selected']
|
|
4299
|
-
}], subItems: [{
|
|
4289
|
+
}], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }, { type: i0.Output, args: ["focusedChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], subItems: [{
|
|
4300
4290
|
type: ContentChildren,
|
|
4301
4291
|
args: [FwMenuSubItemComponent]
|
|
4302
4292
|
}], onMouseEnter: [{
|
|
4303
4293
|
type: HostListener,
|
|
4304
4294
|
args: ['mouseenter', ['$event']]
|
|
4305
|
-
}], attrTitle: [{
|
|
4306
|
-
type: HostBinding,
|
|
4307
|
-
args: ['attr.title']
|
|
4308
4295
|
}] } });
|
|
4309
4296
|
|
|
4310
4297
|
/**
|
|
@@ -4601,34 +4588,32 @@ class FwTextInputComponent {
|
|
|
4601
4588
|
constructor() {
|
|
4602
4589
|
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
4603
4590
|
this.useActionableIcons = input(false, ...(ngDevMode ? [{ debugName: "useActionableIcons" }] : /* istanbul ignore next */ []));
|
|
4604
|
-
this.leftIcon = input(
|
|
4605
|
-
this.rightIcon = input(
|
|
4606
|
-
this.prefix = input(
|
|
4607
|
-
this.context = input(
|
|
4591
|
+
this.leftIcon = input(...(ngDevMode ? [undefined, { debugName: "leftIcon" }] : /* istanbul ignore next */ []));
|
|
4592
|
+
this.rightIcon = input(...(ngDevMode ? [undefined, { debugName: "rightIcon" }] : /* istanbul ignore next */ []));
|
|
4593
|
+
this.prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
4594
|
+
this.context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : /* istanbul ignore next */ []));
|
|
4608
4595
|
/**
|
|
4609
4596
|
* @deprecated please use fw-wrapped-input instead
|
|
4610
4597
|
*/
|
|
4611
|
-
this.helperText = input(
|
|
4598
|
+
this.helperText = input(...(ngDevMode ? [undefined, { debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
4612
4599
|
/**
|
|
4613
4600
|
* @deprecated please use fw-wrapped-input instead
|
|
4614
4601
|
*/
|
|
4615
|
-
this.errorText = input(
|
|
4602
|
+
this.errorText = input(...(ngDevMode ? [undefined, { debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
4616
4603
|
this.errorInIconTooltip = input(false, ...(ngDevMode ? [{ debugName: "errorInIconTooltip" }] : /* istanbul ignore next */ []));
|
|
4617
|
-
this.placeholder = input(
|
|
4618
|
-
this.readOnly = input(
|
|
4604
|
+
this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
4605
|
+
this.readOnly = input(...(ngDevMode ? [undefined, { debugName: "readOnly" }] : /* istanbul ignore next */ []));
|
|
4619
4606
|
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4620
4607
|
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
4621
4608
|
this.maxLength = input(255, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
4622
4609
|
this.autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
|
|
4623
|
-
this.autocomplete = input(
|
|
4610
|
+
this.autocomplete = input(...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
4624
4611
|
this._value = '';
|
|
4625
|
-
// we bind this to host because that's where angular form apis put the error classes
|
|
4626
|
-
// we bind this to host because that's where angular form apis put the error classes
|
|
4627
4612
|
this.error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
4628
4613
|
this.leftIconAction = new EventEmitter();
|
|
4629
4614
|
this.rightIconAction = new EventEmitter();
|
|
4615
|
+
this.contentChildInputElement = contentChild('textInput', ...(ngDevMode ? [{ debugName: "contentChildInputElement" }] : /* istanbul ignore next */ []));
|
|
4630
4616
|
this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
4631
|
-
this.externalControl = null;
|
|
4632
4617
|
this.onTouch = () => { };
|
|
4633
4618
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
4634
4619
|
this.onChange = (value) => { };
|
|
@@ -4684,13 +4669,13 @@ class FwTextInputComponent {
|
|
|
4684
4669
|
});
|
|
4685
4670
|
}
|
|
4686
4671
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4687
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwTextInputComponent, isStandalone: true, selector: "fw-text-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useActionableIcons: { classPropertyName: "useActionableIcons", publicName: "useActionableIcons", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, errorInIconTooltip: { classPropertyName: "errorInIconTooltip", publicName: "errorInIconTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", leftIconAction: "leftIconAction", rightIconAction: "rightIconAction" }, host: { properties: { "class.errored": "
|
|
4672
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwTextInputComponent, isStandalone: true, selector: "fw-text-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useActionableIcons: { classPropertyName: "useActionableIcons", publicName: "useActionableIcons", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, errorInIconTooltip: { classPropertyName: "errorInIconTooltip", publicName: "errorInIconTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", leftIconAction: "leftIconAction", rightIconAction: "rightIconAction" }, host: { properties: { "class.errored": "error()", "style.width": "this.width" } }, providers: [
|
|
4688
4673
|
{
|
|
4689
4674
|
provide: NG_VALUE_ACCESSOR,
|
|
4690
4675
|
useExisting: FwTextInputComponent,
|
|
4691
4676
|
multi: true,
|
|
4692
4677
|
},
|
|
4693
|
-
], queries: [{ propertyName: "
|
|
4678
|
+
], queries: [{ propertyName: "contentChildInputElement", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{ disabled: disabled() }\">\n <div class=\"input-container\" [class]=\"size()\">\n @if (!!leftIcon()) {\n <fw-icon\n (click)=\"useActionableIcons() ? onLeftIconClick() : null\"\n [ngClass]=\"useActionableIcons() ? 'actionable' : ''\"\n >{{ leftIcon() }}\n </fw-icon>\n }\n @if (!!prefix()) {\n <p class=\"vision-p2 context\">{{ prefix() }}</p>\n }\n\n @if (!contentChildInputElement()) {\n <input\n #input\n [type]=\"type()\"\n (input)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [attr.maxlength]=\"maxLength()\"\n [placeholder]=\"placeholder() || ''\"\n [readOnly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"autocomplete()\"\n />\n }\n <ng-content select=\"input\"></ng-content>\n @if (!!context()) {\n <p class=\"vision-p2 context\">{{ context() }}</p>\n }\n\n <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip() ? errorText() || '' : ''\">warning-circle</fw-icon>\n @if (!!rightIcon()) {\n <fw-icon\n (click)=\"useActionableIcons() ? onRightIconClick() : null\"\n [ngClass]=\"useActionableIcons() ? 'actionable' : ''\"\n >{{ rightIcon() }}\n </fw-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (!!helperText()) {\n <p class=\"vision-p4 helper-text\">{{ helperText() }}</p>\n }\n @if (!!errorText() && !errorInIconTooltip()) {\n <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
|
|
4694
4679
|
}
|
|
4695
4680
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwTextInputComponent, decorators: [{
|
|
4696
4681
|
type: Component,
|
|
@@ -4700,23 +4685,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
4700
4685
|
useExisting: FwTextInputComponent,
|
|
4701
4686
|
multi: true,
|
|
4702
4687
|
},
|
|
4703
|
-
],
|
|
4688
|
+
], host: {
|
|
4689
|
+
'[class.errored]': 'error()',
|
|
4690
|
+
}, imports: [NgClass, FwIconComponent, FwTooltipDirective], template: "<div class=\"full-container\" [ngClass]=\"{ disabled: disabled() }\">\n <div class=\"input-container\" [class]=\"size()\">\n @if (!!leftIcon()) {\n <fw-icon\n (click)=\"useActionableIcons() ? onLeftIconClick() : null\"\n [ngClass]=\"useActionableIcons() ? 'actionable' : ''\"\n >{{ leftIcon() }}\n </fw-icon>\n }\n @if (!!prefix()) {\n <p class=\"vision-p2 context\">{{ prefix() }}</p>\n }\n\n @if (!contentChildInputElement()) {\n <input\n #input\n [type]=\"type()\"\n (input)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [attr.maxlength]=\"maxLength()\"\n [placeholder]=\"placeholder() || ''\"\n [readOnly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"autocomplete()\"\n />\n }\n <ng-content select=\"input\"></ng-content>\n @if (!!context()) {\n <p class=\"vision-p2 context\">{{ context() }}</p>\n }\n\n <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip() ? errorText() || '' : ''\">warning-circle</fw-icon>\n @if (!!rightIcon()) {\n <fw-icon\n (click)=\"useActionableIcons() ? onRightIconClick() : null\"\n [ngClass]=\"useActionableIcons() ? 'actionable' : ''\"\n >{{ rightIcon() }}\n </fw-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (!!helperText()) {\n <p class=\"vision-p4 helper-text\">{{ helperText() }}</p>\n }\n @if (!!errorText() && !errorInIconTooltip()) {\n <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"] }]
|
|
4704
4691
|
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], useActionableIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "useActionableIcons", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], errorInIconTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorInIconTooltip", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], value: [{
|
|
4705
4692
|
type: Input
|
|
4706
4693
|
}], inputRef: [{
|
|
4707
4694
|
type: ViewChild,
|
|
4708
4695
|
args: ['input']
|
|
4709
|
-
}], error: [{
|
|
4710
|
-
type: HostBinding,
|
|
4711
|
-
args: ['class.errored']
|
|
4712
|
-
}], leftIconAction: [{
|
|
4696
|
+
}], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], leftIconAction: [{
|
|
4713
4697
|
type: Output
|
|
4714
4698
|
}], rightIconAction: [{
|
|
4715
4699
|
type: Output
|
|
4716
|
-
}], textInput: [{
|
|
4717
|
-
type: ContentChild,
|
|
4718
|
-
args: ['textInput', { static: false }]
|
|
4719
|
-
}], width: [{
|
|
4700
|
+
}], contentChildInputElement: [{ type: i0.ContentChild, args: ['textInput', { isSignal: true }] }], width: [{
|
|
4720
4701
|
type: HostBinding,
|
|
4721
4702
|
args: ['style.width']
|
|
4722
4703
|
}] } });
|
|
@@ -4871,6 +4852,7 @@ class FwMenuContainerComponent {
|
|
|
4871
4852
|
constructor() {
|
|
4872
4853
|
this.sanitizer = inject(DomSanitizer);
|
|
4873
4854
|
this.ngZone = inject(NgZone);
|
|
4855
|
+
this.menuWrapperRef = viewChild.required('menuWrapper', { read: HTMLElement });
|
|
4874
4856
|
this.canScrollUp = signal(false, ...(ngDevMode ? [{ debugName: "canScrollUp" }] : /* istanbul ignore next */ []));
|
|
4875
4857
|
this.canScrollDown = signal(false, ...(ngDevMode ? [{ debugName: "canScrollDown" }] : /* istanbul ignore next */ []));
|
|
4876
4858
|
this.scrollInterval = null;
|
|
@@ -4891,6 +4873,8 @@ class FwMenuContainerComponent {
|
|
|
4891
4873
|
};
|
|
4892
4874
|
this.filterFn = input(this.defaultFilterFn, ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
|
|
4893
4875
|
this.filterChanged = output();
|
|
4876
|
+
this.filterRef = viewChild('menuFilter', { ...(ngDevMode ? { debugName: "filterRef" } : /* istanbul ignore next */ {}), read: FwTextInputComponent });
|
|
4877
|
+
this.menu = contentChild(FwMenuComponent, ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
|
|
4894
4878
|
// for passing menu items for the container to filter
|
|
4895
4879
|
// works around a problem with nested content children
|
|
4896
4880
|
// @see https://stackoverflow.com/questions/62886613/angular-9-nested-ng-content-and-contentchildren
|
|
@@ -4913,7 +4897,7 @@ class FwMenuContainerComponent {
|
|
|
4913
4897
|
ngAfterViewInit() {
|
|
4914
4898
|
if (this.focusFilterOnMount() && this.showFilter()) {
|
|
4915
4899
|
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
4916
|
-
this.filterRef?.focus();
|
|
4900
|
+
this.filterRef()?.focus();
|
|
4917
4901
|
}
|
|
4918
4902
|
// Ensure filteredMenuItemChange fires on init so consumers
|
|
4919
4903
|
// that depend on it (e.g. displayedOptions) are populated
|
|
@@ -4921,7 +4905,7 @@ class FwMenuContainerComponent {
|
|
|
4921
4905
|
setTimeout(() => this.updateScrollState());
|
|
4922
4906
|
}
|
|
4923
4907
|
updateScrollState() {
|
|
4924
|
-
const el = this.menuWrapperRef
|
|
4908
|
+
const el = this.menuWrapperRef();
|
|
4925
4909
|
if (!el) {
|
|
4926
4910
|
return;
|
|
4927
4911
|
}
|
|
@@ -4934,7 +4918,7 @@ class FwMenuContainerComponent {
|
|
|
4934
4918
|
// eslint-disable-next-line @rx-angular/no-zone-run-apis
|
|
4935
4919
|
this.ngZone.runOutsideAngular(() => {
|
|
4936
4920
|
this.scrollInterval = setInterval(() => {
|
|
4937
|
-
const el = this.menuWrapperRef
|
|
4921
|
+
const el = this.menuWrapperRef();
|
|
4938
4922
|
if (el) {
|
|
4939
4923
|
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
4940
4924
|
el.scrollBy({ top: direction === 'down' ? 80 : -80 });
|
|
@@ -4981,21 +4965,12 @@ class FwMenuContainerComponent {
|
|
|
4981
4965
|
setTimeout(() => this.updateScrollState());
|
|
4982
4966
|
}
|
|
4983
4967
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMenuContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4984
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwMenuContainerComponent, isStandalone: true, selector: "fw-menu-container, fw-menu-filter", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, focusFilterOnMount: { classPropertyName: "focusFilterOnMount", publicName: "focusFilterOnMount", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, additionalMenuItems: { classPropertyName: "additionalMenuItems", publicName: "additionalMenuItems", isSignal: true, isRequired: false, transformFunction: null }, additionalGroups: { classPropertyName: "additionalGroups", publicName: "additionalGroups", isSignal: true, isRequired: false, transformFunction: null }, additionalSeparators: { classPropertyName: "additionalSeparators", publicName: "additionalSeparators", isSignal: true, isRequired: false, transformFunction: null }, keyHandler: { classPropertyName: "keyHandler", publicName: "keyHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filteredMenuItemChange: "filteredMenuItemChange", filterChanged: "filterChanged" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "
|
|
4968
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwMenuContainerComponent, isStandalone: true, selector: "fw-menu-container, fw-menu-filter", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, focusFilterOnMount: { classPropertyName: "focusFilterOnMount", publicName: "focusFilterOnMount", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, additionalMenuItems: { classPropertyName: "additionalMenuItems", publicName: "additionalMenuItems", isSignal: true, isRequired: false, transformFunction: null }, additionalGroups: { classPropertyName: "additionalGroups", publicName: "additionalGroups", isSignal: true, isRequired: false, transformFunction: null }, additionalSeparators: { classPropertyName: "additionalSeparators", publicName: "additionalSeparators", isSignal: true, isRequired: false, transformFunction: null }, keyHandler: { classPropertyName: "keyHandler", publicName: "keyHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filteredMenuItemChange: "filteredMenuItemChange", filterChanged: "filterChanged" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true, isSignal: true }, { propertyName: "childMenuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "childSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }, { propertyName: "childGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuWrapperRef", first: true, predicate: ["menuWrapper"], descendants: true, read: HTMLElement, isSignal: true }, { propertyName: "filterRef", first: true, predicate: ["menuFilter"], descendants: true, read: FwTextInputComponent, isSignal: true }], ngImport: i0, template: "@if (showFilter()) {\n <div #filterBox class=\"filter-box\" cdkMenuBar>\n <fw-text-input\n (click)=\"handleFilterClick($event)\"\n #menuFilter\n (keydown)=\"keyHandler()?.($event)\"\n placeholder=\"Search\"\n leftIcon=\"search\"\n [autofocus]=\"true\"\n [value]=\"filterText()\"\n (input)=\"handleFilterInput($event)\"\n >\n </fw-text-input>\n <ng-content select=\".filter-content\"></ng-content>\n </div>\n}\n<div\n class=\"scroll-indicator scroll-indicator-top\"\n [class.scroll-indicator-visible]=\"canScrollUp()\"\n (mouseenter)=\"canScrollUp() && startScroll('up')\"\n (mouseleave)=\"stopScroll()\"\n>\n <fw-icon>chevron-up</fw-icon>\n</div>\n<div #menuWrapper class=\"menu-wrapper\" (scroll)=\"updateScrollState()\">\n @if (noResults()) {\n <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"></fw-menu-item>\n }\n <ng-content></ng-content>\n <ng-content select=\"custom-menu-items\"></ng-content>\n</div>\n<div\n class=\"scroll-indicator scroll-indicator-bottom\"\n [class.scroll-indicator-visible]=\"canScrollDown()\"\n (mouseenter)=\"canScrollDown() && startScroll('down')\"\n (mouseleave)=\"stopScroll()\"\n>\n <fw-icon>chevron-down</fw-icon>\n</div>\n", styles: [".fw-menu-container{display:flex;flex-direction:column;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);max-width:calc(100% - 16px);height:fit-content}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;overflow:hidden auto;margin-bottom:4px}.fw-menu-container .scroll-indicator{display:flex;align-items:center;justify-content:center;height:0;flex-shrink:0;overflow:hidden;pointer-events:none;cursor:pointer;border:none;background:none;color:var(--typography-muted);width:100%;-webkit-user-select:none;user-select:none;transition:height .1s ease}.fw-menu-container .scroll-indicator fw-icon{pointer-events:none;font-size:16px}.fw-menu-container .scroll-indicator-visible{height:28px;pointer-events:auto}.fw-menu-container .scroll-indicator-visible:hover{background-color:var(--slate-hover);color:var(--typography-base)}.fw-menu-container .scroll-indicator-top{border-bottom:1px solid transparent}.fw-menu-container .scroll-indicator-top.scroll-indicator-visible{border-bottom-color:var(--separations-base)}.fw-menu-container .scroll-indicator-bottom{border-top:1px solid transparent}.fw-menu-container .scroll-indicator-bottom.scroll-indicator-visible{border-top-color:var(--separations-base)}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["disabledChange", "leftIconAction", "rightIconAction"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4985
4969
|
}
|
|
4986
4970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
|
|
4987
4971
|
type: Component,
|
|
4988
4972
|
args: [{ selector: 'fw-menu-container, fw-menu-filter', encapsulation: ViewEncapsulation.None, imports: [CdkMenuBar, FwTextInputComponent, FwMenuItemComponent, FwIconComponent], template: "@if (showFilter()) {\n <div #filterBox class=\"filter-box\" cdkMenuBar>\n <fw-text-input\n (click)=\"handleFilterClick($event)\"\n #menuFilter\n (keydown)=\"keyHandler()?.($event)\"\n placeholder=\"Search\"\n leftIcon=\"search\"\n [autofocus]=\"true\"\n [value]=\"filterText()\"\n (input)=\"handleFilterInput($event)\"\n >\n </fw-text-input>\n <ng-content select=\".filter-content\"></ng-content>\n </div>\n}\n<div\n class=\"scroll-indicator scroll-indicator-top\"\n [class.scroll-indicator-visible]=\"canScrollUp()\"\n (mouseenter)=\"canScrollUp() && startScroll('up')\"\n (mouseleave)=\"stopScroll()\"\n>\n <fw-icon>chevron-up</fw-icon>\n</div>\n<div #menuWrapper class=\"menu-wrapper\" (scroll)=\"updateScrollState()\">\n @if (noResults()) {\n <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"></fw-menu-item>\n }\n <ng-content></ng-content>\n <ng-content select=\"custom-menu-items\"></ng-content>\n</div>\n<div\n class=\"scroll-indicator scroll-indicator-bottom\"\n [class.scroll-indicator-visible]=\"canScrollDown()\"\n (mouseenter)=\"canScrollDown() && startScroll('down')\"\n (mouseleave)=\"stopScroll()\"\n>\n <fw-icon>chevron-down</fw-icon>\n</div>\n", styles: [".fw-menu-container{display:flex;flex-direction:column;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);max-width:calc(100% - 16px);height:fit-content}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;overflow:hidden auto;margin-bottom:4px}.fw-menu-container .scroll-indicator{display:flex;align-items:center;justify-content:center;height:0;flex-shrink:0;overflow:hidden;pointer-events:none;cursor:pointer;border:none;background:none;color:var(--typography-muted);width:100%;-webkit-user-select:none;user-select:none;transition:height .1s ease}.fw-menu-container .scroll-indicator fw-icon{pointer-events:none;font-size:16px}.fw-menu-container .scroll-indicator-visible{height:28px;pointer-events:auto}.fw-menu-container .scroll-indicator-visible:hover{background-color:var(--slate-hover);color:var(--typography-base)}.fw-menu-container .scroll-indicator-top{border-bottom:1px solid transparent}.fw-menu-container .scroll-indicator-top.scroll-indicator-visible{border-bottom-color:var(--separations-base)}.fw-menu-container .scroll-indicator-bottom{border-top:1px solid transparent}.fw-menu-container .scroll-indicator-bottom.scroll-indicator-visible{border-top-color:var(--separations-base)}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"] }]
|
|
4989
|
-
}], ctorParameters: () => [], propDecorators: { menuWrapperRef: [{
|
|
4990
|
-
type: ViewChild,
|
|
4991
|
-
args: ['menuWrapper']
|
|
4992
|
-
}], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }], focusFilterOnMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusFilterOnMount", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], filteredMenuItemChange: [{ type: i0.Output, args: ["filteredMenuItemChange"] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], filterRef: [{
|
|
4993
|
-
type: ViewChild,
|
|
4994
|
-
args: ['menuFilter']
|
|
4995
|
-
}], menu: [{
|
|
4996
|
-
type: ContentChild,
|
|
4997
|
-
args: [FwMenuComponent]
|
|
4998
|
-
}], additionalMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalMenuItems", required: false }] }], additionalGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalGroups", required: false }] }], additionalSeparators: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalSeparators", required: false }] }], childMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], childSeparators: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuSeparatorComponent), { ...{ descendants: true }, isSignal: true }] }], childGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuItemGroupComponent), { ...{ descendants: true }, isSignal: true }] }], keyHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyHandler", required: false }] }], classes: [{
|
|
4973
|
+
}], ctorParameters: () => [], propDecorators: { menuWrapperRef: [{ type: i0.ViewChild, args: ['menuWrapper', { ...{ read: HTMLElement }, isSignal: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }], focusFilterOnMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusFilterOnMount", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], filteredMenuItemChange: [{ type: i0.Output, args: ["filteredMenuItemChange"] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], filterRef: [{ type: i0.ViewChild, args: ['menuFilter', { ...{ read: FwTextInputComponent }, isSignal: true }] }], menu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FwMenuComponent), { isSignal: true }] }], additionalMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalMenuItems", required: false }] }], additionalGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalGroups", required: false }] }], additionalSeparators: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalSeparators", required: false }] }], childMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], childSeparators: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuSeparatorComponent), { ...{ descendants: true }, isSignal: true }] }], childGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuItemGroupComponent), { ...{ descendants: true }, isSignal: true }] }], keyHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyHandler", required: false }] }], classes: [{
|
|
4999
4974
|
type: HostBinding,
|
|
5000
4975
|
args: ['attr.class']
|
|
5001
4976
|
}], style: [{
|
|
@@ -5171,6 +5146,7 @@ class FwNavbarItemComponent {
|
|
|
5171
5146
|
this.subItemsOpen = model(false, ...(ngDevMode ? [{ debugName: "subItemsOpen" }] : /* istanbul ignore next */ []));
|
|
5172
5147
|
this.subItemsTooltipTitle = input('', ...(ngDevMode ? [{ debugName: "subItemsTooltipTitle" }] : /* istanbul ignore next */ []));
|
|
5173
5148
|
this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
5149
|
+
this.subItems = contentChildren(FwNavbarSubItemComponent, ...(ngDevMode ? [{ debugName: "subItems" }] : /* istanbul ignore next */ []));
|
|
5174
5150
|
}
|
|
5175
5151
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
5176
5152
|
ngOnChanges(changes) {
|
|
@@ -5186,8 +5162,8 @@ class FwNavbarItemComponent {
|
|
|
5186
5162
|
else {
|
|
5187
5163
|
this.iconColor.set('muted');
|
|
5188
5164
|
}
|
|
5189
|
-
if (this.subItems) {
|
|
5190
|
-
this.subItems.forEach((subItem) => {
|
|
5165
|
+
if (this.subItems()) {
|
|
5166
|
+
this.subItems().forEach((subItem) => {
|
|
5191
5167
|
subItem.hidden.set(!(this.subItemsOpen() && !this.collapsed()));
|
|
5192
5168
|
const collapsed = this.collapsed();
|
|
5193
5169
|
if (collapsed !== undefined) {
|
|
@@ -5207,21 +5183,15 @@ class FwNavbarItemComponent {
|
|
|
5207
5183
|
return false;
|
|
5208
5184
|
}
|
|
5209
5185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5210
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwNavbarItemComponent, isStandalone: true, selector: "fw-navbar-item", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: true, isRequired: false, transformFunction: null }, subItemsTooltipTitle: { classPropertyName: "subItemsTooltipTitle", publicName: "subItemsTooltipTitle", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iconColor: "iconColorChange", disabled: "disabledChange", showTooltip: "showTooltipChange", collapsed: "collapsedChange", subItemsOpen: "subItemsOpenChange" }, host: {
|
|
5186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwNavbarItemComponent, isStandalone: true, selector: "fw-navbar-item", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: true, isRequired: false, transformFunction: null }, subItemsTooltipTitle: { classPropertyName: "subItemsTooltipTitle", publicName: "subItemsTooltipTitle", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iconColor: "iconColorChange", disabled: "disabledChange", showTooltip: "showTooltipChange", collapsed: "collapsedChange", subItemsOpen: "subItemsOpenChange" }, host: { attributes: { "class.collapsed": "collapsed()" }, properties: { "class.selected": "selected()" } }, queries: [{ propertyName: "subItems", predicate: FwNavbarSubItemComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hidden()) {\n <div>\n <a [href]=\"href() ? href() : 'javascript:void(0)'\" [target]=\"target() ? target() : ''\">\n <div\n class=\"navbar-item\"\n [class.disabled]=\"disabled()\"\n [fwTooltip]=\"tooltipText() || title() || ''\"\n fwTooltipPosition=\"right\"\n [fwTooltipEnabled]=\"showTooltip()\">\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\" class=\"navbar-icon {{ iconColor() }}\">{{ icon() }}</fw-icon>\n }\n <ng-content select=\"fw-avatar\"></ng-content>\n @if (title()) {\n <div class=\"navbar-text\">\n <h5 class=\"vision-h5\">{{ title() }}</h5>\n @if (description()) {\n <p class=\"vision-p4 description\">{{ description() }}</p>\n }\n </div>\n }\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 @if (subItems.length > 0 && !collapsed()) {\n <fw-icon-button\n [fwTooltip]=\"subItemsTooltipTitle()\"\n fwTooltipPosition=\"right\"\n [size]=\"'small'\"\n [icon]=\"subItemsOpen() ? 'chevron-up' : 'chevron-down'\"\n (click)=\"toggleSubItemsView($event)\"\n />\n }\n </div>\n </div>\n </a>\n </div>\n}\n<div class=\"item-subitems\">\n <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;width:18px;max-width:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
|
|
5211
5187
|
}
|
|
5212
5188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwNavbarItemComponent, decorators: [{
|
|
5213
5189
|
type: Component,
|
|
5214
|
-
args: [{ selector: 'fw-navbar-item',
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
|
|
5218
|
-
|
|
5219
|
-
type: HostBinding,
|
|
5220
|
-
args: ['class.selected']
|
|
5221
|
-
}], subItems: [{
|
|
5222
|
-
type: ContentChildren,
|
|
5223
|
-
args: [FwNavbarSubItemComponent]
|
|
5224
|
-
}] } });
|
|
5190
|
+
args: [{ selector: 'fw-navbar-item', host: {
|
|
5191
|
+
'[class.selected]': 'selected()',
|
|
5192
|
+
'class.collapsed': 'collapsed()',
|
|
5193
|
+
}, imports: [FwIconComponent, FwIconButtonComponent, FwTooltipDirective], template: "@if (!hidden()) {\n <div>\n <a [href]=\"href() ? href() : 'javascript:void(0)'\" [target]=\"target() ? target() : ''\">\n <div\n class=\"navbar-item\"\n [class.disabled]=\"disabled()\"\n [fwTooltip]=\"tooltipText() || title() || ''\"\n fwTooltipPosition=\"right\"\n [fwTooltipEnabled]=\"showTooltip()\">\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\" class=\"navbar-icon {{ iconColor() }}\">{{ icon() }}</fw-icon>\n }\n <ng-content select=\"fw-avatar\"></ng-content>\n @if (title()) {\n <div class=\"navbar-text\">\n <h5 class=\"vision-h5\">{{ title() }}</h5>\n @if (description()) {\n <p class=\"vision-p4 description\">{{ description() }}</p>\n }\n </div>\n }\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 @if (subItems.length > 0 && !collapsed()) {\n <fw-icon-button\n [fwTooltip]=\"subItemsTooltipTitle()\"\n fwTooltipPosition=\"right\"\n [size]=\"'small'\"\n [icon]=\"subItemsOpen() ? 'chevron-up' : 'chevron-down'\"\n (click)=\"toggleSubItemsView($event)\"\n />\n }\n </div>\n </div>\n </a>\n </div>\n}\n<div class=\"item-subitems\">\n <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;width:18px;max-width:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"] }]
|
|
5194
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }, { type: i0.Output, args: ["iconColorChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }, { type: i0.Output, args: ["showTooltipChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], subItemsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemsOpen", required: false }] }, { type: i0.Output, args: ["subItemsOpenChange"] }], subItemsTooltipTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemsTooltipTitle", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], subItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwNavbarSubItemComponent), { isSignal: true }] }] } });
|
|
5225
5195
|
|
|
5226
5196
|
/**
|
|
5227
5197
|
* Component for a collapsible vertical navigation bar containing nav items with icons and labels
|