@almoamendev/ngx-md3 0.5.1 → 0.5.3
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.
|
@@ -4700,11 +4700,11 @@ class CircularProgressIndicator {
|
|
|
4700
4700
|
constructor() {
|
|
4701
4701
|
}
|
|
4702
4702
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CircularProgressIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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-
|
|
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"] });
|
|
4704
4704
|
}
|
|
4705
4705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CircularProgressIndicator, decorators: [{
|
|
4706
4706
|
type: Component,
|
|
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-
|
|
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"] }]
|
|
4708
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 }] }] } });
|
|
4709
4709
|
|
|
4710
4710
|
class AppBarLogo {
|
|
@@ -6047,7 +6047,7 @@ class FullScreenDialogHeader {
|
|
|
6047
6047
|
provide: MD3_BUTTON_CONTEXT,
|
|
6048
6048
|
useExisting: FullScreenDialogHeader,
|
|
6049
6049
|
},
|
|
6050
|
-
], ngImport: i0, template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n <ng-content></ng-content>\n</div>\n<div class=\"md3-actions-container\">\n <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface))}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"] });
|
|
6050
|
+
], ngImport: i0, template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n <ng-content></ng-content>\n</div>\n<div class=\"md3-actions-container\">\n <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface));max-width:100dvw}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"] });
|
|
6051
6051
|
}
|
|
6052
6052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialogHeader, decorators: [{
|
|
6053
6053
|
type: Component,
|
|
@@ -6056,7 +6056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
6056
6056
|
provide: MD3_BUTTON_CONTEXT,
|
|
6057
6057
|
useExisting: FullScreenDialogHeader,
|
|
6058
6058
|
},
|
|
6059
|
-
], template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n <ng-content></ng-content>\n</div>\n<div class=\"md3-actions-container\">\n <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface))}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"] }]
|
|
6059
|
+
], template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n <ng-content></ng-content>\n</div>\n<div class=\"md3-actions-container\">\n <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface));max-width:100dvw}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"] }]
|
|
6060
6060
|
}] });
|
|
6061
6061
|
|
|
6062
6062
|
const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
|