@design-system-rte/angular 0.7.0 → 0.10.0
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.
- package/esm2022/lib/components/badge/badge.component.mjs +43 -0
- package/esm2022/lib/components/badge/badge.directive.mjs +55 -0
- package/esm2022/lib/components/chip/chip.component.mjs +63 -0
- package/esm2022/lib/components/icon-button-toggle/icon-button-toggle.component.mjs +20 -8
- package/esm2022/lib/components/link/link.component.mjs +3 -3
- package/esm2022/lib/components/text-input/text-input.component.mjs +4 -3
- package/esm2022/lib/components/textarea/textarea.component.mjs +73 -0
- package/esm2022/public-api.mjs +4 -1
- package/fesm2022/design-system-rte-angular.mjs +239 -12
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/lib/components/badge/badge.component.d.ts +18 -0
- package/lib/components/badge/badge.directive.d.ts +23 -0
- package/lib/components/chip/chip.component.d.ts +20 -0
- package/lib/components/icon-button-toggle/icon-button-toggle.component.d.ts +8 -3
- package/lib/components/text-input/text-input.component.d.ts +2 -1
- package/lib/components/textarea/textarea.component.d.ts +36 -0
- package/package.json +2 -2
- package/public-api.d.ts +3 -0
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import { Component, input, computed, ChangeDetectionStrategy } from "@angular/core";
|
|
3
|
+
import { getBadgeIconSize, getDisplayCount, getShowBadge, getShowIcon, getShowText, } from "@design-system-rte/core/components/badge/badge.utils";
|
|
4
|
+
import { isValidIconName } from "../icon/icon-map";
|
|
5
|
+
import { IconComponent } from "../icon/icon.component";
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
export class BadgeComponent {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.badgeType = input("brand");
|
|
11
|
+
this.badgeSize = input("m");
|
|
12
|
+
this.badgeAppearance = input("text");
|
|
13
|
+
this.count = input();
|
|
14
|
+
this.icon = input("notification");
|
|
15
|
+
this.isValidIconName = computed(() => isValidIconName(this.icon()));
|
|
16
|
+
this.showIcon = computed(() => getShowIcon({
|
|
17
|
+
size: this.badgeSize(),
|
|
18
|
+
appearance: this.badgeAppearance(),
|
|
19
|
+
iconSize: this.iconSize(),
|
|
20
|
+
}));
|
|
21
|
+
this.showText = computed(() => getShowText({
|
|
22
|
+
size: this.badgeSize(),
|
|
23
|
+
appearance: this.badgeAppearance(),
|
|
24
|
+
count: this.count(),
|
|
25
|
+
}));
|
|
26
|
+
this.displayCount = computed(() => getDisplayCount(this.count()));
|
|
27
|
+
this.countOverflow = computed(() => this.showText() && this.displayCount().length > 2);
|
|
28
|
+
this.iconSize = computed(() => getBadgeIconSize(this.badgeSize()));
|
|
29
|
+
this.showBadge = computed(() => getShowBadge({
|
|
30
|
+
size: this.badgeSize(),
|
|
31
|
+
appearance: this.badgeAppearance(),
|
|
32
|
+
count: this.count(),
|
|
33
|
+
iconSize: this.iconSize(),
|
|
34
|
+
}));
|
|
35
|
+
}
|
|
36
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
37
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: BadgeComponent, isStandalone: true, selector: "rte-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, badgeAppearance: { classPropertyName: "badgeAppearance", publicName: "badgeAppearance", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n data-testid=\"badge\"\n [ngClass]=\"{'hidden': !showBadge(), 'count-overflow': countOverflow()}\"\n>\n <rte-icon\n *ngIf=\"showIcon()\"\n class=\"badge-icon\"\n [name]=\"icon()\"\n [size]=\"iconSize()!\"\n />\n <p *ngIf=\"showText()\" class=\"badge-text\">\n {{displayCount()}}\n </p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:0;right:0}.badge.size-s{width:12px;height:12px;top:-3px;right:-3px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-4px;right:-4px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;min-width:24px;width:fit-content;height:24px;top:-8px;right:-8px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge .badge-text{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
38
|
+
}
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
40
|
+
type: Component,
|
|
41
|
+
args: [{ selector: "rte-badge", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n data-testid=\"badge\"\n [ngClass]=\"{'hidden': !showBadge(), 'count-overflow': countOverflow()}\"\n>\n <rte-icon\n *ngIf=\"showIcon()\"\n class=\"badge-icon\"\n [name]=\"icon()\"\n [size]=\"iconSize()!\"\n />\n <p *ngIf=\"showText()\" class=\"badge-text\">\n {{displayCount()}}\n </p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:0;right:0}.badge.size-s{width:12px;height:12px;top:-3px;right:-3px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-4px;right:-4px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;min-width:24px;width:fit-content;height:24px;top:-8px;right:-8px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge .badge-text{margin:0}\n"] }]
|
|
42
|
+
}] });
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVwRixPQUFPLEVBQ0wsZ0JBQWdCLEVBQ2hCLGVBQWUsRUFDZixZQUFZLEVBQ1osV0FBVyxFQUNYLFdBQVcsR0FDWixNQUFNLHNEQUFzRCxDQUFDO0FBRTlELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQVd2RCxNQUFNLE9BQU8sY0FBYztJQVIzQjtRQVNXLGNBQVMsR0FBRyxLQUFLLENBQVksT0FBTyxDQUFDLENBQUM7UUFDdEMsY0FBUyxHQUFHLEtBQUssQ0FBWSxHQUFHLENBQUMsQ0FBQztRQUNsQyxvQkFBZSxHQUFHLEtBQUssQ0FBa0IsTUFBTSxDQUFDLENBQUM7UUFDakQsVUFBSyxHQUFHLEtBQUssRUFBc0IsQ0FBQztRQUNwQyxTQUFJLEdBQUcsS0FBSyxDQUF3QyxjQUFjLENBQUMsQ0FBQztRQUVwRSxvQkFBZSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQztRQUUvRCxhQUFRLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUNoQyxXQUFXLENBQUM7WUFDVixJQUFJLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUN0QixVQUFVLEVBQUUsSUFBSSxDQUFDLGVBQWUsRUFBRTtZQUNsQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRTtTQUMxQixDQUFDLENBQ0gsQ0FBQztRQUVPLGFBQVEsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQ2hDLFdBQVcsQ0FBQztZQUNWLElBQUksRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ3RCLFVBQVUsRUFBRSxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ2xDLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFO1NBQ3BCLENBQUMsQ0FDSCxDQUFDO1FBRU8saUJBQVksR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDN0Qsa0JBQWEsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDbEYsYUFBUSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRTlELGNBQVMsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQ2pDLFlBQVksQ0FBQztZQUNYLElBQUksRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ3RCLFVBQVUsRUFBRSxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ2xDLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ25CLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUSxFQUFFO1NBQzFCLENBQUMsQ0FDSCxDQUFDO0tBQ0g7K0dBckNZLGNBQWM7bUdBQWQsY0FBYyw0dEJDdkIzQix1YUFlQSwwbEVERVksWUFBWSxpT0FBRSxhQUFhOzs0RkFNMUIsY0FBYztrQkFSMUIsU0FBUzsrQkFDRSxXQUFXLFdBQ1osQ0FBQyxZQUFZLEVBQUUsYUFBYSxDQUFDLGNBQzFCLElBQUksbUJBR0MsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQsIGNvbXB1dGVkLCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBCYWRnZUFwcGVhcmFuY2UsIEJhZGdlU2l6ZSwgQmFkZ2VUeXBlIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuaW50ZXJmYWNlXCI7XG5pbXBvcnQge1xuICBnZXRCYWRnZUljb25TaXplLFxuICBnZXREaXNwbGF5Q291bnQsXG4gIGdldFNob3dCYWRnZSxcbiAgZ2V0U2hvd0ljb24sXG4gIGdldFNob3dUZXh0LFxufSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9iYWRnZS9iYWRnZS51dGlsc1wiO1xuXG5pbXBvcnQgeyBpc1ZhbGlkSWNvbk5hbWUgfSBmcm9tIFwiLi4vaWNvbi9pY29uLW1hcFwiO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9pY29uL2ljb24uY29tcG9uZW50XCI7XG5pbXBvcnQgeyBSZWd1bGFySWNvbklkS2V5LCBUb2dnbGFibGVJY29uSWRLZXkgfSBmcm9tIFwiLi4vaWNvbi9pY29uLnNlcnZpY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInJ0ZS1iYWRnZVwiLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9iYWRnZS5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybDogXCIuL2JhZGdlLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBCYWRnZUNvbXBvbmVudCB7XG4gIHJlYWRvbmx5IGJhZGdlVHlwZSA9IGlucHV0PEJhZGdlVHlwZT4oXCJicmFuZFwiKTtcbiAgcmVhZG9ubHkgYmFkZ2VTaXplID0gaW5wdXQ8QmFkZ2VTaXplPihcIm1cIik7XG4gIHJlYWRvbmx5IGJhZGdlQXBwZWFyYW5jZSA9IGlucHV0PEJhZGdlQXBwZWFyYW5jZT4oXCJ0ZXh0XCIpO1xuICByZWFkb25seSBjb3VudCA9IGlucHV0PG51bWJlciB8IHVuZGVmaW5lZD4oKTtcbiAgcmVhZG9ubHkgaWNvbiA9IGlucHV0PFJlZ3VsYXJJY29uSWRLZXkgfCBUb2dnbGFibGVJY29uSWRLZXk+KFwibm90aWZpY2F0aW9uXCIpO1xuXG4gIHJlYWRvbmx5IGlzVmFsaWRJY29uTmFtZSA9IGNvbXB1dGVkKCgpID0+IGlzVmFsaWRJY29uTmFtZSh0aGlzLmljb24oKSkpO1xuXG4gIHJlYWRvbmx5IHNob3dJY29uID0gY29tcHV0ZWQoKCkgPT5cbiAgICBnZXRTaG93SWNvbih7XG4gICAgICBzaXplOiB0aGlzLmJhZGdlU2l6ZSgpLFxuICAgICAgYXBwZWFyYW5jZTogdGhpcy5iYWRnZUFwcGVhcmFuY2UoKSxcbiAgICAgIGljb25TaXplOiB0aGlzLmljb25TaXplKCksXG4gICAgfSksXG4gICk7XG5cbiAgcmVhZG9ubHkgc2hvd1RleHQgPSBjb21wdXRlZCgoKSA9PlxuICAgIGdldFNob3dUZXh0KHtcbiAgICAgIHNpemU6IHRoaXMuYmFkZ2VTaXplKCksXG4gICAgICBhcHBlYXJhbmNlOiB0aGlzLmJhZGdlQXBwZWFyYW5jZSgpLFxuICAgICAgY291bnQ6IHRoaXMuY291bnQoKSxcbiAgICB9KSxcbiAgKTtcblxuICByZWFkb25seSBkaXNwbGF5Q291bnQgPSBjb21wdXRlZCgoKSA9PiBnZXREaXNwbGF5Q291bnQodGhpcy5jb3VudCgpKSk7XG4gIHJlYWRvbmx5IGNvdW50T3ZlcmZsb3cgPSBjb21wdXRlZCgoKSA9PiB0aGlzLnNob3dUZXh0KCkgJiYgdGhpcy5kaXNwbGF5Q291bnQoKS5sZW5ndGggPiAyKTtcbiAgcmVhZG9ubHkgaWNvblNpemUgPSBjb21wdXRlZCgoKSA9PiBnZXRCYWRnZUljb25TaXplKHRoaXMuYmFkZ2VTaXplKCkpKTtcblxuICByZWFkb25seSBzaG93QmFkZ2UgPSBjb21wdXRlZCgoKSA9PlxuICAgIGdldFNob3dCYWRnZSh7XG4gICAgICBzaXplOiB0aGlzLmJhZGdlU2l6ZSgpLFxuICAgICAgYXBwZWFyYW5jZTogdGhpcy5iYWRnZUFwcGVhcmFuY2UoKSxcbiAgICAgIGNvdW50OiB0aGlzLmNvdW50KCksXG4gICAgICBpY29uU2l6ZTogdGhpcy5pY29uU2l6ZSgpLFxuICAgIH0pLFxuICApO1xufVxuIiwiPGRpdlxuICAgIGNsYXNzPVwiYmFkZ2Ugc2l6ZS17eyBiYWRnZVNpemUoKSB9fSB0eXBlLXt7IGJhZGdlVHlwZSgpIH19XCJcbiAgICBkYXRhLXRlc3RpZD1cImJhZGdlXCJcbiAgICBbbmdDbGFzc109XCJ7J2hpZGRlbic6ICFzaG93QmFkZ2UoKSwgJ2NvdW50LW92ZXJmbG93JzogY291bnRPdmVyZmxvdygpfVwiXG4+XG4gICAgPHJ0ZS1pY29uXG4gICAgICAgICpuZ0lmPVwic2hvd0ljb24oKVwiXG4gICAgICAgIGNsYXNzPVwiYmFkZ2UtaWNvblwiXG4gICAgICAgIFtuYW1lXT1cImljb24oKVwiXG4gICAgICAgIFtzaXplXT1cImljb25TaXplKCkhXCJcbiAgICAvPlxuICAgIDxwICpuZ0lmPVwic2hvd1RleHQoKVwiIGNsYXNzPVwiYmFkZ2UtdGV4dFwiPlxuICAgICAgICB7e2Rpc3BsYXlDb3VudCgpfX1cbiAgICA8L3A+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Directive, input, ViewContainerRef, inject, ElementRef, Renderer2, } from "@angular/core";
|
|
2
|
+
import { BadgeComponent } from "./badge.component";
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class BadgeDirective {
|
|
5
|
+
constructor() {
|
|
6
|
+
this.rteBadgeType = input("brand");
|
|
7
|
+
this.rteBadgeSize = input("m");
|
|
8
|
+
this.rteBadgeAppearance = input("text");
|
|
9
|
+
this.rteBadgeCount = input();
|
|
10
|
+
this.rteBadgeIcon = input("settings");
|
|
11
|
+
this.badgeComponentRef = null;
|
|
12
|
+
this.viewContainer = inject(ViewContainerRef);
|
|
13
|
+
this.elementRef = inject(ElementRef);
|
|
14
|
+
this.renderer = inject(Renderer2);
|
|
15
|
+
this.hostElement = this.elementRef.nativeElement;
|
|
16
|
+
}
|
|
17
|
+
ngOnInit() {
|
|
18
|
+
this.badgeComponentRef = this.viewContainer.createComponent(BadgeComponent);
|
|
19
|
+
this.assignDirectiveToComponent();
|
|
20
|
+
this.appendComponentToHost();
|
|
21
|
+
this.renderer.setStyle(this.hostElement, "position", "relative");
|
|
22
|
+
}
|
|
23
|
+
ngOnChanges() {
|
|
24
|
+
this.assignDirectiveToComponent();
|
|
25
|
+
}
|
|
26
|
+
ngOnDestroy() {
|
|
27
|
+
if (this.badgeComponentRef) {
|
|
28
|
+
this.badgeComponentRef.destroy();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
assignDirectiveToComponent() {
|
|
32
|
+
if (this.badgeComponentRef) {
|
|
33
|
+
this.badgeComponentRef.setInput("badgeType", this.rteBadgeType());
|
|
34
|
+
this.badgeComponentRef.setInput("badgeSize", this.rteBadgeSize());
|
|
35
|
+
this.badgeComponentRef.setInput("badgeAppearance", this.rteBadgeAppearance());
|
|
36
|
+
this.badgeComponentRef.setInput("count", this.rteBadgeCount());
|
|
37
|
+
this.badgeComponentRef.setInput("icon", this.rteBadgeIcon());
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
appendComponentToHost() {
|
|
41
|
+
if (this.badgeComponentRef) {
|
|
42
|
+
this.renderer.appendChild(this.elementRef.nativeElement, this.badgeComponentRef.location.nativeElement);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
46
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: BadgeDirective, isStandalone: true, selector: "[rteBadge]", inputs: { rteBadgeType: { classPropertyName: "rteBadgeType", publicName: "rteBadgeType", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeSize: { classPropertyName: "rteBadgeSize", publicName: "rteBadgeSize", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeAppearance: { classPropertyName: "rteBadgeAppearance", publicName: "rteBadgeAppearance", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeCount: { classPropertyName: "rteBadgeCount", publicName: "rteBadgeCount", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeIcon: { classPropertyName: "rteBadgeIcon", publicName: "rteBadgeIcon", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
|
|
47
|
+
}
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeDirective, decorators: [{
|
|
49
|
+
type: Directive,
|
|
50
|
+
args: [{
|
|
51
|
+
selector: "[rteBadge]",
|
|
52
|
+
standalone: true,
|
|
53
|
+
}]
|
|
54
|
+
}], ctorParameters: () => [] });
|
|
55
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUdMLGdCQUFnQixFQUVoQixNQUFNLEVBQ04sVUFBVSxFQUNWLFNBQVMsR0FFVixNQUFNLGVBQWUsQ0FBQztBQUt2QixPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7O0FBTW5ELE1BQU0sT0FBTyxjQUFjO0lBY3pCO1FBYlMsaUJBQVksR0FBRyxLQUFLLENBQVksT0FBTyxDQUFDLENBQUM7UUFDekMsaUJBQVksR0FBRyxLQUFLLENBQVksR0FBRyxDQUFDLENBQUM7UUFDckMsdUJBQWtCLEdBQUcsS0FBSyxDQUFrQixNQUFNLENBQUMsQ0FBQztRQUNwRCxrQkFBYSxHQUFHLEtBQUssRUFBc0IsQ0FBQztRQUM1QyxpQkFBWSxHQUFHLEtBQUssQ0FBd0MsVUFBVSxDQUFDLENBQUM7UUFFekUsc0JBQWlCLEdBQXdDLElBQUksQ0FBQztRQUdyRCxrQkFBYSxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ3pDLGVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDaEMsYUFBUSxHQUFHLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUc1QyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO0lBQ25ELENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsZUFBZSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQzVFLElBQUksQ0FBQywwQkFBMEIsRUFBRSxDQUFDO1FBQ2xDLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1FBQzdCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsVUFBVSxFQUFFLFVBQVUsQ0FBQyxDQUFDO0lBQ25FLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLDBCQUEwQixFQUFFLENBQUM7SUFDcEMsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUNuQyxDQUFDO0lBQ0gsQ0FBQztJQUVPLDBCQUEwQjtRQUNoQyxJQUFJLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO1lBQ2xFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO1lBQ2xFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUMsQ0FBQztZQUM5RSxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBQztZQUMvRCxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQztRQUMvRCxDQUFDO0lBQ0gsQ0FBQztJQUVPLHFCQUFxQjtRQUMzQixJQUFJLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDMUcsQ0FBQztJQUNILENBQUM7K0dBakRVLGNBQWM7bUdBQWQsY0FBYzs7NEZBQWQsY0FBYztrQkFKMUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtvQkFDdEIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBpbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIFZpZXdDb250YWluZXJSZWYsXG4gIENvbXBvbmVudFJlZixcbiAgaW5qZWN0LFxuICBFbGVtZW50UmVmLFxuICBSZW5kZXJlcjIsXG4gIE9uSW5pdCxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEJhZGdlVHlwZSwgQmFkZ2VTaXplLCBCYWRnZUFwcGVhcmFuY2UgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9iYWRnZS9iYWRnZS5pbnRlcmZhY2VcIjtcblxuaW1wb3J0IHsgUmVndWxhckljb25JZEtleSwgVG9nZ2xhYmxlSWNvbklkS2V5IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5zZXJ2aWNlXCI7XG5cbmltcG9ydCB7IEJhZGdlQ29tcG9uZW50IH0gZnJvbSBcIi4vYmFkZ2UuY29tcG9uZW50XCI7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogXCJbcnRlQmFkZ2VdXCIsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIEJhZGdlRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIHJlYWRvbmx5IHJ0ZUJhZGdlVHlwZSA9IGlucHV0PEJhZGdlVHlwZT4oXCJicmFuZFwiKTtcbiAgcmVhZG9ubHkgcnRlQmFkZ2VTaXplID0gaW5wdXQ8QmFkZ2VTaXplPihcIm1cIik7XG4gIHJlYWRvbmx5IHJ0ZUJhZGdlQXBwZWFyYW5jZSA9IGlucHV0PEJhZGdlQXBwZWFyYW5jZT4oXCJ0ZXh0XCIpO1xuICByZWFkb25seSBydGVCYWRnZUNvdW50ID0gaW5wdXQ8bnVtYmVyIHwgdW5kZWZpbmVkPigpO1xuICByZWFkb25seSBydGVCYWRnZUljb24gPSBpbnB1dDxSZWd1bGFySWNvbklkS2V5IHwgVG9nZ2xhYmxlSWNvbklkS2V5PihcInNldHRpbmdzXCIpO1xuXG4gIHByaXZhdGUgYmFkZ2VDb21wb25lbnRSZWY6IENvbXBvbmVudFJlZjxCYWRnZUNvbXBvbmVudD4gfCBudWxsID0gbnVsbDtcbiAgcHJpdmF0ZSBob3N0RWxlbWVudDogSFRNTEVsZW1lbnQ7XG5cbiAgcHJpdmF0ZSByZWFkb25seSB2aWV3Q29udGFpbmVyID0gaW5qZWN0KFZpZXdDb250YWluZXJSZWYpO1xuICBwcml2YXRlIHJlYWRvbmx5IGVsZW1lbnRSZWYgPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIHByaXZhdGUgcmVhZG9ubHkgcmVuZGVyZXIgPSBpbmplY3QoUmVuZGVyZXIyKTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLmhvc3RFbGVtZW50ID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmJhZGdlQ29tcG9uZW50UmVmID0gdGhpcy52aWV3Q29udGFpbmVyLmNyZWF0ZUNvbXBvbmVudChCYWRnZUNvbXBvbmVudCk7XG4gICAgdGhpcy5hc3NpZ25EaXJlY3RpdmVUb0NvbXBvbmVudCgpO1xuICAgIHRoaXMuYXBwZW5kQ29tcG9uZW50VG9Ib3N0KCk7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmhvc3RFbGVtZW50LCBcInBvc2l0aW9uXCIsIFwicmVsYXRpdmVcIik7XG4gIH1cblxuICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICB0aGlzLmFzc2lnbkRpcmVjdGl2ZVRvQ29tcG9uZW50KCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5iYWRnZUNvbXBvbmVudFJlZikge1xuICAgICAgdGhpcy5iYWRnZUNvbXBvbmVudFJlZi5kZXN0cm95KCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBhc3NpZ25EaXJlY3RpdmVUb0NvbXBvbmVudCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5iYWRnZUNvbXBvbmVudFJlZikge1xuICAgICAgdGhpcy5iYWRnZUNvbXBvbmVudFJlZi5zZXRJbnB1dChcImJhZGdlVHlwZVwiLCB0aGlzLnJ0ZUJhZGdlVHlwZSgpKTtcbiAgICAgIHRoaXMuYmFkZ2VDb21wb25lbnRSZWYuc2V0SW5wdXQoXCJiYWRnZVNpemVcIiwgdGhpcy5ydGVCYWRnZVNpemUoKSk7XG4gICAgICB0aGlzLmJhZGdlQ29tcG9uZW50UmVmLnNldElucHV0KFwiYmFkZ2VBcHBlYXJhbmNlXCIsIHRoaXMucnRlQmFkZ2VBcHBlYXJhbmNlKCkpO1xuICAgICAgdGhpcy5iYWRnZUNvbXBvbmVudFJlZi5zZXRJbnB1dChcImNvdW50XCIsIHRoaXMucnRlQmFkZ2VDb3VudCgpKTtcbiAgICAgIHRoaXMuYmFkZ2VDb21wb25lbnRSZWYuc2V0SW5wdXQoXCJpY29uXCIsIHRoaXMucnRlQmFkZ2VJY29uKCkpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgYXBwZW5kQ29tcG9uZW50VG9Ib3N0KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmJhZGdlQ29tcG9uZW50UmVmKSB7XG4gICAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCB0aGlzLmJhZGdlQ29tcG9uZW50UmVmLmxvY2F0aW9uLm5hdGl2ZUVsZW1lbnQpO1xuICAgIH1cbiAgfVxufVxuIl19
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
|
|
3
|
+
import { CHIP_TYPE_TO_ARIA_ROLE_MAP } from "@design-system-rte/core/components/chip/chip.constants";
|
|
4
|
+
import { BACKSPACE_KEY, DELETE_KEY, ENTER_KEY, SPACE_KEY, } from "@design-system-rte/core/constants/keyboard/keyboard.constants";
|
|
5
|
+
import { IconComponent } from "../icon/icon.component";
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
export class ChipComponent {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.id = input();
|
|
11
|
+
this.label = input("");
|
|
12
|
+
this.selected = input(false);
|
|
13
|
+
this.disabled = input(false);
|
|
14
|
+
this.type = input("single");
|
|
15
|
+
this.compactSpacing = input(false);
|
|
16
|
+
this.click = output();
|
|
17
|
+
this.close = output();
|
|
18
|
+
this.isCheckable = computed(() => this.type() === "single" || this.type() === "multi");
|
|
19
|
+
this.role = computed(() => CHIP_TYPE_TO_ARIA_ROLE_MAP[this.type()] || null);
|
|
20
|
+
}
|
|
21
|
+
onClick(event) {
|
|
22
|
+
event.stopPropagation();
|
|
23
|
+
if (!this.disabled()) {
|
|
24
|
+
this.click.emit(event);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
onKeyDown(event) {
|
|
28
|
+
event.stopPropagation();
|
|
29
|
+
}
|
|
30
|
+
onKeyUp(event) {
|
|
31
|
+
event.stopPropagation();
|
|
32
|
+
if (!this.disabled()) {
|
|
33
|
+
if (event.key === SPACE_KEY || event.key === ENTER_KEY) {
|
|
34
|
+
const target = event.target;
|
|
35
|
+
if (!target.classList.contains("chip-close-button")) {
|
|
36
|
+
this.onClick(event);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
else if ((event.key === BACKSPACE_KEY || event.key === DELETE_KEY) && this.type() === "input") {
|
|
40
|
+
const closeButton = event.target.querySelector(".chip-close-button");
|
|
41
|
+
if (closeButton) {
|
|
42
|
+
closeButton.click();
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
onBlur(event) {
|
|
48
|
+
event.stopPropagation();
|
|
49
|
+
}
|
|
50
|
+
onCloseClick(event) {
|
|
51
|
+
event.stopPropagation();
|
|
52
|
+
if (!this.disabled()) {
|
|
53
|
+
this.close.emit(event);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ChipComponent, isStandalone: true, selector: "rte-chip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, ngImport: i0, template: "<span\n class=\"chip\"\n tabindex=\"0\"\n [attr.role]=\"role()\"\n [attr.data-selected]=\"isCheckable() ? selected() : null\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-type]=\"type()\"\n [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n [attr.aria-disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n (keydown)=\"onKeyDown($event)\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n>\n <ng-container *ngIf=\"type() === 'multi'\">\n <span class=\"chip-icon-container\">\n <span\n class=\"chip-icon\"\n [class.chip-icon--visible]=\"selected()\"\n [attr.aria-hidden]=\"!selected()\"\n >\n <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n </span>\n <span\n class=\"chip-icon\"\n [class.chip-icon--visible]=\"!selected()\"\n [attr.aria-hidden]=\"selected()\"\n >\n <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n </span>\n </span>\n </ng-container>\n <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n <button\n *ngIf=\"type() === 'input'\"\n type=\"button\"\n class=\"chip-close-button\"\n [attr.aria-label]=\"'Supprimer ' + label()\"\n [disabled]=\"disabled()\"\n [value]=\"label()\"\n (click)=\"onCloseClick($event)\"\n >\n <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n </button>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;padding:0 6px}.chip-label[data-type=input]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
58
|
+
}
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipComponent, decorators: [{
|
|
60
|
+
type: Component,
|
|
61
|
+
args: [{ selector: "rte-chip", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"chip\"\n tabindex=\"0\"\n [attr.role]=\"role()\"\n [attr.data-selected]=\"isCheckable() ? selected() : null\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-type]=\"type()\"\n [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n [attr.aria-disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n (keydown)=\"onKeyDown($event)\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n>\n <ng-container *ngIf=\"type() === 'multi'\">\n <span class=\"chip-icon-container\">\n <span\n class=\"chip-icon\"\n [class.chip-icon--visible]=\"selected()\"\n [attr.aria-hidden]=\"!selected()\"\n >\n <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n </span>\n <span\n class=\"chip-icon\"\n [class.chip-icon--visible]=\"!selected()\"\n [attr.aria-hidden]=\"selected()\"\n >\n <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n </span>\n </span>\n </ng-container>\n <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n <button\n *ngIf=\"type() === 'input'\"\n type=\"button\"\n class=\"chip-close-button\"\n [attr.aria-label]=\"'Supprimer ' + label()\"\n [disabled]=\"disabled()\"\n [value]=\"label()\"\n (click)=\"onCloseClick($event)\"\n >\n <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n </button>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;padding:0 6px}.chip-label[data-type=input]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
62
|
+
}] });
|
|
63
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kcy1ydGUtbGliL3NyYy9saWIvY29tcG9uZW50cy9jaGlwL2NoaXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvY2hpcC9jaGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVGLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLHdEQUF3RCxDQUFDO0FBQ3BHLE9BQU8sRUFDTCxhQUFhLEVBQ2IsVUFBVSxFQUNWLFNBQVMsRUFDVCxTQUFTLEdBQ1YsTUFBTSwrREFBK0QsQ0FBQztBQUV2RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQVV2RCxNQUFNLE9BQU8sYUFBYTtJQVIxQjtRQVNXLE9BQUUsR0FBRyxLQUFLLEVBQXNCLENBQUM7UUFDakMsVUFBSyxHQUFHLEtBQUssQ0FBUyxFQUFFLENBQUMsQ0FBQztRQUMxQixhQUFRLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBQ2pDLGFBQVEsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDakMsU0FBSSxHQUFHLEtBQUssQ0FBK0IsUUFBUSxDQUFDLENBQUM7UUFDckQsbUJBQWMsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDdkMsVUFBSyxHQUFHLE1BQU0sRUFBUyxDQUFDO1FBQ3hCLFVBQUssR0FBRyxNQUFNLEVBQVMsQ0FBQztRQUV4QixnQkFBVyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssUUFBUSxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxPQUFPLENBQUMsQ0FBQztRQUNsRixTQUFJLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLDBCQUEwQixDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxDQUFDO0tBc0NqRjtJQXBDQyxPQUFPLENBQUMsS0FBWTtRQUNsQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDO1lBQ3JCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3pCLENBQUM7SUFDSCxDQUFDO0lBQ0QsU0FBUyxDQUFDLEtBQW9CO1FBQzVCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBQ0QsT0FBTyxDQUFDLEtBQW9CO1FBQzFCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUM7WUFDckIsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFNBQVMsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFNBQVMsRUFBRSxDQUFDO2dCQUN2RCxNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsTUFBcUIsQ0FBQztnQkFDM0MsSUFBSSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLG1CQUFtQixDQUFDLEVBQUUsQ0FBQztvQkFDcEQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztnQkFDdEIsQ0FBQztZQUNILENBQUM7aUJBQU0sSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLEtBQUssYUFBYSxJQUFJLEtBQUssQ0FBQyxHQUFHLEtBQUssVUFBVSxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxLQUFLLE9BQU8sRUFBRSxDQUFDO2dCQUNoRyxNQUFNLFdBQVcsR0FBSSxLQUFLLENBQUMsTUFBc0IsQ0FBQyxhQUFhLENBQzdELG9CQUFvQixDQUNPLENBQUM7Z0JBQzlCLElBQUksV0FBVyxFQUFFLENBQUM7b0JBQ2hCLFdBQVcsQ0FBQyxLQUFLLEVBQUUsQ0FBQztnQkFDdEIsQ0FBQztZQUNILENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQztJQUNELE1BQU0sQ0FBQyxLQUFpQjtRQUN0QixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUNELFlBQVksQ0FBQyxLQUFZO1FBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUM7WUFDckIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDekIsQ0FBQztJQUNILENBQUM7K0dBaERVLGFBQWE7bUdBQWIsYUFBYSw4MkJDcEIxQixzL0NBNkNPLGlzRkQvQkssWUFBWSxtSUFBRSxhQUFhOzs0RkFNMUIsYUFBYTtrQkFSekIsU0FBUzsrQkFDRSxVQUFVLFdBQ1gsQ0FBQyxZQUFZLEVBQUUsYUFBYSxDQUFDLGNBQzFCLElBQUksbUJBR0MsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkLCBpbnB1dCwgb3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IENISVBfVFlQRV9UT19BUklBX1JPTEVfTUFQIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvY2hpcC9jaGlwLmNvbnN0YW50c1wiO1xuaW1wb3J0IHtcbiAgQkFDS1NQQUNFX0tFWSxcbiAgREVMRVRFX0tFWSxcbiAgRU5URVJfS0VZLFxuICBTUEFDRV9LRVksXG59IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb25zdGFudHMva2V5Ym9hcmQva2V5Ym9hcmQuY29uc3RhbnRzXCI7XG5cbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tIFwiLi4vaWNvbi9pY29uLmNvbXBvbmVudFwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLWNoaXBcIixcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgSWNvbkNvbXBvbmVudF0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiBcIi4vY2hpcC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybDogXCIuL2NoaXAuY29tcG9uZW50LnNjc3NcIixcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIENoaXBDb21wb25lbnQge1xuICByZWFkb25seSBpZCA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZD4oKTtcbiAgcmVhZG9ubHkgbGFiZWwgPSBpbnB1dDxzdHJpbmc+KFwiXCIpO1xuICByZWFkb25seSBzZWxlY3RlZCA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgZGlzYWJsZWQgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IHR5cGUgPSBpbnB1dDxcInNpbmdsZVwiIHwgXCJtdWx0aVwiIHwgXCJpbnB1dFwiPihcInNpbmdsZVwiKTtcbiAgcmVhZG9ubHkgY29tcGFjdFNwYWNpbmcgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IGNsaWNrID0gb3V0cHV0PEV2ZW50PigpO1xuICByZWFkb25seSBjbG9zZSA9IG91dHB1dDxFdmVudD4oKTtcblxuICByZWFkb25seSBpc0NoZWNrYWJsZSA9IGNvbXB1dGVkKCgpID0+IHRoaXMudHlwZSgpID09PSBcInNpbmdsZVwiIHx8IHRoaXMudHlwZSgpID09PSBcIm11bHRpXCIpO1xuICByZWFkb25seSByb2xlID0gY29tcHV0ZWQoKCkgPT4gQ0hJUF9UWVBFX1RPX0FSSUFfUk9MRV9NQVBbdGhpcy50eXBlKCldIHx8IG51bGwpO1xuXG4gIG9uQ2xpY2soZXZlbnQ6IEV2ZW50KSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgaWYgKCF0aGlzLmRpc2FibGVkKCkpIHtcbiAgICAgIHRoaXMuY2xpY2suZW1pdChldmVudCk7XG4gICAgfVxuICB9XG4gIG9uS2V5RG93bihldmVudDogS2V5Ym9hcmRFdmVudCkge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICB9XG4gIG9uS2V5VXAoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQoKSkge1xuICAgICAgaWYgKGV2ZW50LmtleSA9PT0gU1BBQ0VfS0VZIHx8IGV2ZW50LmtleSA9PT0gRU5URVJfS0VZKSB7XG4gICAgICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudDtcbiAgICAgICAgaWYgKCF0YXJnZXQuY2xhc3NMaXN0LmNvbnRhaW5zKFwiY2hpcC1jbG9zZS1idXR0b25cIikpIHtcbiAgICAgICAgICB0aGlzLm9uQ2xpY2soZXZlbnQpO1xuICAgICAgICB9XG4gICAgICB9IGVsc2UgaWYgKChldmVudC5rZXkgPT09IEJBQ0tTUEFDRV9LRVkgfHwgZXZlbnQua2V5ID09PSBERUxFVEVfS0VZKSAmJiB0aGlzLnR5cGUoKSA9PT0gXCJpbnB1dFwiKSB7XG4gICAgICAgIGNvbnN0IGNsb3NlQnV0dG9uID0gKGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudCkucXVlcnlTZWxlY3RvcihcbiAgICAgICAgICBcIi5jaGlwLWNsb3NlLWJ1dHRvblwiLFxuICAgICAgICApIGFzIEhUTUxCdXR0b25FbGVtZW50IHwgbnVsbDtcbiAgICAgICAgaWYgKGNsb3NlQnV0dG9uKSB7XG4gICAgICAgICAgY2xvc2VCdXR0b24uY2xpY2soKTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxuICBvbkJsdXIoZXZlbnQ6IEZvY3VzRXZlbnQpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgfVxuICBvbkNsb3NlQ2xpY2soZXZlbnQ6IEV2ZW50KSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgaWYgKCF0aGlzLmRpc2FibGVkKCkpIHtcbiAgICAgIHRoaXMuY2xvc2UuZW1pdChldmVudCk7XG4gICAgfVxuICB9XG59XG4iLCI8c3BhblxuICBjbGFzcz1cImNoaXBcIlxuICB0YWJpbmRleD1cIjBcIlxuICBbYXR0ci5yb2xlXT1cInJvbGUoKVwiXG4gIFthdHRyLmRhdGEtc2VsZWN0ZWRdPVwiaXNDaGVja2FibGUoKSA/IHNlbGVjdGVkKCkgOiBudWxsXCJcbiAgW2F0dHIuZGF0YS1kaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgW2F0dHIuZGF0YS1jb21wYWN0LXNwYWNpbmddPVwiY29tcGFjdFNwYWNpbmcoKVwiXG4gIFthdHRyLmRhdGEtdHlwZV09XCJ0eXBlKClcIlxuICBbYXR0ci5hcmlhLWNoZWNrZWRdPVwiaXNDaGVja2FibGUoKSA/IHNlbGVjdGVkKCkgOiBudWxsXCJcbiAgW2F0dHIuYXJpYS1kaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgKGNsaWNrKT1cIm9uQ2xpY2soJGV2ZW50KVwiXG4gIChrZXlkb3duKT1cIm9uS2V5RG93bigkZXZlbnQpXCJcbiAgKGtleXVwKT1cIm9uS2V5VXAoJGV2ZW50KVwiXG4gIChibHVyKT1cIm9uQmx1cigkZXZlbnQpXCJcbj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInR5cGUoKSA9PT0gJ211bHRpJ1wiPlxuICAgIDxzcGFuIGNsYXNzPVwiY2hpcC1pY29uLWNvbnRhaW5lclwiPlxuICAgICAgPHNwYW5cbiAgICAgICAgY2xhc3M9XCJjaGlwLWljb25cIlxuICAgICAgICBbY2xhc3MuY2hpcC1pY29uLS12aXNpYmxlXT1cInNlbGVjdGVkKClcIlxuICAgICAgICBbYXR0ci5hcmlhLWhpZGRlbl09XCIhc2VsZWN0ZWQoKVwiXG4gICAgICA+XG4gICAgICAgIDxydGUtaWNvbiBuYW1lPVwiY2hlY2stY2lyY2xlXCIgYXBwZWFyYW5jZT1cImZpbGxlZFwiIFtzaXplXT1cIjE2XCI+PC9ydGUtaWNvbj5cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzcGFuXG4gICAgICAgIGNsYXNzPVwiY2hpcC1pY29uXCJcbiAgICAgICAgW2NsYXNzLmNoaXAtaWNvbi0tdmlzaWJsZV09XCIhc2VsZWN0ZWQoKVwiXG4gICAgICAgIFthdHRyLmFyaWEtaGlkZGVuXT1cInNlbGVjdGVkKClcIlxuICAgICAgPlxuICAgICAgICA8cnRlLWljb24gbmFtZT1cInJhZGlvLWJ1dHRvbi1lbXB0eVwiIFtzaXplXT1cIjE2XCI+PC9ydGUtaWNvbj5cbiAgICAgIDwvc3Bhbj5cbiAgICA8L3NwYW4+XG4gIDwvbmctY29udGFpbmVyPlxuICA8c3BhbiBjbGFzcz1cImNoaXAtbGFiZWxcIiBbYXR0ci5kYXRhLXR5cGVdPVwidHlwZSgpXCI+e3sgbGFiZWwoKSB9fTwvc3Bhbj5cbiAgPGJ1dHRvblxuICAgICpuZ0lmPVwidHlwZSgpID09PSAnaW5wdXQnXCJcbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBjbGFzcz1cImNoaXAtY2xvc2UtYnV0dG9uXCJcbiAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIidTdXBwcmltZXIgJyArIGxhYmVsKClcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgICBbdmFsdWVdPVwibGFiZWwoKVwiXG4gICAgKGNsaWNrKT1cIm9uQ2xvc2VDbGljaygkZXZlbnQpXCJcbiAgPlxuICAgIDxydGUtaWNvbiBjbGFzcz1cImNoaXAtY2xvc2UtYnV0dG9uLS1pY29uXCIgbmFtZT1cImNsb3NlXCIgW3NpemVdPVwiMTZcIj48L3J0ZS1pY29uPlxuICA8L2J1dHRvbj5cbjwvc3Bhbj4iXX0=
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CommonModule } from "@angular/common";
|
|
2
|
-
import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, computed, input, output, signal } from "@angular/core";
|
|
3
3
|
import { buttonIconSize } from "@design-system-rte/core/components/button/common/common-button.constants";
|
|
4
4
|
import { IconButtonComponent } from "../icon-button/icon-button.component";
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
@@ -11,21 +11,33 @@ export class IconButtonToggleComponent {
|
|
|
11
11
|
this.variant = input("primary");
|
|
12
12
|
this.type = input("button");
|
|
13
13
|
this.compactSpacing = input(false);
|
|
14
|
-
this.ariaLabel = input(
|
|
15
|
-
this.ariaLabelledBy = input(
|
|
16
|
-
this.selected = input(
|
|
14
|
+
this.ariaLabel = input();
|
|
15
|
+
this.ariaLabelledBy = input();
|
|
16
|
+
this.selected = input();
|
|
17
|
+
this.internalSelected = signal(false);
|
|
18
|
+
this.defaultSelected = input(false);
|
|
19
|
+
this.isControlled = computed(() => this.selected() !== undefined);
|
|
17
20
|
this.click = output();
|
|
21
|
+
this.isSelected = computed(() => {
|
|
22
|
+
return this.isControlled() ? this.selected() : this.internalSelected();
|
|
23
|
+
});
|
|
18
24
|
this.buttonIconSize = computed(() => buttonIconSize[this.size()]);
|
|
19
25
|
}
|
|
26
|
+
toggleInternalSelectedState() {
|
|
27
|
+
this.internalSelected.set(!this.internalSelected());
|
|
28
|
+
}
|
|
20
29
|
onClick(event) {
|
|
21
30
|
event.stopPropagation();
|
|
22
|
-
this.click.emit();
|
|
31
|
+
this.click.emit(event);
|
|
32
|
+
if (!this.isControlled()) {
|
|
33
|
+
this.toggleInternalSelectedState();
|
|
34
|
+
}
|
|
23
35
|
}
|
|
24
36
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: IconButtonToggleComponent, isStandalone: true, selector: "rte-icon-button-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<rte-icon-button \n [size]=\"size()\" \n [name]=\"name()\" \n [compactSpacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n [variant]=\"variant()\"\n [appearance]=\"
|
|
37
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: IconButtonToggleComponent, isStandalone: true, selector: "rte-icon-button-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, defaultSelected: { classPropertyName: "defaultSelected", publicName: "defaultSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<rte-icon-button \n [size]=\"size()\" \n [name]=\"name()\" \n [compactSpacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n [variant]=\"variant()\"\n [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n (click)=\"onClick($event)\"\n/>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26
38
|
}
|
|
27
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconButtonToggleComponent, decorators: [{
|
|
28
40
|
type: Component,
|
|
29
|
-
args: [{ selector: "rte-icon-button-toggle", imports: [CommonModule, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-icon-button \n [size]=\"size()\" \n [name]=\"name()\" \n [compactSpacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n [variant]=\"variant()\"\n [appearance]=\"
|
|
41
|
+
args: [{ selector: "rte-icon-button-toggle", imports: [CommonModule, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-icon-button \n [size]=\"size()\" \n [name]=\"name()\" \n [compactSpacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n [variant]=\"variant()\"\n [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n (click)=\"onClick($event)\"\n/>" }]
|
|
30
42
|
}] });
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1idXR0b24tdG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL2ljb24tYnV0dG9uLXRvZ2dsZS9pY29uLWJ1dHRvbi10b2dnbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvaWNvbi1idXR0b24tdG9nZ2xlL2ljb24tYnV0dG9uLXRvZ2dsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHcEcsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDBFQUEwRSxDQUFDO0FBRzFHLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDOztBQVMzRSxNQUFNLE9BQU8seUJBQXlCO0lBUHRDO1FBUVcsYUFBUSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztRQUNqQyxTQUFJLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBeUMsQ0FBQztRQUMvRCxTQUFJLEdBQUcsS0FBSyxDQUFhLEdBQUcsQ0FBQyxDQUFDO1FBQzlCLFlBQU8sR0FBRyxLQUFLLENBQWdCLFNBQVMsQ0FBQyxDQUFDO1FBQzFDLFNBQUksR0FBRyxLQUFLLENBQWEsUUFBUSxDQUFDLENBQUM7UUFDbkMsbUJBQWMsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDdkMsY0FBUyxHQUFHLEtBQUssRUFBc0IsQ0FBQztRQUN4QyxtQkFBYyxHQUFHLEtBQUssRUFBc0IsQ0FBQztRQUU3QyxhQUFRLEdBQUcsS0FBSyxFQUF1QixDQUFDO1FBRXhDLHFCQUFnQixHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUVqQyxvQkFBZSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztRQUV4QyxpQkFBWSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLEtBQUssU0FBUyxDQUFDLENBQUM7UUFFN0QsVUFBSyxHQUFHLE1BQU0sRUFBOEIsQ0FBQztRQUU3QyxlQUFVLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUNsQyxPQUFPLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztRQUN6RSxDQUFDLENBQUMsQ0FBQztRQWNNLG1CQUFjLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0tBQ3ZFO0lBYlMsMkJBQTJCO1FBQ2pDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxDQUFDO0lBQ3RELENBQUM7SUFFRCxPQUFPLENBQUMsS0FBaUM7UUFDdkMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLEVBQUUsQ0FBQztZQUN6QixJQUFJLENBQUMsMkJBQTJCLEVBQUUsQ0FBQztRQUNyQyxDQUFDO0lBQ0gsQ0FBQzsrR0FsQ1UseUJBQXlCO21HQUF6Qix5QkFBeUIseTVDQ2hCdEMseVZBV0UsMkNEQVUsWUFBWSwrQkFBRSxtQkFBbUI7OzRGQUtoQyx5QkFBeUI7a0JBUHJDLFNBQVM7K0JBQ0Usd0JBQXdCLFdBQ3pCLENBQUMsWUFBWSxFQUFFLG1CQUFtQixDQUFDLGNBQ2hDLElBQUksbUJBRUMsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkLCBpbnB1dCwgb3V0cHV0LCBzaWduYWwgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQnV0dG9uVHlwZSB9IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uaW50ZXJmYWNlXCI7XG5pbXBvcnQgeyBCdXR0b25TaXplLCBCdXR0b25WYXJpYW50IH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYnV0dG9uL2NvbW1vbi9jb21tb24tYnV0dG9uXCI7XG5pbXBvcnQgeyBidXR0b25JY29uU2l6ZSB9IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL2J1dHRvbi9jb21tb24vY29tbW9uLWJ1dHRvbi5jb25zdGFudHNcIjtcblxuaW1wb3J0IHsgUmVndWxhckljb25JZEtleSwgVG9nZ2xhYmxlSWNvbklkS2V5IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5zZXJ2aWNlXCI7XG5pbXBvcnQgeyBJY29uQnV0dG9uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2ljb24tYnV0dG9uL2ljb24tYnV0dG9uLmNvbXBvbmVudFwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLWljb24tYnV0dG9uLXRvZ2dsZVwiLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQnV0dG9uQ29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9pY29uLWJ1dHRvbi10b2dnbGUuY29tcG9uZW50Lmh0bWxcIixcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEljb25CdXR0b25Ub2dnbGVDb21wb25lbnQge1xuICByZWFkb25seSBkaXNhYmxlZCA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgbmFtZSA9IGlucHV0LnJlcXVpcmVkPFJlZ3VsYXJJY29uSWRLZXkgfCBUb2dnbGFibGVJY29uSWRLZXk+KCk7XG4gIHJlYWRvbmx5IHNpemUgPSBpbnB1dDxCdXR0b25TaXplPihcIm1cIik7XG4gIHJlYWRvbmx5IHZhcmlhbnQgPSBpbnB1dDxCdXR0b25WYXJpYW50PihcInByaW1hcnlcIik7XG4gIHJlYWRvbmx5IHR5cGUgPSBpbnB1dDxCdXR0b25UeXBlPihcImJ1dHRvblwiKTtcbiAgcmVhZG9ubHkgY29tcGFjdFNwYWNpbmcgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IGFyaWFMYWJlbCA9IGlucHV0PHN0cmluZyB8IHVuZGVmaW5lZD4oKTtcbiAgcmVhZG9ubHkgYXJpYUxhYmVsbGVkQnkgPSBpbnB1dDxzdHJpbmcgfCB1bmRlZmluZWQ+KCk7XG5cbiAgcmVhZG9ubHkgc2VsZWN0ZWQgPSBpbnB1dDxib29sZWFuIHwgdW5kZWZpbmVkPigpO1xuXG4gIHJlYWRvbmx5IGludGVybmFsU2VsZWN0ZWQgPSBzaWduYWwoZmFsc2UpO1xuXG4gIHJlYWRvbmx5IGRlZmF1bHRTZWxlY3RlZCA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcblxuICByZWFkb25seSBpc0NvbnRyb2xsZWQgPSBjb21wdXRlZCgoKSA9PiB0aGlzLnNlbGVjdGVkKCkgIT09IHVuZGVmaW5lZCk7XG5cbiAgcmVhZG9ubHkgY2xpY2sgPSBvdXRwdXQ8TW91c2VFdmVudCB8IEtleWJvYXJkRXZlbnQ+KCk7XG5cbiAgcmVhZG9ubHkgaXNTZWxlY3RlZCA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICByZXR1cm4gdGhpcy5pc0NvbnRyb2xsZWQoKSA/IHRoaXMuc2VsZWN0ZWQoKSA6IHRoaXMuaW50ZXJuYWxTZWxlY3RlZCgpO1xuICB9KTtcblxuICBwcml2YXRlIHRvZ2dsZUludGVybmFsU2VsZWN0ZWRTdGF0ZSgpOiB2b2lkIHtcbiAgICB0aGlzLmludGVybmFsU2VsZWN0ZWQuc2V0KCF0aGlzLmludGVybmFsU2VsZWN0ZWQoKSk7XG4gIH1cblxuICBvbkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50IHwgS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMuY2xpY2suZW1pdChldmVudCk7XG4gICAgaWYgKCF0aGlzLmlzQ29udHJvbGxlZCgpKSB7XG4gICAgICB0aGlzLnRvZ2dsZUludGVybmFsU2VsZWN0ZWRTdGF0ZSgpO1xuICAgIH1cbiAgfVxuXG4gIHJlYWRvbmx5IGJ1dHRvbkljb25TaXplID0gY29tcHV0ZWQoKCkgPT4gYnV0dG9uSWNvblNpemVbdGhpcy5zaXplKCldKTtcbn1cbiIsIjxydGUtaWNvbi1idXR0b24gXG4gIFtzaXplXT1cInNpemUoKVwiIFxuICBbbmFtZV09XCJuYW1lKClcIiBcbiAgW2NvbXBhY3RTcGFjaW5nXT1cImNvbXBhY3RTcGFjaW5nKClcIlxuICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiXG4gIFthcmlhTGFiZWxdPVwiYXJpYUxhYmVsKClcIlxuICBbYXJpYUxhYmVsbGVkQnldPVwiYXJpYUxhYmVsbGVkQnkoKVwiXG4gIFt0eXBlXT1cInR5cGUoKVwiXG4gIFt2YXJpYW50XT1cInZhcmlhbnQoKVwiXG4gIFthcHBlYXJhbmNlXT1cImlzU2VsZWN0ZWQoKSA/ICdmaWxsZWQnIDogJ291dGxpbmVkJ1wiXG4gIChjbGljayk9XCJvbkNsaWNrKCRldmVudClcIlxuLz4iXX0=
|
|
@@ -11,10 +11,10 @@ export class LinkComponent {
|
|
|
11
11
|
this.externalLink = input(false);
|
|
12
12
|
}
|
|
13
13
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: LinkComponent, isStandalone: true, selector: "rte-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, externalLink: { classPropertyName: "externalLink", publicName: "externalLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\">\n <span class=\"rte-link-label\">\n {{ label() }}\n </span>\n <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: LinkComponent, isStandalone: true, selector: "rte-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, externalLink: { classPropertyName: "externalLink", publicName: "externalLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\" [target]=\"externalLink() ? '_blank' : undefined\" [rel]=\"externalLink() ? 'noopener noreferrer' : null\">\n <span class=\"rte-link-label\">\n {{ label() }}\n </span>\n <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15
15
|
}
|
|
16
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
|
-
args: [{ selector: "rte-link", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\">\n <span class=\"rte-link-label\">\n {{ label() }}\n </span>\n <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"] }]
|
|
18
|
+
args: [{ selector: "rte-link", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\" [target]=\"externalLink() ? '_blank' : undefined\" [rel]=\"externalLink() ? 'noopener noreferrer' : null\">\n <span class=\"rte-link-label\">\n {{ label() }}\n </span>\n <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"] }]
|
|
19
19
|
}] });
|
|
20
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
20
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kcy1ydGUtbGliL3NyYy9saWIvY29tcG9uZW50cy9saW5rL2xpbmsuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvbGluay9saW5rLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUxRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQVV2RCxNQUFNLE9BQU8sYUFBYTtJQVIxQjtRQVNXLFVBQUssR0FBRyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDbEIsU0FBSSxHQUFHLEtBQUssQ0FBUyxHQUFHLENBQUMsQ0FBQztRQUMxQixXQUFNLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBQy9CLGlCQUFZLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO0tBQy9DOytHQUxZLGFBQWE7bUdBQWIsYUFBYSxxa0JDYjFCLGtYQUtJLHFyRURFUSxZQUFZLGlPQUFFLGFBQWE7OzRGQU0xQixhQUFhO2tCQVJ6QixTQUFTOytCQUNFLFVBQVUsV0FDWCxDQUFDLFlBQVksRUFBRSxhQUFhLENBQUMsY0FDMUIsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5jb21wb25lbnRcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInJ0ZS1saW5rXCIsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEljb25Db21wb25lbnRdLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogXCIuL2xpbmsuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmw6IFwiLi9saW5rLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBMaW5rQ29tcG9uZW50IHtcbiAgcmVhZG9ubHkgbGFiZWwgPSBpbnB1dChcIlwiKTtcbiAgcmVhZG9ubHkgaHJlZiA9IGlucHV0PHN0cmluZz4oXCIjXCIpO1xuICByZWFkb25seSBzdWJ0bGUgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IGV4dGVybmFsTGluayA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbn1cbiIsIjxhIGhyZWY9XCJ7eyBocmVmKCkgfX1cIiBjbGFzcz1cInJ0ZS1saW5rXCIgcm9sZT1cImxpbmtcIiBbbmdDbGFzc109XCJ7J3N1YnRsZSc6IHN1YnRsZSgpfVwiIFt0YXJnZXRdPVwiZXh0ZXJuYWxMaW5rKCkgPyAnX2JsYW5rJyA6IHVuZGVmaW5lZFwiIFtyZWxdPVwiZXh0ZXJuYWxMaW5rKCkgPyAnbm9vcGVuZXIgbm9yZWZlcnJlcicgOiBudWxsXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJydGUtbGluay1sYWJlbFwiPlxuICAgICAgICB7eyBsYWJlbCgpIH19XG4gICAgPC9zcGFuPlxuICAgIDxydGUtaWNvbiAqbmdJZj1cImV4dGVybmFsTGluaygpXCIgbmFtZT1cImV4dGVybmFsLWxpbmtcIiBbc2l6ZV09XCIxMlwiPjwvcnRlLWljb24+XG48L2E+Il19
|