@design-system-rte/angular 0.11.0 → 0.13.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/README.md +27 -24
- package/esm2022/lib/components/badge/badge.component.mjs +8 -7
- package/esm2022/lib/components/badge/badge.directive.mjs +4 -4
- package/esm2022/lib/components/banner/banner.component.mjs +65 -0
- package/esm2022/lib/components/breadcrumbs/breadcrumbs.component.mjs +34 -0
- package/esm2022/lib/components/button/button.component.mjs +2 -2
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/components/icon/icon.component.mjs +3 -3
- package/esm2022/lib/components/icon-button/icon-button.component.mjs +3 -3
- package/esm2022/lib/components/popover/popover.component.mjs +62 -0
- package/esm2022/lib/components/popover/popover.directive.mjs +147 -0
- package/esm2022/lib/components/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/components/segmented-control/segmented-control.component.mjs +6 -3
- package/esm2022/lib/components/tooltip/tooltip.component.mjs +4 -4
- package/esm2022/lib/components/tooltip/tooltip.directive.mjs +18 -59
- package/esm2022/lib/services/overlay.service.mjs +43 -0
- package/esm2022/public-api.mjs +4 -1
- package/fesm2022/design-system-rte-angular.mjs +368 -84
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/lib/components/badge/badge.component.d.ts +5 -4
- package/lib/components/badge/badge.directive.d.ts +3 -3
- package/lib/components/banner/banner.component.d.ts +24 -0
- package/lib/components/breadcrumbs/breadcrumbs.component.d.ts +10 -0
- package/lib/components/chip/chip.component.d.ts +1 -1
- package/lib/components/divider/divider.component.d.ts +1 -1
- package/lib/components/popover/popover.component.d.ts +29 -0
- package/lib/components/popover/popover.directive.d.ts +41 -0
- package/lib/components/segmented-control/segmented-control.component.d.ts +2 -0
- package/lib/components/tooltip/tooltip.component.d.ts +3 -2
- package/lib/components/tooltip/tooltip.directive.d.ts +5 -7
- package/lib/services/overlay.service.d.ts +12 -0
- package/package.json +2 -2
- package/public-api.d.ts +3 -0
package/README.md
CHANGED
|
@@ -1,24 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
### Installation Instructions
|
|
2
|
+
|
|
3
|
+
1. **Add Branding/Theme Mixin:**
|
|
4
|
+
|
|
5
|
+
Include the branding/theme mixin in your main `.scss` file. This will create a style scope for the components.
|
|
6
|
+
```scss
|
|
7
|
+
@use "@design-system-rte/core/design-tokens/tokens/mixins" as *;
|
|
8
|
+
|
|
9
|
+
@include theme-selector('bleu_iceberg', 'light');
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
2. **Add HTML Selector:**
|
|
13
|
+
|
|
14
|
+
Add an HTML selector to define the context for applying component styles.
|
|
15
|
+
```html
|
|
16
|
+
<body data-theme="bleu_iceberg" data-mode="light">
|
|
17
|
+
<app-root/>
|
|
18
|
+
</body>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
3. **Use Components:**
|
|
22
|
+
|
|
23
|
+
Implement the different components as documented in the [Storybook](https://opensource.rte-france.com/design-system-rte/?path=/docs/angular_button--docs) provided with the library.
|
|
24
|
+
|
|
25
|
+
4. **Icon Component Usage:**
|
|
26
|
+
|
|
27
|
+
To use the Icon Component (rte-icon), copy the `.svg` files from `node_modules/@design-system-rte/core/assets/icons` to the `/assets/icons` directory of your application.
|
|
@@ -9,18 +9,19 @@ export class BadgeComponent {
|
|
|
9
9
|
constructor() {
|
|
10
10
|
this.badgeType = input("brand");
|
|
11
11
|
this.badgeSize = input("m");
|
|
12
|
-
this.
|
|
12
|
+
this.badgeContent = input("number");
|
|
13
13
|
this.count = input();
|
|
14
14
|
this.icon = input("notification");
|
|
15
|
+
this.simpleBadge = input(false);
|
|
15
16
|
this.isValidIconName = computed(() => isValidIconName(this.icon()));
|
|
16
17
|
this.showIcon = computed(() => getShowIcon({
|
|
17
18
|
size: this.badgeSize(),
|
|
18
|
-
|
|
19
|
+
content: this.badgeContent(),
|
|
19
20
|
iconSize: this.iconSize(),
|
|
20
21
|
}));
|
|
21
22
|
this.showText = computed(() => getShowText({
|
|
22
23
|
size: this.badgeSize(),
|
|
23
|
-
|
|
24
|
+
content: this.badgeContent(),
|
|
24
25
|
count: this.count(),
|
|
25
26
|
}));
|
|
26
27
|
this.displayCount = computed(() => getDisplayCount(this.count()));
|
|
@@ -28,16 +29,16 @@ export class BadgeComponent {
|
|
|
28
29
|
this.iconSize = computed(() => getBadgeIconSize(this.badgeSize()));
|
|
29
30
|
this.showBadge = computed(() => getShowBadge({
|
|
30
31
|
size: this.badgeSize(),
|
|
31
|
-
|
|
32
|
+
content: this.badgeContent(),
|
|
32
33
|
count: this.count(),
|
|
33
34
|
iconSize: this.iconSize(),
|
|
34
35
|
}));
|
|
35
36
|
}
|
|
36
37
|
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 },
|
|
38
|
+
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 }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", 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 }, simpleBadge: { classPropertyName: "simpleBadge", publicName: "simpleBadge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n data-testid=\"badge\"\n [attr.data-simple-badge]=\"simpleBadge()\"\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 <span *ngIf=\"showText()\" class=\"badge-text\">\n {{ displayCount() }}\n </span>\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[data-simple-badge=true]{position:static;box-shadow:none}.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
|
}
|
|
39
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
40
41
|
type: Component,
|
|
41
|
-
args: [{ selector: "rte-badge", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n
|
|
42
|
+
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 [attr.data-simple-badge]=\"simpleBadge()\"\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 <span *ngIf=\"showText()\" class=\"badge-text\">\n {{ displayCount() }}\n </span>\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[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"] }]
|
|
42
43
|
}] });
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
44
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVwRixPQUFPLEVBQ0wsZ0JBQWdCLEVBQ2hCLGVBQWUsRUFDZixZQUFZLEVBQ1osV0FBVyxFQUNYLFdBQVcsR0FDWixNQUFNLHNEQUFzRCxDQUFDO0FBRTlELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQVV2RCxNQUFNLE9BQU8sY0FBYztJQVIzQjtRQVNXLGNBQVMsR0FBRyxLQUFLLENBQVksT0FBTyxDQUFDLENBQUM7UUFDdEMsY0FBUyxHQUFHLEtBQUssQ0FBWSxHQUFHLENBQUMsQ0FBQztRQUNsQyxpQkFBWSxHQUFHLEtBQUssQ0FBZSxRQUFRLENBQUMsQ0FBQztRQUM3QyxVQUFLLEdBQUcsS0FBSyxFQUFzQixDQUFDO1FBQ3BDLFNBQUksR0FBRyxLQUFLLENBQVMsY0FBYyxDQUFDLENBQUM7UUFDckMsZ0JBQVcsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFFcEMsb0JBQWUsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFL0QsYUFBUSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FDaEMsV0FBVyxDQUFDO1lBQ1YsSUFBSSxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDdEIsT0FBTyxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUU7WUFDNUIsUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUU7U0FDMUIsQ0FBQyxDQUNILENBQUM7UUFFTyxhQUFRLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUNoQyxXQUFXLENBQUM7WUFDVixJQUFJLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUN0QixPQUFPLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUM1QixLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRTtTQUNwQixDQUFDLENBQ0gsQ0FBQztRQUVPLGlCQUFZLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQzdELGtCQUFhLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ2xGLGFBQVEsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUU5RCxjQUFTLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUNqQyxZQUFZLENBQUM7WUFDWCxJQUFJLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUN0QixPQUFPLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUM1QixLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNuQixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRTtTQUMxQixDQUFDLENBQ0gsQ0FBQztLQUNIOytHQXRDWSxjQUFjO21HQUFkLGNBQWMsNjFCQ3RCM0IsMmJBZ0JBLHlwRURBWSxZQUFZLGlPQUFFLGFBQWE7OzRGQU0xQixjQUFjO2tCQVIxQixTQUFTOytCQUNFLFdBQVcsV0FDWixDQUFDLFlBQVksRUFBRSxhQUFhLENBQUMsY0FDMUIsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgY29tcHV0ZWQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEJhZGdlQ29udGVudCwgQmFkZ2VTaXplLCBCYWRnZVR5cGUgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9iYWRnZS9iYWRnZS5pbnRlcmZhY2VcIjtcbmltcG9ydCB7XG4gIGdldEJhZGdlSWNvblNpemUsXG4gIGdldERpc3BsYXlDb3VudCxcbiAgZ2V0U2hvd0JhZGdlLFxuICBnZXRTaG93SWNvbixcbiAgZ2V0U2hvd1RleHQsXG59IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL2JhZGdlL2JhZGdlLnV0aWxzXCI7XG5cbmltcG9ydCB7IGlzVmFsaWRJY29uTmFtZSB9IGZyb20gXCIuLi9pY29uL2ljb24tbWFwXCI7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5jb21wb25lbnRcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInJ0ZS1iYWRnZVwiLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9iYWRnZS5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybDogXCIuL2JhZGdlLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBCYWRnZUNvbXBvbmVudCB7XG4gIHJlYWRvbmx5IGJhZGdlVHlwZSA9IGlucHV0PEJhZGdlVHlwZT4oXCJicmFuZFwiKTtcbiAgcmVhZG9ubHkgYmFkZ2VTaXplID0gaW5wdXQ8QmFkZ2VTaXplPihcIm1cIik7XG4gIHJlYWRvbmx5IGJhZGdlQ29udGVudCA9IGlucHV0PEJhZGdlQ29udGVudD4oXCJudW1iZXJcIik7XG4gIHJlYWRvbmx5IGNvdW50ID0gaW5wdXQ8bnVtYmVyIHwgdW5kZWZpbmVkPigpO1xuICByZWFkb25seSBpY29uID0gaW5wdXQ8c3RyaW5nPihcIm5vdGlmaWNhdGlvblwiKTtcbiAgcmVhZG9ubHkgc2ltcGxlQmFkZ2UgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG5cbiAgcmVhZG9ubHkgaXNWYWxpZEljb25OYW1lID0gY29tcHV0ZWQoKCkgPT4gaXNWYWxpZEljb25OYW1lKHRoaXMuaWNvbigpKSk7XG5cbiAgcmVhZG9ubHkgc2hvd0ljb24gPSBjb21wdXRlZCgoKSA9PlxuICAgIGdldFNob3dJY29uKHtcbiAgICAgIHNpemU6IHRoaXMuYmFkZ2VTaXplKCksXG4gICAgICBjb250ZW50OiB0aGlzLmJhZGdlQ29udGVudCgpLFxuICAgICAgaWNvblNpemU6IHRoaXMuaWNvblNpemUoKSxcbiAgICB9KSxcbiAgKTtcblxuICByZWFkb25seSBzaG93VGV4dCA9IGNvbXB1dGVkKCgpID0+XG4gICAgZ2V0U2hvd1RleHQoe1xuICAgICAgc2l6ZTogdGhpcy5iYWRnZVNpemUoKSxcbiAgICAgIGNvbnRlbnQ6IHRoaXMuYmFkZ2VDb250ZW50KCksXG4gICAgICBjb3VudDogdGhpcy5jb3VudCgpLFxuICAgIH0pLFxuICApO1xuXG4gIHJlYWRvbmx5IGRpc3BsYXlDb3VudCA9IGNvbXB1dGVkKCgpID0+IGdldERpc3BsYXlDb3VudCh0aGlzLmNvdW50KCkpKTtcbiAgcmVhZG9ubHkgY291bnRPdmVyZmxvdyA9IGNvbXB1dGVkKCgpID0+IHRoaXMuc2hvd1RleHQoKSAmJiB0aGlzLmRpc3BsYXlDb3VudCgpLmxlbmd0aCA+IDIpO1xuICByZWFkb25seSBpY29uU2l6ZSA9IGNvbXB1dGVkKCgpID0+IGdldEJhZGdlSWNvblNpemUodGhpcy5iYWRnZVNpemUoKSkpO1xuXG4gIHJlYWRvbmx5IHNob3dCYWRnZSA9IGNvbXB1dGVkKCgpID0+XG4gICAgZ2V0U2hvd0JhZGdlKHtcbiAgICAgIHNpemU6IHRoaXMuYmFkZ2VTaXplKCksXG4gICAgICBjb250ZW50OiB0aGlzLmJhZGdlQ29udGVudCgpLFxuICAgICAgY291bnQ6IHRoaXMuY291bnQoKSxcbiAgICAgIGljb25TaXplOiB0aGlzLmljb25TaXplKCksXG4gICAgfSksXG4gICk7XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiYmFkZ2Ugc2l6ZS17eyBiYWRnZVNpemUoKSB9fSB0eXBlLXt7IGJhZGdlVHlwZSgpIH19XCJcbiAgZGF0YS10ZXN0aWQ9XCJiYWRnZVwiXG4gIFthdHRyLmRhdGEtc2ltcGxlLWJhZGdlXT1cInNpbXBsZUJhZGdlKClcIlxuICBbbmdDbGFzc109XCJ7IGhpZGRlbjogIXNob3dCYWRnZSgpLCAnY291bnQtb3ZlcmZsb3cnOiBjb3VudE92ZXJmbG93KCkgfVwiXG4+XG4gIDxydGUtaWNvblxuICAgICpuZ0lmPVwic2hvd0ljb24oKVwiXG4gICAgY2xhc3M9XCJiYWRnZS1pY29uXCJcbiAgICBbbmFtZV09XCJpY29uKClcIlxuICAgIFtzaXplXT1cImljb25TaXplKCkhXCJcbiAgLz5cbiAgPHNwYW4gKm5nSWY9XCJzaG93VGV4dCgpXCIgY2xhc3M9XCJiYWRnZS10ZXh0XCI+XG4gICAge3sgZGlzcGxheUNvdW50KCkgfX1cbiAgPC9zcGFuPlxuPC9kaXY+XG4iXX0=
|
|
@@ -5,7 +5,7 @@ export class BadgeDirective {
|
|
|
5
5
|
constructor() {
|
|
6
6
|
this.rteBadgeType = input("brand");
|
|
7
7
|
this.rteBadgeSize = input("m");
|
|
8
|
-
this.
|
|
8
|
+
this.rteBadgeContent = input("number");
|
|
9
9
|
this.rteBadgeCount = input();
|
|
10
10
|
this.rteBadgeIcon = input("settings");
|
|
11
11
|
this.badgeComponentRef = null;
|
|
@@ -32,7 +32,7 @@ export class BadgeDirective {
|
|
|
32
32
|
if (this.badgeComponentRef) {
|
|
33
33
|
this.badgeComponentRef.setInput("badgeType", this.rteBadgeType());
|
|
34
34
|
this.badgeComponentRef.setInput("badgeSize", this.rteBadgeSize());
|
|
35
|
-
this.badgeComponentRef.setInput("
|
|
35
|
+
this.badgeComponentRef.setInput("badgeContent", this.rteBadgeContent());
|
|
36
36
|
this.badgeComponentRef.setInput("count", this.rteBadgeCount());
|
|
37
37
|
this.badgeComponentRef.setInput("icon", this.rteBadgeIcon());
|
|
38
38
|
}
|
|
@@ -43,7 +43,7 @@ export class BadgeDirective {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
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 },
|
|
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 }, rteBadgeContent: { classPropertyName: "rteBadgeContent", publicName: "rteBadgeContent", 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
47
|
}
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeDirective, decorators: [{
|
|
49
49
|
type: Directive,
|
|
@@ -52,4 +52,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
52
52
|
standalone: true,
|
|
53
53
|
}]
|
|
54
54
|
}], ctorParameters: () => [] });
|
|
55
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
55
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUdMLGdCQUFnQixFQUVoQixNQUFNLEVBQ04sVUFBVSxFQUNWLFNBQVMsR0FFVixNQUFNLGVBQWUsQ0FBQztBQUt2QixPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7O0FBTW5ELE1BQU0sT0FBTyxjQUFjO0lBY3pCO1FBYlMsaUJBQVksR0FBRyxLQUFLLENBQVksT0FBTyxDQUFDLENBQUM7UUFDekMsaUJBQVksR0FBRyxLQUFLLENBQVksR0FBRyxDQUFDLENBQUM7UUFDckMsb0JBQWUsR0FBRyxLQUFLLENBQWUsUUFBUSxDQUFDLENBQUM7UUFDaEQsa0JBQWEsR0FBRyxLQUFLLEVBQXNCLENBQUM7UUFDNUMsaUJBQVksR0FBRyxLQUFLLENBQXdDLFVBQVUsQ0FBQyxDQUFDO1FBRXpFLHNCQUFpQixHQUF3QyxJQUFJLENBQUM7UUFHckQsa0JBQWEsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUN6QyxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2hDLGFBQVEsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7UUFHNUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztJQUNuRCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUM1RSxJQUFJLENBQUMsMEJBQTBCLEVBQUUsQ0FBQztRQUNsQyxJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUM3QixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQztJQUNuRSxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQywwQkFBMEIsRUFBRSxDQUFDO0lBQ3BDLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztZQUMzQixJQUFJLENBQUMsaUJBQWlCLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDbkMsQ0FBQztJQUNILENBQUM7SUFFTywwQkFBMEI7UUFDaEMsSUFBSSxJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztZQUMzQixJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQztZQUNsRSxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQztZQUNsRSxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUMsQ0FBQztZQUN4RSxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBQztZQUMvRCxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQztRQUMvRCxDQUFDO0lBQ0gsQ0FBQztJQUVPLHFCQUFxQjtRQUMzQixJQUFJLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDMUcsQ0FBQztJQUNILENBQUM7K0dBakRVLGNBQWM7bUdBQWQsY0FBYzs7NEZBQWQsY0FBYztrQkFKMUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtvQkFDdEIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBpbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIFZpZXdDb250YWluZXJSZWYsXG4gIENvbXBvbmVudFJlZixcbiAgaW5qZWN0LFxuICBFbGVtZW50UmVmLFxuICBSZW5kZXJlcjIsXG4gIE9uSW5pdCxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEJhZGdlVHlwZSwgQmFkZ2VTaXplLCBCYWRnZUNvbnRlbnQgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9iYWRnZS9iYWRnZS5pbnRlcmZhY2VcIjtcblxuaW1wb3J0IHsgUmVndWxhckljb25JZEtleSwgVG9nZ2xhYmxlSWNvbklkS2V5IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5zZXJ2aWNlXCI7XG5cbmltcG9ydCB7IEJhZGdlQ29tcG9uZW50IH0gZnJvbSBcIi4vYmFkZ2UuY29tcG9uZW50XCI7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogXCJbcnRlQmFkZ2VdXCIsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIEJhZGdlRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIHJlYWRvbmx5IHJ0ZUJhZGdlVHlwZSA9IGlucHV0PEJhZGdlVHlwZT4oXCJicmFuZFwiKTtcbiAgcmVhZG9ubHkgcnRlQmFkZ2VTaXplID0gaW5wdXQ8QmFkZ2VTaXplPihcIm1cIik7XG4gIHJlYWRvbmx5IHJ0ZUJhZGdlQ29udGVudCA9IGlucHV0PEJhZGdlQ29udGVudD4oXCJudW1iZXJcIik7XG4gIHJlYWRvbmx5IHJ0ZUJhZGdlQ291bnQgPSBpbnB1dDxudW1iZXIgfCB1bmRlZmluZWQ+KCk7XG4gIHJlYWRvbmx5IHJ0ZUJhZGdlSWNvbiA9IGlucHV0PFJlZ3VsYXJJY29uSWRLZXkgfCBUb2dnbGFibGVJY29uSWRLZXk+KFwic2V0dGluZ3NcIik7XG5cbiAgcHJpdmF0ZSBiYWRnZUNvbXBvbmVudFJlZjogQ29tcG9uZW50UmVmPEJhZGdlQ29tcG9uZW50PiB8IG51bGwgPSBudWxsO1xuICBwcml2YXRlIGhvc3RFbGVtZW50OiBIVE1MRWxlbWVudDtcblxuICBwcml2YXRlIHJlYWRvbmx5IHZpZXdDb250YWluZXIgPSBpbmplY3QoVmlld0NvbnRhaW5lclJlZik7XG4gIHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcbiAgcHJpdmF0ZSByZWFkb25seSByZW5kZXJlciA9IGluamVjdChSZW5kZXJlcjIpO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHRoaXMuaG9zdEVsZW1lbnQgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuYmFkZ2VDb21wb25lbnRSZWYgPSB0aGlzLnZpZXdDb250YWluZXIuY3JlYXRlQ29tcG9uZW50KEJhZGdlQ29tcG9uZW50KTtcbiAgICB0aGlzLmFzc2lnbkRpcmVjdGl2ZVRvQ29tcG9uZW50KCk7XG4gICAgdGhpcy5hcHBlbmRDb21wb25lbnRUb0hvc3QoKTtcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuaG9zdEVsZW1lbnQsIFwicG9zaXRpb25cIiwgXCJyZWxhdGl2ZVwiKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMuYXNzaWduRGlyZWN0aXZlVG9Db21wb25lbnQoKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmJhZGdlQ29tcG9uZW50UmVmKSB7XG4gICAgICB0aGlzLmJhZGdlQ29tcG9uZW50UmVmLmRlc3Ryb3koKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGFzc2lnbkRpcmVjdGl2ZVRvQ29tcG9uZW50KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmJhZGdlQ29tcG9uZW50UmVmKSB7XG4gICAgICB0aGlzLmJhZGdlQ29tcG9uZW50UmVmLnNldElucHV0KFwiYmFkZ2VUeXBlXCIsIHRoaXMucnRlQmFkZ2VUeXBlKCkpO1xuICAgICAgdGhpcy5iYWRnZUNvbXBvbmVudFJlZi5zZXRJbnB1dChcImJhZGdlU2l6ZVwiLCB0aGlzLnJ0ZUJhZGdlU2l6ZSgpKTtcbiAgICAgIHRoaXMuYmFkZ2VDb21wb25lbnRSZWYuc2V0SW5wdXQoXCJiYWRnZUNvbnRlbnRcIiwgdGhpcy5ydGVCYWRnZUNvbnRlbnQoKSk7XG4gICAgICB0aGlzLmJhZGdlQ29tcG9uZW50UmVmLnNldElucHV0KFwiY291bnRcIiwgdGhpcy5ydGVCYWRnZUNvdW50KCkpO1xuICAgICAgdGhpcy5iYWRnZUNvbXBvbmVudFJlZi5zZXRJbnB1dChcImljb25cIiwgdGhpcy5ydGVCYWRnZUljb24oKSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBhcHBlbmRDb21wb25lbnRUb0hvc3QoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuYmFkZ2VDb21wb25lbnRSZWYpIHtcbiAgICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsIHRoaXMuYmFkZ2VDb21wb25lbnRSZWYubG9jYXRpb24ubmF0aXZlRWxlbWVudCk7XG4gICAgfVxuICB9XG59XG4iXX0=
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, input, output, signal, } from "@angular/core";
|
|
3
|
+
import { ButtonComponent } from "../button/button.component";
|
|
4
|
+
import { IconComponent } from "../icon/icon.component";
|
|
5
|
+
import { IconButtonComponent } from "../icon-button/icon-button.component";
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
export class BannerComponent {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.type = input("default");
|
|
11
|
+
this.message = input.required();
|
|
12
|
+
this.position = input("push");
|
|
13
|
+
this.title = input();
|
|
14
|
+
this.closable = input(false);
|
|
15
|
+
this.showIcon = input(false);
|
|
16
|
+
this.isOpen = input(true);
|
|
17
|
+
this.actionLabel = input();
|
|
18
|
+
this.click = output();
|
|
19
|
+
this.visible = signal(false);
|
|
20
|
+
this.rendering = signal(false);
|
|
21
|
+
this.close = output();
|
|
22
|
+
}
|
|
23
|
+
ngOnInit() {
|
|
24
|
+
this.visible.set(this.isOpen());
|
|
25
|
+
this.rendering.set(this.isOpen());
|
|
26
|
+
if (this.closable() === false && this.position() === "overlay") {
|
|
27
|
+
console.warn("Banner: 'closable' and 'close' props must be set when 'position' has 'overlay' value.");
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
ngOnChanges(changes) {
|
|
32
|
+
if (changes["isOpen"]) {
|
|
33
|
+
if (this.isOpen())
|
|
34
|
+
this.openBanner();
|
|
35
|
+
else {
|
|
36
|
+
this.closeBanner();
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
clickAction() {
|
|
41
|
+
this.click.emit();
|
|
42
|
+
}
|
|
43
|
+
closeBanner() {
|
|
44
|
+
this.visible.set(false);
|
|
45
|
+
setTimeout(() => {
|
|
46
|
+
this.rendering.set(false);
|
|
47
|
+
this.close.emit();
|
|
48
|
+
}, 200);
|
|
49
|
+
}
|
|
50
|
+
openBanner() {
|
|
51
|
+
if (this.rendering())
|
|
52
|
+
return;
|
|
53
|
+
this.rendering.set(true);
|
|
54
|
+
requestAnimationFrame(() => {
|
|
55
|
+
requestAnimationFrame(() => this.visible.set(true));
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
59
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: BannerComponent, isStandalone: true, selector: "rte-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<section\n *ngIf=\"rendering()\"\n class=\"rte-banner-container {{ type() }} {{ position() }}\"\n [ngClass]=\"{ open: visible(), close: !visible() }\"\n [attr.role]=\"type() === 'default' ? 'status' : 'alert'\"\n>\n <div class=\"rte-banner\">\n <div *ngIf=\"showIcon()\" class=\"rte-banner-icon\">\n <rte-icon [name]=\"type() === 'default' ? 'info' : 'error'\" [size]=\"32\" />\n </div>\n <div class=\"rte-banner-content\">\n <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n <div *ngIf=\"message()\" class=\"rte-banner-message\">\n <span>{{ message() }}</span>\n <rte-button\n *ngIf=\"actionLabel()\"\n variant=\"neutral\"\n size=\"s\"\n [label]=\"actionLabel()!\"\n [ariaLabel]=\"actionLabel()!\"\n (click)=\"clickAction()\"\n />\n </div>\n </div>\n <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n <rte-icon-button\n name=\"close\"\n variant=\"neutral\"\n ariaLabel=\"close banner\"\n (click)=\"closeBanner()\"\n />\n </div>\n </div>\n</section>\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\";.rte-banner-container{display:flex;box-sizing:border-box;width:100%;min-width:320px;padding:24px;flex-direction:column;justify-content:center;align-items:center;gap:0px;border-radius:0;background:var(--background-info-default);color:var(--content-info);top:0;left:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.rte-banner-container.alert{background:var(--background-danger-default);color:var(--content-danger)}.rte-banner-container.overlay{position:fixed}.rte-banner-container.open{opacity:1;transform:translateY(0)}.rte-banner-container.close{opacity:0;transform:translateY(-10px)}.rte-banner-container .rte-banner{display:flex;padding:16px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:var(--radius-S, 4px);opacity:var(--100, 1);box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default, #FFF)}.rte-banner-container .rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner-container .rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner-container .rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message .rte-banner-action-button{width:max-content}.rte-banner-container .rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\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"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }, { kind: "component", type: ButtonComponent, selector: "rte-button", inputs: ["label", "variant", "size", "disabled", "icon", "ariaLabel", "ariaLabelledBy", "buttonType"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
60
|
+
}
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, decorators: [{
|
|
62
|
+
type: Component,
|
|
63
|
+
args: [{ selector: "rte-banner", imports: [CommonModule, IconComponent, IconButtonComponent, ButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n *ngIf=\"rendering()\"\n class=\"rte-banner-container {{ type() }} {{ position() }}\"\n [ngClass]=\"{ open: visible(), close: !visible() }\"\n [attr.role]=\"type() === 'default' ? 'status' : 'alert'\"\n>\n <div class=\"rte-banner\">\n <div *ngIf=\"showIcon()\" class=\"rte-banner-icon\">\n <rte-icon [name]=\"type() === 'default' ? 'info' : 'error'\" [size]=\"32\" />\n </div>\n <div class=\"rte-banner-content\">\n <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n <div *ngIf=\"message()\" class=\"rte-banner-message\">\n <span>{{ message() }}</span>\n <rte-button\n *ngIf=\"actionLabel()\"\n variant=\"neutral\"\n size=\"s\"\n [label]=\"actionLabel()!\"\n [ariaLabel]=\"actionLabel()!\"\n (click)=\"clickAction()\"\n />\n </div>\n </div>\n <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n <rte-icon-button\n name=\"close\"\n variant=\"neutral\"\n ariaLabel=\"close banner\"\n (click)=\"closeBanner()\"\n />\n </div>\n </div>\n</section>\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\";.rte-banner-container{display:flex;box-sizing:border-box;width:100%;min-width:320px;padding:24px;flex-direction:column;justify-content:center;align-items:center;gap:0px;border-radius:0;background:var(--background-info-default);color:var(--content-info);top:0;left:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.rte-banner-container.alert{background:var(--background-danger-default);color:var(--content-danger)}.rte-banner-container.overlay{position:fixed}.rte-banner-container.open{opacity:1;transform:translateY(0)}.rte-banner-container.close{opacity:0;transform:translateY(-10px)}.rte-banner-container .rte-banner{display:flex;padding:16px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:var(--radius-S, 4px);opacity:var(--100, 1);box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default, #FFF)}.rte-banner-container .rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner-container .rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner-container .rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message .rte-banner-action-button{width:max-content}.rte-banner-container .rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"] }]
|
|
64
|
+
}] });
|
|
65
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL2Jhbm5lci9iYW5uZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYmFubmVyL2Jhbm5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLE1BQU0sRUFDTixNQUFNLEdBSVAsTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzdELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQzs7O0FBVTNFLE1BQU0sT0FBTyxlQUFlO0lBUjVCO1FBU1csU0FBSSxHQUFHLEtBQUssQ0FBYSxTQUFTLENBQUMsQ0FBQztRQUNwQyxZQUFPLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBQ25DLGFBQVEsR0FBRyxLQUFLLENBQWlCLE1BQU0sQ0FBQyxDQUFDO1FBQ3pDLFVBQUssR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUN4QixhQUFRLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBQ2pDLGFBQVEsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDakMsV0FBTSxHQUFHLEtBQUssQ0FBVSxJQUFJLENBQUMsQ0FBQztRQUM5QixnQkFBVyxHQUFHLEtBQUssRUFBVSxDQUFDO1FBRTlCLFVBQUssR0FBRyxNQUFNLEVBQVEsQ0FBQztRQUV2QixZQUFPLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLGNBQVMsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFMUIsVUFBSyxHQUFHLE1BQU0sRUFBUSxDQUFDO0tBdUNqQztJQXJDQyxRQUFRO1FBQ04sSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7UUFDaEMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7UUFDbEMsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLEtBQUssS0FBSyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsS0FBSyxTQUFTLEVBQUUsQ0FBQztZQUMvRCxPQUFPLENBQUMsSUFBSSxDQUFDLHVGQUF1RixDQUFDLENBQUM7WUFDdEcsT0FBTztRQUNULENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUM7WUFDdEIsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO2dCQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztpQkFDaEMsQ0FBQztnQkFDSixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDckIsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN4QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDMUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNwQixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDVixDQUFDO0lBRU8sVUFBVTtRQUNoQixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFBRSxPQUFPO1FBQzdCLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3pCLHFCQUFxQixDQUFDLEdBQUcsRUFBRTtZQUN6QixxQkFBcUIsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQ3RELENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzsrR0FyRFUsZUFBZTttR0FBZixlQUFlLHNvQ0N6QjVCLHluQ0FrQ0EsazlFRGZZLFlBQVksaU9BQUUsYUFBYSxpSEFBRSxtQkFBbUIsd01BQUUsZUFBZTs7NEZBTWhFLGVBQWU7a0JBUjNCLFNBQVM7K0JBQ0UsWUFBWSxXQUNiLENBQUMsWUFBWSxFQUFFLGFBQWEsRUFBRSxtQkFBbUIsRUFBRSxlQUFlLENBQUMsY0FDaEUsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgaW5wdXQsXG4gIG91dHB1dCxcbiAgc2lnbmFsLFxuICBTaW1wbGVDaGFuZ2VzLFxuICBPbkluaXQsXG4gIE9uQ2hhbmdlcyxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEJhbm5lclBvc2l0aW9uLCBCYW5uZXJUeXBlIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYmFubmVyL2Jhbm5lci5pbnRlcmZhY2VcIjtcblxuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2J1dHRvbi9idXR0b24uY29tcG9uZW50XCI7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5jb21wb25lbnRcIjtcbmltcG9ydCB7IEljb25CdXR0b25Db21wb25lbnQgfSBmcm9tIFwiLi4vaWNvbi1idXR0b24vaWNvbi1idXR0b24uY29tcG9uZW50XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJydGUtYmFubmVyXCIsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEljb25Db21wb25lbnQsIEljb25CdXR0b25Db21wb25lbnQsIEJ1dHRvbkNvbXBvbmVudF0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiBcIi4vYmFubmVyLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vYmFubmVyLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBCYW5uZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIHJlYWRvbmx5IHR5cGUgPSBpbnB1dDxCYW5uZXJUeXBlPihcImRlZmF1bHRcIik7XG4gIHJlYWRvbmx5IG1lc3NhZ2UgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IHBvc2l0aW9uID0gaW5wdXQ8QmFubmVyUG9zaXRpb24+KFwicHVzaFwiKTtcbiAgcmVhZG9ubHkgdGl0bGUgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGNsb3NhYmxlID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xuICByZWFkb25seSBzaG93SWNvbiA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgaXNPcGVuID0gaW5wdXQ8Ym9vbGVhbj4odHJ1ZSk7XG4gIHJlYWRvbmx5IGFjdGlvbkxhYmVsID0gaW5wdXQ8c3RyaW5nPigpO1xuXG4gIHJlYWRvbmx5IGNsaWNrID0gb3V0cHV0PHZvaWQ+KCk7XG5cbiAgcmVhZG9ubHkgdmlzaWJsZSA9IHNpZ25hbChmYWxzZSk7XG4gIHJlYWRvbmx5IHJlbmRlcmluZyA9IHNpZ25hbChmYWxzZSk7XG5cbiAgcmVhZG9ubHkgY2xvc2UgPSBvdXRwdXQ8dm9pZD4oKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnZpc2libGUuc2V0KHRoaXMuaXNPcGVuKCkpO1xuICAgIHRoaXMucmVuZGVyaW5nLnNldCh0aGlzLmlzT3BlbigpKTtcbiAgICBpZiAodGhpcy5jbG9zYWJsZSgpID09PSBmYWxzZSAmJiB0aGlzLnBvc2l0aW9uKCkgPT09IFwib3ZlcmxheVwiKSB7XG4gICAgICBjb25zb2xlLndhcm4oXCJCYW5uZXI6ICdjbG9zYWJsZScgYW5kICdjbG9zZScgcHJvcHMgbXVzdCBiZSBzZXQgd2hlbiAncG9zaXRpb24nIGhhcyAnb3ZlcmxheScgdmFsdWUuXCIpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBpZiAoY2hhbmdlc1tcImlzT3BlblwiXSkge1xuICAgICAgaWYgKHRoaXMuaXNPcGVuKCkpIHRoaXMub3BlbkJhbm5lcigpO1xuICAgICAgZWxzZSB7XG4gICAgICAgIHRoaXMuY2xvc2VCYW5uZXIoKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBjbGlja0FjdGlvbigpIHtcbiAgICB0aGlzLmNsaWNrLmVtaXQoKTtcbiAgfVxuXG4gIGNsb3NlQmFubmVyKCkge1xuICAgIHRoaXMudmlzaWJsZS5zZXQoZmFsc2UpO1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5yZW5kZXJpbmcuc2V0KGZhbHNlKTtcbiAgICAgIHRoaXMuY2xvc2UuZW1pdCgpO1xuICAgIH0sIDIwMCk7XG4gIH1cblxuICBwcml2YXRlIG9wZW5CYW5uZXIoKSB7XG4gICAgaWYgKHRoaXMucmVuZGVyaW5nKCkpIHJldHVybjtcbiAgICB0aGlzLnJlbmRlcmluZy5zZXQodHJ1ZSk7XG4gICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHtcbiAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLnZpc2libGUuc2V0KHRydWUpKTtcbiAgICB9KTtcbiAgfVxufVxuIiwiPHNlY3Rpb25cbiAgKm5nSWY9XCJyZW5kZXJpbmcoKVwiXG4gIGNsYXNzPVwicnRlLWJhbm5lci1jb250YWluZXIge3sgdHlwZSgpIH19IHt7IHBvc2l0aW9uKCkgfX1cIlxuICBbbmdDbGFzc109XCJ7IG9wZW46IHZpc2libGUoKSwgY2xvc2U6ICF2aXNpYmxlKCkgfVwiXG4gIFthdHRyLnJvbGVdPVwidHlwZSgpID09PSAnZGVmYXVsdCcgPyAnc3RhdHVzJyA6ICdhbGVydCdcIlxuPlxuICA8ZGl2IGNsYXNzPVwicnRlLWJhbm5lclwiPlxuICAgIDxkaXYgKm5nSWY9XCJzaG93SWNvbigpXCIgY2xhc3M9XCJydGUtYmFubmVyLWljb25cIj5cbiAgICAgIDxydGUtaWNvbiBbbmFtZV09XCJ0eXBlKCkgPT09ICdkZWZhdWx0JyA/ICdpbmZvJyA6ICdlcnJvcidcIiBbc2l6ZV09XCIzMlwiIC8+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInJ0ZS1iYW5uZXItY29udGVudFwiPlxuICAgICAgPHNwYW4gKm5nSWY9XCJ0aXRsZSgpXCIgY2xhc3M9XCJydGUtYmFubmVyLXRpdGxlXCI+e3sgdGl0bGUoKSB9fTwvc3Bhbj5cbiAgICAgIDxkaXYgKm5nSWY9XCJtZXNzYWdlKClcIiBjbGFzcz1cInJ0ZS1iYW5uZXItbWVzc2FnZVwiPlxuICAgICAgICA8c3Bhbj57eyBtZXNzYWdlKCkgfX08L3NwYW4+XG4gICAgICAgIDxydGUtYnV0dG9uXG4gICAgICAgICAgKm5nSWY9XCJhY3Rpb25MYWJlbCgpXCJcbiAgICAgICAgICB2YXJpYW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgc2l6ZT1cInNcIlxuICAgICAgICAgIFtsYWJlbF09XCJhY3Rpb25MYWJlbCgpIVwiXG4gICAgICAgICAgW2FyaWFMYWJlbF09XCJhY3Rpb25MYWJlbCgpIVwiXG4gICAgICAgICAgKGNsaWNrKT1cImNsaWNrQWN0aW9uKClcIlxuICAgICAgICAvPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cImNsb3NhYmxlKClcIiBjbGFzcz1cInJ0ZS1iYW5uZXItY2xvc2UtaWNvblwiPlxuICAgICAgPHJ0ZS1pY29uLWJ1dHRvblxuICAgICAgICBuYW1lPVwiY2xvc2VcIlxuICAgICAgICB2YXJpYW50PVwibmV1dHJhbFwiXG4gICAgICAgIGFyaWFMYWJlbD1cImNsb3NlIGJhbm5lclwiXG4gICAgICAgIChjbGljayk9XCJjbG9zZUJhbm5lcigpXCJcbiAgICAgIC8+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9zZWN0aW9uPlxuIl19
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
|
|
3
|
+
import { BREADCRUMBS_DEFAULT_ARIA_LABEL } from "@design-system-rte/core/components/breadcrumbs/breadcrumbs.constants";
|
|
4
|
+
import { getBreadcrumbsTruncatedItems, shouldTruncateBreadcrumbs, } from "@design-system-rte/core/components/breadcrumbs/breadcrumbs.utils";
|
|
5
|
+
import { IconComponent } from "../icon/icon.component";
|
|
6
|
+
import { LinkComponent } from "../link/link.component";
|
|
7
|
+
import { TooltipDirective } from "../tooltip/tooltip.directive";
|
|
8
|
+
import * as i0 from "@angular/core";
|
|
9
|
+
import * as i1 from "@angular/common";
|
|
10
|
+
export class BreadcrumbsComponent {
|
|
11
|
+
constructor() {
|
|
12
|
+
this.items = input([]);
|
|
13
|
+
this.ariaLabel = input(BREADCRUMBS_DEFAULT_ARIA_LABEL);
|
|
14
|
+
this.truncatedItems = computed(() => {
|
|
15
|
+
if (shouldTruncateBreadcrumbs(this.items())) {
|
|
16
|
+
return getBreadcrumbsTruncatedItems(this.items());
|
|
17
|
+
}
|
|
18
|
+
return null;
|
|
19
|
+
});
|
|
20
|
+
// TODO: replace this placeholder functionality for the Dropdown component
|
|
21
|
+
this.truncatedItemsText = computed(() => {
|
|
22
|
+
return (this.truncatedItems()
|
|
23
|
+
?.truncated.map((item) => item.label)
|
|
24
|
+
.join(", ") || "");
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BreadcrumbsComponent, isStandalone: true, selector: "rte-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav\n class=\"breadcrumbs-container\"\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabel()\"\n [ngClass]=\"{'truncated': truncatedItems()?.truncated?.length}\"\n>\n @if (truncatedItems()?.truncated?.length) {\n <div class=\"breadcrumb-item\">\n <rte-link\n [href]=\"truncatedItems()!.root.link\"\n [label]=\"truncatedItems()!.root.label\"\n [subtle]=\"true\"\n />\n </div>\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n <span class=\"breadcrumb-item\">\n <rte-icon name=\"more-horiz\" tabIndex=\"0\" role=\"menu\" aria-label=\"More items\" data-testid=\"show-more\" rteTooltipPosition=\"bottom\" [size]=\"12\" [rteTooltip]=\"truncatedItemsText()\"/>\n </span>\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n <div class=\"breadcrumb-item\">\n @if (i === truncatedItems()!.remaining.length - 1) {\n <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </a>\n } @else {\n <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\"/>\n }\n </div>\n @if (i < truncatedItems()!.remaining.length - 1) {\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n }\n }\n } @else {\n @for (item of items(); track item.link; let i = $index) {\n <div class=\"breadcrumb-item\">\n @if (i === items().length - 1) {\n <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </a>\n } @else {\n <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\"/>\n }\n </div>\n @if (i < items().length - 1) {\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n }\n }\n }\n</nav>\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\";.breadcrumbs-container{display:flex;align-items:center;gap:2px}.breadcrumbs-container .breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a,.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)}.breadcrumbs-container .breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.breadcrumbs-container .breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.separator{color:var(--content-secondary);padding:0 8px;-webkit-user-select:none;user-select:none;opacity:0;animation:fadeIn .15s forwards}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
29
|
+
}
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
31
|
+
type: Component,
|
|
32
|
+
args: [{ selector: "rte-breadcrumbs", imports: [CommonModule, LinkComponent, TooltipDirective, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n class=\"breadcrumbs-container\"\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabel()\"\n [ngClass]=\"{'truncated': truncatedItems()?.truncated?.length}\"\n>\n @if (truncatedItems()?.truncated?.length) {\n <div class=\"breadcrumb-item\">\n <rte-link\n [href]=\"truncatedItems()!.root.link\"\n [label]=\"truncatedItems()!.root.label\"\n [subtle]=\"true\"\n />\n </div>\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n <span class=\"breadcrumb-item\">\n <rte-icon name=\"more-horiz\" tabIndex=\"0\" role=\"menu\" aria-label=\"More items\" data-testid=\"show-more\" rteTooltipPosition=\"bottom\" [size]=\"12\" [rteTooltip]=\"truncatedItemsText()\"/>\n </span>\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n <div class=\"breadcrumb-item\">\n @if (i === truncatedItems()!.remaining.length - 1) {\n <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </a>\n } @else {\n <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\"/>\n }\n </div>\n @if (i < truncatedItems()!.remaining.length - 1) {\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n }\n }\n } @else {\n @for (item of items(); track item.link; let i = $index) {\n <div class=\"breadcrumb-item\">\n @if (i === items().length - 1) {\n <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </a>\n } @else {\n <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\"/>\n }\n </div>\n @if (i < items().length - 1) {\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n }\n }\n }\n</nav>\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\";.breadcrumbs-container{display:flex;align-items:center;gap:2px}.breadcrumbs-container .breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a,.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)}.breadcrumbs-container .breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.breadcrumbs-container .breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.separator{color:var(--content-secondary);padding:0 8px;-webkit-user-select:none;user-select:none;opacity:0;animation:fadeIn .15s forwards}@keyframes fadeIn{to{opacity:1}}\n"] }]
|
|
33
|
+
}] });
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRixPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSxzRUFBc0UsQ0FBQztBQUt0SCxPQUFPLEVBQ0wsNEJBQTRCLEVBQzVCLHlCQUF5QixHQUMxQixNQUFNLGtFQUFrRSxDQUFDO0FBRTFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sOEJBQThCLENBQUM7OztBQVVoRSxNQUFNLE9BQU8sb0JBQW9CO0lBUmpDO1FBU1csVUFBSyxHQUFHLEtBQUssQ0FBb0IsRUFBRSxDQUFDLENBQUM7UUFDckMsY0FBUyxHQUFHLEtBQUssQ0FBUyw4QkFBOEIsQ0FBQyxDQUFDO1FBRTFELG1CQUFjLEdBQUcsUUFBUSxDQUFtQyxHQUFHLEVBQUU7WUFDeEUsSUFBSSx5QkFBeUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsRUFBRSxDQUFDO2dCQUM1QyxPQUFPLDRCQUE0QixDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO1lBQ3BELENBQUM7WUFDRCxPQUFPLElBQUksQ0FBQztRQUNkLENBQUMsQ0FBQyxDQUFDO1FBRUgsMEVBQTBFO1FBQ2pFLHVCQUFrQixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDMUMsT0FBTyxDQUNMLElBQUksQ0FBQyxjQUFjLEVBQUU7Z0JBQ25CLEVBQUUsU0FBUyxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztpQkFDcEMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FDcEIsQ0FBQztRQUNKLENBQUMsQ0FBQyxDQUFDO0tBQ0o7K0dBbkJZLG9CQUFvQjttR0FBcEIsb0JBQW9CLG1WQ3hCakMsaThEQWtEQSxxbENEaENZLFlBQVksNkhBQUUsYUFBYSwwR0FBRSxnQkFBZ0IsaUpBQUUsYUFBYTs7NEZBTTNELG9CQUFvQjtrQkFSaEMsU0FBUzsrQkFDRSxpQkFBaUIsV0FDbEIsQ0FBQyxZQUFZLEVBQUUsYUFBYSxFQUFFLGdCQUFnQixFQUFFLGFBQWEsQ0FBQyxjQUMzRCxJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBjb21wdXRlZCwgaW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQlJFQURDUlVNQlNfREVGQVVMVF9BUklBX0xBQkVMIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMuY29uc3RhbnRzXCI7XG5pbXBvcnQge1xuICBCcmVhZGNydW1iUHJvcHMsXG4gIEJyZWFkY3J1bWJzVHJ1bmNhdGVkSXRlbXMsXG59IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL2JyZWFkY3J1bWJzL2JyZWFkY3J1bWJzLmludGVyZmFjZVwiO1xuaW1wb3J0IHtcbiAgZ2V0QnJlYWRjcnVtYnNUcnVuY2F0ZWRJdGVtcyxcbiAgc2hvdWxkVHJ1bmNhdGVCcmVhZGNydW1icyxcbn0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMudXRpbHNcIjtcblxuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9pY29uL2ljb24uY29tcG9uZW50XCI7XG5pbXBvcnQgeyBMaW5rQ29tcG9uZW50IH0gZnJvbSBcIi4uL2xpbmsvbGluay5jb21wb25lbnRcIjtcbmltcG9ydCB7IFRvb2x0aXBEaXJlY3RpdmUgfSBmcm9tIFwiLi4vdG9vbHRpcC90b29sdGlwLmRpcmVjdGl2ZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLWJyZWFkY3J1bWJzXCIsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIExpbmtDb21wb25lbnQsIFRvb2x0aXBEaXJlY3RpdmUsIEljb25Db21wb25lbnRdLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogXCIuL2JyZWFkY3J1bWJzLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vYnJlYWRjcnVtYnMuY29tcG9uZW50LnNjc3NcIixcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEJyZWFkY3J1bWJzQ29tcG9uZW50IHtcbiAgcmVhZG9ubHkgaXRlbXMgPSBpbnB1dDxCcmVhZGNydW1iUHJvcHNbXT4oW10pO1xuICByZWFkb25seSBhcmlhTGFiZWwgPSBpbnB1dDxzdHJpbmc+KEJSRUFEQ1JVTUJTX0RFRkFVTFRfQVJJQV9MQUJFTCk7XG5cbiAgcmVhZG9ubHkgdHJ1bmNhdGVkSXRlbXMgPSBjb21wdXRlZDxCcmVhZGNydW1ic1RydW5jYXRlZEl0ZW1zIHwgbnVsbD4oKCkgPT4ge1xuICAgIGlmIChzaG91bGRUcnVuY2F0ZUJyZWFkY3J1bWJzKHRoaXMuaXRlbXMoKSkpIHtcbiAgICAgIHJldHVybiBnZXRCcmVhZGNydW1ic1RydW5jYXRlZEl0ZW1zKHRoaXMuaXRlbXMoKSk7XG4gICAgfVxuICAgIHJldHVybiBudWxsO1xuICB9KTtcblxuICAvLyBUT0RPOiByZXBsYWNlIHRoaXMgcGxhY2Vob2xkZXIgZnVuY3Rpb25hbGl0eSBmb3IgdGhlIERyb3Bkb3duIGNvbXBvbmVudFxuICByZWFkb25seSB0cnVuY2F0ZWRJdGVtc1RleHQgPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgIHRoaXMudHJ1bmNhdGVkSXRlbXMoKVxuICAgICAgICA/LnRydW5jYXRlZC5tYXAoKGl0ZW0pID0+IGl0ZW0ubGFiZWwpXG4gICAgICAgIC5qb2luKFwiLCBcIikgfHwgXCJcIlxuICAgICk7XG4gIH0pO1xufVxuIiwiPG5hdlxuICBjbGFzcz1cImJyZWFkY3J1bWJzLWNvbnRhaW5lclwiXG4gIHJvbGU9XCJuYXZpZ2F0aW9uXCJcbiAgW2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWwoKVwiXG4gIFtuZ0NsYXNzXT1cInsndHJ1bmNhdGVkJzogdHJ1bmNhdGVkSXRlbXMoKT8udHJ1bmNhdGVkPy5sZW5ndGh9XCJcbj5cbiAgQGlmICh0cnVuY2F0ZWRJdGVtcygpPy50cnVuY2F0ZWQ/Lmxlbmd0aCkge1xuICAgIDxkaXYgY2xhc3M9XCJicmVhZGNydW1iLWl0ZW1cIj5cbiAgICAgIDxydGUtbGlua1xuICAgICAgICBbaHJlZl09XCJ0cnVuY2F0ZWRJdGVtcygpIS5yb290LmxpbmtcIlxuICAgICAgICBbbGFiZWxdPVwidHJ1bmNhdGVkSXRlbXMoKSEucm9vdC5sYWJlbFwiXG4gICAgICAgIFtzdWJ0bGVdPVwidHJ1ZVwiXG4gICAgICAvPlxuICAgIDwvZGl2PlxuICAgIDxzcGFuIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIGNsYXNzPVwic2VwYXJhdG9yXCI+Lzwvc3Bhbj5cbiAgICA8c3BhbiBjbGFzcz1cImJyZWFkY3J1bWItaXRlbVwiPlxuICAgICAgPHJ0ZS1pY29uIG5hbWU9XCJtb3JlLWhvcml6XCIgdGFiSW5kZXg9XCIwXCIgcm9sZT1cIm1lbnVcIiBhcmlhLWxhYmVsPVwiTW9yZSBpdGVtc1wiIGRhdGEtdGVzdGlkPVwic2hvdy1tb3JlXCIgcnRlVG9vbHRpcFBvc2l0aW9uPVwiYm90dG9tXCIgW3NpemVdPVwiMTJcIiBbcnRlVG9vbHRpcF09XCJ0cnVuY2F0ZWRJdGVtc1RleHQoKVwiLz5cbiAgICA8L3NwYW4+XG4gICAgPHNwYW4gYXJpYS1oaWRkZW49XCJ0cnVlXCIgY2xhc3M9XCJzZXBhcmF0b3JcIj4vPC9zcGFuPlxuICAgIEBmb3IgKGl0ZW0gb2YgdHJ1bmNhdGVkSXRlbXMoKSEucmVtYWluaW5nOyB0cmFjayBpdGVtLmxpbms7IGxldCBpID0gJGluZGV4KSB7XG4gICAgICA8ZGl2IGNsYXNzPVwiYnJlYWRjcnVtYi1pdGVtXCI+XG4gICAgICAgIEBpZiAoaSA9PT0gdHJ1bmNhdGVkSXRlbXMoKSEucmVtYWluaW5nLmxlbmd0aCAtIDEpIHtcbiAgICAgICAgICA8YSByb2xlPVwibGlua1wiIGFyaWEtY3VycmVudD1cInBhZ2VcIiB0YWJpbmRleD1cIjBcIiBbYXR0ci5hcmlhLWxhYmVsXT1cIml0ZW0ubGFiZWxcIj5cbiAgICAgICAgICAgIHt7IGl0ZW0ubGFiZWwgfX1cbiAgICAgICAgICA8L2E+XG4gICAgICAgIH0gQGVsc2Uge1xuICAgICAgICAgIDxydGUtbGluayBbaHJlZl09XCJpdGVtLmxpbmtcIiBbbGFiZWxdPVwiaXRlbS5sYWJlbFwiIFtzdWJ0bGVdPVwidHJ1ZVwiLz5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgICBAaWYgKGkgPCB0cnVuY2F0ZWRJdGVtcygpIS5yZW1haW5pbmcubGVuZ3RoIC0gMSkge1xuICAgICAgICA8c3BhbiBhcmlhLWhpZGRlbj1cInRydWVcIiBjbGFzcz1cInNlcGFyYXRvclwiPi88L3NwYW4+XG4gICAgICB9XG4gICAgfVxuICB9IEBlbHNlIHtcbiAgICAgIEBmb3IgKGl0ZW0gb2YgaXRlbXMoKTsgdHJhY2sgaXRlbS5saW5rOyBsZXQgaSA9ICRpbmRleCkge1xuICAgICAgICA8ZGl2IGNsYXNzPVwiYnJlYWRjcnVtYi1pdGVtXCI+XG4gICAgICAgICAgQGlmIChpID09PSBpdGVtcygpLmxlbmd0aCAtIDEpIHtcbiAgICAgICAgICAgIDxhIHJvbGU9XCJsaW5rXCIgYXJpYS1jdXJyZW50PVwicGFnZVwiIHRhYmluZGV4PVwiMFwiIFthdHRyLmFyaWEtbGFiZWxdPVwiaXRlbS5sYWJlbFwiPlxuICAgICAgICAgICAgICB7eyBpdGVtLmxhYmVsIH19XG4gICAgICAgICAgICA8L2E+XG4gICAgICAgICAgfSBAZWxzZSB7XG4gICAgICAgICAgICA8cnRlLWxpbmsgW2hyZWZdPVwiaXRlbS5saW5rXCIgW2xhYmVsXT1cIml0ZW0ubGFiZWxcIiBbc3VidGxlXT1cInRydWVcIi8+XG4gICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgQGlmIChpIDwgaXRlbXMoKS5sZW5ndGggLSAxKSB7XG4gICAgICAgICAgPHNwYW4gYXJpYS1oaWRkZW49XCJ0cnVlXCIgY2xhc3M9XCJzZXBhcmF0b3JcIj4vPC9zcGFuPlxuICAgICAgICB9XG4gICAgICB9XG4gIH1cbjwvbmF2PlxuIl19
|
|
@@ -17,10 +17,10 @@ export class ButtonComponent {
|
|
|
17
17
|
this.click.emit();
|
|
18
18
|
}
|
|
19
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", 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\"
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", 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\";:host{display:inline-flex;flex-shrink:0}.rte-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{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;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-button.neutral:hover{color:var(--content-secondary)}.rte-button.neutral:active{color:var(--content-tertiary)}.rte-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-button.reverse:hover{color:var(--background-hover)}.rte-button.reverse:active{color:var(--content-primary-inverse)}.rte-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
21
|
}
|
|
22
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
|
-
args: [{ selector: "rte-button", imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", 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\"
|
|
24
|
+
args: [{ selector: "rte-button", imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"rte-button {{ variant() }} size-{{ size() }}\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n>\n <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", 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\";:host{display:inline-flex;flex-shrink:0}.rte-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{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;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-button.neutral:hover{color:var(--content-secondary)}.rte-button.neutral:active{color:var(--content-tertiary)}.rte-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-button.reverse:hover{color:var(--background-hover)}.rte-button.reverse:active{color:var(--content-primary-inverse)}.rte-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"] }]
|
|
25
25
|
}] });
|
|
26
26
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBWWxGLE1BQU0sT0FBTyxlQUFlO0lBUjVCO1FBU1csVUFBSyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNsQixZQUFPLEdBQUcsS0FBSyxDQUFnQixTQUFTLENBQUMsQ0FBQztRQUMxQyxTQUFJLEdBQUcsS0FBSyxDQUFhLEdBQUcsQ0FBQyxDQUFDO1FBQzlCLGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsU0FBSSxHQUFHLEtBQUssQ0FBUyxFQUFFLENBQUMsQ0FBQztRQUN6QixjQUFTLEdBQUcsS0FBSyxDQUFTLEVBQUUsQ0FBQyxDQUFDO1FBQzlCLG1CQUFjLEdBQUcsS0FBSyxDQUFTLEVBQUUsQ0FBQyxDQUFDO1FBQ25DLGVBQVUsR0FBRyxLQUFLLENBQWEsUUFBUSxDQUFDLENBQUM7UUFFekMsVUFBSyxHQUFHLE1BQU0sRUFBUSxDQUFDO0tBTWpDO0lBSkMsT0FBTyxDQUFDLEtBQWlDO1FBQ3ZDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3BCLENBQUM7K0dBZlUsZUFBZTttR0FBZixlQUFlLDhtQ0NaNUIsd1VBU1M7OzRGREdJLGVBQWU7a0JBUjNCLFNBQVM7K0JBQ0UsWUFBWSxXQUNiLEVBQUUsY0FDQyxJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbnB1dCwgb3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEJ1dHRvblR5cGUgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmludGVyZmFjZVwiO1xuaW1wb3J0IHsgQnV0dG9uU2l6ZSwgQnV0dG9uVmFyaWFudCB9IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL2J1dHRvbi9jb21tb24vY29tbW9uLWJ1dHRvblwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLWJ1dHRvblwiLFxuICBpbXBvcnRzOiBbXSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9idXR0b24uY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmw6IFwiLi9idXR0b24uY29tcG9uZW50LnNjc3NcIixcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG4gIHJlYWRvbmx5IGxhYmVsID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IHZhcmlhbnQgPSBpbnB1dDxCdXR0b25WYXJpYW50PihcInByaW1hcnlcIik7XG4gIHJlYWRvbmx5IHNpemUgPSBpbnB1dDxCdXR0b25TaXplPihcIm1cIik7XG4gIHJlYWRvbmx5IGRpc2FibGVkID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBpY29uID0gaW5wdXQ8c3RyaW5nPihcIlwiKTtcbiAgcmVhZG9ubHkgYXJpYUxhYmVsID0gaW5wdXQ8c3RyaW5nPihcIlwiKTtcbiAgcmVhZG9ubHkgYXJpYUxhYmVsbGVkQnkgPSBpbnB1dDxzdHJpbmc+KFwiXCIpO1xuICByZWFkb25seSBidXR0b25UeXBlID0gaW5wdXQ8QnV0dG9uVHlwZT4oXCJidXR0b25cIik7XG5cbiAgcmVhZG9ubHkgY2xpY2sgPSBvdXRwdXQ8dm9pZD4oKTtcblxuICBvbkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50IHwgS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMuY2xpY2suZW1pdCgpO1xuICB9XG59XG4iLCI8YnV0dG9uXG4gICAgY2xhc3M9XCJydGUtYnV0dG9uIHt7IHZhcmlhbnQoKSB9fSBzaXplLXt7IHNpemUoKSB9fVwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWwoKVwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImFyaWFMYWJlbGxlZEJ5KClcIlxuICAgIFthdHRyLnR5cGVdPVwiYnV0dG9uVHlwZSgpXCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiXG4gICAgKGNsaWNrKT1cIm9uQ2xpY2soJGV2ZW50KVwiXG4+XG4gICAgPHNwYW4gY2xhc3M9XCJydGUtYnV0dG9uLWxhYmVsXCI+e3sgbGFiZWwoKSB9fTwvc3Bhbj5cbjwvYnV0dG9uPiJdfQ==
|
|
@@ -26,10 +26,10 @@ export class CheckboxComponent {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CheckboxComponent, isStandalone: true, selector: "rte-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <div class=\"rte-checkbox-container\">\n <input\n type=\"checkbox\"\n class=\"rte-checkbox\"\n [id]=\"id()\"\n [value]=\"value()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n [checked]=\"checked()\"\n (keydown)=\"onKeydown($event)\"\n />\n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n <div class=\"rte-checkbox-text-container\">\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-checkbox-label\" \n [for]=\"id()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n <p class=\"rte-checkbox-description\">{{ description() }}</p>\n <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n </div>\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\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\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 }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CheckboxComponent, isStandalone: true, selector: "rte-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: " <div class=\"rte-checkbox-container\">\n <input\n type=\"checkbox\"\n class=\"rte-checkbox\"\n [id]=\"id()\"\n [value]=\"value()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n [checked]=\"checked()\"\n (keydown)=\"onKeydown($event)\"\n />\n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n <div class=\"rte-checkbox-text-container\">\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-checkbox-label\" \n [for]=\"id()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n <p class=\"rte-checkbox-description\">{{ description() }}</p>\n <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n </div>\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\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\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 }); }
|
|
30
30
|
}
|
|
31
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
|
-
args: [{ selector: "rte-checkbox", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: " <div class=\"rte-checkbox-container\">\n <input\n type=\"checkbox\"\n class=\"rte-checkbox\"\n [id]=\"id()\"\n [value]=\"value()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n [checked]=\"checked()\"\n (keydown)=\"onKeydown($event)\"\n />\n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n <div class=\"rte-checkbox-text-container\">\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-checkbox-label\" \n [for]=\"id()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n <p class=\"rte-checkbox-description\">{{ description() }}</p>\n <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n </div>\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\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"] }]
|
|
33
|
+
args: [{ selector: "rte-checkbox", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: " <div class=\"rte-checkbox-container\">\n <input\n type=\"checkbox\"\n class=\"rte-checkbox\"\n [id]=\"id()\"\n [value]=\"value()\"\n [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n [checked]=\"checked()\"\n (keydown)=\"onKeydown($event)\"\n />\n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n <div class=\"rte-checkbox-text-container\">\n <label \n *ngIf=\"showLabel()\" \n class=\"rte-checkbox-label\" \n [for]=\"id()\"\n [ngClass]=\"{\n 'error': error(),\n 'read-only': readOnly(),\n 'disabled': disabled()\n }\"\n >\n {{ label() }}\n </label>\n <p class=\"rte-checkbox-description\">{{ description() }}</p>\n <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n </div>\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\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"] }]
|
|
34
34
|
}] });
|
|
35
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBVXZELE1BQU0sT0FBTyxpQkFBaUI7SUFSOUI7UUFTVyxPQUFFLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBQzlCLFVBQUssR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7UUFDakMsVUFBSyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNsQixrQkFBYSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3QixnQkFBVyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN4QixjQUFTLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3hCLGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsVUFBSyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQixpQkFBWSxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN6QixhQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLFlBQU8sR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkIsY0FBUyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztLQVNoQztJQVBDLFNBQVMsQ0FBQyxLQUFvQjtRQUM1QixJQUFJLEtBQUssQ0FBQyxJQUFJLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDM0IsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQztnQkFDcEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3pCLENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQzsrR0FwQlUsaUJBQWlCO21HQUFqQixpQkFBaUIsd2xEQ2I5Qiw4eENBK0JBLGd5SkR4QlksWUFBWSxpT0FBRSxhQUFhOzs0RkFNMUIsaUJBQWlCO2tCQVI3QixTQUFTOytCQUNFLGNBQWMsV0FDZixDQUFDLFlBQVksRUFBRSxhQUFhLENBQUMsY0FDMUIsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5jb21wb25lbnRcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInJ0ZS1jaGVja2JveFwiLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9jaGVja2JveC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybDogXCIuL2NoZWNrYm94LmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBDaGVja2JveENvbXBvbmVudCB7XG4gIHJlYWRvbmx5IGlkID0gaW5wdXQucmVxdWlyZWQ8c3RyaW5nPigpO1xuICByZWFkb25seSBsYWJlbCA9IGlucHV0LnJlcXVpcmVkPHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgdmFsdWUgPSBpbnB1dChcIlwiKTtcbiAgcmVhZG9ubHkgaW5kZXRlcm1pbmF0ZSA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgZGVzY3JpcHRpb24gPSBpbnB1dChcIlwiKTtcbiAgcmVhZG9ubHkgc2hvd0xhYmVsID0gaW5wdXQodHJ1ZSk7XG4gIHJlYWRvbmx5IGRpc2FibGVkID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBlcnJvciA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgZXJyb3JNZXNzYWdlID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IHJlYWRPbmx5ID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBjaGVja2VkID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBncm91cE5hbWUgPSBpbnB1dChcIlwiKTtcblxuICBvbktleWRvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBpZiAoZXZlbnQuY29kZSA9PT0gXCJTcGFjZVwiKSB7XG4gICAgICBpZiAodGhpcy5yZWFkT25seSgpKSB7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCIgICAgPGRpdiBjbGFzcz1cInJ0ZS1jaGVja2JveC1jb250YWluZXJcIj5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgY2xhc3M9XCJydGUtY2hlY2tib3hcIlxuICAgICAgICAgICAgW2lkXT1cImlkKClcIlxuICAgICAgICAgICAgW3ZhbHVlXT1cInZhbHVlKClcIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwieydlcnJvcic6IGVycm9yKCksICdyZWFkLW9ubHknOiByZWFkT25seSgpfVwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiXG4gICAgICAgICAgICBbaW5kZXRlcm1pbmF0ZV09XCJpbmRldGVybWluYXRlKClcIlxuICAgICAgICAgICAgW2NoZWNrZWRdPVwiY2hlY2tlZCgpXCJcbiAgICAgICAgICAgIChrZXlkb3duKT1cIm9uS2V5ZG93bigkZXZlbnQpXCJcbiAgICAgICAgLz5cbiAgICAgICAgICAgIDxydGUtaWNvbiBjbGFzcz1cInJ0ZS1jaGVja2JveC1pY29ucyBydGUtY2hlY2tib3gtaWNvbi1zZWxlY3RlZFwiIG5hbWU9XCJjaGVjay1zbWFsbFwiIFtzaXplXT1cIjE2XCIvPiBcbiAgICAgICAgICAgIDxydGUtaWNvbiBjbGFzcz1cInJ0ZS1jaGVja2JveC1pY29ucyBydGUtY2hlY2tib3gtaWNvbi1pbmRldGVybWluYXRlZFwiIG5hbWU9XCJjaGVjay1pbmRldGVybWluYXRlXCIgW3NpemVdPVwiMTZcIiAvPiBcbiAgICAgICAgPGRpdiBjbGFzcz1cInJ0ZS1jaGVja2JveC10ZXh0LWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPGxhYmVsIFxuICAgICAgICAgICAgKm5nSWY9XCJzaG93TGFiZWwoKVwiIFxuICAgICAgICAgICAgY2xhc3M9XCJydGUtY2hlY2tib3gtbGFiZWxcIiBcbiAgICAgICAgICAgIFtmb3JdPVwiaWQoKVwiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgICAgICAgJ2Vycm9yJzogZXJyb3IoKSxcbiAgICAgICAgICAgICAgICAncmVhZC1vbmx5JzogcmVhZE9ubHkoKSxcbiAgICAgICAgICAgICAgICAnZGlzYWJsZWQnOiBkaXNhYmxlZCgpXG4gICAgICAgICAgICB9XCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7eyBsYWJlbCgpIH19XG4gICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJydGUtY2hlY2tib3gtZGVzY3JpcHRpb25cIj57eyBkZXNjcmlwdGlvbigpIH19PC9wPlxuICAgICAgICAgICAgPHAgKm5nSWY9XCJlcnJvcigpICYmIGVycm9yTWVzc2FnZSgpXCIgY2xhc3M9XCJydGUtY2hlY2tib3gtZXJyb3JcIj57eyBlcnJvck1lc3NhZ2UoKSB9fTwvcD5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4iXX0=
|