@tedi-design-system/angular 6.2.0-rc.10 → 6.2.0-rc.11
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.
|
@@ -6202,6 +6202,13 @@ class SpinnerComponent {
|
|
|
6202
6202
|
* Provides a text label for screen readers to announce the spinner's purpose or status.
|
|
6203
6203
|
*/
|
|
6204
6204
|
label = input();
|
|
6205
|
+
sizeConfig = {
|
|
6206
|
+
10: { strokeWidth: 4.4, r: 19.8 },
|
|
6207
|
+
16: { strokeWidth: 5.5, r: 19.25 },
|
|
6208
|
+
48: { strokeWidth: 3.6667, r: 20.1667 },
|
|
6209
|
+
};
|
|
6210
|
+
strokeWidth = computed(() => this.sizeConfig[this.size()].strokeWidth);
|
|
6211
|
+
r = computed(() => this.sizeConfig[this.size()].r);
|
|
6205
6212
|
classes = computed(() => {
|
|
6206
6213
|
const classList = [
|
|
6207
6214
|
"tedi-spinner",
|
|
@@ -6211,7 +6218,7 @@ class SpinnerComponent {
|
|
|
6211
6218
|
return classList.join(" ");
|
|
6212
6219
|
});
|
|
6213
6220
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6214
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: SpinnerComponent, isStandalone: true, selector: "tedi-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "classes()", "attr.aria-label": "label() ? label() : null", "attr.aria-hidden": "!label()" } }, ngImport: i0, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:
|
|
6221
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: SpinnerComponent, isStandalone: true, selector: "tedi-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "classes()", "attr.aria-label": "label() ? label() : null", "attr.aria-hidden": "!label()" } }, ngImport: i0, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n [attr.r]=\"r()\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:var(--tedi-spinner-stroke-width);stroke-dasharray:80,200;stroke-dashoffset:0;animation:1.4s ease-in-out 0s infinite normal none running tedi-spinner-inner}@media (prefers-reduced-motion: reduce){.tedi-spinner--inner{animation:none}}.tedi-spinner--color-primary{stroke:var(--loader-spinner-color-primary)}.tedi-spinner--color-secondary{stroke:var(--loader-spinner-color-secondary)}.tedi-spinner--size-10{--tedi-spinner-size: 10;--tedi-spinner-stroke-width: 4.4}.tedi-spinner--size-16{--tedi-spinner-size: 16;--tedi-spinner-stroke-width: 5.5}.tedi-spinner--size-48{--tedi-spinner-size: 48;--tedi-spinner-stroke-width: 3.6666666667}@media (prefers-reduced-motion: reduce){.tedi-spinner{animation:none}}@keyframes tedi-spinner-outer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes tedi-spinner-inner{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15}to{stroke-dasharray:100,200;stroke-dashoffset:-125}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6215
6222
|
}
|
|
6216
6223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
6217
6224
|
type: Component,
|
|
@@ -6221,7 +6228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6221
6228
|
"aria-live": "polite",
|
|
6222
6229
|
"[attr.aria-label]": "label() ? label() : null",
|
|
6223
6230
|
"[attr.aria-hidden]": "!label()"
|
|
6224
|
-
}, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:
|
|
6231
|
+
}, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n [attr.r]=\"r()\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:var(--tedi-spinner-stroke-width);stroke-dasharray:80,200;stroke-dashoffset:0;animation:1.4s ease-in-out 0s infinite normal none running tedi-spinner-inner}@media (prefers-reduced-motion: reduce){.tedi-spinner--inner{animation:none}}.tedi-spinner--color-primary{stroke:var(--loader-spinner-color-primary)}.tedi-spinner--color-secondary{stroke:var(--loader-spinner-color-secondary)}.tedi-spinner--size-10{--tedi-spinner-size: 10;--tedi-spinner-stroke-width: 4.4}.tedi-spinner--size-16{--tedi-spinner-size: 16;--tedi-spinner-stroke-width: 5.5}.tedi-spinner--size-48{--tedi-spinner-size: 48;--tedi-spinner-stroke-width: 3.6666666667}@media (prefers-reduced-motion: reduce){.tedi-spinner{animation:none}}@keyframes tedi-spinner-outer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes tedi-spinner-inner{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15}to{stroke-dasharray:100,200;stroke-dashoffset:-125}}\n"] }]
|
|
6225
6232
|
}] });
|
|
6226
6233
|
|
|
6227
6234
|
class ModalComponent {
|