@tedi-design-system/angular 8.0.1-rc.4 → 8.0.1-rc.5
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.
|
@@ -1658,6 +1658,13 @@ const translationsMap = {
|
|
|
1658
1658
|
en: "Remove",
|
|
1659
1659
|
ru: "Удалить",
|
|
1660
1660
|
},
|
|
1661
|
+
loading: {
|
|
1662
|
+
description: "Announces a loading state to assistive technology",
|
|
1663
|
+
components: ["Tag", "Spinner"],
|
|
1664
|
+
et: "Laadimine",
|
|
1665
|
+
en: "Loading",
|
|
1666
|
+
ru: "Загрузка",
|
|
1667
|
+
},
|
|
1661
1668
|
cancel: {
|
|
1662
1669
|
description: "For canceling an action",
|
|
1663
1670
|
components: ["TableFilter"],
|
|
@@ -6072,7 +6079,7 @@ class TagComponent {
|
|
|
6072
6079
|
this.closed.emit(event);
|
|
6073
6080
|
}
|
|
6074
6081
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6075
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TagComponent, isStandalone: true, selector: "tedi-tag", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.tedi-tag": "true", "class.tedi-tag--loading": "loading()", "class.tedi-tag--closable": "closable()", "class.tedi-tag--ellipsis": "ellipsis() !== false", "class": "classes()" } }, ngImport: i0, template: "@if (type() === \"danger\") {\n <span class=\"tedi-tag__icon-wrapper\">\n <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n @if (ellipsis()) {\n <tedi-ellipsis [position]=\"ellipsisPosition()\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"tagContent\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"tagContent\" />\n }\n</span>\n\n<ng-template #tagContent><ng-content /></ng-template>\n\n@if (loading()) {\n <span class=\"tedi-tag__spinner-wrapper\">\n <tedi-spinner [size]=\"48\" />\n </span>\n} @else if (closable()) {\n <button\n type=\"button\"\n tedi-closing-button\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose($event)\"\n [attr.aria-describedby]=\"uniqueId\"\n [ariaLabel]=\"'remove' | tediTranslate\"\n ></button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag--ellipsis .tedi-tag__content{min-width:0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag--ellipsis{min-width:0;max-width:100%}.tedi-tag--ellipsis .tedi-tag__content{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tedi-tag--ellipsis .tedi-tag__icon-wrapper,.tedi-tag--ellipsis .tedi-closing-button{flex-shrink:0}.tedi-tag--ellipsis-start .tedi-tag__content{text-align:left;direction:rtl}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6082
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TagComponent, isStandalone: true, selector: "tedi-tag", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.tedi-tag": "true", "class.tedi-tag--loading": "loading()", "class.tedi-tag--closable": "closable()", "class.tedi-tag--ellipsis": "ellipsis() !== false", "class": "classes()" } }, ngImport: i0, template: "@if (type() === \"danger\") {\n <span class=\"tedi-tag__icon-wrapper\">\n <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n @if (ellipsis()) {\n <tedi-ellipsis [position]=\"ellipsisPosition()\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"tagContent\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"tagContent\" />\n }\n</span>\n\n<ng-template #tagContent><ng-content /></ng-template>\n\n@if (loading()) {\n <span class=\"tedi-tag__spinner-wrapper\">\n <tedi-spinner [size]=\"48\" />\n </span>\n} @else if (closable()) {\n <button\n type=\"button\"\n tedi-closing-button\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose($event)\"\n [attr.aria-describedby]=\"uniqueId\"\n [ariaLabel]=\"'remove' | tediTranslate\"\n ></button>\n}\n\n<span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n @if (loading()) {\n {{ \"loading\" | tediTranslate }}\n }\n</span>\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag--ellipsis .tedi-tag__content{min-width:0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag--ellipsis{min-width:0;max-width:100%}.tedi-tag--ellipsis .tedi-tag__content{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tedi-tag--ellipsis .tedi-tag__icon-wrapper,.tedi-tag--ellipsis .tedi-closing-button{flex-shrink:0}.tedi-tag--ellipsis-start .tedi-tag__content{text-align:left;direction:rtl}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6076
6083
|
}
|
|
6077
6084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TagComponent, decorators: [{
|
|
6078
6085
|
type: Component,
|
|
@@ -6089,7 +6096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
6089
6096
|
"[class.tedi-tag--closable]": "closable()",
|
|
6090
6097
|
"[class.tedi-tag--ellipsis]": "ellipsis() !== false",
|
|
6091
6098
|
"[class]": "classes()",
|
|
6092
|
-
}, template: "@if (type() === \"danger\") {\n <span class=\"tedi-tag__icon-wrapper\">\n <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n @if (ellipsis()) {\n <tedi-ellipsis [position]=\"ellipsisPosition()\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"tagContent\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"tagContent\" />\n }\n</span>\n\n<ng-template #tagContent><ng-content /></ng-template>\n\n@if (loading()) {\n <span class=\"tedi-tag__spinner-wrapper\">\n <tedi-spinner [size]=\"48\" />\n </span>\n} @else if (closable()) {\n <button\n type=\"button\"\n tedi-closing-button\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose($event)\"\n [attr.aria-describedby]=\"uniqueId\"\n [ariaLabel]=\"'remove' | tediTranslate\"\n ></button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag--ellipsis .tedi-tag__content{min-width:0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag--ellipsis{min-width:0;max-width:100%}.tedi-tag--ellipsis .tedi-tag__content{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tedi-tag--ellipsis .tedi-tag__icon-wrapper,.tedi-tag--ellipsis .tedi-closing-button{flex-shrink:0}.tedi-tag--ellipsis-start .tedi-tag__content{text-align:left;direction:rtl}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"] }]
|
|
6099
|
+
}, template: "@if (type() === \"danger\") {\n <span class=\"tedi-tag__icon-wrapper\">\n <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n @if (ellipsis()) {\n <tedi-ellipsis [position]=\"ellipsisPosition()\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"tagContent\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"tagContent\" />\n }\n</span>\n\n<ng-template #tagContent><ng-content /></ng-template>\n\n@if (loading()) {\n <span class=\"tedi-tag__spinner-wrapper\">\n <tedi-spinner [size]=\"48\" />\n </span>\n} @else if (closable()) {\n <button\n type=\"button\"\n tedi-closing-button\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose($event)\"\n [attr.aria-describedby]=\"uniqueId\"\n [ariaLabel]=\"'remove' | tediTranslate\"\n ></button>\n}\n\n<span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n @if (loading()) {\n {{ \"loading\" | tediTranslate }}\n }\n</span>\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag--ellipsis .tedi-tag__content{min-width:0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag--ellipsis{min-width:0;max-width:100%}.tedi-tag--ellipsis .tedi-tag__content{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tedi-tag--ellipsis .tedi-tag__icon-wrapper,.tedi-tag--ellipsis .tedi-closing-button{flex-shrink:0}.tedi-tag--ellipsis-start .tedi-tag__content{text-align:left;direction:rtl}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"] }]
|
|
6093
6100
|
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
6094
6101
|
|
|
6095
6102
|
/** Horizontal gap (px) between tags in a single row. */
|