@almoamendev/ngx-md3 0.0.10 → 0.0.12

package/README.md

@@ -46,4 +46,4 @@ Browse the full component catalogue, API references, and live playgrounds at **h
 
 ## License
 
-MIT © Hussain Almomen — see [LICENSE](https://github.com/almoamendev/ngx-md3/blob/main/LICENSE).
+MIT © Murtadha (Hussain) Almoamen — see [LICENSE](https://github.com/almoamendev/ngx-md3/blob/main/LICENSE).

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -1154,7 +1154,7 @@ class Button {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    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"] });
+    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"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, decorators: [{
             type: Component,
@@ -1162,7 +1162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.md3-square]': 'effectiveSquared()',
                     }, hostDirectives: [
                         StateComponent
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]