@flywheel-io/vision 21.0.0-beta.1 → 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.
|
@@ -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: [{
|
|
@@ -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
|
/**
|
|
@@ -4865,6 +4852,7 @@ class FwMenuContainerComponent {
|
|
|
4865
4852
|
constructor() {
|
|
4866
4853
|
this.sanitizer = inject(DomSanitizer);
|
|
4867
4854
|
this.ngZone = inject(NgZone);
|
|
4855
|
+
this.menuWrapperRef = viewChild.required('menuWrapper', { read: HTMLElement });
|
|
4868
4856
|
this.canScrollUp = signal(false, ...(ngDevMode ? [{ debugName: "canScrollUp" }] : /* istanbul ignore next */ []));
|
|
4869
4857
|
this.canScrollDown = signal(false, ...(ngDevMode ? [{ debugName: "canScrollDown" }] : /* istanbul ignore next */ []));
|
|
4870
4858
|
this.scrollInterval = null;
|
|
@@ -4885,6 +4873,8 @@ class FwMenuContainerComponent {
|
|
|
4885
4873
|
};
|
|
4886
4874
|
this.filterFn = input(this.defaultFilterFn, ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
|
|
4887
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 */ []));
|
|
4888
4878
|
// for passing menu items for the container to filter
|
|
4889
4879
|
// works around a problem with nested content children
|
|
4890
4880
|
// @see https://stackoverflow.com/questions/62886613/angular-9-nested-ng-content-and-contentchildren
|
|
@@ -4907,7 +4897,7 @@ class FwMenuContainerComponent {
|
|
|
4907
4897
|
ngAfterViewInit() {
|
|
4908
4898
|
if (this.focusFilterOnMount() && this.showFilter()) {
|
|
4909
4899
|
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
4910
|
-
this.filterRef?.focus();
|
|
4900
|
+
this.filterRef()?.focus();
|
|
4911
4901
|
}
|
|
4912
4902
|
// Ensure filteredMenuItemChange fires on init so consumers
|
|
4913
4903
|
// that depend on it (e.g. displayedOptions) are populated
|
|
@@ -4915,7 +4905,7 @@ class FwMenuContainerComponent {
|
|
|
4915
4905
|
setTimeout(() => this.updateScrollState());
|
|
4916
4906
|
}
|
|
4917
4907
|
updateScrollState() {
|
|
4918
|
-
const el = this.menuWrapperRef
|
|
4908
|
+
const el = this.menuWrapperRef();
|
|
4919
4909
|
if (!el) {
|
|
4920
4910
|
return;
|
|
4921
4911
|
}
|
|
@@ -4928,7 +4918,7 @@ class FwMenuContainerComponent {
|
|
|
4928
4918
|
// eslint-disable-next-line @rx-angular/no-zone-run-apis
|
|
4929
4919
|
this.ngZone.runOutsideAngular(() => {
|
|
4930
4920
|
this.scrollInterval = setInterval(() => {
|
|
4931
|
-
const el = this.menuWrapperRef
|
|
4921
|
+
const el = this.menuWrapperRef();
|
|
4932
4922
|
if (el) {
|
|
4933
4923
|
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
4934
4924
|
el.scrollBy({ top: direction === 'down' ? 80 : -80 });
|
|
@@ -4975,21 +4965,12 @@ class FwMenuContainerComponent {
|
|
|
4975
4965
|
setTimeout(() => this.updateScrollState());
|
|
4976
4966
|
}
|
|
4977
4967
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMenuContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4978
|
-
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 }); }
|
|
4979
4969
|
}
|
|
4980
4970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
|
|
4981
4971
|
type: Component,
|
|
4982
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"] }]
|
|
4983
|
-
}], ctorParameters: () => [], propDecorators: { menuWrapperRef: [{
|
|
4984
|
-
type: ViewChild,
|
|
4985
|
-
args: ['menuWrapper']
|
|
4986
|
-
}], 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: [{
|
|
4987
|
-
type: ViewChild,
|
|
4988
|
-
args: ['menuFilter']
|
|
4989
|
-
}], menu: [{
|
|
4990
|
-
type: ContentChild,
|
|
4991
|
-
args: [FwMenuComponent]
|
|
4992
|
-
}], 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: [{
|
|
4993
4974
|
type: HostBinding,
|
|
4994
4975
|
args: ['attr.class']
|
|
4995
4976
|
}], style: [{
|
|
@@ -5165,6 +5146,7 @@ class FwNavbarItemComponent {
|
|
|
5165
5146
|
this.subItemsOpen = model(false, ...(ngDevMode ? [{ debugName: "subItemsOpen" }] : /* istanbul ignore next */ []));
|
|
5166
5147
|
this.subItemsTooltipTitle = input('', ...(ngDevMode ? [{ debugName: "subItemsTooltipTitle" }] : /* istanbul ignore next */ []));
|
|
5167
5148
|
this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
5149
|
+
this.subItems = contentChildren(FwNavbarSubItemComponent, ...(ngDevMode ? [{ debugName: "subItems" }] : /* istanbul ignore next */ []));
|
|
5168
5150
|
}
|
|
5169
5151
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
5170
5152
|
ngOnChanges(changes) {
|
|
@@ -5180,8 +5162,8 @@ class FwNavbarItemComponent {
|
|
|
5180
5162
|
else {
|
|
5181
5163
|
this.iconColor.set('muted');
|
|
5182
5164
|
}
|
|
5183
|
-
if (this.subItems) {
|
|
5184
|
-
this.subItems.forEach((subItem) => {
|
|
5165
|
+
if (this.subItems()) {
|
|
5166
|
+
this.subItems().forEach((subItem) => {
|
|
5185
5167
|
subItem.hidden.set(!(this.subItemsOpen() && !this.collapsed()));
|
|
5186
5168
|
const collapsed = this.collapsed();
|
|
5187
5169
|
if (collapsed !== undefined) {
|
|
@@ -5201,21 +5183,15 @@ class FwNavbarItemComponent {
|
|
|
5201
5183
|
return false;
|
|
5202
5184
|
}
|
|
5203
5185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5204
|
-
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"] }] }); }
|
|
5205
5187
|
}
|
|
5206
5188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwNavbarItemComponent, decorators: [{
|
|
5207
5189
|
type: Component,
|
|
5208
|
-
args: [{ selector: 'fw-navbar-item',
|
|
5209
|
-
|
|
5210
|
-
|
|
5211
|
-
|
|
5212
|
-
|
|
5213
|
-
type: HostBinding,
|
|
5214
|
-
args: ['class.selected']
|
|
5215
|
-
}], subItems: [{
|
|
5216
|
-
type: ContentChildren,
|
|
5217
|
-
args: [FwNavbarSubItemComponent]
|
|
5218
|
-
}] } });
|
|
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 }] }] } });
|
|
5219
5195
|
|
|
5220
5196
|
/**
|
|
5221
5197
|
* Component for a collapsible vertical navigation bar containing nav items with icons and labels
|