@tedi-design-system/angular 8.0.1-rc.2 → 8.0.1-rc.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.
|
@@ -18283,7 +18283,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
18283
18283
|
class ProgressBarComponent {
|
|
18284
18284
|
/**
|
|
18285
18285
|
* Optional id for the underlying `<progress>` element. Useful when an
|
|
18286
|
-
* external `<label for=…>` should bind to it.
|
|
18286
|
+
* external `<label for=…>` should bind to it. When omitted, a unique id is
|
|
18287
|
+
* generated so the internal label stays bound to the bar.
|
|
18287
18288
|
*/
|
|
18288
18289
|
progressId = input(...(ngDevMode ? [undefined, { debugName: "progressId" }] : []));
|
|
18289
18290
|
/**
|
|
@@ -18384,6 +18385,8 @@ class ProgressBarComponent {
|
|
|
18384
18385
|
/** Overrides applied from the `xxl` breakpoint (≥ 1400px) and up. */
|
|
18385
18386
|
xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
|
|
18386
18387
|
breakpointService = inject(BreakpointService);
|
|
18388
|
+
fallbackId = inject(_IdGenerator).getId("tedi-progress-bar-");
|
|
18389
|
+
resolvedId = computed(() => this.progressId() || this.fallbackId, ...(ngDevMode ? [{ debugName: "resolvedId" }] : []));
|
|
18387
18390
|
currentProps = computed(() => this.breakpointService.getBreakpointInputs({
|
|
18388
18391
|
size: this.size(),
|
|
18389
18392
|
labelPosition: this.labelPosition(),
|
|
@@ -18400,7 +18403,7 @@ class ProgressBarComponent {
|
|
|
18400
18403
|
formattedValue = computed(() => this.currentProps().valueLabel ?? `${this.value()}%`, ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
|
|
18401
18404
|
accessibleLabel = computed(() => this.ariaLabel() ?? this.label() ?? undefined, ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : []));
|
|
18402
18405
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18403
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valuePosition: { classPropertyName: "valuePosition", publicName: "valuePosition", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-progress-bar": "true", "class.tedi-progress-bar--small": "currentProps().size === 'small'", "class.tedi-progress-bar--label-horizontal": "label() && currentProps().labelPosition === 'horizontal'", "class.tedi-progress-bar--value-bottom": "currentProps().valuePosition === 'bottom'" } }, ngImport: i0, template: "@if (label() && currentProps().labelPosition === \"top\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [for]=\"
|
|
18406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valuePosition: { classPropertyName: "valuePosition", publicName: "valuePosition", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-progress-bar": "true", "class.tedi-progress-bar--small": "currentProps().size === 'small'", "class.tedi-progress-bar--label-horizontal": "label() && currentProps().labelPosition === 'horizontal'", "class.tedi-progress-bar--value-bottom": "currentProps().valuePosition === 'bottom'" } }, ngImport: i0, template: "@if (label() && currentProps().labelPosition === \"top\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n @if (label() && currentProps().labelPosition === \"horizontal\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n }\n\n <div class=\"tedi-progress-bar__main\">\n <div class=\"tedi-progress-bar__track-row\">\n <progress\n class=\"tedi-progress-bar__track\"\n [attr.id]=\"resolvedId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-valuetext]=\"currentProps().valueLabel\"\n ></progress>\n\n @if (\n currentProps().showValue &&\n currentProps().valuePosition === \"horizontal\"\n ) {\n <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n {{ formattedValue() }}\n </span>\n }\n </div>\n\n <div class=\"tedi-progress-bar__hint-row\">\n <ng-content select=\"tedi-feedback-text\" />\n\n @if (\n currentProps().showValue && currentProps().valuePosition === \"bottom\"\n ) {\n <span\n tedi-label\n size=\"small\"\n class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n >\n {{ formattedValue() }}\n </span>\n }\n </div>\n </div>\n</div>\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18404
18407
|
}
|
|
18405
18408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
18406
18409
|
type: Component,
|
|
@@ -18409,7 +18412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
18409
18412
|
"[class.tedi-progress-bar--small]": "currentProps().size === 'small'",
|
|
18410
18413
|
"[class.tedi-progress-bar--label-horizontal]": "label() && currentProps().labelPosition === 'horizontal'",
|
|
18411
18414
|
"[class.tedi-progress-bar--value-bottom]": "currentProps().valuePosition === 'bottom'",
|
|
18412
|
-
}, template: "@if (label() && currentProps().labelPosition === \"top\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [for]=\"
|
|
18415
|
+
}, template: "@if (label() && currentProps().labelPosition === \"top\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n @if (label() && currentProps().labelPosition === \"horizontal\") {\n <label\n tedi-label\n color=\"primary\"\n [required]=\"required()\"\n [attr.for]=\"resolvedId()\"\n class=\"tedi-progress-bar__label\"\n >\n {{ label() }}\n </label>\n }\n\n <div class=\"tedi-progress-bar__main\">\n <div class=\"tedi-progress-bar__track-row\">\n <progress\n class=\"tedi-progress-bar__track\"\n [attr.id]=\"resolvedId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-valuetext]=\"currentProps().valueLabel\"\n ></progress>\n\n @if (\n currentProps().showValue &&\n currentProps().valuePosition === \"horizontal\"\n ) {\n <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n {{ formattedValue() }}\n </span>\n }\n </div>\n\n <div class=\"tedi-progress-bar__hint-row\">\n <ng-content select=\"tedi-feedback-text\" />\n\n @if (\n currentProps().showValue && currentProps().valuePosition === \"bottom\"\n ) {\n <span\n tedi-label\n size=\"small\"\n class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n >\n {{ formattedValue() }}\n </span>\n }\n </div>\n </div>\n</div>\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"] }]
|
|
18413
18416
|
}], propDecorators: { progressId: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valuePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePosition", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
|
|
18414
18417
|
|
|
18415
18418
|
class AttachmentComponent {
|