@almoamendev/ngx-md3 0.5.0 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2273,12 +2273,15 @@ class Button {
|
|
|
2273
2273
|
return this.el.nativeElement;
|
|
2274
2274
|
}
|
|
2275
2275
|
enableSelection() {
|
|
2276
|
+
let enabled = false;
|
|
2276
2277
|
this.isSelected.update((current) => {
|
|
2277
2278
|
if (current !== null) {
|
|
2278
2279
|
return current;
|
|
2279
2280
|
}
|
|
2281
|
+
enabled = true;
|
|
2280
2282
|
return false;
|
|
2281
2283
|
});
|
|
2284
|
+
return enabled;
|
|
2282
2285
|
}
|
|
2283
2286
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2284
2287
|
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"] });
|
|
@@ -2410,12 +2413,15 @@ class IconButton {
|
|
|
2410
2413
|
return this.el.nativeElement;
|
|
2411
2414
|
}
|
|
2412
2415
|
enableSelection() {
|
|
2416
|
+
let enabled = false;
|
|
2413
2417
|
this.isSelected.update((current) => {
|
|
2414
2418
|
if (current !== null) {
|
|
2415
2419
|
return current;
|
|
2416
2420
|
}
|
|
2421
|
+
enabled = true;
|
|
2417
2422
|
return false;
|
|
2418
2423
|
});
|
|
2424
|
+
return enabled;
|
|
2419
2425
|
}
|
|
2420
2426
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IconButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2421
2427
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: IconButton, isStandalone: true, selector: "button[md3-icon-button], a[md3-icon-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 }, buttonWidth: { classPropertyName: "buttonWidth", publicName: "button-width", 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<ng-content></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: 0em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;--inline-padding: calc(.5em - var(--border-size));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);padding:0 var(--inline-padding);height:2.5em;border:var(--border-size) solid transparent;-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 ::ng-deep [md3-icon-element]{font-size:1.5em!important;line-height:1;height:1em!important;width:1em!important}:host.md3-narrow{--inline-padding: calc(.25em - var(--border-size))}:host.md3-wide{--inline-padding: calc(.825em - var(--border-size))}: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 .md3-state-layer{display:none}: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: calc(.375em - var(--border-size));height:2em}:host.md3-x-small ::ng-deep [md3-icon-element]{font-size:1.25em!important}:host.md3-x-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-x-small.md3-narrow{--inline-padding: calc(.25em - var(--border-size))}:host.md3-x-small.md3-wide{--inline-padding: calc(.625em - var(--border-size))}:host.md3-x-small.md3-square{--border-radius: var(--md-border-radius-medium)}: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:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-medium{--border-radius: 3.5em;--inline-padding: calc(1em - var(--border-size));height:3.5em}:host.md3-medium ::ng-deep [md3-icon-element]{font-size:1.5em!important}:host.md3-medium.md3-narrow{--inline-padding: calc(.75em - var(--border-size))}:host.md3-medium.md3-wide{--inline-padding: calc(1.5em - var(--border-size))}:host.md3-medium.md3-square{--border-radius: var(--md-border-radius-large)}: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-radius: 6em;--inline-padding: calc(2em - var(--border-size));height:6em}:host.md3-large ::ng-deep [md3-icon-element]{font-size:2em!important}:host.md3-large.md3-narrow{--inline-padding: calc(1em - var(--border-size))}:host.md3-large.md3-wide{--inline-padding: calc(3em - var(--border-size))}:host.md3-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}: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-radius: 8.5em;--inline-padding: calc(3em - var(--border-size));height:8.5em}:host.md3-x-large ::ng-deep [md3-icon-element]{font-size:2.5em!important}:host.md3-x-large.md3-narrow{--inline-padding: calc(2em - var(--border-size))}:host.md3-x-large.md3-wide{--inline-padding: calc(4.5em - var(--border-size))}:host.md3-x-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}: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-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)}: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-size: .0625em}:host.md3-outlined.md3-large{--border-size: .125em}:host.md3-outlined.md3-x-large{--border-size: .1875em}:host.md3-outlined{border-color:rgb(var(--md-scheme-outline-variant))}: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-standard{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-standard.md3-toggle.md3-selected{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary)}\n"] });
|
|
@@ -2519,6 +2525,7 @@ class ButtonGroup {
|
|
|
2519
2525
|
groupSelection = input('none', { ...(ngDevMode ? { debugName: "groupSelection" } : /* istanbul ignore next */ {}), alias: 'selection' });
|
|
2520
2526
|
buttons = contentChildren(Button, { ...(ngDevMode ? { debugName: "buttons" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2521
2527
|
iconButtons = contentChildren(IconButton, { ...(ngDevMode ? { debugName: "iconButtons" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2528
|
+
managedButtons = new WeakSet();
|
|
2522
2529
|
// context values
|
|
2523
2530
|
buttonContextSize = this.buttonSize;
|
|
2524
2531
|
buttonContextSelection = this.groupSelection;
|
|
@@ -2540,14 +2547,28 @@ class ButtonGroup {
|
|
|
2540
2547
|
});
|
|
2541
2548
|
effect(() => {
|
|
2542
2549
|
const selection = this.groupSelection();
|
|
2550
|
+
const buttons = this.allButtons();
|
|
2551
|
+
if (selection == 'manual') {
|
|
2552
|
+
// hand the control back, only for the buttons the group made selectable
|
|
2553
|
+
buttons.forEach((item) => {
|
|
2554
|
+
if (this.managedButtons.has(item)) {
|
|
2555
|
+
item.isSelected.set(null);
|
|
2556
|
+
}
|
|
2557
|
+
});
|
|
2558
|
+
this.managedButtons = new WeakSet();
|
|
2559
|
+
return;
|
|
2560
|
+
}
|
|
2543
2561
|
if (selection == 'none') {
|
|
2544
|
-
|
|
2562
|
+
buttons.forEach((item) => {
|
|
2545
2563
|
item.isSelected.set(null);
|
|
2546
2564
|
});
|
|
2565
|
+
this.managedButtons = new WeakSet();
|
|
2547
2566
|
}
|
|
2548
2567
|
else {
|
|
2549
|
-
|
|
2550
|
-
item.enableSelection()
|
|
2568
|
+
buttons.forEach((item) => {
|
|
2569
|
+
if (item.enableSelection()) {
|
|
2570
|
+
this.managedButtons.add(item);
|
|
2571
|
+
}
|
|
2551
2572
|
});
|
|
2552
2573
|
if (selection == 'single') {
|
|
2553
2574
|
this.normalizeSingleSelection();
|
|
@@ -4679,11 +4700,11 @@ class CircularProgressIndicator {
|
|
|
4679
4700
|
constructor() {
|
|
4680
4701
|
}
|
|
4681
4702
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CircularProgressIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4682
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CircularProgressIndicator, isStandalone: true, selector: "md3-circular-progress-indicator", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"md3-indicator-container\" [class.md3-thickness-8dp]=\"thickness() == 8\" [class.md3-indeterminate]=\"indeterminate()\" [style.--progress]=\"progressValue()\">\n <svg class=\"md3-circlar-indicator\">\n <circle class=\"md3-track\" pathLength=\"100\"></circle>\n <circle class=\"md3-active-indicator\" pathLength=\"100\"></circle>\n </svg>\n</div>", styles: [":host{display:inline-
|
|
4703
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CircularProgressIndicator, isStandalone: true, selector: "md3-circular-progress-indicator", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"md3-indicator-container\" [class.md3-thickness-8dp]=\"thickness() == 8\" [class.md3-indeterminate]=\"indeterminate()\" [style.--progress]=\"progressValue()\">\n <svg class=\"md3-circlar-indicator\">\n <circle class=\"md3-track\" pathLength=\"100\"></circle>\n <circle class=\"md3-active-indicator\" pathLength=\"100\"></circle>\n </svg>\n</div>", styles: [":host{display:inline-flex}:host .md3-indicator-container{font-size:.25rem;--gap: 7;--progress: 0}:host .md3-indicator-container.md3-thickness-8dp{font-size:.5rem;--gap: 10}:host .md3-indicator-container{--indicator-color: rgb(var(--md-scheme-primary));--track-color: rgb(var(--md-scheme-primary-container));--size: calc(2.25rem + 1em) ;--stroke: 1em;--center: calc(var(--size) / 2);--radius: calc(var(--size) / 2 - var(--stroke) / 2);--track-arc: calc(100 - var(--progress));display:inline-block;width:var(--size);height:var(--size)}:host .md3-indicator-container .md3-circlar-indicator{display:block;width:var(--size);height:var(--size);shape-rendering:geometricprecision}:host .md3-indicator-container .md3-track,:host .md3-indicator-container .md3-active-indicator{fill:none;stroke-width:var(--stroke);stroke-linecap:round;cx:var(--center);cy:var(--center);r:var(--radius);transform-origin:center;transform:rotate(-90deg);transition:stroke-dasharray var(--md-motion-standard-fast-effects-duration) var(--md-motion-standard-fast-effects-easing),stroke-dashoffset var(--md-motion-standard-fast-effects-duration) var(--md-motion-standard-fast-effects-easing)}:host .md3-indicator-container .md3-track{--track-length: calc(var(--track-arc) - var(--gap) * 2);stroke:var(--track-color);stroke-dasharray:var(--track-length) calc(100 - var(--track-length));stroke-dashoffset:calc(var(--track-arc) - var(--gap))}:host .md3-indicator-container .md3-active-indicator{stroke:var(--indicator-color);stroke-dasharray:var(--progress) calc(100 - var(--progress))}:host .md3-indicator-container.md3-indeterminate{animation:container-rotate calc(var(--md-motion-standard-slow-effects-duration) * 5) linear infinite}:host .md3-indicator-container.md3-indeterminate .md3-circlar-indicator{animation:indicator-track-rotate calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}:host .md3-indicator-container.md3-indeterminate .md3-circlar-indicator .md3-track{stroke-dashoffset:92;animation:track-fill calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}:host .md3-indicator-container.md3-indeterminate .md3-circlar-indicator .md3-active-indicator{stroke-dashoffset:0;animation:indicator-fill calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}:host .md3-indicator-container.md3-indeterminate.md3-thickness-8dp .md3-circlar-indicator .md3-track{stroke-dashoffset:90;animation:track-fill-8dp calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}@keyframes container-rotate{to{transform:rotate(360deg)}}@keyframes indicator-track-rotate{0%{transform:rotate(0)}30%{transform:rotate(0)}50%{transform:rotate(180deg)}80%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes track-fill{0%{stroke-dasharray:84 16;stroke-dashoffset:92}30%{stroke-dasharray:34 66;stroke-dashoffset:42}50%{stroke-dasharray:84 24;stroke-dashoffset:100}80%{stroke-dasharray:34 66;stroke-dashoffset:42}to{stroke-dasharray:84 16;stroke-dashoffset:92}}@keyframes track-fill-8dp{0%{stroke-dasharray:80 20;stroke-dashoffset:90}30%{stroke-dasharray:30 70;stroke-dashoffset:40}50%{stroke-dasharray:80 20;stroke-dashoffset:90}80%{stroke-dasharray:30 70;stroke-dashoffset:40}to{stroke-dasharray:80 20;stroke-dashoffset:90}}@keyframes indicator-fill{0%{stroke-dasharray:0 100}30%{stroke-dasharray:50 50}50%{stroke-dasharray:0 100}80%{stroke-dasharray:50 50}to{stroke-dasharray:0 100}}\n"] });
|
|
4683
4704
|
}
|
|
4684
4705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CircularProgressIndicator, decorators: [{
|
|
4685
4706
|
type: Component,
|
|
4686
|
-
args: [{ selector: 'md3-circular-progress-indicator', imports: [], template: "<div class=\"md3-indicator-container\" [class.md3-thickness-8dp]=\"thickness() == 8\" [class.md3-indeterminate]=\"indeterminate()\" [style.--progress]=\"progressValue()\">\n <svg class=\"md3-circlar-indicator\">\n <circle class=\"md3-track\" pathLength=\"100\"></circle>\n <circle class=\"md3-active-indicator\" pathLength=\"100\"></circle>\n </svg>\n</div>", styles: [":host{display:inline-
|
|
4707
|
+
args: [{ selector: 'md3-circular-progress-indicator', imports: [], template: "<div class=\"md3-indicator-container\" [class.md3-thickness-8dp]=\"thickness() == 8\" [class.md3-indeterminate]=\"indeterminate()\" [style.--progress]=\"progressValue()\">\n <svg class=\"md3-circlar-indicator\">\n <circle class=\"md3-track\" pathLength=\"100\"></circle>\n <circle class=\"md3-active-indicator\" pathLength=\"100\"></circle>\n </svg>\n</div>", styles: [":host{display:inline-flex}:host .md3-indicator-container{font-size:.25rem;--gap: 7;--progress: 0}:host .md3-indicator-container.md3-thickness-8dp{font-size:.5rem;--gap: 10}:host .md3-indicator-container{--indicator-color: rgb(var(--md-scheme-primary));--track-color: rgb(var(--md-scheme-primary-container));--size: calc(2.25rem + 1em) ;--stroke: 1em;--center: calc(var(--size) / 2);--radius: calc(var(--size) / 2 - var(--stroke) / 2);--track-arc: calc(100 - var(--progress));display:inline-block;width:var(--size);height:var(--size)}:host .md3-indicator-container .md3-circlar-indicator{display:block;width:var(--size);height:var(--size);shape-rendering:geometricprecision}:host .md3-indicator-container .md3-track,:host .md3-indicator-container .md3-active-indicator{fill:none;stroke-width:var(--stroke);stroke-linecap:round;cx:var(--center);cy:var(--center);r:var(--radius);transform-origin:center;transform:rotate(-90deg);transition:stroke-dasharray var(--md-motion-standard-fast-effects-duration) var(--md-motion-standard-fast-effects-easing),stroke-dashoffset var(--md-motion-standard-fast-effects-duration) var(--md-motion-standard-fast-effects-easing)}:host .md3-indicator-container .md3-track{--track-length: calc(var(--track-arc) - var(--gap) * 2);stroke:var(--track-color);stroke-dasharray:var(--track-length) calc(100 - var(--track-length));stroke-dashoffset:calc(var(--track-arc) - var(--gap))}:host .md3-indicator-container .md3-active-indicator{stroke:var(--indicator-color);stroke-dasharray:var(--progress) calc(100 - var(--progress))}:host .md3-indicator-container.md3-indeterminate{animation:container-rotate calc(var(--md-motion-standard-slow-effects-duration) * 5) linear infinite}:host .md3-indicator-container.md3-indeterminate .md3-circlar-indicator{animation:indicator-track-rotate calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}:host .md3-indicator-container.md3-indeterminate .md3-circlar-indicator .md3-track{stroke-dashoffset:92;animation:track-fill calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}:host .md3-indicator-container.md3-indeterminate .md3-circlar-indicator .md3-active-indicator{stroke-dashoffset:0;animation:indicator-fill calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}:host .md3-indicator-container.md3-indeterminate.md3-thickness-8dp .md3-circlar-indicator .md3-track{stroke-dashoffset:90;animation:track-fill-8dp calc(var(--md-motion-standard-slow-effects-duration) * 8) var(--md-motion-standard-slow-effects-easing) infinite}@keyframes container-rotate{to{transform:rotate(360deg)}}@keyframes indicator-track-rotate{0%{transform:rotate(0)}30%{transform:rotate(0)}50%{transform:rotate(180deg)}80%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes track-fill{0%{stroke-dasharray:84 16;stroke-dashoffset:92}30%{stroke-dasharray:34 66;stroke-dashoffset:42}50%{stroke-dasharray:84 24;stroke-dashoffset:100}80%{stroke-dasharray:34 66;stroke-dashoffset:42}to{stroke-dasharray:84 16;stroke-dashoffset:92}}@keyframes track-fill-8dp{0%{stroke-dasharray:80 20;stroke-dashoffset:90}30%{stroke-dasharray:30 70;stroke-dashoffset:40}50%{stroke-dasharray:80 20;stroke-dashoffset:90}80%{stroke-dasharray:30 70;stroke-dashoffset:40}to{stroke-dasharray:80 20;stroke-dashoffset:90}}@keyframes indicator-fill{0%{stroke-dasharray:0 100}30%{stroke-dasharray:50 50}50%{stroke-dasharray:0 100}80%{stroke-dasharray:50 50}to{stroke-dasharray:0 100}}\n"] }]
|
|
4687
4708
|
}], ctorParameters: () => [], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
|
|
4688
4709
|
|
|
4689
4710
|
class AppBarLogo {
|