@almoamendev/ngx-md3 0.8.8 → 0.8.9
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.
|
@@ -4481,7 +4481,9 @@ class Slider {
|
|
|
4481
4481
|
el;
|
|
4482
4482
|
control = input(undefined, { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), alias: 'control' });
|
|
4483
4483
|
sliderSize = input('x-small', { ...(ngDevMode ? { debugName: "sliderSize" } : /* istanbul ignore next */ {}), alias: 'slider-size' });
|
|
4484
|
-
showValueLabel = input(false, { ...(ngDevMode ? { debugName: "showValueLabel" } : /* istanbul ignore next */ {}), alias: 'show-value-label'
|
|
4484
|
+
showValueLabel = input(false, { ...(ngDevMode ? { debugName: "showValueLabel" } : /* istanbul ignore next */ {}), alias: 'show-value-label',
|
|
4485
|
+
transform: booleanAttribute });
|
|
4486
|
+
valueFormatter = input((v) => String(v), { ...(ngDevMode ? { debugName: "valueFormatter" } : /* istanbul ignore next */ {}), alias: 'value-formatter' });
|
|
4485
4487
|
input = contentChild(InputElement, /* @ts-ignore */
|
|
4486
4488
|
...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
|
|
4487
4489
|
controlName = contentChild(FormControlName, /* @ts-ignore */
|
|
@@ -4496,6 +4498,8 @@ class Slider {
|
|
|
4496
4498
|
...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
4497
4499
|
formControl = computed(() => this.control() ?? this.controlName()?.control, /* @ts-ignore */
|
|
4498
4500
|
...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
|
|
4501
|
+
formattedValue = computed(() => this.valueFormatter()(this.value()), /* @ts-ignore */
|
|
4502
|
+
...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
|
|
4499
4503
|
constructor(el) {
|
|
4500
4504
|
this.el = el;
|
|
4501
4505
|
effect((onCleanup) => {
|
|
@@ -4508,6 +4512,13 @@ class Slider {
|
|
|
4508
4512
|
effect(() => {
|
|
4509
4513
|
this.element.style.setProperty('--slider-progress', `${this.progress()}%`);
|
|
4510
4514
|
});
|
|
4515
|
+
effect(() => {
|
|
4516
|
+
const input = this.input()?.nativeElement;
|
|
4517
|
+
if (!input) {
|
|
4518
|
+
return;
|
|
4519
|
+
}
|
|
4520
|
+
input.setAttribute('aria-valuetext', this.formattedValue());
|
|
4521
|
+
});
|
|
4511
4522
|
effect((onCleanup) => {
|
|
4512
4523
|
const input = this.input()?.nativeElement;
|
|
4513
4524
|
if (!input) {
|
|
@@ -4603,14 +4614,14 @@ class Slider {
|
|
|
4603
4614
|
}
|
|
4604
4615
|
}
|
|
4605
4616
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Slider, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4606
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Slider, isStandalone: true, selector: "md3-slider", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sliderSize: { classPropertyName: "sliderSize", publicName: "slider-size", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "show-value-label", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "input", first: true, predicate: InputElement, descendants: true, isSignal: true }, { propertyName: "controlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[md3-input-element]\"></ng-content>\n<div class=\"md3-slider-container\">\n <div class=\"md3-slider-track\">\n <div class=\"md3-active-track\">\n <div class=\"md3-track-bar\">\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"md3-inactive-track\">\n <div class=\"md3-track-bar\"></div>\n </div>\n </div>\n <div class=\"md3-slider-handle\">\n @if (showValueLabel()) {\n <div class=\"md3-value-label\">\n <md3-type-body size=\"medium\">{{
|
|
4617
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Slider, isStandalone: true, selector: "md3-slider", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sliderSize: { classPropertyName: "sliderSize", publicName: "slider-size", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "show-value-label", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "value-formatter", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "input", first: true, predicate: InputElement, descendants: true, isSignal: true }, { propertyName: "controlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[md3-input-element]\"></ng-content>\n<div class=\"md3-slider-container\">\n <div class=\"md3-slider-track\">\n <div class=\"md3-active-track\">\n <div class=\"md3-track-bar\">\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"md3-inactive-track\">\n <div class=\"md3-track-bar\"></div>\n </div>\n </div>\n <div class=\"md3-slider-handle\">\n @if (showValueLabel()) {\n <div class=\"md3-value-label\">\n <md3-type-body size=\"medium\">{{ formattedValue() }}</md3-type-body>\n </div>\n }\n </div>\n</div>\n", styles: [":host{--slider-active-track-color: rgb(var(--md-scheme-primary));--slider-active-track-on-color: rgb(var(--md-scheme-on-primary));--slider-track-color: rgb(var(--md-scheme-secondary-container));--slider-handle-color: rgb(var(--md-scheme-primary));--outline-color: rgb(var(--md-scheme-secondary));--slider-size: 1em;--border-radius: var(--md-border-radius-small);--slider-progress: 0%;position:relative;display:block;width:100%;font-size:1rem;min-width:12.5em;min-height:2.75em;height:calc(var(--slider-size) + 1.125em);border-radius:var(--border-radius)}:host.md3-x-small{--slider-size: 1em;--border-radius: var(--md-border-radius-small)}:host.md3-small{--slider-size: 1.5em;--border-radius: var(--md-border-radius-small)}:host.md3-x-small .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container,:host.md3-small .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{display:none}:host.md3-medium{--slider-size: 2.5em;--border-radius: var(--md-border-radius-medium)}:host.md3-large{--slider-size: 3.5em;--border-radius: var(--md-border-radius-large)}:host.md3-medium .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container,:host.md3-large .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 1.5em;margin-top:-.75em}:host.md3-x-large{--slider-size: 6em;--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 2em;margin-top:-1em}:host .md3-slider-container{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;height:100%}:host .md3-slider-container .md3-slider-track{display:flex;flex:1 1 100%;position:relative;align-items:center;height:var(--slider-size);border-radius:var(--border-radius);overflow:hidden}:host .md3-slider-container .md3-slider-track .md3-active-track{position:relative;width:var(--slider-progress);overflow:hidden;height:100%;transition:width var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar{position:relative;overflow:hidden;height:100%;border-radius:.125em;background-color:var(--slider-active-track-color);margin-inline-end:.5em}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 1.5em;position:absolute;display:flex;align-items:center;justify-content:center;inset-inline-start:.25em;top:50%;font-size:1em!important;margin-top:-.75em;height:var(--icon-size);width:var(--icon-size);color:var(--slider-active-track-on-color)}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container ::ng-deep [md3-icon-element]{font-size:var(--icon-size)!important}:host .md3-slider-container .md3-slider-track .md3-inactive-track{position:relative;flex:1 1 0;overflow:hidden;height:100%;transition:width var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-track .md3-inactive-track .md3-track-bar{position:relative;overflow:hidden;height:100%;border-radius:.125em;background-color:var(--slider-track-color);margin-inline-start:.5em}:host .md3-slider-container .md3-slider-track .md3-inactive-track .md3-track-bar:after{content:\"\";position:absolute;inset-inline-end:.25em;top:50%;margin-top:-.125em;display:block;height:.25em;width:.25em;border-radius:var(--md-border-radius-xsmall);background-color:var(--slider-active-track-color)}:host .md3-slider-container .md3-slider-handle{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--slider-progress) - .5em);width:1em;height:100%;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle:before{content:\"\";display:block;height:100%;width:.25em;border-radius:.125em;margin:auto;background-color:var(--slider-handle-color);transition:width var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle:after{content:\"\";position:absolute;display:block;inset:-.5625em -.1875em;border-radius:var(--md-border-radius-large);border:.1875em solid var(--outline-color);pointer-events:none;opacity:0;transition:opacity var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle .md3-value-label{position:absolute;inset-inline-start:50%;bottom:calc(100% + .25em);min-width:3em;height:2.75em;display:inline-flex;align-items:center;justify-content:center;padding:0 1em;border-radius:1.375em;color:rgb(var(--md-scheme-inverse-on-surface));background-color:rgb(var(--md-scheme-inverse-surface));transform:translate(-50%) scale(0);opacity:0;transition:transform var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing),opacity var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle .md3-value-label .md3-text-body{font-size:.875em;white-space:nowrap}:host ::ng-deep .md3-input-element{display:block;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}:host ::ng-deep .md3-input-element:focus~.md3-slider-container .md3-slider-handle .md3-value-label,:host ::ng-deep .md3-input-element:active~.md3-slider-container .md3-slider-handle .md3-value-label{opacity:1!important;transform:translate(-50%) scale(1)!important}:host ::ng-deep .md3-input-element:focus~.md3-slider-container .md3-slider-handle:before{width:.125em}:host ::ng-deep .md3-input-element:focus:not(:hover):not(:active)~.md3-slider-container .md3-slider-handle:after{opacity:1}:host ::ng-deep .md3-input-element:disabled{cursor:default}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container{--slider-active-track-color: rgb(var(--md-scheme-on-surface));--slider-active-track-on-color: rgb(var(--md-scheme-inverse-on-surface));--slider-track-color: rgb(var(--md-scheme-on-surface));--slider-handle-color: rgb(var(--md-scheme-on-surface))}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-track .md3-active-track{opacity:.38}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-track .md3-inactive-track{opacity:.12}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-handle{opacity:.38}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-handle .md3-value-label{display:none!important}\n"], dependencies: [{ kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }] });
|
|
4607
4618
|
}
|
|
4608
4619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Slider, decorators: [{
|
|
4609
4620
|
type: Component,
|
|
4610
4621
|
args: [{ selector: 'md3-slider', imports: [
|
|
4611
4622
|
TypeBody,
|
|
4612
|
-
], template: "<ng-content select=\"[md3-input-element]\"></ng-content>\n<div class=\"md3-slider-container\">\n <div class=\"md3-slider-track\">\n <div class=\"md3-active-track\">\n <div class=\"md3-track-bar\">\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"md3-inactive-track\">\n <div class=\"md3-track-bar\"></div>\n </div>\n </div>\n <div class=\"md3-slider-handle\">\n @if (showValueLabel()) {\n <div class=\"md3-value-label\">\n <md3-type-body size=\"medium\">{{
|
|
4613
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], sliderSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "slider-size", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-value-label", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InputElement), { isSignal: true }] }], controlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }] } });
|
|
4623
|
+
], template: "<ng-content select=\"[md3-input-element]\"></ng-content>\n<div class=\"md3-slider-container\">\n <div class=\"md3-slider-track\">\n <div class=\"md3-active-track\">\n <div class=\"md3-track-bar\">\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"md3-inactive-track\">\n <div class=\"md3-track-bar\"></div>\n </div>\n </div>\n <div class=\"md3-slider-handle\">\n @if (showValueLabel()) {\n <div class=\"md3-value-label\">\n <md3-type-body size=\"medium\">{{ formattedValue() }}</md3-type-body>\n </div>\n }\n </div>\n</div>\n", styles: [":host{--slider-active-track-color: rgb(var(--md-scheme-primary));--slider-active-track-on-color: rgb(var(--md-scheme-on-primary));--slider-track-color: rgb(var(--md-scheme-secondary-container));--slider-handle-color: rgb(var(--md-scheme-primary));--outline-color: rgb(var(--md-scheme-secondary));--slider-size: 1em;--border-radius: var(--md-border-radius-small);--slider-progress: 0%;position:relative;display:block;width:100%;font-size:1rem;min-width:12.5em;min-height:2.75em;height:calc(var(--slider-size) + 1.125em);border-radius:var(--border-radius)}:host.md3-x-small{--slider-size: 1em;--border-radius: var(--md-border-radius-small)}:host.md3-small{--slider-size: 1.5em;--border-radius: var(--md-border-radius-small)}:host.md3-x-small .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container,:host.md3-small .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{display:none}:host.md3-medium{--slider-size: 2.5em;--border-radius: var(--md-border-radius-medium)}:host.md3-large{--slider-size: 3.5em;--border-radius: var(--md-border-radius-large)}:host.md3-medium .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container,:host.md3-large .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 1.5em;margin-top:-.75em}:host.md3-x-large{--slider-size: 6em;--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 2em;margin-top:-1em}:host .md3-slider-container{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;height:100%}:host .md3-slider-container .md3-slider-track{display:flex;flex:1 1 100%;position:relative;align-items:center;height:var(--slider-size);border-radius:var(--border-radius);overflow:hidden}:host .md3-slider-container .md3-slider-track .md3-active-track{position:relative;width:var(--slider-progress);overflow:hidden;height:100%;transition:width var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar{position:relative;overflow:hidden;height:100%;border-radius:.125em;background-color:var(--slider-active-track-color);margin-inline-end:.5em}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 1.5em;position:absolute;display:flex;align-items:center;justify-content:center;inset-inline-start:.25em;top:50%;font-size:1em!important;margin-top:-.75em;height:var(--icon-size);width:var(--icon-size);color:var(--slider-active-track-on-color)}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container ::ng-deep [md3-icon-element]{font-size:var(--icon-size)!important}:host .md3-slider-container .md3-slider-track .md3-inactive-track{position:relative;flex:1 1 0;overflow:hidden;height:100%;transition:width var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-track .md3-inactive-track .md3-track-bar{position:relative;overflow:hidden;height:100%;border-radius:.125em;background-color:var(--slider-track-color);margin-inline-start:.5em}:host .md3-slider-container .md3-slider-track .md3-inactive-track .md3-track-bar:after{content:\"\";position:absolute;inset-inline-end:.25em;top:50%;margin-top:-.125em;display:block;height:.25em;width:.25em;border-radius:var(--md-border-radius-xsmall);background-color:var(--slider-active-track-color)}:host .md3-slider-container .md3-slider-handle{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--slider-progress) - .5em);width:1em;height:100%;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle:before{content:\"\";display:block;height:100%;width:.25em;border-radius:.125em;margin:auto;background-color:var(--slider-handle-color);transition:width var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle:after{content:\"\";position:absolute;display:block;inset:-.5625em -.1875em;border-radius:var(--md-border-radius-large);border:.1875em solid var(--outline-color);pointer-events:none;opacity:0;transition:opacity var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle .md3-value-label{position:absolute;inset-inline-start:50%;bottom:calc(100% + .25em);min-width:3em;height:2.75em;display:inline-flex;align-items:center;justify-content:center;padding:0 1em;border-radius:1.375em;color:rgb(var(--md-scheme-inverse-on-surface));background-color:rgb(var(--md-scheme-inverse-surface));transform:translate(-50%) scale(0);opacity:0;transition:transform var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing),opacity var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle .md3-value-label .md3-text-body{font-size:.875em;white-space:nowrap}:host ::ng-deep .md3-input-element{display:block;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}:host ::ng-deep .md3-input-element:focus~.md3-slider-container .md3-slider-handle .md3-value-label,:host ::ng-deep .md3-input-element:active~.md3-slider-container .md3-slider-handle .md3-value-label{opacity:1!important;transform:translate(-50%) scale(1)!important}:host ::ng-deep .md3-input-element:focus~.md3-slider-container .md3-slider-handle:before{width:.125em}:host ::ng-deep .md3-input-element:focus:not(:hover):not(:active)~.md3-slider-container .md3-slider-handle:after{opacity:1}:host ::ng-deep .md3-input-element:disabled{cursor:default}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container{--slider-active-track-color: rgb(var(--md-scheme-on-surface));--slider-active-track-on-color: rgb(var(--md-scheme-inverse-on-surface));--slider-track-color: rgb(var(--md-scheme-on-surface));--slider-handle-color: rgb(var(--md-scheme-on-surface))}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-track .md3-active-track{opacity:.38}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-track .md3-inactive-track{opacity:.12}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-handle{opacity:.38}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-handle .md3-value-label{display:none!important}\n"] }]
|
|
4624
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], sliderSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "slider-size", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-value-label", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "value-formatter", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InputElement), { isSignal: true }] }], controlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }] } });
|
|
4614
4625
|
|
|
4615
4626
|
class List {
|
|
4616
4627
|
el;
|