@design-system-rte/angular 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/banner/banner.component.mjs +3 -3
- package/esm2022/lib/components/breadcrumbs/breadcrumbs.component.mjs +2 -2
- package/esm2022/lib/components/button/button.component.mjs +2 -2
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/components/checkbox-group/checkbox-group.component.mjs +3 -3
- package/esm2022/lib/components/icon-button/icon-button.component.mjs +13 -3
- package/esm2022/lib/components/icon-button-toggle/icon-button-toggle.component.mjs +1 -1
- package/esm2022/lib/components/link/link.component.mjs +3 -3
- package/esm2022/lib/components/modal/modal-trigger/modal-trigger.directive.mjs +31 -0
- package/esm2022/lib/components/modal/modal.component.mjs +48 -0
- package/esm2022/lib/components/modal/modal.directive.mjs +118 -0
- package/esm2022/lib/components/modal/modal.module.mjs +17 -0
- package/esm2022/lib/components/popover/popover.component.mjs +11 -28
- package/esm2022/lib/components/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/components/radio-button-group/radio-button-group.component.mjs +3 -3
- package/esm2022/lib/components/text-input/text-input.component.mjs +3 -3
- package/esm2022/lib/components/textarea/textarea.component.mjs +3 -3
- package/esm2022/lib/services/focus-trap.service.mjs +64 -0
- package/esm2022/lib/services/overlay.service.mjs +19 -4
- package/esm2022/public-api.mjs +4 -1
- package/fesm2022/design-system-rte-angular.mjs +405 -142
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/lib/components/badge/badge.directive.d.ts +1 -1
- package/lib/components/chip/chip.component.d.ts +1 -1
- package/lib/components/icon-button/icon-button.component.d.ts +8 -2
- package/lib/components/icon-button-toggle/icon-button-toggle.component.d.ts +1 -1
- package/lib/components/modal/modal-trigger/modal-trigger.directive.d.ts +11 -0
- package/lib/components/modal/modal.component.d.ts +28 -0
- package/lib/components/modal/modal.directive.d.ts +40 -0
- package/lib/components/modal/modal.module.d.ts +8 -0
- package/lib/components/popover/popover.component.d.ts +4 -5
- package/lib/components/split-button/split-button.component.d.ts +1 -1
- package/lib/components/text-input/text-input.component.d.ts +3 -3
- package/lib/services/focus-trap.service.d.ts +17 -0
- package/lib/services/overlay.service.d.ts +2 -1
- package/package.json +2 -2
- package/public-api.d.ts +3 -0
|
@@ -56,10 +56,10 @@ export class BannerComponent {
|
|
|
56
56
|
});
|
|
57
57
|
}
|
|
58
58
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
59
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", 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 <button *ngIf=\"actionLabel()\"\n rteButton\n rteButtonVariant=\"neutral\"\n rteButtonSize=\"s\"\n [attr.aria-label]=\"actionLabel()!\"\n (click)=\"clickAction()\"\n >{{ actionLabel() }}</button>\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: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
59
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", 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 <button *ngIf=\"actionLabel()\"\n rteButton\n rteButtonVariant=\"neutral\"\n rteButtonSize=\"s\"\n [attr.aria-label]=\"actionLabel()!\"\n (click)=\"clickAction()\"\n >{{ actionLabel() }}</button>\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-default);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-default)}.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", "badgeCount", "badgeContent", "badgeType", "badgeIcon"], outputs: ["click"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
60
60
|
}
|
|
61
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BannerComponent, decorators: [{
|
|
62
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 <button *ngIf=\"actionLabel()\"\n rteButton\n rteButtonVariant=\"neutral\"\n rteButtonSize=\"s\"\n [attr.aria-label]=\"actionLabel()!\"\n (click)=\"clickAction()\"\n >{{ actionLabel() }}</button>\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"] }]
|
|
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 <button *ngIf=\"actionLabel()\"\n rteButton\n rteButtonVariant=\"neutral\"\n rteButtonSize=\"s\"\n [attr.aria-label]=\"actionLabel()!\"\n (click)=\"clickAction()\"\n >{{ actionLabel() }}</button>\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-default);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-default)}.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
64
|
}] });
|
|
65
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
65
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL2Jhbm5lci9iYW5uZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYmFubmVyL2Jhbm5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLE1BQU0sRUFDTixNQUFNLEdBSVAsTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzdELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQzs7O0FBVTNFLE1BQU0sT0FBTyxlQUFlO0lBUjVCO1FBU1csU0FBSSxHQUFHLEtBQUssQ0FBYSxTQUFTLENBQUMsQ0FBQztRQUNwQyxZQUFPLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBQ25DLGFBQVEsR0FBRyxLQUFLLENBQWlCLE1BQU0sQ0FBQyxDQUFDO1FBQ3pDLFVBQUssR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUN4QixhQUFRLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBQ2pDLGFBQVEsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDakMsV0FBTSxHQUFHLEtBQUssQ0FBVSxJQUFJLENBQUMsQ0FBQztRQUM5QixnQkFBVyxHQUFHLEtBQUssRUFBVSxDQUFDO1FBRTlCLFVBQUssR0FBRyxNQUFNLEVBQVEsQ0FBQztRQUV2QixZQUFPLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLGNBQVMsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFMUIsVUFBSyxHQUFHLE1BQU0sRUFBUSxDQUFDO0tBdUNqQztJQXJDQyxRQUFRO1FBQ04sSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7UUFDaEMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7UUFDbEMsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLEtBQUssS0FBSyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsS0FBSyxTQUFTLEVBQUUsQ0FBQztZQUMvRCxPQUFPLENBQUMsSUFBSSxDQUFDLHVGQUF1RixDQUFDLENBQUM7WUFDdEcsT0FBTztRQUNULENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUM7WUFDdEIsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO2dCQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztpQkFDaEMsQ0FBQztnQkFDSixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDckIsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN4QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDMUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNwQixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDVixDQUFDO0lBRU8sVUFBVTtRQUNoQixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFBRSxPQUFPO1FBQzdCLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3pCLHFCQUFxQixDQUFDLEdBQUcsRUFBRTtZQUN6QixxQkFBcUIsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQ3RELENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzsrR0FyRFUsZUFBZTttR0FBZixlQUFlLHNvQ0N6QjVCLDRvQ0FpQ0EsaytFRGRZLFlBQVksaU9BQUUsYUFBYSxpSEFBRSxtQkFBbUIsZ1FBQUUsZUFBZTs7NEZBTWhFLGVBQWU7a0JBUjNCLFNBQVM7K0JBQ0UsWUFBWSxXQUNiLENBQUMsWUFBWSxFQUFFLGFBQWEsRUFBRSxtQkFBbUIsRUFBRSxlQUFlLENBQUMsY0FDaEUsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgaW5wdXQsXG4gIG91dHB1dCxcbiAgc2lnbmFsLFxuICBTaW1wbGVDaGFuZ2VzLFxuICBPbkluaXQsXG4gIE9uQ2hhbmdlcyxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEJhbm5lclBvc2l0aW9uLCBCYW5uZXJUeXBlIH0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYmFubmVyL2Jhbm5lci5pbnRlcmZhY2VcIjtcblxuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2J1dHRvbi9idXR0b24uY29tcG9uZW50XCI7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5jb21wb25lbnRcIjtcbmltcG9ydCB7IEljb25CdXR0b25Db21wb25lbnQgfSBmcm9tIFwiLi4vaWNvbi1idXR0b24vaWNvbi1idXR0b24uY29tcG9uZW50XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJydGUtYmFubmVyXCIsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEljb25Db21wb25lbnQsIEljb25CdXR0b25Db21wb25lbnQsIEJ1dHRvbkNvbXBvbmVudF0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiBcIi4vYmFubmVyLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vYmFubmVyLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBCYW5uZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIHJlYWRvbmx5IHR5cGUgPSBpbnB1dDxCYW5uZXJUeXBlPihcImRlZmF1bHRcIik7XG4gIHJlYWRvbmx5IG1lc3NhZ2UgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IHBvc2l0aW9uID0gaW5wdXQ8QmFubmVyUG9zaXRpb24+KFwicHVzaFwiKTtcbiAgcmVhZG9ubHkgdGl0bGUgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGNsb3NhYmxlID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xuICByZWFkb25seSBzaG93SWNvbiA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgaXNPcGVuID0gaW5wdXQ8Ym9vbGVhbj4odHJ1ZSk7XG4gIHJlYWRvbmx5IGFjdGlvbkxhYmVsID0gaW5wdXQ8c3RyaW5nPigpO1xuXG4gIHJlYWRvbmx5IGNsaWNrID0gb3V0cHV0PHZvaWQ+KCk7XG5cbiAgcmVhZG9ubHkgdmlzaWJsZSA9IHNpZ25hbChmYWxzZSk7XG4gIHJlYWRvbmx5IHJlbmRlcmluZyA9IHNpZ25hbChmYWxzZSk7XG5cbiAgcmVhZG9ubHkgY2xvc2UgPSBvdXRwdXQ8dm9pZD4oKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnZpc2libGUuc2V0KHRoaXMuaXNPcGVuKCkpO1xuICAgIHRoaXMucmVuZGVyaW5nLnNldCh0aGlzLmlzT3BlbigpKTtcbiAgICBpZiAodGhpcy5jbG9zYWJsZSgpID09PSBmYWxzZSAmJiB0aGlzLnBvc2l0aW9uKCkgPT09IFwib3ZlcmxheVwiKSB7XG4gICAgICBjb25zb2xlLndhcm4oXCJCYW5uZXI6ICdjbG9zYWJsZScgYW5kICdjbG9zZScgcHJvcHMgbXVzdCBiZSBzZXQgd2hlbiAncG9zaXRpb24nIGhhcyAnb3ZlcmxheScgdmFsdWUuXCIpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBpZiAoY2hhbmdlc1tcImlzT3BlblwiXSkge1xuICAgICAgaWYgKHRoaXMuaXNPcGVuKCkpIHRoaXMub3BlbkJhbm5lcigpO1xuICAgICAgZWxzZSB7XG4gICAgICAgIHRoaXMuY2xvc2VCYW5uZXIoKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBjbGlja0FjdGlvbigpIHtcbiAgICB0aGlzLmNsaWNrLmVtaXQoKTtcbiAgfVxuXG4gIGNsb3NlQmFubmVyKCkge1xuICAgIHRoaXMudmlzaWJsZS5zZXQoZmFsc2UpO1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5yZW5kZXJpbmcuc2V0KGZhbHNlKTtcbiAgICAgIHRoaXMuY2xvc2UuZW1pdCgpO1xuICAgIH0sIDIwMCk7XG4gIH1cblxuICBwcml2YXRlIG9wZW5CYW5uZXIoKSB7XG4gICAgaWYgKHRoaXMucmVuZGVyaW5nKCkpIHJldHVybjtcbiAgICB0aGlzLnJlbmRlcmluZy5zZXQodHJ1ZSk7XG4gICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHtcbiAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLnZpc2libGUuc2V0KHRydWUpKTtcbiAgICB9KTtcbiAgfVxufVxuIiwiPHNlY3Rpb25cbiAgKm5nSWY9XCJyZW5kZXJpbmcoKVwiXG4gIGNsYXNzPVwicnRlLWJhbm5lci1jb250YWluZXIge3sgdHlwZSgpIH19IHt7IHBvc2l0aW9uKCkgfX1cIlxuICBbbmdDbGFzc109XCJ7IG9wZW46IHZpc2libGUoKSwgY2xvc2U6ICF2aXNpYmxlKCkgfVwiXG4gIFthdHRyLnJvbGVdPVwidHlwZSgpID09PSAnZGVmYXVsdCcgPyAnc3RhdHVzJyA6ICdhbGVydCdcIlxuPlxuICA8ZGl2IGNsYXNzPVwicnRlLWJhbm5lclwiPlxuICAgIDxkaXYgKm5nSWY9XCJzaG93SWNvbigpXCIgY2xhc3M9XCJydGUtYmFubmVyLWljb25cIj5cbiAgICAgIDxydGUtaWNvbiBbbmFtZV09XCJ0eXBlKCkgPT09ICdkZWZhdWx0JyA/ICdpbmZvJyA6ICdlcnJvcidcIiBbc2l6ZV09XCIzMlwiIC8+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInJ0ZS1iYW5uZXItY29udGVudFwiPlxuICAgICAgPHNwYW4gKm5nSWY9XCJ0aXRsZSgpXCIgY2xhc3M9XCJydGUtYmFubmVyLXRpdGxlXCI+e3sgdGl0bGUoKSB9fTwvc3Bhbj5cbiAgICAgIDxkaXYgKm5nSWY9XCJtZXNzYWdlKClcIiBjbGFzcz1cInJ0ZS1iYW5uZXItbWVzc2FnZVwiPlxuICAgICAgICA8c3Bhbj57eyBtZXNzYWdlKCkgfX08L3NwYW4+XG4gICAgICAgIDxidXR0b24gKm5nSWY9XCJhY3Rpb25MYWJlbCgpXCJcbiAgICAgICAgICBydGVCdXR0b25cbiAgICAgICAgICBydGVCdXR0b25WYXJpYW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgcnRlQnV0dG9uU2l6ZT1cInNcIlxuICAgICAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYWN0aW9uTGFiZWwoKSFcIlxuICAgICAgICAgIChjbGljayk9XCJjbGlja0FjdGlvbigpXCJcbiAgICAgICAgPnt7IGFjdGlvbkxhYmVsKCkgfX08L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgKm5nSWY9XCJjbG9zYWJsZSgpXCIgY2xhc3M9XCJydGUtYmFubmVyLWNsb3NlLWljb25cIj5cbiAgICAgIDxydGUtaWNvbi1idXR0b25cbiAgICAgICAgbmFtZT1cImNsb3NlXCJcbiAgICAgICAgdmFyaWFudD1cIm5ldXRyYWxcIlxuICAgICAgICBhcmlhTGFiZWw9XCJjbG9zZSBiYW5uZXJcIlxuICAgICAgICAoY2xpY2spPVwiY2xvc2VCYW5uZXIoKVwiXG4gICAgICAvPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvc2VjdGlvbj5cbiJdfQ==
|
|
@@ -23,10 +23,10 @@ export class BreadcrumbsComponent {
|
|
|
23
23
|
});
|
|
24
24
|
}
|
|
25
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", 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 <rte-breadcrumb-item\n [item]=\"truncatedItems()!.root\"\n [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n />\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n <rte-icon-button\n rteDropdownTrigger\n name=\"more-horiz\"\n role=\"menu\"\n variant=\"neutral\"\n aria-label=\"More items\"\n data-testid=\"show-more\"\n dropdownTrigger\n tabindex=\"-1\"\n [compactSpacing]=\"true\"\n />\n <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n </span>\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n @for (\n item of truncatedItems()!.remaining;\n track item.link;\n let i = $index\n ) {\n <rte-breadcrumb-item\n [item]=\"item\"\n [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n />\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 <rte-breadcrumb-item\n [item]=\"item\"\n [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n [isLast]=\"i === items().length - 1\"\n />\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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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: "ngmodule", type: DropdownModule }, { kind: "directive", type: i2.DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset"], outputs: ["menuEvent"] }, { kind: "directive", type: i3.DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus"] }, { kind: "component", type: i4.DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId"], outputs: ["itemEvent"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "rte-breadcrumb-item", inputs: ["item", "isLast", "breadcrumbItemMaxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", 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 <rte-breadcrumb-item\n [item]=\"truncatedItems()!.root\"\n [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n />\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n <rte-icon-button\n rteDropdownTrigger\n name=\"more-horiz\"\n role=\"menu\"\n variant=\"neutral\"\n aria-label=\"More items\"\n data-testid=\"show-more\"\n dropdownTrigger\n tabindex=\"-1\"\n [compactSpacing]=\"true\"\n />\n <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n </span>\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n @for (\n item of truncatedItems()!.remaining;\n track item.link;\n let i = $index\n ) {\n <rte-breadcrumb-item\n [item]=\"item\"\n [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n />\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 <rte-breadcrumb-item\n [item]=\"item\"\n [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n [isLast]=\"i === items().length - 1\"\n />\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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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: "ngmodule", type: DropdownModule }, { kind: "directive", type: i2.DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset"], outputs: ["menuEvent"] }, { kind: "directive", type: i3.DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus"] }, { kind: "component", type: i4.DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId"], outputs: ["itemEvent"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon"], outputs: ["click"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "rte-breadcrumb-item", inputs: ["item", "isLast", "breadcrumbItemMaxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27
27
|
}
|
|
28
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{ selector: "rte-breadcrumbs", imports: [CommonModule, DropdownModule, IconButtonComponent, BreadcrumbItemComponent], 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 <rte-breadcrumb-item\n [item]=\"truncatedItems()!.root\"\n [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n />\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n <rte-icon-button\n rteDropdownTrigger\n name=\"more-horiz\"\n role=\"menu\"\n variant=\"neutral\"\n aria-label=\"More items\"\n data-testid=\"show-more\"\n dropdownTrigger\n tabindex=\"-1\"\n [compactSpacing]=\"true\"\n />\n <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n </span>\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n @for (\n item of truncatedItems()!.remaining;\n track item.link;\n let i = $index\n ) {\n <rte-breadcrumb-item\n [item]=\"item\"\n [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n />\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 <rte-breadcrumb-item\n [item]=\"item\"\n [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n [isLast]=\"i === items().length - 1\"\n />\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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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"] }]
|
|
31
31
|
}] });
|
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRixPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSxzRUFBc0UsQ0FBQztBQUt0SCxPQUFPLEVBQ0wsNEJBQTRCLEVBQzVCLHlCQUF5QixHQUMxQixNQUFNLGtFQUFrRSxDQUFDO0FBRTFFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDN0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFFM0UsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkNBQTZDLENBQUM7Ozs7OztBQVV0RixNQUFNLE9BQU8sb0JBQW9CO0lBUmpDO1FBU1csVUFBSyxHQUFHLEtBQUssQ0FBb0IsRUFBRSxDQUFDLENBQUM7UUFDckMsY0FBUyxHQUFHLEtBQUssQ0FBUyw4QkFBOEIsQ0FBQyxDQUFDO1FBQzFELDJCQUFzQixHQUFHLEtBQUssQ0FBUyxHQUFHLENBQUMsQ0FBQztRQUU1QyxtQkFBYyxHQUFHLFFBQVEsQ0FBbUMsR0FBRyxFQUFFO1lBQ3hFLElBQUkseUJBQXlCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLEVBQUUsQ0FBQztnQkFDNUMsT0FBTyw0QkFBNEIsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztZQUNwRCxDQUFDO1lBQ0QsT0FBTyxJQUFJLENBQUM7UUFDZCxDQUFDLENBQUMsQ0FBQztLQUNKOytHQVhZLG9CQUFvQjttR0FBcEIsb0JBQW9CLDhmQ3pCakMscXVEQXNEQSxtdkNEbkNZLFlBQVksNEhBQUUsY0FBYywra0JBQUUsbUJBQW1CLGdRQUFFLHVCQUF1Qjs7NEZBTXpFLG9CQUFvQjtrQkFSaEMsU0FBUzsrQkFDRSxpQkFBaUIsV0FDbEIsQ0FBQyxZQUFZLEVBQUUsY0FBYyxFQUFFLG1CQUFtQixFQUFFLHVCQUF1QixDQUFDLGNBQ3pFLElBQUksbUJBR0MsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkLCBpbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBCUkVBRENSVU1CU19ERUZBVUxUX0FSSUFfTEFCRUwgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9icmVhZGNydW1icy9icmVhZGNydW1icy5jb25zdGFudHNcIjtcbmltcG9ydCB7XG4gIEJyZWFkY3J1bWJQcm9wcyxcbiAgQnJlYWRjcnVtYnNUcnVuY2F0ZWRJdGVtcyxcbn0gZnJvbSBcIkBkZXNpZ24tc3lzdGVtLXJ0ZS9jb3JlL2NvbXBvbmVudHMvYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMuaW50ZXJmYWNlXCI7XG5pbXBvcnQge1xuICBnZXRCcmVhZGNydW1ic1RydW5jYXRlZEl0ZW1zLFxuICBzaG91bGRUcnVuY2F0ZUJyZWFkY3J1bWJzLFxufSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9icmVhZGNydW1icy9icmVhZGNydW1icy51dGlsc1wiO1xuXG5pbXBvcnQgeyBEcm9wZG93bk1vZHVsZSB9IGZyb20gXCIuLi9kcm9wZG93blwiO1xuaW1wb3J0IHsgSWNvbkJ1dHRvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9pY29uLWJ1dHRvbi9pY29uLWJ1dHRvbi5jb21wb25lbnRcIjtcblxuaW1wb3J0IHsgQnJlYWRjcnVtYkl0ZW1Db21wb25lbnQgfSBmcm9tIFwiLi9icmVhZGNydW1iLWl0ZW0vYnJlYWRjcnVtYi1pdGVtLmNvbXBvbmVudFwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLWJyZWFkY3J1bWJzXCIsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIERyb3Bkb3duTW9kdWxlLCBJY29uQnV0dG9uQ29tcG9uZW50LCBCcmVhZGNydW1iSXRlbUNvbXBvbmVudF0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiBcIi4vYnJlYWRjcnVtYnMuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmw6IFwiLi9icmVhZGNydW1icy5jb21wb25lbnQuc2Nzc1wiLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQnJlYWRjcnVtYnNDb21wb25lbnQge1xuICByZWFkb25seSBpdGVtcyA9IGlucHV0PEJyZWFkY3J1bWJQcm9wc1tdPihbXSk7XG4gIHJlYWRvbmx5IGFyaWFMYWJlbCA9IGlucHV0PHN0cmluZz4oQlJFQURDUlVNQlNfREVGQVVMVF9BUklBX0xBQkVMKTtcbiAgcmVhZG9ubHkgYnJlYWRjcnVtYkl0ZW1NYXhXaWR0aCA9IGlucHV0PG51bWJlcj4oMTUwKTtcblxuICByZWFkb25seSB0cnVuY2F0ZWRJdGVtcyA9IGNvbXB1dGVkPEJyZWFkY3J1bWJzVHJ1bmNhdGVkSXRlbXMgfCBudWxsPigoKSA9PiB7XG4gICAgaWYgKHNob3VsZFRydW5jYXRlQnJlYWRjcnVtYnModGhpcy5pdGVtcygpKSkge1xuICAgICAgcmV0dXJuIGdldEJyZWFkY3J1bWJzVHJ1bmNhdGVkSXRlbXModGhpcy5pdGVtcygpKTtcbiAgICB9XG4gICAgcmV0dXJuIG51bGw7XG4gIH0pO1xufVxuIiwiPG5hdlxuICBjbGFzcz1cImJyZWFkY3J1bWJzLWNvbnRhaW5lclwiXG4gIHJvbGU9XCJuYXZpZ2F0aW9uXCJcbiAgW2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWwoKVwiXG4gIFtuZ0NsYXNzXT1cInsgdHJ1bmNhdGVkOiB0cnVuY2F0ZWRJdGVtcygpPy50cnVuY2F0ZWQ/Lmxlbmd0aCB9XCJcbj5cbiAgQGlmICh0cnVuY2F0ZWRJdGVtcygpPy50cnVuY2F0ZWQ/Lmxlbmd0aCkge1xuICAgIDxydGUtYnJlYWRjcnVtYi1pdGVtXG4gICAgICBbaXRlbV09XCJ0cnVuY2F0ZWRJdGVtcygpIS5yb290XCJcbiAgICAgIFticmVhZGNydW1iSXRlbU1heFdpZHRoXT1cImJyZWFkY3J1bWJJdGVtTWF4V2lkdGgoKVwiXG4gICAgLz5cbiAgICA8c3BhbiBhcmlhLWhpZGRlbj1cInRydWVcIiBjbGFzcz1cInNlcGFyYXRvclwiPi88L3NwYW4+XG4gICAgPHNwYW4gY2xhc3M9XCJicmVhZGNydW1iLWl0ZW1cIiBydGVEcm9wZG93biBbcnRlRHJvcGRvd25PZmZzZXRdPVwiOFwiPlxuICAgICAgPHJ0ZS1pY29uLWJ1dHRvblxuICAgICAgICBydGVEcm9wZG93blRyaWdnZXJcbiAgICAgICAgbmFtZT1cIm1vcmUtaG9yaXpcIlxuICAgICAgICByb2xlPVwibWVudVwiXG4gICAgICAgIHZhcmlhbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgYXJpYS1sYWJlbD1cIk1vcmUgaXRlbXNcIlxuICAgICAgICBkYXRhLXRlc3RpZD1cInNob3ctbW9yZVwiXG4gICAgICAgIGRyb3Bkb3duVHJpZ2dlclxuICAgICAgICB0YWJpbmRleD1cIi0xXCJcbiAgICAgICAgW2NvbXBhY3RTcGFjaW5nXT1cInRydWVcIlxuICAgICAgLz5cbiAgICAgIDxydGUtZHJvcGRvd24tbWVudSBbaXRlbXNdPVwidHJ1bmNhdGVkSXRlbXMoKT8udHJ1bmNhdGVkID8/IFtdXCIgLz5cbiAgICA8L3NwYW4+XG4gICAgPHNwYW4gYXJpYS1oaWRkZW49XCJ0cnVlXCIgY2xhc3M9XCJzZXBhcmF0b3JcIj4vPC9zcGFuPlxuICAgIEBmb3IgKFxuICAgICAgaXRlbSBvZiB0cnVuY2F0ZWRJdGVtcygpIS5yZW1haW5pbmc7XG4gICAgICB0cmFjayBpdGVtLmxpbms7XG4gICAgICBsZXQgaSA9ICRpbmRleFxuICAgICkge1xuICAgICAgPHJ0ZS1icmVhZGNydW1iLWl0ZW1cbiAgICAgICAgW2l0ZW1dPVwiaXRlbVwiXG4gICAgICAgIFticmVhZGNydW1iSXRlbU1heFdpZHRoXT1cImJyZWFkY3J1bWJJdGVtTWF4V2lkdGgoKVwiXG4gICAgICAgIFtpc0xhc3RdPVwiaSA9PT0gdHJ1bmNhdGVkSXRlbXMoKSEucmVtYWluaW5nLmxlbmd0aCAtIDFcIlxuICAgICAgLz5cbiAgICAgIEBpZiAoaSA8IHRydW5jYXRlZEl0ZW1zKCkhLnJlbWFpbmluZy5sZW5ndGggLSAxKSB7XG4gICAgICAgIDxzcGFuIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIGNsYXNzPVwic2VwYXJhdG9yXCI+Lzwvc3Bhbj5cbiAgICAgIH1cbiAgICB9XG4gIH0gQGVsc2Uge1xuICAgIEBmb3IgKGl0ZW0gb2YgaXRlbXMoKTsgdHJhY2sgaXRlbS5saW5rOyBsZXQgaSA9ICRpbmRleCkge1xuICAgICAgPHJ0ZS1icmVhZGNydW1iLWl0ZW1cbiAgICAgICAgW2l0ZW1dPVwiaXRlbVwiXG4gICAgICAgIFticmVhZGNydW1iSXRlbU1heFdpZHRoXT1cImJyZWFkY3J1bWJJdGVtTWF4V2lkdGgoKVwiXG4gICAgICAgIFtpc0xhc3RdPVwiaSA9PT0gaXRlbXMoKS5sZW5ndGggLSAxXCJcbiAgICAgIC8+XG4gICAgICBAaWYgKGkgPCBpdGVtcygpLmxlbmd0aCAtIDEpIHtcbiAgICAgICAgPHNwYW4gYXJpYS1oaWRkZW49XCJ0cnVlXCIgY2xhc3M9XCJzZXBhcmF0b3JcIj4vPC9zcGFuPlxuICAgICAgfVxuICAgIH1cbiAgfVxuPC9uYXY+XG4iXX0=
|
|
@@ -9,11 +9,11 @@ export class ButtonComponent {
|
|
|
9
9
|
return `rte-button ${this.rteButtonVariant()} size-${this.rteButtonSize()}`;
|
|
10
10
|
}
|
|
11
11
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "button[rteButton]", inputs: { rteButtonVariant: { classPropertyName: "rteButtonVariant", publicName: "rteButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, rteButtonSize: { classPropertyName: "rteButtonSize", publicName: "rteButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<span class=\"rte-button-label\">\n <ng-content/>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;justify-content:center;width:fit-content}:host:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}:host.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}:host.size-s .rte-button-label{margin:0 4px}:host.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}:host.size-m .rte-button-label{margin:0 6px}:host.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}:host.size-l .rte-button-label{margin:0 8px}:host.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}:host.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}:host.primary:active{background:var(--background-brand-pressed)}:host.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}:host.secondary:hover{background:var(--background-brand-inverse-hover)}:host.secondary:active{background:var(--background-brand-inverse-pressed)}:host.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}:host.text{background:transparent;border:none;color:var(--content-brand-default)}:host.text:hover{background:var(--background-brand-inverse-hover)}:host.text:active{background:var(--background-brand-inverse-pressed)}:host.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}:host.transparent{background:transparent;border:none;color:var(--content-brand-default)}:host.transparent:hover{color:var(--content-brand-hover)}:host.transparent:active{color:var(--content-brand-
|
|
12
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "button[rteButton]", inputs: { rteButtonVariant: { classPropertyName: "rteButtonVariant", publicName: "rteButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, rteButtonSize: { classPropertyName: "rteButtonSize", publicName: "rteButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<span class=\"rte-button-label\">\n <ng-content/>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;justify-content:center;width:fit-content}:host:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}:host.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}:host.size-s .rte-button-label{margin:0 4px}:host.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}:host.size-m .rte-button-label{margin:0 6px}:host.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}:host.size-l .rte-button-label{margin:0 8px}:host.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}:host.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}:host.primary:active{background:var(--background-brand-pressed)}:host.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}:host.secondary:hover{background:var(--background-brand-inverse-hover)}:host.secondary:active{background:var(--background-brand-inverse-pressed)}:host.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}:host.text{background:transparent;border:none;color:var(--content-brand-default)}:host.text:hover{background:var(--background-brand-inverse-hover)}:host.text:active{background:var(--background-brand-inverse-pressed)}:host.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}:host.transparent{background:transparent;border:none;color:var(--content-brand-default)}:host.transparent:hover{color:var(--content-brand-hover)}:host.transparent:active{color:var(--content-brand-pressed)}:host.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}:host.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}:host.danger:hover{background:var(--background-danger-hover)}:host.danger:active{background:var(--background-danger-pressed)}:host.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.neutral{background:none;border:none;color:var(--content-primary)}:host.neutral:hover{color:var(--content-secondary)}:host.neutral:active{color:var(--content-tertiary)}:host.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}:host.reverse{background:none;border:none;color:var(--content-primary-inverse)}:host.reverse:hover{color:var(--background-hover)}:host.reverse:active{color:var(--content-primary-inverse)}:host.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13
13
|
}
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
|
-
args: [{ selector: "button[rteButton]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"rte-button-label\">\n <ng-content/>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;justify-content:center;width:fit-content}:host:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}:host.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}:host.size-s .rte-button-label{margin:0 4px}:host.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}:host.size-m .rte-button-label{margin:0 6px}:host.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}:host.size-l .rte-button-label{margin:0 8px}:host.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}:host.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}:host.primary:active{background:var(--background-brand-pressed)}:host.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}:host.secondary:hover{background:var(--background-brand-inverse-hover)}:host.secondary:active{background:var(--background-brand-inverse-pressed)}:host.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}:host.text{background:transparent;border:none;color:var(--content-brand-default)}:host.text:hover{background:var(--background-brand-inverse-hover)}:host.text:active{background:var(--background-brand-inverse-pressed)}:host.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}:host.transparent{background:transparent;border:none;color:var(--content-brand-default)}:host.transparent:hover{color:var(--content-brand-hover)}:host.transparent:active{color:var(--content-brand-
|
|
16
|
+
args: [{ selector: "button[rteButton]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"rte-button-label\">\n <ng-content/>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;justify-content:center;width:fit-content}:host:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}:host.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}:host.size-s .rte-button-label{margin:0 4px}:host.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}:host.size-m .rte-button-label{margin:0 6px}:host.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}:host.size-l .rte-button-label{margin:0 8px}:host.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}:host.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}:host.primary:active{background:var(--background-brand-pressed)}:host.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}:host.secondary:hover{background:var(--background-brand-inverse-hover)}:host.secondary:active{background:var(--background-brand-inverse-pressed)}:host.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}:host.text{background:transparent;border:none;color:var(--content-brand-default)}:host.text:hover{background:var(--background-brand-inverse-hover)}:host.text:active{background:var(--background-brand-inverse-pressed)}:host.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}:host.transparent{background:transparent;border:none;color:var(--content-brand-default)}:host.transparent:hover{color:var(--content-brand-hover)}:host.transparent:active{color:var(--content-brand-pressed)}:host.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}:host.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}:host.danger:hover{background:var(--background-danger-hover)}:host.danger:active{background:var(--background-danger-pressed)}:host.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.neutral{background:none;border:none;color:var(--content-primary)}:host.neutral:hover{color:var(--content-secondary)}:host.neutral:active{color:var(--content-tertiary)}:host.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}:host.reverse{background:none;border:none;color:var(--content-primary-inverse)}:host.reverse:hover{color:var(--background-hover)}:host.reverse:active{color:var(--content-primary-inverse)}:host.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"] }]
|
|
17
17
|
}], propDecorators: { classes: [{
|
|
18
18
|
type: HostBinding,
|
|
19
19
|
args: ["class"]
|
|
@@ -25,10 +25,10 @@ export class CheckboxComponent {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", 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 } }, 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 }); }
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", 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 } }, 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-default);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger-default);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-default)}.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
29
|
}
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
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"] }]
|
|
32
|
+
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-default);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger-default);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-default)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"] }]
|
|
33
33
|
}] });
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBVXZELE1BQU0sT0FBTyxpQkFBaUI7SUFSOUI7UUFTVyxPQUFFLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBQzlCLFVBQUssR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7UUFDakMsVUFBSyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNsQixrQkFBYSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3QixnQkFBVyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN4QixjQUFTLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3hCLGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsVUFBSyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQixpQkFBWSxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN6QixhQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLFlBQU8sR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7S0FTakM7SUFQQyxTQUFTLENBQUMsS0FBb0I7UUFDNUIsSUFBSSxLQUFLLENBQUMsSUFBSSxLQUFLLE9BQU8sRUFBRSxDQUFDO1lBQzNCLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUM7Z0JBQ3BCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN6QixDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7K0dBbkJVLGlCQUFpQjttR0FBakIsaUJBQWlCLG85Q0NiOUIsOHhDQStCQSx3ekpEeEJZLFlBQVksaU9BQUUsYUFBYTs7NEZBTTFCLGlCQUFpQjtrQkFSN0IsU0FBUzsrQkFDRSxjQUFjLFdBQ2YsQ0FBQyxZQUFZLEVBQUUsYUFBYSxDQUFDLGNBQzFCLElBQUksbUJBR0MsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGlucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9pY29uL2ljb24uY29tcG9uZW50XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJydGUtY2hlY2tib3hcIixcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgSWNvbkNvbXBvbmVudF0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiBcIi4vY2hlY2tib3guY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmw6IFwiLi9jaGVja2JveC5jb21wb25lbnQuc2Nzc1wiLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQ2hlY2tib3hDb21wb25lbnQge1xuICByZWFkb25seSBpZCA9IGlucHV0LnJlcXVpcmVkPHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgbGFiZWwgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IHZhbHVlID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IGluZGV0ZXJtaW5hdGUgPSBpbnB1dChmYWxzZSk7XG4gIHJlYWRvbmx5IGRlc2NyaXB0aW9uID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IHNob3dMYWJlbCA9IGlucHV0KHRydWUpO1xuICByZWFkb25seSBkaXNhYmxlZCA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgZXJyb3IgPSBpbnB1dChmYWxzZSk7XG4gIHJlYWRvbmx5IGVycm9yTWVzc2FnZSA9IGlucHV0KFwiXCIpO1xuICByZWFkb25seSByZWFkT25seSA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgY2hlY2tlZCA9IGlucHV0KGZhbHNlKTtcblxuICBvbktleWRvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBpZiAoZXZlbnQuY29kZSA9PT0gXCJTcGFjZVwiKSB7XG4gICAgICBpZiAodGhpcy5yZWFkT25seSgpKSB7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCIgICAgPGRpdiBjbGFzcz1cInJ0ZS1jaGVja2JveC1jb250YWluZXJcIj5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgY2xhc3M9XCJydGUtY2hlY2tib3hcIlxuICAgICAgICAgICAgW2lkXT1cImlkKClcIlxuICAgICAgICAgICAgW3ZhbHVlXT1cInZhbHVlKClcIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwieydlcnJvcic6IGVycm9yKCksICdyZWFkLW9ubHknOiByZWFkT25seSgpfVwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiXG4gICAgICAgICAgICBbaW5kZXRlcm1pbmF0ZV09XCJpbmRldGVybWluYXRlKClcIlxuICAgICAgICAgICAgW2NoZWNrZWRdPVwiY2hlY2tlZCgpXCJcbiAgICAgICAgICAgIChrZXlkb3duKT1cIm9uS2V5ZG93bigkZXZlbnQpXCJcbiAgICAgICAgLz5cbiAgICAgICAgICAgIDxydGUtaWNvbiBjbGFzcz1cInJ0ZS1jaGVja2JveC1pY29ucyBydGUtY2hlY2tib3gtaWNvbi1zZWxlY3RlZFwiIG5hbWU9XCJjaGVjay1zbWFsbFwiIFtzaXplXT1cIjE2XCIvPiBcbiAgICAgICAgICAgIDxydGUtaWNvbiBjbGFzcz1cInJ0ZS1jaGVja2JveC1pY29ucyBydGUtY2hlY2tib3gtaWNvbi1pbmRldGVybWluYXRlZFwiIG5hbWU9XCJjaGVjay1pbmRldGVybWluYXRlXCIgW3NpemVdPVwiMTZcIiAvPiBcbiAgICAgICAgPGRpdiBjbGFzcz1cInJ0ZS1jaGVja2JveC10ZXh0LWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPGxhYmVsIFxuICAgICAgICAgICAgKm5nSWY9XCJzaG93TGFiZWwoKVwiIFxuICAgICAgICAgICAgY2xhc3M9XCJydGUtY2hlY2tib3gtbGFiZWxcIiBcbiAgICAgICAgICAgIFtmb3JdPVwiaWQoKVwiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgICAgICAgJ2Vycm9yJzogZXJyb3IoKSxcbiAgICAgICAgICAgICAgICAncmVhZC1vbmx5JzogcmVhZE9ubHkoKSxcbiAgICAgICAgICAgICAgICAnZGlzYWJsZWQnOiBkaXNhYmxlZCgpXG4gICAgICAgICAgICB9XCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7eyBsYWJlbCgpIH19XG4gICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJydGUtY2hlY2tib3gtZGVzY3JpcHRpb25cIj57eyBkZXNjcmlwdGlvbigpIH19PC9wPlxuICAgICAgICAgICAgPHAgKm5nSWY9XCJlcnJvcigpICYmIGVycm9yTWVzc2FnZSgpXCIgY2xhc3M9XCJydGUtY2hlY2tib3gtZXJyb3JcIj57eyBlcnJvck1lc3NhZ2UoKSB9fTwvcD5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4iXX0=
|
|
@@ -19,10 +19,10 @@ export class CheckboxGroupComponent {
|
|
|
19
19
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
20
20
|
}
|
|
21
21
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CheckboxGroupComponent, isStandalone: true, selector: "rte-checkbox-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"checkbox-group-container\">\n <div\n class=\"checkbox-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"checkbox-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items(); let i = index\">\n <rte-checkbox\n [id]=\"item + '-' + i\"\n [label]=\"item\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", 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\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-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;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CheckboxGroupComponent, isStandalone: true, selector: "rte-checkbox-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"checkbox-group-container\">\n <div\n class=\"checkbox-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"checkbox-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items(); let i = index\">\n <rte-checkbox\n [id]=\"item + '-' + i\"\n [label]=\"item\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", 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\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-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;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger-default);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger-default)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger-default)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23
23
|
}
|
|
24
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
25
25
|
type: Component,
|
|
26
|
-
args: [{ selector: "rte-checkbox-group", imports: [CommonModule, CheckboxComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"checkbox-group-container\">\n <div\n class=\"checkbox-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"checkbox-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items(); let i = index\">\n <rte-checkbox\n [id]=\"item + '-' + i\"\n [label]=\"item\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", 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\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-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;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"] }]
|
|
26
|
+
args: [{ selector: "rte-checkbox-group", imports: [CommonModule, CheckboxComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n *ngIf=\"isDisplayed()\"\n class=\"checkbox-group-container\">\n <div\n class=\"checkbox-group-header\"\n [ngClass]=\"{\n 'disabled': disabled(),\n 'error': error(),\n 'read-only': readOnly(),\n }\">\n <h3\n *ngIf=\"showGroupTitle()\"\n class=\"group-title\"\n >\n {{ groupTitle() }}\n </h3>\n <p\n *ngIf=\"showHelpText()\"\n class=\"group-help-text\"\n >\n {{ groupHelpText() }}\n\n </p>\n <p\n *ngIf=\"error()\"\n class=\"group-error-message\"\n >\n {{ errorMessage() }}\n </p>\n </div>\n <div class=\"checkbox-group\" \n [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n <ng-container \n *ngFor=\"let item of items(); let i = index\">\n <rte-checkbox\n [id]=\"item + '-' + i\"\n [label]=\"item\"\n [showLabel]=\"showItemsLabel()\"\n [disabled]=\"disabled()\"\n [error]=\"error()\"\n [readOnly]=\"readOnly()\"\n />\n </ng-container>\n </div>\n</div>", 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\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-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;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger-default);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger-default)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger-default)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"] }]
|
|
27
27
|
}] });
|
|
28
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3gtZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvY2hlY2tib3gtZ3JvdXAvY2hlY2tib3gtZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvY2hlY2tib3gtZ3JvdXAvY2hlY2tib3gtZ3JvdXAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVwRixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7O0FBVW5FLE1BQU0sT0FBTyxzQkFBc0I7SUFSbkM7UUFTVyxVQUFLLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBWSxDQUFDO1FBQ25DLGNBQVMsR0FBRyxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDaEMsbUJBQWMsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDN0IsZUFBVSxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN2QixtQkFBYyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM5QixrQkFBYSxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUMxQixpQkFBWSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM1QixpQkFBWSxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN6QixVQUFLLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JCLGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsYUFBUSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUV4QixnQkFBVyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7S0FDM0U7K0dBZFksc0JBQXNCO21HQUF0QixzQkFBc0Isc2lEQ2JuQywybENBNENNLGk4RERyQ00sWUFBWSw4VkFBRSxpQkFBaUI7OzRGQU05QixzQkFBc0I7a0JBUmxDLFNBQVM7K0JBQ0Usb0JBQW9CLFdBQ3JCLENBQUMsWUFBWSxFQUFFLGlCQUFpQixDQUFDLGNBQzlCLElBQUksbUJBR0MsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkLCBpbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmltcG9ydCB7IENoZWNrYm94Q29tcG9uZW50IH0gZnJvbSBcIi4uL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudFwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwicnRlLWNoZWNrYm94LWdyb3VwXCIsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIENoZWNrYm94Q29tcG9uZW50XSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9jaGVja2JveC1ncm91cC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybDogXCIuL2NoZWNrYm94LWdyb3VwLmNvbXBvbmVudC5zY3NzXCIsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBDaGVja2JveEdyb3VwQ29tcG9uZW50IHtcbiAgcmVhZG9ubHkgaXRlbXMgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmdbXT4oKTtcbiAgcmVhZG9ubHkgZGlyZWN0aW9uID0gaW5wdXQoXCJob3Jpem9udGFsXCIpO1xuICByZWFkb25seSBzaG93SXRlbXNMYWJlbCA9IGlucHV0KHRydWUpO1xuICByZWFkb25seSBncm91cFRpdGxlID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IHNob3dHcm91cFRpdGxlID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBncm91cEhlbHBUZXh0ID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IHNob3dIZWxwVGV4dCA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgZXJyb3JNZXNzYWdlID0gaW5wdXQoXCJcIik7XG4gIHJlYWRvbmx5IGVycm9yID0gaW5wdXQoZmFsc2UpO1xuICByZWFkb25seSBkaXNhYmxlZCA9IGlucHV0KGZhbHNlKTtcbiAgcmVhZG9ubHkgcmVhZE9ubHkgPSBpbnB1dChmYWxzZSk7XG5cbiAgcmVhZG9ubHkgaXNEaXNwbGF5ZWQgPSBjb21wdXRlZCgoKSA9PiAhKHRoaXMuZGlzYWJsZWQoKSAmJiB0aGlzLmVycm9yKCkpKTtcbn1cbiIsIjxkaXYgIFxuICAqbmdJZj1cImlzRGlzcGxheWVkKClcIlxuICBjbGFzcz1cImNoZWNrYm94LWdyb3VwLWNvbnRhaW5lclwiPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJjaGVja2JveC1ncm91cC1oZWFkZXJcIlxuICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2Rpc2FibGVkJzogZGlzYWJsZWQoKSxcbiAgICAgICAgJ2Vycm9yJzogZXJyb3IoKSxcbiAgICAgICAgJ3JlYWQtb25seSc6IHJlYWRPbmx5KCksXG4gICAgfVwiPlxuICAgIDxoM1xuICAgICAgICAqbmdJZj1cInNob3dHcm91cFRpdGxlKClcIlxuICAgICAgICBjbGFzcz1cImdyb3VwLXRpdGxlXCJcbiAgICAgICAgPlxuICAgICAgICB7eyBncm91cFRpdGxlKCkgfX1cbiAgICA8L2gzPlxuICAgIDxwXG4gICAgICAgICpuZ0lmPVwic2hvd0hlbHBUZXh0KClcIlxuICAgICAgICBjbGFzcz1cImdyb3VwLWhlbHAtdGV4dFwiXG4gICAgICAgID5cbiAgICAgICAge3sgZ3JvdXBIZWxwVGV4dCgpIH19XG5cbiAgICA8L3A+XG4gICAgPHBcbiAgICAgICAgKm5nSWY9XCJlcnJvcigpXCJcbiAgICAgICAgY2xhc3M9XCJncm91cC1lcnJvci1tZXNzYWdlXCJcbiAgICAgICAgPlxuICAgICAgICB7eyBlcnJvck1lc3NhZ2UoKSB9fVxuICAgIDwvcD5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJjaGVja2JveC1ncm91cFwiIFxuICAgIFtuZ0NsYXNzXT1cInsnaG9yaXpvbnRhbCc6IGRpcmVjdGlvbigpID09PSAnaG9yaXpvbnRhbCcsICd2ZXJ0aWNhbCc6IGRpcmVjdGlvbigpID09PSAndmVydGljYWwnfVwiPlxuICAgIDxuZy1jb250YWluZXIgXG4gICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXMoKTsgbGV0IGkgPSBpbmRleFwiPlxuICAgICAgPHJ0ZS1jaGVja2JveFxuICAgICAgICBbaWRdPVwiaXRlbSArICctJyArIGlcIlxuICAgICAgICBbbGFiZWxdPVwiaXRlbVwiXG4gICAgICAgIFtzaG93TGFiZWxdPVwic2hvd0l0ZW1zTGFiZWwoKVwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgICAgICAgW2Vycm9yXT1cImVycm9yKClcIlxuICAgICAgICBbcmVhZE9ubHldPVwicmVhZE9ubHkoKVwiXG4gICAgICAvPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbjwvZGl2PiJdfQ==
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CommonModule } from "@angular/common";
|
|
2
2
|
import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
|
|
3
3
|
import { buttonIconSize } from "@design-system-rte/core/components/button/common/common-button.constants";
|
|
4
|
+
import { BadgeDirective } from "../badge/badge.directive";
|
|
4
5
|
import { isValidIconName } from "../icon/icon-map";
|
|
5
6
|
import { IconComponent } from "../icon/icon.component";
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
@@ -16,19 +17,28 @@ export class IconButtonComponent {
|
|
|
16
17
|
this.compactSpacing = input(false);
|
|
17
18
|
this.ariaLabel = input(undefined);
|
|
18
19
|
this.ariaLabelledBy = input(undefined);
|
|
20
|
+
this.badgeCount = input();
|
|
21
|
+
this.badgeContent = input();
|
|
22
|
+
this.badgeType = input();
|
|
23
|
+
this.badgeIcon = input("settings");
|
|
19
24
|
this.buttonIconSize = computed(() => buttonIconSize[this.size()]);
|
|
20
25
|
this.isValidIconName = computed(() => isValidIconName(this.name()));
|
|
21
26
|
this.click = output();
|
|
27
|
+
this.shouldDisplayBadge = computed(() => {
|
|
28
|
+
const count = this.badgeCount();
|
|
29
|
+
const content = this.badgeContent();
|
|
30
|
+
return (count && count > 0 && content === "number") || content === "icon";
|
|
31
|
+
});
|
|
22
32
|
}
|
|
23
33
|
onClick(event) {
|
|
24
34
|
event.stopPropagation();
|
|
25
35
|
this.click.emit(event);
|
|
26
36
|
}
|
|
27
37
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
38
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IconButtonComponent, isStandalone: true, selector: "rte-icon-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "@if (shouldDisplayBadge()) {\n <button\n *ngIf=\"isValidIconName\"\n class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n rteBadge\n [class.compact-spacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n [rteBadgeType]=\"badgeType()!\"\n [rteBadgeSize]=\"size()\"\n [rteBadgeContent]=\"size() === 's' ? 'empty' : badgeContent()!\"\n [rteBadgeCount]=\"badgeCount()!\"\n [rteBadgeIcon]=\"badgeIcon()!\"\n (click)=\"onClick($event)\"\n >\n <rte-icon\n [name]=\"name()\"\n [appearance]=\"appearance()\"\n [size]=\"buttonIconSize()\"\n />\n </button>\n} @else {\n <button\n *ngIf=\"isValidIconName\"\n class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n [class.compact-spacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n (click)=\"onClick($event)\"\n >\n <rte-icon\n [name]=\"name()\"\n [appearance]=\"appearance()\"\n [size]=\"buttonIconSize()\"\n />\n </button>\n}\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-icon-button{display:flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)}.rte-icon-button.primary ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-pressed)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none}.rte-icon-button.danger ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-icon-button.neutral:hover{color:var(--content-secondary)}.rte-icon-button.neutral:active{color:var(--content-tertiary)}.rte-icon-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-icon-button.reverse:hover{color:var(--background-hover)}.rte-icon-button.reverse:active{color:var(--content-primary-inverse)}.rte-icon-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "directive", type: BadgeDirective, selector: "[rteBadge]", inputs: ["rteBadgeType", "rteBadgeSize", "rteBadgeContent", "rteBadgeCount", "rteBadgeIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
29
39
|
}
|
|
30
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
31
41
|
type: Component,
|
|
32
|
-
args: [{ selector: "rte-icon-button", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n
|
|
42
|
+
args: [{ selector: "rte-icon-button", imports: [CommonModule, IconComponent, BadgeDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (shouldDisplayBadge()) {\n <button\n *ngIf=\"isValidIconName\"\n class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n rteBadge\n [class.compact-spacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n [rteBadgeType]=\"badgeType()!\"\n [rteBadgeSize]=\"size()\"\n [rteBadgeContent]=\"size() === 's' ? 'empty' : badgeContent()!\"\n [rteBadgeCount]=\"badgeCount()!\"\n [rteBadgeIcon]=\"badgeIcon()!\"\n (click)=\"onClick($event)\"\n >\n <rte-icon\n [name]=\"name()\"\n [appearance]=\"appearance()\"\n [size]=\"buttonIconSize()\"\n />\n </button>\n} @else {\n <button\n *ngIf=\"isValidIconName\"\n class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n [class.compact-spacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n (click)=\"onClick($event)\"\n >\n <rte-icon\n [name]=\"name()\"\n [appearance]=\"appearance()\"\n [size]=\"buttonIconSize()\"\n />\n </button>\n}\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-icon-button{display:flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)}.rte-icon-button.primary ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-pressed)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none}.rte-icon-button.danger ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-icon-button.neutral:hover{color:var(--content-secondary)}.rte-icon-button.neutral:active{color:var(--content-tertiary)}.rte-icon-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-icon-button.reverse:hover{color:var(--background-hover)}.rte-icon-button.reverse:active{color:var(--content-primary-inverse)}.rte-icon-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"] }]
|
|
33
43
|
}] });
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
44
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvaWNvbi1idXR0b24vaWNvbi1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvaWNvbi1idXR0b24vaWNvbi1idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFJNUYsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDBFQUEwRSxDQUFDO0FBRTFHLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7QUFXdkQsTUFBTSxPQUFPLG1CQUFtQjtJQVJoQztRQVNXLGFBQVEsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDakMsU0FBSSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQXlDLENBQUM7UUFDL0QsU0FBSSxHQUFHLEtBQUssQ0FBYSxHQUFHLENBQUMsQ0FBQztRQUM5QixZQUFPLEdBQUcsS0FBSyxDQUFnQixTQUFTLENBQUMsQ0FBQztRQUMxQyxTQUFJLEdBQUcsS0FBSyxDQUFhLFFBQVEsQ0FBQyxDQUFDO1FBQ25DLGVBQVUsR0FBRyxLQUFLLENBQXdCLFVBQVUsQ0FBQyxDQUFDO1FBQ3RELG1CQUFjLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBQ3ZDLGNBQVMsR0FBRyxLQUFLLENBQXFCLFNBQVMsQ0FBQyxDQUFDO1FBQ2pELG1CQUFjLEdBQUcsS0FBSyxDQUFxQixTQUFTLENBQUMsQ0FBQztRQUN0RCxlQUFVLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDN0IsaUJBQVksR0FBRyxLQUFLLEVBQWdCLENBQUM7UUFDckMsY0FBUyxHQUFHLEtBQUssRUFBYSxDQUFDO1FBQy9CLGNBQVMsR0FBRyxLQUFLLENBQXdDLFVBQVUsQ0FBQyxDQUFDO1FBRXJFLG1CQUFjLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRTdELG9CQUFlLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRS9ELFVBQUssR0FBRyxNQUFNLEVBQThCLENBQUM7UUFFN0MsdUJBQWtCLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUMxQyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDaEMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBRXBDLE9BQU8sQ0FBQyxLQUFLLElBQUksS0FBSyxHQUFHLENBQUMsSUFBSSxPQUFPLEtBQUssUUFBUSxDQUFDLElBQUksT0FBTyxLQUFLLE1BQU0sQ0FBQztRQUM1RSxDQUFDLENBQUMsQ0FBQztLQU1KO0lBSkMsT0FBTyxDQUFDLEtBQWlDO1FBQ3ZDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QixDQUFDOytHQS9CVSxtQkFBbUI7bUdBQW5CLG1CQUFtQiw4eERDcEJoQyw4ckNBeUNBLG0wSEQzQlksWUFBWSxtSUFBRSxhQUFhLGlIQUFFLGNBQWM7OzRGQU0xQyxtQkFBbUI7a0JBUi9CLFNBQVM7K0JBQ0UsaUJBQWlCLFdBQ2xCLENBQUMsWUFBWSxFQUFFLGFBQWEsRUFBRSxjQUFjLENBQUMsY0FDMUMsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgY29tcHV0ZWQsIGlucHV0LCBvdXRwdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQmFkZ2VDb250ZW50LCBCYWRnZVR5cGUgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9iYWRnZS9iYWRnZS5pbnRlcmZhY2VcIjtcbmltcG9ydCB7IEJ1dHRvblR5cGUgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmludGVyZmFjZVwiO1xuaW1wb3J0IHsgQnV0dG9uU2l6ZSwgQnV0dG9uVmFyaWFudCB9IGZyb20gXCJAZGVzaWduLXN5c3RlbS1ydGUvY29yZS9jb21wb25lbnRzL2J1dHRvbi9jb21tb24vY29tbW9uLWJ1dHRvblwiO1xuaW1wb3J0IHsgYnV0dG9uSWNvblNpemUgfSBmcm9tIFwiQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9idXR0b24vY29tbW9uL2NvbW1vbi1idXR0b24uY29uc3RhbnRzXCI7XG5cbmltcG9ydCB7IEJhZGdlRGlyZWN0aXZlIH0gZnJvbSBcIi4uL2JhZGdlL2JhZGdlLmRpcmVjdGl2ZVwiO1xuaW1wb3J0IHsgaXNWYWxpZEljb25OYW1lIH0gZnJvbSBcIi4uL2ljb24vaWNvbi1tYXBcIjtcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tIFwiLi4vaWNvbi9pY29uLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgUmVndWxhckljb25JZEtleSwgVG9nZ2xhYmxlSWNvbklkS2V5IH0gZnJvbSBcIi4uL2ljb24vaWNvbi5zZXJ2aWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJydGUtaWNvbi1idXR0b25cIixcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgSWNvbkNvbXBvbmVudCwgQmFkZ2VEaXJlY3RpdmVdLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogXCIuL2ljb24tYnV0dG9uLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vaWNvbi1idXR0b24uY29tcG9uZW50LnNjc3NcIixcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEljb25CdXR0b25Db21wb25lbnQge1xuICByZWFkb25seSBkaXNhYmxlZCA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgbmFtZSA9IGlucHV0LnJlcXVpcmVkPFJlZ3VsYXJJY29uSWRLZXkgfCBUb2dnbGFibGVJY29uSWRLZXk+KCk7XG4gIHJlYWRvbmx5IHNpemUgPSBpbnB1dDxCdXR0b25TaXplPihcIm1cIik7XG4gIHJlYWRvbmx5IHZhcmlhbnQgPSBpbnB1dDxCdXR0b25WYXJpYW50PihcInByaW1hcnlcIik7XG4gIHJlYWRvbmx5IHR5cGUgPSBpbnB1dDxCdXR0b25UeXBlPihcImJ1dHRvblwiKTtcbiAgcmVhZG9ubHkgYXBwZWFyYW5jZSA9IGlucHV0PFwib3V0bGluZWRcIiB8IFwiZmlsbGVkXCI+KFwib3V0bGluZWRcIik7XG4gIHJlYWRvbmx5IGNvbXBhY3RTcGFjaW5nID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xuICByZWFkb25seSBhcmlhTGFiZWwgPSBpbnB1dDxzdHJpbmcgfCB1bmRlZmluZWQ+KHVuZGVmaW5lZCk7XG4gIHJlYWRvbmx5IGFyaWFMYWJlbGxlZEJ5ID0gaW5wdXQ8c3RyaW5nIHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuICByZWFkb25seSBiYWRnZUNvdW50ID0gaW5wdXQ8bnVtYmVyPigpO1xuICByZWFkb25seSBiYWRnZUNvbnRlbnQgPSBpbnB1dDxCYWRnZUNvbnRlbnQ+KCk7XG4gIHJlYWRvbmx5IGJhZGdlVHlwZSA9IGlucHV0PEJhZGdlVHlwZT4oKTtcbiAgcmVhZG9ubHkgYmFkZ2VJY29uID0gaW5wdXQ8UmVndWxhckljb25JZEtleSB8IFRvZ2dsYWJsZUljb25JZEtleT4oXCJzZXR0aW5nc1wiKTtcblxuICByZWFkb25seSBidXR0b25JY29uU2l6ZSA9IGNvbXB1dGVkKCgpID0+IGJ1dHRvbkljb25TaXplW3RoaXMuc2l6ZSgpXSk7XG5cbiAgcmVhZG9ubHkgaXNWYWxpZEljb25OYW1lID0gY29tcHV0ZWQoKCkgPT4gaXNWYWxpZEljb25OYW1lKHRoaXMubmFtZSgpKSk7XG5cbiAgcmVhZG9ubHkgY2xpY2sgPSBvdXRwdXQ8TW91c2VFdmVudCB8IEtleWJvYXJkRXZlbnQ+KCk7XG5cbiAgcmVhZG9ubHkgc2hvdWxkRGlzcGxheUJhZGdlID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGNvbnN0IGNvdW50ID0gdGhpcy5iYWRnZUNvdW50KCk7XG4gICAgY29uc3QgY29udGVudCA9IHRoaXMuYmFkZ2VDb250ZW50KCk7XG5cbiAgICByZXR1cm4gKGNvdW50ICYmIGNvdW50ID4gMCAmJiBjb250ZW50ID09PSBcIm51bWJlclwiKSB8fCBjb250ZW50ID09PSBcImljb25cIjtcbiAgfSk7XG5cbiAgb25DbGljayhldmVudDogTW91c2VFdmVudCB8IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLmNsaWNrLmVtaXQoZXZlbnQpO1xuICB9XG59XG4iLCJAaWYgKHNob3VsZERpc3BsYXlCYWRnZSgpKSB7XG4gIDxidXR0b25cbiAgICAqbmdJZj1cImlzVmFsaWRJY29uTmFtZVwiXG4gICAgY2xhc3M9XCJydGUtaWNvbi1idXR0b24ge3sgdmFyaWFudCgpIH19IHNpemUte3sgc2l6ZSgpIH19XCJcbiAgICBydGVCYWRnZVxuICAgIFtjbGFzcy5jb21wYWN0LXNwYWNpbmddPVwiY29tcGFjdFNwYWNpbmcoKVwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkKClcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsKClcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJhcmlhTGFiZWxsZWRCeSgpXCJcbiAgICBbdHlwZV09XCJ0eXBlKClcIlxuICAgIFtydGVCYWRnZVR5cGVdPVwiYmFkZ2VUeXBlKCkhXCJcbiAgICBbcnRlQmFkZ2VTaXplXT1cInNpemUoKVwiXG4gICAgW3J0ZUJhZGdlQ29udGVudF09XCJzaXplKCkgPT09ICdzJyA/ICdlbXB0eScgOiBiYWRnZUNvbnRlbnQoKSFcIlxuICAgIFtydGVCYWRnZUNvdW50XT1cImJhZGdlQ291bnQoKSFcIlxuICAgIFtydGVCYWRnZUljb25dPVwiYmFkZ2VJY29uKCkhXCJcbiAgICAoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCJcbiAgPlxuICAgIDxydGUtaWNvblxuICAgICAgW25hbWVdPVwibmFtZSgpXCJcbiAgICAgIFthcHBlYXJhbmNlXT1cImFwcGVhcmFuY2UoKVwiXG4gICAgICBbc2l6ZV09XCJidXR0b25JY29uU2l6ZSgpXCJcbiAgICAvPlxuICA8L2J1dHRvbj5cbn0gQGVsc2Uge1xuICA8YnV0dG9uXG4gICAgKm5nSWY9XCJpc1ZhbGlkSWNvbk5hbWVcIlxuICAgIGNsYXNzPVwicnRlLWljb24tYnV0dG9uIHt7IHZhcmlhbnQoKSB9fSBzaXplLXt7IHNpemUoKSB9fVwiXG4gICAgW2NsYXNzLmNvbXBhY3Qtc3BhY2luZ109XCJjb21wYWN0U3BhY2luZygpXCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWwoKVwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImFyaWFMYWJlbGxlZEJ5KClcIlxuICAgIFt0eXBlXT1cInR5cGUoKVwiXG4gICAgKGNsaWNrKT1cIm9uQ2xpY2soJGV2ZW50KVwiXG4gID5cbiAgICA8cnRlLWljb25cbiAgICAgIFtuYW1lXT1cIm5hbWUoKVwiXG4gICAgICBbYXBwZWFyYW5jZV09XCJhcHBlYXJhbmNlKClcIlxuICAgICAgW3NpemVdPVwiYnV0dG9uSWNvblNpemUoKVwiXG4gICAgLz5cbiAgPC9idXR0b24+XG59XG4iXX0=
|
|
@@ -34,7 +34,7 @@ export class IconButtonToggleComponent {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
37
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: IconButtonToggleComponent, isStandalone: true, selector: "rte-icon-button-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, defaultSelected: { classPropertyName: "defaultSelected", publicName: "defaultSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<rte-icon-button \n [size]=\"size()\" \n [name]=\"name()\" \n [compactSpacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n [variant]=\"variant()\"\n [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n (click)=\"onClick($event)\"\n/>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
37
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: IconButtonToggleComponent, isStandalone: true, selector: "rte-icon-button-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, defaultSelected: { classPropertyName: "defaultSelected", publicName: "defaultSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<rte-icon-button \n [size]=\"size()\" \n [name]=\"name()\" \n [compactSpacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n [variant]=\"variant()\"\n [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n (click)=\"onClick($event)\"\n/>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
38
38
|
}
|
|
39
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonToggleComponent, decorators: [{
|
|
40
40
|
type: Component,
|