@almoamendev/ngx-md3 0.0.11 → 0.0.13
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.
|
@@ -1079,12 +1079,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1079
1079
|
class Avatar {
|
|
1080
1080
|
constructor() { }
|
|
1081
1081
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1082
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: Avatar, isStandalone: true, selector: "[md3-avatar]", hostDirectives: [{ directive: StateComponent }], ngImport: i0 });
|
|
1082
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: Avatar, isStandalone: true, selector: "[md3-avatar]", host: { classAttribute: "md3-avatar" }, hostDirectives: [{ directive: StateComponent }], ngImport: i0 });
|
|
1083
1083
|
}
|
|
1084
1084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Avatar, decorators: [{
|
|
1085
1085
|
type: Directive,
|
|
1086
1086
|
args: [{
|
|
1087
1087
|
selector: '[md3-avatar]',
|
|
1088
|
+
host: {
|
|
1089
|
+
'class': 'md3-avatar',
|
|
1090
|
+
},
|
|
1088
1091
|
hostDirectives: [
|
|
1089
1092
|
StateComponent,
|
|
1090
1093
|
],
|
|
@@ -1154,7 +1157,7 @@ class Button {
|
|
|
1154
1157
|
});
|
|
1155
1158
|
}
|
|
1156
1159
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: Button, isStandalone: true, selector: "button[md3-button], a[md3-button]", inputs: { buttonSize: { classPropertyName: "buttonSize", publicName: "button-size", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "button-type", isSignal: true, isRequired: false, transformFunction: null }, isSquared: { classPropertyName: "isSquared", publicName: "button-squared", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSelected: "selectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.md3-square": "effectiveSquared()" } }, hostDirectives: [{ directive: StateComponent }], ngImport: i0, template: "<ng-content select=\"[md3-icon-element]\"></ng-content>\n<div class=\"md3-label\">\n <ng-content></ng-content>\n</div>", styles: [":host{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary);--border-radius: 2.5em;--border-size: .0625em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;--inline-padding: 1em;font-size:1rem;border:none;outline:none;cursor:pointer;display:inline-flex;position:relative;align-items:center;justify-content:center;text-decoration:none!important;white-space:nowrap;transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);background-color:var(--background-color);color:var(--foreground-color);gap:.5em;padding:0 calc(var(--inline-padding) - var(--border-size));height:2.5em;box-shadow:var(--md-shadow-0dp);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-toggle.md3-selected:not(:active){--border-radius: var(--md-border-radius-medium)}:host.md3-toggle.md3-selected:not(:active).md3-square{--border-radius: 2.5em}:host:disabled{--background-color: rgba(var(--md-scheme-on-surface), .1) !important;--foreground-color: rgba(var(--md-scheme-on-surface), .38) !important;cursor:default!important}:host:disabled:before{display:none}:host:disabled .md3-state-layer{display:none}:host>::ng-deep [md3-icon-element]{color:inherit!important;font-size:1.25em!important;line-height:1;height:1em!important;width:1em!important}:host .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-x-small{--border-radius: var(--md-border-radius-xlarge-i);--inline-padding: .75em;gap:.25em;height:2em}:host.md3-x-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-x-small.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small ::ng-deep [md3-icon-element]{font-size:1.25em!important}:host.md3-x-small .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host.md3-x-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: var(--md-border-radius-xlarge-i)}:host.md3-x-small:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-small{--inline-padding: 1em}:host.md3-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 2.5em}:host.md3-medium{--border-radius: 3.5em;--inline-padding: 1.5em;gap:.5em;height:3.5em}:host.md3-medium.md3-square{--border-radius: var(--md-border-radius-large)}:host.md3-medium ::ng-deep [md3-icon-element]{font-size:1.5em!important}:host.md3-medium .md3-label{font-size:1em;font-weight:500;line-height:1.5em;letter-spacing:.09375em}:host.md3-medium:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-large)}:host.md3-medium:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 3.5em}:host.md3-medium:not(:disabled):active{--border-radius: var(--md-border-radius-medium)}:host.md3-large{--border-size: .125em;--border-radius: 6em;--inline-padding: 3em;gap:.75em;height:6em}:host.md3-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large ::ng-deep [md3-icon-element]{font-size:2em!important}:host.md3-large .md3-label{font-size:1.5em;font-weight:400;line-height:1.333332em;letter-spacing:0}:host.md3-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 6em}:host.md3-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-x-large{--border-size: .1875em;--border-radius: 8.5em;--inline-padding: 4em;gap:1em;height:8.5em}:host.md3-x-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large ::ng-deep [md3-icon-element]{font-size:2.5em!important}:host.md3-x-large .md3-label{font-size:2em;font-weight:400;line-height:1.25em;letter-spacing:0}:host.md3-x-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 8.5em}:host.md3-x-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-elevated{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em;box-shadow:var(--md-shadow-1dp)}:host.md3-elevated:disabled{box-shadow:var(--md-shadow-0dp)}:host.md3-elevated.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary)}:host.md3-elevated.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-filled{--border-size: 0em}:host.md3-filled.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-filled.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-tonal{--background-color: rgb(var(--md-scheme-secondary-container));--foreground-color: rgb(var(--md-scheme-on-secondary-container));--state-color: var(--md-scheme-on-secondary-container);--border-size: 0em}:host.md3-tonal.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-secondary));--foreground-color: rgb(var(--md-scheme-on-secondary));--state-color: var(--md-scheme-on-secondary)}:host.md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant);border:var(--border-size) solid rgb(var(--md-scheme-outline-variant));padding-inline:calc(var(--inline-padding) - var(--border-size))}:host.md3-outlined.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-inverse-surface));--foreground-color: rgb(var(--md-scheme-inverse-on-surface));--state-color: var(--md-scheme-inverse-on-surface)}:host.md3-text{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em}\n"] });
|
|
1160
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: Button, isStandalone: true, selector: "button[md3-button], a[md3-button]", inputs: { buttonSize: { classPropertyName: "buttonSize", publicName: "button-size", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "button-type", isSignal: true, isRequired: false, transformFunction: null }, isSquared: { classPropertyName: "isSquared", publicName: "button-squared", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSelected: "selectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.md3-square": "effectiveSquared()" } }, hostDirectives: [{ directive: StateComponent }], ngImport: i0, template: "<ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n<div class=\"md3-label\">\n <ng-content></ng-content>\n</div>\n<ng-content select=\"[md3-icon-element=trailing]\"></ng-content>", styles: [":host{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary);--border-radius: 2.5em;--border-size: .0625em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;--inline-padding: 1em;font-size:1rem;border:none;outline:none;cursor:pointer;display:inline-flex;position:relative;align-items:center;justify-content:center;text-decoration:none!important;white-space:nowrap;transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);background-color:var(--background-color);color:var(--foreground-color);gap:.5em;padding:0 calc(var(--inline-padding) - var(--border-size));height:2.5em;box-shadow:var(--md-shadow-0dp);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-toggle.md3-selected:not(:active){--border-radius: var(--md-border-radius-medium)}:host.md3-toggle.md3-selected:not(:active).md3-square{--border-radius: 2.5em}:host:disabled{--background-color: rgba(var(--md-scheme-on-surface), .1) !important;--foreground-color: rgba(var(--md-scheme-on-surface), .38) !important;cursor:default!important}:host:disabled:before{display:none}:host:disabled .md3-state-layer{display:none}:host>::ng-deep [md3-icon-element]{color:inherit!important;font-size:1.25em!important;line-height:1;height:1em!important;width:1em!important}:host .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-x-small{--border-radius: var(--md-border-radius-xlarge-i);--inline-padding: .75em;gap:.25em;height:2em}:host.md3-x-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-x-small.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small ::ng-deep [md3-icon-element]{font-size:1.25em!important}:host.md3-x-small .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host.md3-x-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: var(--md-border-radius-xlarge-i)}:host.md3-x-small:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-small{--inline-padding: 1em}:host.md3-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 2.5em}:host.md3-medium{--border-radius: 3.5em;--inline-padding: 1.5em;gap:.5em;height:3.5em}:host.md3-medium.md3-square{--border-radius: var(--md-border-radius-large)}:host.md3-medium ::ng-deep [md3-icon-element]{font-size:1.5em!important}:host.md3-medium .md3-label{font-size:1em;font-weight:500;line-height:1.5em;letter-spacing:.09375em}:host.md3-medium:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-large)}:host.md3-medium:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 3.5em}:host.md3-medium:not(:disabled):active{--border-radius: var(--md-border-radius-medium)}:host.md3-large{--border-size: .125em;--border-radius: 6em;--inline-padding: 3em;gap:.75em;height:6em}:host.md3-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large ::ng-deep [md3-icon-element]{font-size:2em!important}:host.md3-large .md3-label{font-size:1.5em;font-weight:400;line-height:1.333332em;letter-spacing:0}:host.md3-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 6em}:host.md3-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-x-large{--border-size: .1875em;--border-radius: 8.5em;--inline-padding: 4em;gap:1em;height:8.5em}:host.md3-x-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large ::ng-deep [md3-icon-element]{font-size:2.5em!important}:host.md3-x-large .md3-label{font-size:2em;font-weight:400;line-height:1.25em;letter-spacing:0}:host.md3-x-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 8.5em}:host.md3-x-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-elevated{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em;box-shadow:var(--md-shadow-1dp)}:host.md3-elevated:disabled{box-shadow:var(--md-shadow-0dp)}:host.md3-elevated.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary)}:host.md3-elevated.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-filled{--border-size: 0em}:host.md3-filled.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-filled.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-tonal{--background-color: rgb(var(--md-scheme-secondary-container));--foreground-color: rgb(var(--md-scheme-on-secondary-container));--state-color: var(--md-scheme-on-secondary-container);--border-size: 0em}:host.md3-tonal.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-secondary));--foreground-color: rgb(var(--md-scheme-on-secondary));--state-color: var(--md-scheme-on-secondary)}:host.md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant);border:var(--border-size) solid rgb(var(--md-scheme-outline-variant));padding-inline:calc(var(--inline-padding) - var(--border-size))}:host.md3-outlined.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-inverse-surface));--foreground-color: rgb(var(--md-scheme-inverse-on-surface));--state-color: var(--md-scheme-inverse-on-surface)}:host.md3-text{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em}\n"] });
|
|
1158
1161
|
}
|
|
1159
1162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, decorators: [{
|
|
1160
1163
|
type: Component,
|
|
@@ -1162,7 +1165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1162
1165
|
'[class.md3-square]': 'effectiveSquared()',
|
|
1163
1166
|
}, hostDirectives: [
|
|
1164
1167
|
StateComponent
|
|
1165
|
-
], template: "<ng-content select=\"[md3-icon-element]\"></ng-content>\n<div class=\"md3-label\">\n <ng-content></ng-content>\n</div>", styles: [":host{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary);--border-radius: 2.5em;--border-size: .0625em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;--inline-padding: 1em;font-size:1rem;border:none;outline:none;cursor:pointer;display:inline-flex;position:relative;align-items:center;justify-content:center;text-decoration:none!important;white-space:nowrap;transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);background-color:var(--background-color);color:var(--foreground-color);gap:.5em;padding:0 calc(var(--inline-padding) - var(--border-size));height:2.5em;box-shadow:var(--md-shadow-0dp);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-toggle.md3-selected:not(:active){--border-radius: var(--md-border-radius-medium)}:host.md3-toggle.md3-selected:not(:active).md3-square{--border-radius: 2.5em}:host:disabled{--background-color: rgba(var(--md-scheme-on-surface), .1) !important;--foreground-color: rgba(var(--md-scheme-on-surface), .38) !important;cursor:default!important}:host:disabled:before{display:none}:host:disabled .md3-state-layer{display:none}:host>::ng-deep [md3-icon-element]{color:inherit!important;font-size:1.25em!important;line-height:1;height:1em!important;width:1em!important}:host .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-x-small{--border-radius: var(--md-border-radius-xlarge-i);--inline-padding: .75em;gap:.25em;height:2em}:host.md3-x-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-x-small.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small ::ng-deep [md3-icon-element]{font-size:1.25em!important}:host.md3-x-small .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host.md3-x-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: var(--md-border-radius-xlarge-i)}:host.md3-x-small:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-small{--inline-padding: 1em}:host.md3-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 2.5em}:host.md3-medium{--border-radius: 3.5em;--inline-padding: 1.5em;gap:.5em;height:3.5em}:host.md3-medium.md3-square{--border-radius: var(--md-border-radius-large)}:host.md3-medium ::ng-deep [md3-icon-element]{font-size:1.5em!important}:host.md3-medium .md3-label{font-size:1em;font-weight:500;line-height:1.5em;letter-spacing:.09375em}:host.md3-medium:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-large)}:host.md3-medium:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 3.5em}:host.md3-medium:not(:disabled):active{--border-radius: var(--md-border-radius-medium)}:host.md3-large{--border-size: .125em;--border-radius: 6em;--inline-padding: 3em;gap:.75em;height:6em}:host.md3-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large ::ng-deep [md3-icon-element]{font-size:2em!important}:host.md3-large .md3-label{font-size:1.5em;font-weight:400;line-height:1.333332em;letter-spacing:0}:host.md3-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 6em}:host.md3-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-x-large{--border-size: .1875em;--border-radius: 8.5em;--inline-padding: 4em;gap:1em;height:8.5em}:host.md3-x-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large ::ng-deep [md3-icon-element]{font-size:2.5em!important}:host.md3-x-large .md3-label{font-size:2em;font-weight:400;line-height:1.25em;letter-spacing:0}:host.md3-x-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 8.5em}:host.md3-x-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-elevated{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em;box-shadow:var(--md-shadow-1dp)}:host.md3-elevated:disabled{box-shadow:var(--md-shadow-0dp)}:host.md3-elevated.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary)}:host.md3-elevated.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-filled{--border-size: 0em}:host.md3-filled.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-filled.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-tonal{--background-color: rgb(var(--md-scheme-secondary-container));--foreground-color: rgb(var(--md-scheme-on-secondary-container));--state-color: var(--md-scheme-on-secondary-container);--border-size: 0em}:host.md3-tonal.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-secondary));--foreground-color: rgb(var(--md-scheme-on-secondary));--state-color: var(--md-scheme-on-secondary)}:host.md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant);border:var(--border-size) solid rgb(var(--md-scheme-outline-variant));padding-inline:calc(var(--inline-padding) - var(--border-size))}:host.md3-outlined.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-inverse-surface));--foreground-color: rgb(var(--md-scheme-inverse-on-surface));--state-color: var(--md-scheme-inverse-on-surface)}:host.md3-text{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em}\n"] }]
|
|
1168
|
+
], template: "<ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n<div class=\"md3-label\">\n <ng-content></ng-content>\n</div>\n<ng-content select=\"[md3-icon-element=trailing]\"></ng-content>", styles: [":host{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary);--border-radius: 2.5em;--border-size: .0625em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;--inline-padding: 1em;font-size:1rem;border:none;outline:none;cursor:pointer;display:inline-flex;position:relative;align-items:center;justify-content:center;text-decoration:none!important;white-space:nowrap;transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);background-color:var(--background-color);color:var(--foreground-color);gap:.5em;padding:0 calc(var(--inline-padding) - var(--border-size));height:2.5em;box-shadow:var(--md-shadow-0dp);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-toggle.md3-selected:not(:active){--border-radius: var(--md-border-radius-medium)}:host.md3-toggle.md3-selected:not(:active).md3-square{--border-radius: 2.5em}:host:disabled{--background-color: rgba(var(--md-scheme-on-surface), .1) !important;--foreground-color: rgba(var(--md-scheme-on-surface), .38) !important;cursor:default!important}:host:disabled:before{display:none}:host:disabled .md3-state-layer{display:none}:host>::ng-deep [md3-icon-element]{color:inherit!important;font-size:1.25em!important;line-height:1;height:1em!important;width:1em!important}:host .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-x-small{--border-radius: var(--md-border-radius-xlarge-i);--inline-padding: .75em;gap:.25em;height:2em}:host.md3-x-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-x-small.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small ::ng-deep [md3-icon-element]{font-size:1.25em!important}:host.md3-x-small .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host.md3-x-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: var(--md-border-radius-xlarge-i)}:host.md3-x-small:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-small{--inline-padding: 1em}:host.md3-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 2.5em}:host.md3-medium{--border-radius: 3.5em;--inline-padding: 1.5em;gap:.5em;height:3.5em}:host.md3-medium.md3-square{--border-radius: var(--md-border-radius-large)}:host.md3-medium ::ng-deep [md3-icon-element]{font-size:1.5em!important}:host.md3-medium .md3-label{font-size:1em;font-weight:500;line-height:1.5em;letter-spacing:.09375em}:host.md3-medium:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-large)}:host.md3-medium:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 3.5em}:host.md3-medium:not(:disabled):active{--border-radius: var(--md-border-radius-medium)}:host.md3-large{--border-size: .125em;--border-radius: 6em;--inline-padding: 3em;gap:.75em;height:6em}:host.md3-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large ::ng-deep [md3-icon-element]{font-size:2em!important}:host.md3-large .md3-label{font-size:1.5em;font-weight:400;line-height:1.333332em;letter-spacing:0}:host.md3-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 6em}:host.md3-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-x-large{--border-size: .1875em;--border-radius: 8.5em;--inline-padding: 4em;gap:1em;height:8.5em}:host.md3-x-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large ::ng-deep [md3-icon-element]{font-size:2.5em!important}:host.md3-x-large .md3-label{font-size:2em;font-weight:400;line-height:1.25em;letter-spacing:0}:host.md3-x-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 8.5em}:host.md3-x-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-elevated{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em;box-shadow:var(--md-shadow-1dp)}:host.md3-elevated:disabled{box-shadow:var(--md-shadow-0dp)}:host.md3-elevated.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary)}:host.md3-elevated.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-filled{--border-size: 0em}:host.md3-filled.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-filled.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-tonal{--background-color: rgb(var(--md-scheme-secondary-container));--foreground-color: rgb(var(--md-scheme-on-secondary-container));--state-color: var(--md-scheme-on-secondary-container);--border-size: 0em}:host.md3-tonal.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-secondary));--foreground-color: rgb(var(--md-scheme-on-secondary));--state-color: var(--md-scheme-on-secondary)}:host.md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant);border:var(--border-size) solid rgb(var(--md-scheme-outline-variant));padding-inline:calc(var(--inline-padding) - var(--border-size))}:host.md3-outlined.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-inverse-surface));--foreground-color: rgb(var(--md-scheme-inverse-on-surface));--state-color: var(--md-scheme-inverse-on-surface)}:host.md3-text{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em}\n"] }]
|
|
1166
1169
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onClick: [{
|
|
1167
1170
|
type: HostListener,
|
|
1168
1171
|
args: ['click', ['$event']]
|
|
@@ -2688,7 +2691,7 @@ class AppBar {
|
|
|
2688
2691
|
provide: MD3_BUTTON_CONTEXT,
|
|
2689
2692
|
useExisting: AppBar,
|
|
2690
2693
|
},
|
|
2691
|
-
], queries: [{ propertyName: "logo", first: true, predicate: AppBarLogo, descendants: true, isSignal: true }, { propertyName: "avatar", first: true, predicate: Avatar, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-app-bar-container\">\n <div class=\"md3-app-bar-leading\">\n <ng-content select=\"[md3-app-bar-leading]\"></ng-content>\n </div>\n\n @if (appBarType() == 'search') {\n <div class=\"md3-app-bar-search\" [class.md3-center]=\"centerAligned()\">\n <div class=\"md3-search-container\">\n <div class=\"md3-leading-buttons\">\n <ng-content select=\"[md3-search-leading]\"></ng-content>\n </div>\n <ng-content select=\"[md3-input-element]\"></ng-content>\n <div class=\"md3-trailing-buttons\">\n <ng-content select=\"[md3-search-trailing]\"></ng-content>\n </div>\n </div>\n </div>\n } @else if (hasLogo()) {\n <div class=\"md3-app-bar-logo\" [class.md3-center]=\"centerAligned()\">\n <ng-content select=\"[md3-app-bar-logo]\"></ng-content>\n </div>\n } @else if (title() || subtitle()) {\n <div class=\"md3-app-bar-title\" [class.md3-center]=\"centerAligned()\">\n @if (title()?.length) {\n <div md3-type-title size=\"large\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-body size=\"small\" emphasized>{{ subtitle() }}</div>\n }\n </div>\n }\n\n <div class=\"md3-app-bar-trailing\">\n <ng-content select=\"[md3-app-bar-trailing]\"></ng-content>\n @if (hasAvatar()) {\n <div class=\"md3-app-bar-avatar\">\n <ng-content select=\"[md3-avatar]\"></ng-content>\n </div>\n }\n </div>\n\n @if ((appBarType() == 'medium' || appBarType() == 'large') && (title() || subtitle())) {\n <div class=\"md3-app-bar-bottom\" [class.md3-center]=\"centerAligned()\">\n <div class=\"md3-app-bar-bottom-content\">\n @if (appBarType() == 'medium') {\n @if (title()?.length) {\n <div md3-type-headline size=\"medium\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-title size=\"small\">{{ subtitle() }}</div>\n }\n }\n @if (appBarType() == 'large') {\n @if (title()?.length) {\n <div md3-type-display size=\"small\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-title size=\"medium\">{{ subtitle() }}</div>\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));--search-background-color: rgb(var(--md-scheme-surface-container));--search-foreground-color: rgb(var(--md-scheme-on-surface));--foreground-secondary: rgb(var(--md-scheme-on-surface-variant));--elevation: var(--md-shadow-0dp);--app-bar-bottom-collapse: 0px;--app-bar-bottom-opacity: 1;display:block;min-height:0em;max-height:9.5em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:4em auto auto;min-height:4em;width:100%;background-color:inherit;color:inherit;transition:opacity var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-leading,:host .md3-app-bar-container .md3-app-bar-trailing{grid-row:1;z-index:1;display:inline-flex;align-items:center;gap:.25em;min-inline-size:0;block-size:4em}:host .md3-app-bar-container .md3-app-bar-leading:empty,:host .md3-app-bar-container .md3-app-bar-trailing:empty{display:none}:host .md3-app-bar-container .md3-app-bar-leading .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-trailing],:host .md3-app-bar-container .md3-app-bar-trailing .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{flex:0 0 auto;height:3em;min-width:3em;display:inline-flex;align-items:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-leading{grid-column:1;justify-self:start;padding-inline-start:.25em;padding-inline-end:.5em;min-width:1em}:host .md3-app-bar-container .md3-app-bar-leading:empty{display:inline-flex}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading]{color:var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-trailing{grid-column:3;justify-self:end;padding-inline-end:.25em}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{color:var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-avatar]{--border-radius: var(--md-border-radius-large);--border-size: 0em;flex:0 0 2em;height:2em;width:2em;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--border-radius);background-color:rgb(var(--md-scheme-on-primary-container));color:rgb(var(--md-scheme-primary-container));border:none;padding:0;margin:0;text-decoration:none;font-size:1em;position:relative;-webkit-user-select:none;user-select:none;cursor:default}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep button[md3-avatar],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep a[md3-avatar]{--state-color: var(--md-scheme-on-primary);--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;cursor:pointer}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep button[md3-avatar]:before,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep a[md3-avatar]:before{content:\"\";position:absolute;height:3em;width:3em}:host .md3-app-bar-container .md3-app-bar-search{grid-column:1/-1;grid-row:1;align-self:center;display:flex;justify-content:center;min-inline-size:0;height:3em;padding:0 .5em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container{display:inline-flex;align-items:center;justify-content:center;width:50%;max-width:100%;border-radius:1.5em;background-color:var(--search-background-color);color:var(--search-foreground-color);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons{flex:0 0 1.5em;pointer-events:none;display:inline-flex;gap:.25em;padding:0 .25em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons:empty,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons:empty{padding:0}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-trailing],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-trailing]{pointer-events:all}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container ::ng-deep [md3-input-element]{flex:1 1 auto;background-color:transparent;color:var(--search-foreground-color);font-size:1em;height:100%;min-width:0em;border:none;padding:0 1.5em;margin:0 -1.5em}:host .md3-app-bar-container .md3-app-bar-search.md3-center .md3-search-container ::ng-deep [md3-input-element]{text-align:center}:host .md3-app-bar-container .md3-app-bar-logo{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:start;min-inline-size:0;overflow:hidden;height:3em}:host .md3-app-bar-container .md3-app-bar-logo.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep a[md3-app-bar-logo],:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep button[md3-app-bar-logo]{cursor:pointer}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]{flex:0 1 auto;max-height:100%;max-width:100%;display:inline;border:none;background:transparent;font-size:1em;text-decoration:none;padding:0;margin:0}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]>*{display:inline;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}:host .md3-app-bar-container .md3-app-bar-title{grid-column:2;grid-row:1;align-self:center;min-inline-size:0;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing);transform:scale(0);opacity:0}:host .md3-app-bar-container .md3-app-bar-title:dir(ltr){transform-origin:bottom left}:host .md3-app-bar-container .md3-app-bar-title:dir(rtl){transform-origin:bottom right}:host .md3-app-bar-container .md3-app-bar-title.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;transform-origin:bottom center}:host .md3-app-bar-container .md3-app-bar-title ::ng-deep [md3-app-bar-title]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:all}:host .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: auto;grid-column:1/-1;grid-row:2;min-inline-size:0;min-block-size:0;overflow:hidden;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom:empty{display:none}:host .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content{padding-bottom:.75em;padding-inline-start:1em;padding-inline-end:.25em;opacity:var(--app-bar-bottom-opacity);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom.md3-center .md3-app-bar-bottom-content{text-align:center;padding-inline:1em}:host.md3-scrolled.md3-scroll-style-elevate{--background-color: rgb(var(--md-scheme-surface-container));--search-background-color: rgb(var(--md-scheme-surface-container-highest));--elevation: var(--md-shadow-3dp)}:host.md3-scrolled.md3-scroll-style-transparent{--background-color: transparent}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:19.5em}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:100%}:host.md3-small .md3-app-bar-container .md3-app-bar-title,:host.md3-collapsed .md3-app-bar-container .md3-app-bar-title{transform:scale(1);opacity:1}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-small){--app-bar-bottom-expanded-block-size: 4.5em}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-small{margin-top:.285715em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3.5em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-medium){--app-bar-bottom-expanded-block-size: 5.5em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-medium{margin-top:.5em}:host.md3-scrolling-down.md3-auto-hide{max-height:0}:host.md3-scrolling-down.md3-auto-hide .md3-app-bar-container{opacity:0}\n"], dependencies: [{ kind: "directive", type: TypeHeadline, selector: "md3-type-headline, [md3-type-headline]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeDisplay, selector: "md3-type-display, [md3-type-display]", inputs: ["size", "color", "emphasized"] }] });
|
|
2694
|
+
], queries: [{ propertyName: "logo", first: true, predicate: AppBarLogo, descendants: true, isSignal: true }, { propertyName: "avatar", first: true, predicate: Avatar, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-app-bar-container\">\n <div class=\"md3-app-bar-leading\">\n <ng-content select=\"[md3-app-bar-leading]\"></ng-content>\n </div>\n\n @if (appBarType() == 'search') {\n <div class=\"md3-app-bar-search\" [class.md3-center]=\"centerAligned()\">\n <div class=\"md3-search-container\">\n <div class=\"md3-leading-buttons\">\n <ng-content select=\"[md3-search-leading]\"></ng-content>\n </div>\n <ng-content select=\"[md3-input-element]\"></ng-content>\n <div class=\"md3-trailing-buttons\">\n <ng-content select=\"[md3-search-trailing]\"></ng-content>\n </div>\n </div>\n </div>\n } @else if (hasLogo()) {\n <div class=\"md3-app-bar-logo\" [class.md3-center]=\"centerAligned()\">\n <ng-content select=\"[md3-app-bar-logo]\"></ng-content>\n </div>\n } @else if (title() || subtitle()) {\n <div class=\"md3-app-bar-title\" [class.md3-center]=\"centerAligned()\">\n @if (title()?.length) {\n <div md3-type-title size=\"large\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-body size=\"small\" emphasized>{{ subtitle() }}</div>\n }\n </div>\n }\n\n <div class=\"md3-app-bar-trailing\">\n <ng-content select=\"[md3-app-bar-trailing]\"></ng-content>\n @if (hasAvatar()) {\n <div class=\"md3-app-bar-avatar\">\n <ng-content select=\"[md3-avatar]\"></ng-content>\n </div>\n }\n </div>\n\n @if ((appBarType() == 'medium' || appBarType() == 'large') && (title() || subtitle())) {\n <div class=\"md3-app-bar-bottom\" [class.md3-center]=\"centerAligned()\">\n <div class=\"md3-app-bar-bottom-content\">\n @if (appBarType() == 'medium') {\n @if (title()?.length) {\n <div md3-type-headline size=\"medium\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-title size=\"small\">{{ subtitle() }}</div>\n }\n }\n @if (appBarType() == 'large') {\n @if (title()?.length) {\n <div md3-type-display size=\"small\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-title size=\"medium\">{{ subtitle() }}</div>\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));--search-background-color: rgb(var(--md-scheme-surface-container));--search-foreground-color: rgb(var(--md-scheme-on-surface));--foreground-secondary: rgb(var(--md-scheme-on-surface-variant));--elevation: var(--md-shadow-0dp);--app-bar-bottom-collapse: 0px;--app-bar-bottom-opacity: 1;display:block;min-height:0em;max-height:9.5em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:4em auto auto;min-height:4em;width:100%;background-color:inherit;color:inherit;transition:opacity var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-leading,:host .md3-app-bar-container .md3-app-bar-trailing{grid-row:1;z-index:1;display:inline-flex;align-items:center;gap:.25em;min-inline-size:0;block-size:4em}:host .md3-app-bar-container .md3-app-bar-leading:empty,:host .md3-app-bar-container .md3-app-bar-trailing:empty{display:none}:host .md3-app-bar-container .md3-app-bar-leading .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-trailing],:host .md3-app-bar-container .md3-app-bar-trailing .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{flex:0 0 auto;height:3em;min-width:3em;display:inline-flex;align-items:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-leading{grid-column:1;justify-self:start;padding-inline-start:.25em;padding-inline-end:.5em;min-width:1em}:host .md3-app-bar-container .md3-app-bar-leading:empty{display:inline-flex}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading]{color:var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-trailing{grid-column:3;justify-self:end;padding-inline-end:.25em}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{color:var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep .md3-avatar{flex:0 0 2em}:host .md3-app-bar-container .md3-app-bar-search{grid-column:1/-1;grid-row:1;align-self:center;display:flex;justify-content:center;min-inline-size:0;height:3em;padding:0 .5em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container{display:inline-flex;align-items:center;justify-content:center;width:50%;max-width:100%;border-radius:1.5em;background-color:var(--search-background-color);color:var(--search-foreground-color);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons{flex:0 0 1.5em;pointer-events:none;display:inline-flex;gap:.25em;padding:0 .25em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons:empty,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons:empty{padding:0}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-trailing],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-trailing]{pointer-events:all}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container ::ng-deep [md3-input-element]{flex:1 1 auto;background-color:transparent;color:var(--search-foreground-color);font-size:1em;height:100%;min-width:0em;border:none;padding:0 1.5em;margin:0 -1.5em}:host .md3-app-bar-container .md3-app-bar-search.md3-center .md3-search-container ::ng-deep [md3-input-element]{text-align:center}:host .md3-app-bar-container .md3-app-bar-logo{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:start;min-inline-size:0;overflow:hidden;height:3em}:host .md3-app-bar-container .md3-app-bar-logo.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep a[md3-app-bar-logo],:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep button[md3-app-bar-logo]{cursor:pointer}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]{flex:0 1 auto;max-height:100%;max-width:100%;display:inline;border:none;background:transparent;font-size:1em;text-decoration:none;padding:0;margin:0}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]>*{display:inline;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}:host .md3-app-bar-container .md3-app-bar-title{grid-column:2;grid-row:1;align-self:center;min-inline-size:0;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing);transform:scale(0);opacity:0}:host .md3-app-bar-container .md3-app-bar-title:dir(ltr){transform-origin:bottom left}:host .md3-app-bar-container .md3-app-bar-title:dir(rtl){transform-origin:bottom right}:host .md3-app-bar-container .md3-app-bar-title.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;transform-origin:bottom center}:host .md3-app-bar-container .md3-app-bar-title ::ng-deep [md3-app-bar-title]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:all}:host .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: auto;grid-column:1/-1;grid-row:2;min-inline-size:0;min-block-size:0;overflow:hidden;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom:empty{display:none}:host .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content{padding-bottom:.75em;padding-inline-start:1em;padding-inline-end:.25em;opacity:var(--app-bar-bottom-opacity);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom.md3-center .md3-app-bar-bottom-content{text-align:center;padding-inline:1em}:host.md3-scrolled.md3-scroll-style-elevate{--background-color: rgb(var(--md-scheme-surface-container));--search-background-color: rgb(var(--md-scheme-surface-container-highest));--elevation: var(--md-shadow-3dp)}:host.md3-scrolled.md3-scroll-style-transparent{--background-color: transparent}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:19.5em}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:100%}:host.md3-small .md3-app-bar-container .md3-app-bar-title,:host.md3-collapsed .md3-app-bar-container .md3-app-bar-title{transform:scale(1);opacity:1}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-small){--app-bar-bottom-expanded-block-size: 4.5em}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-small{margin-top:.285715em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3.5em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-medium){--app-bar-bottom-expanded-block-size: 5.5em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-medium{margin-top:.5em}:host.md3-scrolling-down.md3-auto-hide{max-height:0}:host.md3-scrolling-down.md3-auto-hide .md3-app-bar-container{opacity:0}\n"], dependencies: [{ kind: "directive", type: TypeHeadline, selector: "md3-type-headline, [md3-type-headline]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeDisplay, selector: "md3-type-display, [md3-type-display]", inputs: ["size", "color", "emphasized"] }] });
|
|
2692
2695
|
}
|
|
2693
2696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBar, decorators: [{
|
|
2694
2697
|
type: Component,
|
|
@@ -2706,7 +2709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2706
2709
|
'[class.md3-scrolled]': 'mainIsScrolled()',
|
|
2707
2710
|
'[class.md3-auto-hide]': 'autoHide()',
|
|
2708
2711
|
'[class.md3-scrolling-down]': 'isScrollingDown()',
|
|
2709
|
-
}, template: "<div class=\"md3-app-bar-container\">\n <div class=\"md3-app-bar-leading\">\n <ng-content select=\"[md3-app-bar-leading]\"></ng-content>\n </div>\n\n @if (appBarType() == 'search') {\n <div class=\"md3-app-bar-search\" [class.md3-center]=\"centerAligned()\">\n <div class=\"md3-search-container\">\n <div class=\"md3-leading-buttons\">\n <ng-content select=\"[md3-search-leading]\"></ng-content>\n </div>\n <ng-content select=\"[md3-input-element]\"></ng-content>\n <div class=\"md3-trailing-buttons\">\n <ng-content select=\"[md3-search-trailing]\"></ng-content>\n </div>\n </div>\n </div>\n } @else if (hasLogo()) {\n <div class=\"md3-app-bar-logo\" [class.md3-center]=\"centerAligned()\">\n <ng-content select=\"[md3-app-bar-logo]\"></ng-content>\n </div>\n } @else if (title() || subtitle()) {\n <div class=\"md3-app-bar-title\" [class.md3-center]=\"centerAligned()\">\n @if (title()?.length) {\n <div md3-type-title size=\"large\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-body size=\"small\" emphasized>{{ subtitle() }}</div>\n }\n </div>\n }\n\n <div class=\"md3-app-bar-trailing\">\n <ng-content select=\"[md3-app-bar-trailing]\"></ng-content>\n @if (hasAvatar()) {\n <div class=\"md3-app-bar-avatar\">\n <ng-content select=\"[md3-avatar]\"></ng-content>\n </div>\n }\n </div>\n\n @if ((appBarType() == 'medium' || appBarType() == 'large') && (title() || subtitle())) {\n <div class=\"md3-app-bar-bottom\" [class.md3-center]=\"centerAligned()\">\n <div class=\"md3-app-bar-bottom-content\">\n @if (appBarType() == 'medium') {\n @if (title()?.length) {\n <div md3-type-headline size=\"medium\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-title size=\"small\">{{ subtitle() }}</div>\n }\n }\n @if (appBarType() == 'large') {\n @if (title()?.length) {\n <div md3-type-display size=\"small\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-title size=\"medium\">{{ subtitle() }}</div>\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));--search-background-color: rgb(var(--md-scheme-surface-container));--search-foreground-color: rgb(var(--md-scheme-on-surface));--foreground-secondary: rgb(var(--md-scheme-on-surface-variant));--elevation: var(--md-shadow-0dp);--app-bar-bottom-collapse: 0px;--app-bar-bottom-opacity: 1;display:block;min-height:0em;max-height:9.5em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:4em auto auto;min-height:4em;width:100%;background-color:inherit;color:inherit;transition:opacity var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-leading,:host .md3-app-bar-container .md3-app-bar-trailing{grid-row:1;z-index:1;display:inline-flex;align-items:center;gap:.25em;min-inline-size:0;block-size:4em}:host .md3-app-bar-container .md3-app-bar-leading:empty,:host .md3-app-bar-container .md3-app-bar-trailing:empty{display:none}:host .md3-app-bar-container .md3-app-bar-leading .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-trailing],:host .md3-app-bar-container .md3-app-bar-trailing .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{flex:0 0 auto;height:3em;min-width:3em;display:inline-flex;align-items:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-leading{grid-column:1;justify-self:start;padding-inline-start:.25em;padding-inline-end:.5em;min-width:1em}:host .md3-app-bar-container .md3-app-bar-leading:empty{display:inline-flex}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading]{color:var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-trailing{grid-column:3;justify-self:end;padding-inline-end:.25em}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{color:var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-avatar]{--border-radius: var(--md-border-radius-large);--border-size: 0em;flex:0 0 2em;height:2em;width:2em;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--border-radius);background-color:rgb(var(--md-scheme-on-primary-container));color:rgb(var(--md-scheme-primary-container));border:none;padding:0;margin:0;text-decoration:none;font-size:1em;position:relative;-webkit-user-select:none;user-select:none;cursor:default}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep button[md3-avatar],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep a[md3-avatar]{--state-color: var(--md-scheme-on-primary);--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;cursor:pointer}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep button[md3-avatar]:before,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep a[md3-avatar]:before{content:\"\";position:absolute;height:3em;width:3em}:host .md3-app-bar-container .md3-app-bar-search{grid-column:1/-1;grid-row:1;align-self:center;display:flex;justify-content:center;min-inline-size:0;height:3em;padding:0 .5em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container{display:inline-flex;align-items:center;justify-content:center;width:50%;max-width:100%;border-radius:1.5em;background-color:var(--search-background-color);color:var(--search-foreground-color);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons{flex:0 0 1.5em;pointer-events:none;display:inline-flex;gap:.25em;padding:0 .25em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons:empty,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons:empty{padding:0}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-trailing],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-trailing]{pointer-events:all}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container ::ng-deep [md3-input-element]{flex:1 1 auto;background-color:transparent;color:var(--search-foreground-color);font-size:1em;height:100%;min-width:0em;border:none;padding:0 1.5em;margin:0 -1.5em}:host .md3-app-bar-container .md3-app-bar-search.md3-center .md3-search-container ::ng-deep [md3-input-element]{text-align:center}:host .md3-app-bar-container .md3-app-bar-logo{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:start;min-inline-size:0;overflow:hidden;height:3em}:host .md3-app-bar-container .md3-app-bar-logo.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep a[md3-app-bar-logo],:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep button[md3-app-bar-logo]{cursor:pointer}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]{flex:0 1 auto;max-height:100%;max-width:100%;display:inline;border:none;background:transparent;font-size:1em;text-decoration:none;padding:0;margin:0}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]>*{display:inline;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}:host .md3-app-bar-container .md3-app-bar-title{grid-column:2;grid-row:1;align-self:center;min-inline-size:0;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing);transform:scale(0);opacity:0}:host .md3-app-bar-container .md3-app-bar-title:dir(ltr){transform-origin:bottom left}:host .md3-app-bar-container .md3-app-bar-title:dir(rtl){transform-origin:bottom right}:host .md3-app-bar-container .md3-app-bar-title.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;transform-origin:bottom center}:host .md3-app-bar-container .md3-app-bar-title ::ng-deep [md3-app-bar-title]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:all}:host .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: auto;grid-column:1/-1;grid-row:2;min-inline-size:0;min-block-size:0;overflow:hidden;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom:empty{display:none}:host .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content{padding-bottom:.75em;padding-inline-start:1em;padding-inline-end:.25em;opacity:var(--app-bar-bottom-opacity);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom.md3-center .md3-app-bar-bottom-content{text-align:center;padding-inline:1em}:host.md3-scrolled.md3-scroll-style-elevate{--background-color: rgb(var(--md-scheme-surface-container));--search-background-color: rgb(var(--md-scheme-surface-container-highest));--elevation: var(--md-shadow-3dp)}:host.md3-scrolled.md3-scroll-style-transparent{--background-color: transparent}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:19.5em}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:100%}:host.md3-small .md3-app-bar-container .md3-app-bar-title,:host.md3-collapsed .md3-app-bar-container .md3-app-bar-title{transform:scale(1);opacity:1}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-small){--app-bar-bottom-expanded-block-size: 4.5em}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-small{margin-top:.285715em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3.5em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-medium){--app-bar-bottom-expanded-block-size: 5.5em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-medium{margin-top:.5em}:host.md3-scrolling-down.md3-auto-hide{max-height:0}:host.md3-scrolling-down.md3-auto-hide .md3-app-bar-container{opacity:0}\n"] }]
|
|
2712
|
+
}, template: "<div class=\"md3-app-bar-container\">\n <div class=\"md3-app-bar-leading\">\n <ng-content select=\"[md3-app-bar-leading]\"></ng-content>\n </div>\n\n @if (appBarType() == 'search') {\n <div class=\"md3-app-bar-search\" [class.md3-center]=\"centerAligned()\">\n <div class=\"md3-search-container\">\n <div class=\"md3-leading-buttons\">\n <ng-content select=\"[md3-search-leading]\"></ng-content>\n </div>\n <ng-content select=\"[md3-input-element]\"></ng-content>\n <div class=\"md3-trailing-buttons\">\n <ng-content select=\"[md3-search-trailing]\"></ng-content>\n </div>\n </div>\n </div>\n } @else if (hasLogo()) {\n <div class=\"md3-app-bar-logo\" [class.md3-center]=\"centerAligned()\">\n <ng-content select=\"[md3-app-bar-logo]\"></ng-content>\n </div>\n } @else if (title() || subtitle()) {\n <div class=\"md3-app-bar-title\" [class.md3-center]=\"centerAligned()\">\n @if (title()?.length) {\n <div md3-type-title size=\"large\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-body size=\"small\" emphasized>{{ subtitle() }}</div>\n }\n </div>\n }\n\n <div class=\"md3-app-bar-trailing\">\n <ng-content select=\"[md3-app-bar-trailing]\"></ng-content>\n @if (hasAvatar()) {\n <div class=\"md3-app-bar-avatar\">\n <ng-content select=\"[md3-avatar]\"></ng-content>\n </div>\n }\n </div>\n\n @if ((appBarType() == 'medium' || appBarType() == 'large') && (title() || subtitle())) {\n <div class=\"md3-app-bar-bottom\" [class.md3-center]=\"centerAligned()\">\n <div class=\"md3-app-bar-bottom-content\">\n @if (appBarType() == 'medium') {\n @if (title()?.length) {\n <div md3-type-headline size=\"medium\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-title size=\"small\">{{ subtitle() }}</div>\n }\n }\n @if (appBarType() == 'large') {\n @if (title()?.length) {\n <div md3-type-display size=\"small\">{{ title() }}</div>\n }\n @if (subtitle()?.length) {\n <div md3-type-title size=\"medium\">{{ subtitle() }}</div>\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));--search-background-color: rgb(var(--md-scheme-surface-container));--search-foreground-color: rgb(var(--md-scheme-on-surface));--foreground-secondary: rgb(var(--md-scheme-on-surface-variant));--elevation: var(--md-shadow-0dp);--app-bar-bottom-collapse: 0px;--app-bar-bottom-opacity: 1;display:block;min-height:0em;max-height:9.5em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:4em auto auto;min-height:4em;width:100%;background-color:inherit;color:inherit;transition:opacity var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-leading,:host .md3-app-bar-container .md3-app-bar-trailing{grid-row:1;z-index:1;display:inline-flex;align-items:center;gap:.25em;min-inline-size:0;block-size:4em}:host .md3-app-bar-container .md3-app-bar-leading:empty,:host .md3-app-bar-container .md3-app-bar-trailing:empty{display:none}:host .md3-app-bar-container .md3-app-bar-leading .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-trailing],:host .md3-app-bar-container .md3-app-bar-trailing .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{flex:0 0 auto;height:3em;min-width:3em;display:inline-flex;align-items:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-leading{grid-column:1;justify-self:start;padding-inline-start:.25em;padding-inline-end:.5em;min-width:1em}:host .md3-app-bar-container .md3-app-bar-leading:empty{display:inline-flex}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading]{color:var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-trailing{grid-column:3;justify-self:end;padding-inline-end:.25em}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{color:var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep .md3-avatar{flex:0 0 2em}:host .md3-app-bar-container .md3-app-bar-search{grid-column:1/-1;grid-row:1;align-self:center;display:flex;justify-content:center;min-inline-size:0;height:3em;padding:0 .5em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container{display:inline-flex;align-items:center;justify-content:center;width:50%;max-width:100%;border-radius:1.5em;background-color:var(--search-background-color);color:var(--search-foreground-color);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons{flex:0 0 1.5em;pointer-events:none;display:inline-flex;gap:.25em;padding:0 .25em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons:empty,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons:empty{padding:0}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-trailing],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-trailing]{pointer-events:all}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container ::ng-deep [md3-input-element]{flex:1 1 auto;background-color:transparent;color:var(--search-foreground-color);font-size:1em;height:100%;min-width:0em;border:none;padding:0 1.5em;margin:0 -1.5em}:host .md3-app-bar-container .md3-app-bar-search.md3-center .md3-search-container ::ng-deep [md3-input-element]{text-align:center}:host .md3-app-bar-container .md3-app-bar-logo{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:start;min-inline-size:0;overflow:hidden;height:3em}:host .md3-app-bar-container .md3-app-bar-logo.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep a[md3-app-bar-logo],:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep button[md3-app-bar-logo]{cursor:pointer}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]{flex:0 1 auto;max-height:100%;max-width:100%;display:inline;border:none;background:transparent;font-size:1em;text-decoration:none;padding:0;margin:0}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]>*{display:inline;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}:host .md3-app-bar-container .md3-app-bar-title{grid-column:2;grid-row:1;align-self:center;min-inline-size:0;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing);transform:scale(0);opacity:0}:host .md3-app-bar-container .md3-app-bar-title:dir(ltr){transform-origin:bottom left}:host .md3-app-bar-container .md3-app-bar-title:dir(rtl){transform-origin:bottom right}:host .md3-app-bar-container .md3-app-bar-title.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;transform-origin:bottom center}:host .md3-app-bar-container .md3-app-bar-title ::ng-deep [md3-app-bar-title]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:all}:host .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: auto;grid-column:1/-1;grid-row:2;min-inline-size:0;min-block-size:0;overflow:hidden;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom:empty{display:none}:host .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content{padding-bottom:.75em;padding-inline-start:1em;padding-inline-end:.25em;opacity:var(--app-bar-bottom-opacity);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom.md3-center .md3-app-bar-bottom-content{text-align:center;padding-inline:1em}:host.md3-scrolled.md3-scroll-style-elevate{--background-color: rgb(var(--md-scheme-surface-container));--search-background-color: rgb(var(--md-scheme-surface-container-highest));--elevation: var(--md-shadow-3dp)}:host.md3-scrolled.md3-scroll-style-transparent{--background-color: transparent}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:19.5em}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:100%}:host.md3-small .md3-app-bar-container .md3-app-bar-title,:host.md3-collapsed .md3-app-bar-container .md3-app-bar-title{transform:scale(1);opacity:1}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-small){--app-bar-bottom-expanded-block-size: 4.5em}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-small{margin-top:.285715em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3.5em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-medium){--app-bar-bottom-expanded-block-size: 5.5em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-medium{margin-top:.5em}:host.md3-scrolling-down.md3-auto-hide{max-height:0}:host.md3-scrolling-down.md3-auto-hide .md3-app-bar-container{opacity:0}\n"] }]
|
|
2710
2713
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: LayoutService }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-subtitle", required: false }] }], appBarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-type", required: false }] }], appBarScrollingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-style", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-hide", required: false }] }], centerAligned: [{ type: i0.Input, args: [{ isSignal: true, alias: "center-aligned", required: false }] }], logo: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AppBarLogo), { isSignal: true }] }], avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Avatar), { isSignal: true }] }] } });
|
|
2711
2714
|
|
|
2712
2715
|
class NavigationItem {
|