@design-system-rte/angular 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/badge/badge.component.mjs +7 -3
- package/esm2022/lib/components/breadcrumbs/breadcrumb-item/breadcrumb-item.component.mjs +1 -1
- package/esm2022/lib/components/breadcrumbs/breadcrumbs.component.mjs +2 -2
- package/esm2022/lib/components/chip/chip.component.mjs +4 -3
- package/esm2022/lib/components/dropdown/dropdown-item/dropdown-item.component.mjs +4 -3
- package/esm2022/lib/components/dropdown/dropdown.directive.mjs +8 -3
- package/esm2022/lib/components/segmented-control/segmented-control.component.mjs +1 -1
- package/esm2022/lib/components/select/select-footer.directive.mjs +17 -0
- package/esm2022/lib/components/select/select-header.directive.mjs +17 -0
- package/esm2022/lib/components/select/select.component.mjs +177 -39
- package/esm2022/lib/components/side-nav/nav-item/nav-item.component.mjs +2 -2
- package/esm2022/lib/components/side-nav/nav-menu/nav-menu.component.mjs +2 -2
- package/esm2022/lib/components/split-button/split-button.component.mjs +2 -2
- package/esm2022/lib/components/tab/tab-item/tab-item.component.mjs +1 -1
- package/esm2022/lib/components/tab/tab.component.mjs +2 -2
- package/fesm2022/design-system-rte-angular.mjs +225 -53
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/lib/components/assistive-text/assistive-text.component.d.ts +1 -1
- package/lib/components/badge/badge.component.d.ts +3 -1
- package/lib/components/chip/chip.component.d.ts +2 -1
- package/lib/components/dropdown/dropdown.directive.d.ts +10 -1
- package/lib/components/segmented-control/segmented-control.component.d.ts +1 -1
- package/lib/components/select/select-footer.directive.d.ts +7 -0
- package/lib/components/select/select-header.directive.d.ts +7 -0
- package/lib/components/select/select.component.d.ts +35 -16
- package/lib/components/text-input/base-text-input/base-text-input.component.d.ts +1 -1
- package/package.json +2 -2
|
@@ -41,7 +41,8 @@ import { isStepClickable, focusPreviousNotStepElement, focusNextNotStepElement,
|
|
|
41
41
|
import { ToastDurationMap } from '@design-system-rte/core/components/toast/toast.constants';
|
|
42
42
|
import { getToastPriority } from '@design-system-rte/core/components/toast/toast.utils';
|
|
43
43
|
import { v4 } from 'uuid';
|
|
44
|
-
import {
|
|
44
|
+
import { SELECT_DROPDOWN_OFFSET, THRESHOLD_BOTTOM_POSITION } from '@design-system-rte/core/components/select/select.constants';
|
|
45
|
+
import { getSelectedOption } from '@design-system-rte/core/components/select/select.utils';
|
|
45
46
|
import { ASSISTIVE_TEXT_ICON_SIZE } from '@design-system-rte/core/components/assistive-text/assistive-text.constants';
|
|
46
47
|
import { getIconNameFromAppearance } from '@design-system-rte/core/components/assistive-text/assistive-text.utils';
|
|
47
48
|
import { scrollToSelectedTab } from '@design-system-rte/core/components/tab/tab.utils';
|
|
@@ -820,6 +821,7 @@ class BadgeComponent {
|
|
|
820
821
|
this.count = input();
|
|
821
822
|
this.icon = input("notification");
|
|
822
823
|
this.simpleBadge = input(false);
|
|
824
|
+
this.withPlusSign = input(false);
|
|
823
825
|
this.isValidIconName = computed(() => {
|
|
824
826
|
const icon = this.icon();
|
|
825
827
|
return isValidIconName(icon);
|
|
@@ -843,13 +845,16 @@ class BadgeComponent {
|
|
|
843
845
|
count: this.count(),
|
|
844
846
|
iconSize: this.iconSize(),
|
|
845
847
|
}));
|
|
848
|
+
this.badgeText = computed(() => {
|
|
849
|
+
return `${this.withPlusSign() && this.count() && this.count() > 0 ? "+" : ""}${this.displayCount()}`;
|
|
850
|
+
});
|
|
846
851
|
}
|
|
847
852
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
848
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BadgeComponent, isStandalone: true, selector: "rte-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, simpleBadge: { classPropertyName: "simpleBadge", publicName: "simpleBadge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n data-testid=\"badge\"\n [attr.data-simple-badge]=\"simpleBadge()\"\n [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n <span *ngIf=\"showText()\" class=\"badge-text\">\n {{
|
|
853
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BadgeComponent, isStandalone: true, selector: "rte-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, simpleBadge: { classPropertyName: "simpleBadge", publicName: "simpleBadge", isSignal: true, isRequired: false, transformFunction: null }, withPlusSign: { classPropertyName: "withPlusSign", publicName: "withPlusSign", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n data-testid=\"badge\"\n [attr.data-simple-badge]=\"simpleBadge()\"\n [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n <span *ngIf=\"showText()\" class=\"badge-text\">\n {{ badgeText() }}\n </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3px;right:-3px}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
849
854
|
}
|
|
850
855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
851
856
|
type: Component,
|
|
852
|
-
args: [{ selector: "rte-badge", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n data-testid=\"badge\"\n [attr.data-simple-badge]=\"simpleBadge()\"\n [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n <span *ngIf=\"showText()\" class=\"badge-text\">\n {{
|
|
857
|
+
args: [{ selector: "rte-badge", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n data-testid=\"badge\"\n [attr.data-simple-badge]=\"simpleBadge()\"\n [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n <span *ngIf=\"showText()\" class=\"badge-text\">\n {{ badgeText() }}\n </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3px;right:-3px}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"] }]
|
|
853
858
|
}] });
|
|
854
859
|
|
|
855
860
|
class BadgeDirective {
|
|
@@ -1142,11 +1147,11 @@ class DropdownItemComponent {
|
|
|
1142
1147
|
this.destroySubMenu();
|
|
1143
1148
|
}
|
|
1144
1149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1145
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "rte-dropdown-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent", submenuRequest: "submenuRequest" }, ngImport: i0, template: "<ng-container>\n <li\n #itemRef\n class=\"rte-dropdown-item\"\n role=\"menuitem\"\n tabindex=\"0\"\n [attr.data-disabled]=\"item()?.disabled\"\n [attr.data-active]=\"hasChildren() ? subMenuOpen() : item()?.selected\"\n [attr.aria-haspopup]=\"hasChildren() ? 'menu' : null\"\n [attr.aria-expanded]=\"hasChildren() ? subMenuOpen() : null\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus()\"\n >\n <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n <ng-container [ngSwitch]=\"!!item()?.link\">\n <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n >{{ item()?.label }}\n </a>\n <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n </ng-container>\n <rte-icon *ngIf=\"hasChildren()\" name=\"arrow-chevron-right\" />\n <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [badgeType]=\"item()?.badgeType!\"\n [badgeContent]=\"item()?.badgeContent!\"\n [count]=\"item()?.badgeCount\"\n [simpleBadge]=\"true\"\n [icon]=\"item()?.badgeIcon ?? ''\"\n [badgeSize]=\"item()?.badgeSize!\"\n ></rte-badge>\n </li>\n <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n <rte-divider />\n </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }] }); }
|
|
1150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "rte-dropdown-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent", submenuRequest: "submenuRequest" }, ngImport: i0, template: "<ng-container>\n <li\n #itemRef\n class=\"rte-dropdown-item\"\n role=\"menuitem\"\n tabindex=\"0\"\n [attr.data-disabled]=\"item()?.disabled\"\n [attr.data-active]=\"hasChildren() ? subMenuOpen() : item()?.selected\"\n [attr.aria-haspopup]=\"hasChildren() ? 'menu' : null\"\n [attr.aria-expanded]=\"hasChildren() ? subMenuOpen() : null\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus()\"\n >\n <rte-checkbox\n *ngIf=\"item()?.hasCheckbox\"\n [label]=\"item()?.label ?? ''\"\n [id]=\"menuId() + ':' + item()?.id\"\n [checked]=\"item()?.selected ?? false\"\n [disabled]=\"item()?.disabled ?? false\"\n [showLabel]=\"false\"\n [indeterminate]=\"item()?.isIndeterminate ?? false\"\n ></rte-checkbox>\n <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n <ng-container [ngSwitch]=\"!!item()?.link\">\n <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n >{{ item()?.label }}\n </a>\n <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n </ng-container>\n <rte-icon *ngIf=\"hasChildren()\" name=\"arrow-chevron-right\" />\n <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [badgeType]=\"item()?.badgeType!\"\n [badgeContent]=\"item()?.badgeContent!\"\n [count]=\"item()?.badgeCount\"\n [simpleBadge]=\"true\"\n [icon]=\"item()?.badgeIcon ?? ''\"\n [badgeSize]=\"item()?.badgeSize!\"\n ></rte-badge>\n </li>\n <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n <rte-divider />\n </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked"] }] }); }
|
|
1146
1151
|
}
|
|
1147
1152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
|
|
1148
1153
|
type: Component,
|
|
1149
|
-
args: [{ selector: "rte-dropdown-item", imports: [CommonModule, IconComponent, DividerComponent, BadgeComponent], standalone: true, template: "<ng-container>\n <li\n #itemRef\n class=\"rte-dropdown-item\"\n role=\"menuitem\"\n tabindex=\"0\"\n [attr.data-disabled]=\"item()?.disabled\"\n [attr.data-active]=\"hasChildren() ? subMenuOpen() : item()?.selected\"\n [attr.aria-haspopup]=\"hasChildren() ? 'menu' : null\"\n [attr.aria-expanded]=\"hasChildren() ? subMenuOpen() : null\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus()\"\n >\n <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n <ng-container [ngSwitch]=\"!!item()?.link\">\n <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n >{{ item()?.label }}\n </a>\n <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n </ng-container>\n <rte-icon *ngIf=\"hasChildren()\" name=\"arrow-chevron-right\" />\n <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [badgeType]=\"item()?.badgeType!\"\n [badgeContent]=\"item()?.badgeContent!\"\n [count]=\"item()?.badgeCount\"\n [simpleBadge]=\"true\"\n [icon]=\"item()?.badgeIcon ?? ''\"\n [badgeSize]=\"item()?.badgeSize!\"\n ></rte-badge>\n </li>\n <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n <rte-divider />\n </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"] }]
|
|
1154
|
+
args: [{ selector: "rte-dropdown-item", imports: [CommonModule, IconComponent, DividerComponent, BadgeComponent, CheckboxComponent], standalone: true, template: "<ng-container>\n <li\n #itemRef\n class=\"rte-dropdown-item\"\n role=\"menuitem\"\n tabindex=\"0\"\n [attr.data-disabled]=\"item()?.disabled\"\n [attr.data-active]=\"hasChildren() ? subMenuOpen() : item()?.selected\"\n [attr.aria-haspopup]=\"hasChildren() ? 'menu' : null\"\n [attr.aria-expanded]=\"hasChildren() ? subMenuOpen() : null\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus()\"\n >\n <rte-checkbox\n *ngIf=\"item()?.hasCheckbox\"\n [label]=\"item()?.label ?? ''\"\n [id]=\"menuId() + ':' + item()?.id\"\n [checked]=\"item()?.selected ?? false\"\n [disabled]=\"item()?.disabled ?? false\"\n [showLabel]=\"false\"\n [indeterminate]=\"item()?.isIndeterminate ?? false\"\n ></rte-checkbox>\n <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n <ng-container [ngSwitch]=\"!!item()?.link\">\n <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n >{{ item()?.label }}\n </a>\n <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n </ng-container>\n <rte-icon *ngIf=\"hasChildren()\" name=\"arrow-chevron-right\" />\n <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [badgeType]=\"item()?.badgeType!\"\n [badgeContent]=\"item()?.badgeContent!\"\n [count]=\"item()?.badgeCount\"\n [simpleBadge]=\"true\"\n [icon]=\"item()?.badgeIcon ?? ''\"\n [badgeSize]=\"item()?.badgeSize!\"\n ></rte-badge>\n </li>\n <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n <rte-divider />\n </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"] }]
|
|
1150
1155
|
}] });
|
|
1151
1156
|
|
|
1152
1157
|
class DropdownMenuFooterDirective {
|
|
@@ -1449,6 +1454,7 @@ class DropdownDirective {
|
|
|
1449
1454
|
this.rteDropdownAutofocus = input(true);
|
|
1450
1455
|
this.rteDropdownAutoOpen = input(true);
|
|
1451
1456
|
this.rteDropdownWidth = input(null);
|
|
1457
|
+
this.rteCloseOnItemClick = input(true);
|
|
1452
1458
|
this.menuEvent = output();
|
|
1453
1459
|
this.dropdownId = `dropdown_${++DropdownDirective.idCounter}`;
|
|
1454
1460
|
this.overlayService = inject(OverlayService);
|
|
@@ -1460,6 +1466,7 @@ class DropdownDirective {
|
|
|
1460
1466
|
this.cdr = inject(ChangeDetectorRef);
|
|
1461
1467
|
this.clickedOutside = output();
|
|
1462
1468
|
this.closedDropdown = output();
|
|
1469
|
+
this.menuChangeEvent = output();
|
|
1463
1470
|
this.isActive = signal(false);
|
|
1464
1471
|
this.menuInputs = computed(() => {
|
|
1465
1472
|
const menu = this.menu();
|
|
@@ -1537,11 +1544,14 @@ class DropdownDirective {
|
|
|
1537
1544
|
}
|
|
1538
1545
|
onMenuEvent(event) {
|
|
1539
1546
|
this.menuEvent.emit(event);
|
|
1540
|
-
if (!event.item?.children?.length) {
|
|
1547
|
+
if (!event.item?.children?.length && this.rteCloseOnItemClick()) {
|
|
1541
1548
|
this.isActive.set(false);
|
|
1542
1549
|
this.dropdownService.closeAllMenus();
|
|
1543
1550
|
}
|
|
1544
1551
|
}
|
|
1552
|
+
onMenuChangeEvent(event) {
|
|
1553
|
+
this.menuEvent.emit(event);
|
|
1554
|
+
}
|
|
1545
1555
|
ngAfterContentInit() {
|
|
1546
1556
|
const trigger = this.trigger();
|
|
1547
1557
|
if (!trigger)
|
|
@@ -1651,7 +1661,7 @@ class DropdownDirective {
|
|
|
1651
1661
|
}, DROPDOWN_ANIMATION_DURATION);
|
|
1652
1662
|
}
|
|
1653
1663
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1654
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: DropdownDirective, isStandalone: true, selector: "[rteDropdown]", inputs: { rteDropdownId: { classPropertyName: "rteDropdownId", publicName: "rteDropdownId", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownPosition: { classPropertyName: "rteDropdownPosition", publicName: "rteDropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAlignment: { classPropertyName: "rteDropdownAlignment", publicName: "rteDropdownAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownIsOpen: { classPropertyName: "rteDropdownIsOpen", publicName: "rteDropdownIsOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownOffset: { classPropertyName: "rteDropdownOffset", publicName: "rteDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutofocus: { classPropertyName: "rteDropdownAutofocus", publicName: "rteDropdownAutofocus", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutoOpen: { classPropertyName: "rteDropdownAutoOpen", publicName: "rteDropdownAutoOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownWidth: { classPropertyName: "rteDropdownWidth", publicName: "rteDropdownWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuEvent: "menuEvent", clickedOutside: "clickedOutside", closedDropdown: "closedDropdown" }, host: { properties: { "class.dropdown": "true", "attr.data-dropdown-id": "dropdownId" } }, queries: [{ propertyName: "trigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: DropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
1664
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: DropdownDirective, isStandalone: true, selector: "[rteDropdown]", inputs: { rteDropdownId: { classPropertyName: "rteDropdownId", publicName: "rteDropdownId", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownPosition: { classPropertyName: "rteDropdownPosition", publicName: "rteDropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAlignment: { classPropertyName: "rteDropdownAlignment", publicName: "rteDropdownAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownIsOpen: { classPropertyName: "rteDropdownIsOpen", publicName: "rteDropdownIsOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownOffset: { classPropertyName: "rteDropdownOffset", publicName: "rteDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutofocus: { classPropertyName: "rteDropdownAutofocus", publicName: "rteDropdownAutofocus", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutoOpen: { classPropertyName: "rteDropdownAutoOpen", publicName: "rteDropdownAutoOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownWidth: { classPropertyName: "rteDropdownWidth", publicName: "rteDropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, rteCloseOnItemClick: { classPropertyName: "rteCloseOnItemClick", publicName: "rteCloseOnItemClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuEvent: "menuEvent", clickedOutside: "clickedOutside", closedDropdown: "closedDropdown", menuChangeEvent: "menuChangeEvent" }, host: { properties: { "class.dropdown": "true", "attr.data-dropdown-id": "dropdownId" } }, queries: [{ propertyName: "trigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: DropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
1655
1665
|
}
|
|
1656
1666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownDirective, decorators: [{
|
|
1657
1667
|
type: Directive,
|
|
@@ -1765,7 +1775,7 @@ class SplitButtonComponent {
|
|
|
1765
1775
|
}
|
|
1766
1776
|
}
|
|
1767
1777
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1768
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n <button\n class=\"split-button-left size-{{ size() }}\"\n data-testid=\"Main action button\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <rte-icon *ngIf=\"icon()\" [name]=\"icon()!\" [size]=\"splitButtonLeftIconSize()\" />\n <p class=\"split-button-label size-{{ size() }}\">\n {{ label() }}\n </p>\n </button>\n\n <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n <div\n rteDropdown\n style=\"height: 100%\"\n [rteDropdownPosition]=\"internalPosition()\"\n [rteDropdownAlignment]=\"internalAlignment()\"\n [attr.data-testid]=\"'Menu container'\"\n >\n @if (hasBadge()) {\n <button\n class=\"split-button-right size-{{ size() }}\"\n rteBadge\n rteDropdownTrigger\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [rteBadgeType]=\"badgeType()!\"\n [rteBadgeContent]=\"badgeContent()!\"\n [rteBadgeCount]=\"badgeCount()\"\n [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n [attr.data-expanded]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n </div>\n </button>\n } @else {\n <button\n class=\"split-button-right size-{{ size() }}\"\n rteDropdownTrigger\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n [attr.data-expanded]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n </div>\n </button>\n }\n <rte-dropdown-menu [items]=\"options()\" />\n </div>\n</div>\n", styles: [".split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.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}.split-button-container .split-button-left .split-button-label.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}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\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: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "directive", type: BadgeDirective, selector: "[rteBadge]", inputs: ["rteBadgeType", "rteBadgeSize", "rteBadgeContent", "rteBadgeCount", "rteBadgeIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1778
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n <button\n class=\"split-button-left size-{{ size() }}\"\n data-testid=\"Main action button\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <rte-icon *ngIf=\"icon()\" [name]=\"icon()!\" [size]=\"splitButtonLeftIconSize()\" />\n <p class=\"split-button-label size-{{ size() }}\">\n {{ label() }}\n </p>\n </button>\n\n <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n <div\n rteDropdown\n style=\"height: 100%\"\n [rteDropdownPosition]=\"internalPosition()\"\n [rteDropdownAlignment]=\"internalAlignment()\"\n [attr.data-testid]=\"'Menu container'\"\n >\n @if (hasBadge()) {\n <button\n class=\"split-button-right size-{{ size() }}\"\n rteBadge\n rteDropdownTrigger\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [rteBadgeType]=\"badgeType()!\"\n [rteBadgeContent]=\"badgeContent()!\"\n [rteBadgeCount]=\"badgeCount()\"\n [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n [attr.data-expanded]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n </div>\n </button>\n } @else {\n <button\n class=\"split-button-right size-{{ size() }}\"\n rteDropdownTrigger\n data-testid=\"Menu button\"\n type=\"button\"\n aria-haspopup=\"menu\"\n [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n [attr.data-expanded]=\"isOpen()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabelRight()\"\n [disabled]=\"disabled()\"\n (click)=\"isOpen.set(true)\"\n (keydown)=\"handleKeyDownOnRightButton($event)\"\n >\n <div class=\"split-button-right-icon-container\">\n <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n </div>\n </button>\n }\n <rte-dropdown-menu [items]=\"options()\" />\n </div>\n</div>\n", styles: [".split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.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}.split-button-container .split-button-left .split-button-label.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}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\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: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth", "rteCloseOnItemClick"], outputs: ["menuEvent", "clickedOutside", "closedDropdown", "menuChangeEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "directive", type: BadgeDirective, selector: "[rteBadge]", inputs: ["rteBadgeType", "rteBadgeSize", "rteBadgeContent", "rteBadgeCount", "rteBadgeIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1769
1779
|
}
|
|
1770
1780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
1771
1781
|
type: Component,
|
|
@@ -1986,6 +1996,7 @@ class ChipComponent {
|
|
|
1986
1996
|
this.close = output();
|
|
1987
1997
|
this.isCheckable = computed(() => this.type() === "single" || this.type() === "multi");
|
|
1988
1998
|
this.role = computed(() => CHIP_TYPE_TO_ARIA_ROLE_MAP[this.type()] || null);
|
|
1999
|
+
this.isFocusable = computed(() => this.type() !== "input");
|
|
1989
2000
|
}
|
|
1990
2001
|
onClick(event) {
|
|
1991
2002
|
event.stopPropagation();
|
|
@@ -2024,11 +2035,11 @@ class ChipComponent {
|
|
|
2024
2035
|
}
|
|
2025
2036
|
}
|
|
2026
2037
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2027
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ChipComponent, isStandalone: true, selector: "rte-chip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, ngImport: i0, template: "<span\n class=\"chip\"\n tabindex=\"0\"\n [attr.role]=\"role()\"\n [attr.data-selected]=\"isCheckable() ? selected() : null\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-type]=\"type()\"\n [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n [attr.aria-disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n>\n <ng-container *ngIf=\"type() === 'multi'\">\n <span class=\"chip-icon-container\">\n <span class=\"chip-icon\" [class.chip-icon--visible]=\"selected()\" [attr.aria-hidden]=\"!selected()\">\n <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n </span>\n <span class=\"chip-icon\" [class.chip-icon--visible]=\"!selected()\" [attr.aria-hidden]=\"selected()\">\n <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n </span>\n </span>\n </ng-container>\n <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n <button\n *ngIf=\"type() === 'input'\"\n type=\"button\"\n class=\"chip-close-button\"\n [attr.aria-label]=\"'Supprimer ' + label()\"\n [disabled]=\"disabled()\"\n [value]=\"label()\"\n (click)=\"onCloseClick($event)\"\n >\n <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n </button>\n</span>\n", styles: [".chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;padding:0 6px}.chip-label[data-type=input]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2038
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ChipComponent, isStandalone: true, selector: "rte-chip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, ngImport: i0, template: "<span\n class=\"chip\"\n [tabindex]=\"isFocusable() ? 0 : -1\"\n [attr.role]=\"role()\"\n [attr.data-selected]=\"isCheckable() ? selected() : null\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-type]=\"type()\"\n [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n [attr.aria-disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n>\n <ng-container *ngIf=\"type() === 'multi'\">\n <span class=\"chip-icon-container\">\n <span class=\"chip-icon\" [class.chip-icon--visible]=\"selected()\" [attr.aria-hidden]=\"!selected()\">\n <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n </span>\n <span class=\"chip-icon\" [class.chip-icon--visible]=\"!selected()\" [attr.aria-hidden]=\"selected()\">\n <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n </span>\n </span>\n </ng-container>\n <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n <button\n *ngIf=\"type() === 'input'\"\n type=\"button\"\n class=\"chip-close-button\"\n [attr.aria-label]=\"'Supprimer ' + label()\"\n [disabled]=\"disabled()\"\n [value]=\"label()\"\n (click)=\"onCloseClick($event)\"\n >\n <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n </button>\n</span>\n", styles: [".chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;padding:0 6px}.chip-label[data-type=input]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2028
2039
|
}
|
|
2029
2040
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, decorators: [{
|
|
2030
2041
|
type: Component,
|
|
2031
|
-
args: [{ selector: "rte-chip", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"chip\"\n tabindex=\"0\"\n [attr.role]=\"role()\"\n [attr.data-selected]=\"isCheckable() ? selected() : null\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-type]=\"type()\"\n [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n [attr.aria-disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n>\n <ng-container *ngIf=\"type() === 'multi'\">\n <span class=\"chip-icon-container\">\n <span class=\"chip-icon\" [class.chip-icon--visible]=\"selected()\" [attr.aria-hidden]=\"!selected()\">\n <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n </span>\n <span class=\"chip-icon\" [class.chip-icon--visible]=\"!selected()\" [attr.aria-hidden]=\"selected()\">\n <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n </span>\n </span>\n </ng-container>\n <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n <button\n *ngIf=\"type() === 'input'\"\n type=\"button\"\n class=\"chip-close-button\"\n [attr.aria-label]=\"'Supprimer ' + label()\"\n [disabled]=\"disabled()\"\n [value]=\"label()\"\n (click)=\"onCloseClick($event)\"\n >\n <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n </button>\n</span>\n", styles: [".chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;padding:0 6px}.chip-label[data-type=input]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
2042
|
+
args: [{ selector: "rte-chip", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"chip\"\n [tabindex]=\"isFocusable() ? 0 : -1\"\n [attr.role]=\"role()\"\n [attr.data-selected]=\"isCheckable() ? selected() : null\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-type]=\"type()\"\n [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n [attr.aria-disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n>\n <ng-container *ngIf=\"type() === 'multi'\">\n <span class=\"chip-icon-container\">\n <span class=\"chip-icon\" [class.chip-icon--visible]=\"selected()\" [attr.aria-hidden]=\"!selected()\">\n <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n </span>\n <span class=\"chip-icon\" [class.chip-icon--visible]=\"!selected()\" [attr.aria-hidden]=\"selected()\">\n <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n </span>\n </span>\n </ng-container>\n <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n <button\n *ngIf=\"type() === 'input'\"\n type=\"button\"\n class=\"chip-close-button\"\n [attr.aria-label]=\"'Supprimer ' + label()\"\n [disabled]=\"disabled()\"\n [value]=\"label()\"\n (click)=\"onCloseClick($event)\"\n >\n <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n </button>\n</span>\n", styles: [".chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;padding:0 6px}.chip-label[data-type=input]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
2032
2043
|
}] });
|
|
2033
2044
|
|
|
2034
2045
|
class TextareaComponent {
|
|
@@ -2261,7 +2272,7 @@ class SegmentedControlComponent {
|
|
|
2261
2272
|
}
|
|
2262
2273
|
}
|
|
2263
2274
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2264
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SegmentedControlComponent, isStandalone: true, selector: "rte-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedSegment: { classPropertyName: "selectedSegment", publicName: "selectedSegment", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "segmentRefs", predicate: ["segment"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"isValidOptions()\"\n class=\"rte-segmented-control\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-number-of-segments]=\"options().length\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n>\n <span\n class=\"rte-segment-selected-indicator\"\n [ngStyle]=\"segmentSelectedIndicatorStyle()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n ></span>\n <ng-container *ngFor=\"let option of options(); let idx = index\">\n <div\n class=\"rte-segment-container\"\n [attr.data-position]=\"getSegmentPosition(idx)\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n >\n <div\n #segment\n role=\"radio\"\n class=\"rte-segment\"\n tabindex=\"0\"\n [attr.data-id]=\"option.id\"\n [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [class.selected]=\"isSegmentSelected(option.id)\"\n [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n [attr.aria-label]=\"option.label\"\n (click)=\"selectSegment(option.id)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n >\n <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n <div class=\"rte-segment-content\">\n <ng-container *ngIf=\"option.icon; else label\">\n <rte-icon\n [name]=\"option.icon\"\n [size]=\"compactSpacing() ? 20 : 24\"\n [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n ></rte-icon>\n </ng-container>\n <ng-template #label>\n <span class=\"rte-segment-label\">{{ option.label }}</span>\n </ng-template>\n </div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge(option)\"\n [count]=\"option.badgeCount\"\n [badgeContent]=\"option.badgeContent!\"\n [icon]=\"option.badgeIcon!\"\n [badgeType]=\"option.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"option.badgeSize!\"\n ></rte-badge>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segmented-control[data-compact-spacing=true]{min-width:80px}.rte-segmented-control[data-compact-spacing=true][data-number-of-segments=\"3\"]{min-width:128px}.rte-segment-selected-indicator{position:absolute;top:4px;height:32px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-selected-indicator[data-compact-spacing=true]{height:24px}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden;height:40px;box-sizing:border-box}.rte-segment-container[data-compact-spacing=true]{height:32px;padding:0 2px}.rte-segment-container[data-appearance=neutral]{border-top:1px solid var(--border-tertiary);border-bottom:1px solid var(--border-tertiary);background:var(--background-neutral-regular-default)}.rte-segment-container[data-appearance=neutral][data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-tertiary);padding-left:4px}.rte-segment-container[data-appearance=neutral][data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-tertiary);padding-right:4px}.rte-segment-container[data-appearance=neutral] .rte-segment-label,.rte-segment-container[data-appearance=neutral] .rte-segment{color:var(--content-secondary)}.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-segment-content,.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-segment-label,.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-selected-icon{color:var(--content-primary)}.rte-segment-container[data-appearance=neutral] .rte-segment:hover:not(.selected){background:var(--background-neutral-regular-hover);cursor:pointer}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);padding-right:4px}.rte-segment{display:flex;padding:2px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;width:100%;z-index:0;height:32px;box-sizing:border-box}.rte-segment[data-compact-spacing=true]{padding:0 8px;height:24px}.rte-segment[data-compact-spacing=true] .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:0px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:-2px}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{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;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SegmentedControlComponent, isStandalone: true, selector: "rte-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedSegment: { classPropertyName: "selectedSegment", publicName: "selectedSegment", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "segmentRefs", predicate: ["segment"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"isValidOptions()\"\n class=\"rte-segmented-control\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-number-of-segments]=\"options().length\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n>\n <span\n class=\"rte-segment-selected-indicator\"\n [ngStyle]=\"segmentSelectedIndicatorStyle()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n ></span>\n <ng-container *ngFor=\"let option of options(); let idx = index\">\n <div\n class=\"rte-segment-container\"\n [attr.data-position]=\"getSegmentPosition(idx)\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n >\n <div\n #segment\n role=\"radio\"\n class=\"rte-segment\"\n tabindex=\"0\"\n [attr.data-id]=\"option.id\"\n [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [class.selected]=\"isSegmentSelected(option.id)\"\n [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n [attr.aria-label]=\"option.label\"\n (click)=\"selectSegment(option.id)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n >\n <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n <div class=\"rte-segment-content\">\n <ng-container *ngIf=\"option.icon; else label\">\n <rte-icon\n [name]=\"option.icon\"\n [size]=\"compactSpacing() ? 20 : 24\"\n [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n ></rte-icon>\n </ng-container>\n <ng-template #label>\n <span class=\"rte-segment-label\">{{ option.label }}</span>\n </ng-template>\n </div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge(option)\"\n [count]=\"option.badgeCount\"\n [badgeContent]=\"option.badgeContent!\"\n [icon]=\"option.badgeIcon!\"\n [badgeType]=\"option.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"option.badgeSize!\"\n ></rte-badge>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segmented-control[data-compact-spacing=true]{min-width:80px}.rte-segmented-control[data-compact-spacing=true][data-number-of-segments=\"3\"]{min-width:128px}.rte-segment-selected-indicator{position:absolute;top:4px;height:32px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-selected-indicator[data-compact-spacing=true]{height:24px}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden;height:40px;box-sizing:border-box}.rte-segment-container[data-compact-spacing=true]{height:32px;padding:0 2px}.rte-segment-container[data-appearance=neutral]{border-top:1px solid var(--border-tertiary);border-bottom:1px solid var(--border-tertiary);background:var(--background-neutral-regular-default)}.rte-segment-container[data-appearance=neutral][data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-tertiary);padding-left:4px}.rte-segment-container[data-appearance=neutral][data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-tertiary);padding-right:4px}.rte-segment-container[data-appearance=neutral] .rte-segment-label,.rte-segment-container[data-appearance=neutral] .rte-segment{color:var(--content-secondary)}.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-segment-content,.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-segment-label,.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-selected-icon{color:var(--content-primary)}.rte-segment-container[data-appearance=neutral] .rte-segment:hover:not(.selected){background:var(--background-neutral-regular-hover);cursor:pointer}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);padding-right:4px}.rte-segment{display:flex;padding:2px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;width:100%;z-index:0;height:32px;box-sizing:border-box}.rte-segment[data-compact-spacing=true]{padding:0 8px;height:24px}.rte-segment[data-compact-spacing=true] .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:0px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:-2px}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{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;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2265
2276
|
}
|
|
2266
2277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
2267
2278
|
type: Component,
|
|
@@ -2306,7 +2317,7 @@ class BreadcrumbItemComponent {
|
|
|
2306
2317
|
this.initialScrollWidth.set(el.scrollWidth);
|
|
2307
2318
|
}
|
|
2308
2319
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2309
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbItemComponent, isStandalone: true, selector: "rte-breadcrumb-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-breadcrumb-item\">\n @if (isLast()) {\n @if (isEllipsisActive()) {\n <div [rteTooltip]=\"item()!.label\" [rteTooltipPosition]=\"'bottom'\" [style]=\"tooltipTriggerStyle()\">\n <a role=\"link\" aria-current=\"page\" tabindex=\"-1\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n {{ item()!.label }}\n </a>\n </div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"item()!.badgeCount\"\n [badgeContent]=\"item()!.badgeContent!\"\n [icon]=\"item()!.badgeIcon!\"\n [badgeType]=\"item()!.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"item()!.badgeSize!\"\n />\n } @else {\n <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n {{ item()!.label }}\n </a>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"item()!.badgeCount\"\n [badgeContent]=\"item()!.badgeContent!\"\n [icon]=\"item()!.badgeIcon!\"\n [badgeType]=\"item()!.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"item()!.badgeSize!\"\n />\n }\n } @else {\n @if (isEllipsisActive()) {\n <div\n [rteTooltip]=\"item()!.label\"\n [rteTooltipPosition]=\"'bottom'\"\n [style]=\"tooltipTriggerStyle()\"\n [style.overflow]=\"'unset'\"\n [rteTooltipShouldFocusTrigger]=\"false\"\n >\n <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n </div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"item()!.badgeCount\"\n [badgeContent]=\"item()!.badgeContent!\"\n [icon]=\"item()!.badgeIcon!\"\n [badgeType]=\"item()!.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"item()!.badgeSize!\"\n />\n } @else {\n <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"item()!.badgeCount\"\n [badgeContent]=\"item()!.badgeContent!\"\n [icon]=\"item()!.badgeIcon!\"\n [badgeType]=\"item()!.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"item()!.badgeSize!\"\n />\n }\n }\n</div>\n", styles: [".rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;gap:4px;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2320
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbItemComponent, isStandalone: true, selector: "rte-breadcrumb-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-breadcrumb-item\">\n @if (isLast()) {\n @if (isEllipsisActive()) {\n <div [rteTooltip]=\"item()!.label\" [rteTooltipPosition]=\"'bottom'\" [style]=\"tooltipTriggerStyle()\">\n <a role=\"link\" aria-current=\"page\" tabindex=\"-1\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n {{ item()!.label }}\n </a>\n </div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"item()!.badgeCount\"\n [badgeContent]=\"item()!.badgeContent!\"\n [icon]=\"item()!.badgeIcon!\"\n [badgeType]=\"item()!.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"item()!.badgeSize!\"\n />\n } @else {\n <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n {{ item()!.label }}\n </a>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"item()!.badgeCount\"\n [badgeContent]=\"item()!.badgeContent!\"\n [icon]=\"item()!.badgeIcon!\"\n [badgeType]=\"item()!.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"item()!.badgeSize!\"\n />\n }\n } @else {\n @if (isEllipsisActive()) {\n <div\n [rteTooltip]=\"item()!.label\"\n [rteTooltipPosition]=\"'bottom'\"\n [style]=\"tooltipTriggerStyle()\"\n [style.overflow]=\"'unset'\"\n [rteTooltipShouldFocusTrigger]=\"false\"\n >\n <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n </div>\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"item()!.badgeCount\"\n [badgeContent]=\"item()!.badgeContent!\"\n [icon]=\"item()!.badgeIcon!\"\n [badgeType]=\"item()!.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"item()!.badgeSize!\"\n />\n } @else {\n <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"item()!.badgeCount\"\n [badgeContent]=\"item()!.badgeContent!\"\n [icon]=\"item()!.badgeIcon!\"\n [badgeType]=\"item()!.badgeType!\"\n [simpleBadge]=\"true\"\n [badgeSize]=\"item()!.badgeSize!\"\n />\n }\n }\n</div>\n", styles: [".rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;gap:4px;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2310
2321
|
}
|
|
2311
2322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
|
|
2312
2323
|
type: Component,
|
|
@@ -2340,7 +2351,7 @@ class BreadcrumbsComponent {
|
|
|
2340
2351
|
});
|
|
2341
2352
|
}
|
|
2342
2353
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2343
|
-
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 }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", 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 [item]=\"truncatedItems()!.root\" [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\" />\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 tabindex=\"-1\"\n [compactSpacing]=\"true\"\n />\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"badgeCount()\"\n [simpleBadge]=\"true\"\n [badgeContent]=\"badgeContent()!\"\n [icon]=\"badgeIcon()!\"\n [badgeType]=\"badgeType()!\"\n [badgeSize]=\"badgeSize()!\"\n />\n <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n </span>\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\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: [".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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "rte-breadcrumb-item", inputs: ["item", "isLast", "breadcrumbItemMaxWidth"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2354
|
+
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 }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", 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 [item]=\"truncatedItems()!.root\" [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\" />\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 tabindex=\"-1\"\n [compactSpacing]=\"true\"\n />\n <rte-badge\n *ngIf=\"shouldDisplayBadge()\"\n [count]=\"badgeCount()\"\n [simpleBadge]=\"true\"\n [badgeContent]=\"badgeContent()!\"\n [icon]=\"badgeIcon()!\"\n [badgeType]=\"badgeType()!\"\n [badgeSize]=\"badgeSize()!\"\n />\n <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n </span>\n <span aria-hidden=\"true\" class=\"separator\">/</span>\n @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\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: [".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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth", "rteCloseOnItemClick"], outputs: ["menuEvent", "clickedOutside", "closedDropdown", "menuChangeEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "rte-breadcrumb-item", inputs: ["item", "isLast", "breadcrumbItemMaxWidth"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2344
2355
|
}
|
|
2345
2356
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
2346
2357
|
type: Component,
|
|
@@ -3058,7 +3069,7 @@ class NavItemComponent {
|
|
|
3058
3069
|
this.focused.set(false);
|
|
3059
3070
|
}
|
|
3060
3071
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3061
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavItemComponent, isStandalone: true, selector: "rte-nav-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (collapsed() && label()) {\n @if (link()) {\n <a\n class=\"nav-item-container {{ appearance() }}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipGap]=\"12\"\n [rteTooltipShouldFocusTrigger]=\"true\"\n [href]=\"link()!\"\n [attr.aria-label]=\"label()\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </a>\n } @else {\n <div\n class=\"nav-item-container {{ appearance() }}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipGap]=\"12\"\n [rteTooltipShouldFocusTrigger]=\"false\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n }\n} @else {\n @if (link()) {\n <a\n class=\"nav-item-container {{ appearance() }}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [href]=\"link()!\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </a>\n } @else {\n <div\n class=\"nav-item-container {{ appearance() }}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n }\n}\n\n<ng-template #contentTemplate>\n <span\n class=\"nav-item\"\n [attr.tabindex]=\"link() ? undefined : tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n >\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </span>\n</ng-template>\n", styles: [".nav-item-container{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;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container:link,.nav-item-container:visited,.nav-item-container:link:hover,.nav-item-container:visited:hover{text-decoration:none;color:inherit}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{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;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.nav-item-container:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3072
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavItemComponent, isStandalone: true, selector: "rte-nav-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (collapsed() && label()) {\n @if (link()) {\n <a\n class=\"nav-item-container {{ appearance() }}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipGap]=\"12\"\n [rteTooltipShouldFocusTrigger]=\"true\"\n [href]=\"link()!\"\n [attr.aria-label]=\"label()\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </a>\n } @else {\n <div\n class=\"nav-item-container {{ appearance() }}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipGap]=\"12\"\n [rteTooltipShouldFocusTrigger]=\"false\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n }\n} @else {\n @if (link()) {\n <a\n class=\"nav-item-container {{ appearance() }}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [href]=\"link()!\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </a>\n } @else {\n <div\n class=\"nav-item-container {{ appearance() }}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n }\n}\n\n<ng-template #contentTemplate>\n <span\n class=\"nav-item\"\n [attr.tabindex]=\"link() ? undefined : tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n >\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </span>\n</ng-template>\n", styles: [".nav-item-container{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;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container:link,.nav-item-container:visited,.nav-item-container:link:hover,.nav-item-container:visited:hover{text-decoration:none;color:inherit}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{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;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.nav-item-container:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3062
3073
|
}
|
|
3063
3074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, decorators: [{
|
|
3064
3075
|
type: Component,
|
|
@@ -3136,7 +3147,7 @@ class NavMenuComponent {
|
|
|
3136
3147
|
this.openChange.emit({ id: this.id() || this.label(), open: false });
|
|
3137
3148
|
}
|
|
3138
3149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3139
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavMenuComponent, isStandalone: true, selector: "rte-nav-menu", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showMenuIcon: { classPropertyName: "showMenuIcon", publicName: "showMenuIcon", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", openChange: "openChange" }, ngImport: i0, template: "@if (collapsed() && label()) {\n <li\n class=\"nav-menu-container {{ appearance() }}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [rteTooltipGap]=\"12\"\n [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipShouldFocusTrigger]=\"false\"\n >\n <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n </li>\n} @else {\n <li\n class=\"nav-menu-container {{ appearance() }}\"\n [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n >\n <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n </li>\n}\n\n<ng-template #menuContentTemplate>\n @if (link()) {\n <a\n class=\"nav-menu\"\n [href]=\"link()!\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"toggleMenu()\"\n >\n <div class=\"menu-content-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"menu-content-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n @if (shouldShowMenu() && showMenuIcon()) {\n <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n }\n </div>\n </a>\n } @else {\n <span\n class=\"nav-menu\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"toggleMenu()\"\n (keydown)=\"handleKeyDown($event)\"\n >\n <div class=\"menu-content-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"menu-content-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n @if (shouldShowMenu() && showMenuIcon()) {\n <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n }\n </div>\n </span>\n }\n</ng-template>\n\n<ng-template #nestedMenuTemplate>\n @if (shouldShowMenu()) {\n <ul class=\"nested-menu\" [ngClass]=\"{ 'nested-menu-open': open() }\">\n @if (open()) {\n @for (item of items(); track item.id || item.label) {\n @if (hasNestedItemsForItem(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"collapsed()\"\n [link]=\"item.link\"\n [items]=\"item.items || []\"\n [showMenuIcon]=\"showMenuIcon()\"\n [isNested]=\"true\"\n [open]=\"item.open\"\n [parentMenuOpen]=\"open()\"\n [appearance]=\"appearance()\"\n [showDivider]=\"item.showDivider!\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleMenuClick($event)\"\n (openChange)=\"handleMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"collapsed()\"\n [link]=\"item.link\"\n [isNested]=\"true\"\n [parentMenuOpen]=\"open()\"\n [appearance]=\"appearance()\"\n [showDivider]=\"item.showDivider!\"\n [badge]=\"item.badge\"\n (itemClick)=\"itemClick.emit($event)\"\n />\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n }\n </ul>\n }\n</ng-template>\n\n@if (showDivider()) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n}\n", styles: [":host{display:contents}.nav-menu-container{width:100%;display:flex;flex-direction:column;justify-content:flex-start;border-radius:4px;transition:background-color .3s;box-sizing:border-box}.nav-menu-container.neutral .nav-menu{color:var(--content-secondary)}.nav-menu-container.neutral .nav-menu:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-menu-container.neutral .nav-menu.focused{outline:none}.nav-menu-container.neutral.nested .nav-menu{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-menu-container .nav-menu{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;display:flex;padding:8px 6px;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;justify-content:space-between;width:100%;box-sizing:border-box;cursor:pointer;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-menu-container .nav-menu .menu-content-left{display:flex;align-items:center;gap:8px}.nav-menu-container .nav-menu .menu-content-right{display:flex;align-items:center;gap:4px}.nav-menu-container .nav-menu:hover{border-radius:4px;background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-menu-container .nav-menu:link,.nav-menu-container .nav-menu:link:hover{text-decoration:none;color:inherit}.nav-menu-container .nav-menu:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0;border-radius:4px}.nav-menu-container.collapsed .nav-menu{padding:8px 12px;justify-content:center;gap:0;border-left:none}.nav-menu-container.nested .nav-menu{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;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-menu-container .menu-icon{flex-shrink:0;transition:transform .2s;margin-left:auto}.nav-menu-container .menu-icon-open{transform:rotate(90deg)}.nav-menu-container .nested-menu{list-style:none;margin:0;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;padding:0 0 0 16px;gap:0}.nav-menu-container .nested-menu.nested-menu-open{max-height:1000px;padding-top:4px;padding-bottom:4px}.nav-menu-container .icon{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: NavMenuComponent, selector: "rte-nav-menu", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "items", "open", "showMenuIcon", "isNested", "parentMenuOpen", "appearance", "badge", "showDivider"], outputs: ["itemClick", "openChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: NavItemComponent, selector: "rte-nav-item", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "appearance", "active", "badge", "isNested", "parentMenuOpen", "role", "showDivider"], outputs: ["itemClick"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavMenuComponent, isStandalone: true, selector: "rte-nav-menu", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showMenuIcon: { classPropertyName: "showMenuIcon", publicName: "showMenuIcon", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", openChange: "openChange" }, ngImport: i0, template: "@if (collapsed() && label()) {\n <li\n class=\"nav-menu-container {{ appearance() }}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [rteTooltipGap]=\"12\"\n [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipShouldFocusTrigger]=\"false\"\n >\n <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n </li>\n} @else {\n <li\n class=\"nav-menu-container {{ appearance() }}\"\n [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n >\n <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n </li>\n}\n\n<ng-template #menuContentTemplate>\n @if (link()) {\n <a\n class=\"nav-menu\"\n [href]=\"link()!\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"toggleMenu()\"\n >\n <div class=\"menu-content-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"menu-content-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n @if (shouldShowMenu() && showMenuIcon()) {\n <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n }\n </div>\n </a>\n } @else {\n <span\n class=\"nav-menu\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"toggleMenu()\"\n (keydown)=\"handleKeyDown($event)\"\n >\n <div class=\"menu-content-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"menu-content-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n @if (shouldShowMenu() && showMenuIcon()) {\n <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n }\n </div>\n </span>\n }\n</ng-template>\n\n<ng-template #nestedMenuTemplate>\n @if (shouldShowMenu()) {\n <ul class=\"nested-menu\" [ngClass]=\"{ 'nested-menu-open': open() }\">\n @if (open()) {\n @for (item of items(); track item.id || item.label) {\n @if (hasNestedItemsForItem(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"collapsed()\"\n [link]=\"item.link\"\n [items]=\"item.items || []\"\n [showMenuIcon]=\"showMenuIcon()\"\n [isNested]=\"true\"\n [open]=\"item.open\"\n [parentMenuOpen]=\"open()\"\n [appearance]=\"appearance()\"\n [showDivider]=\"item.showDivider!\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleMenuClick($event)\"\n (openChange)=\"handleMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"collapsed()\"\n [link]=\"item.link\"\n [isNested]=\"true\"\n [parentMenuOpen]=\"open()\"\n [appearance]=\"appearance()\"\n [showDivider]=\"item.showDivider!\"\n [badge]=\"item.badge\"\n (itemClick)=\"itemClick.emit($event)\"\n />\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n }\n </ul>\n }\n</ng-template>\n\n@if (showDivider()) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n}\n", styles: [":host{display:contents}.nav-menu-container{width:100%;display:flex;flex-direction:column;justify-content:flex-start;border-radius:4px;transition:background-color .3s;box-sizing:border-box}.nav-menu-container.neutral .nav-menu{color:var(--content-secondary)}.nav-menu-container.neutral .nav-menu:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-menu-container.neutral .nav-menu.focused{outline:none}.nav-menu-container.neutral.nested .nav-menu{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-menu-container .nav-menu{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;display:flex;padding:8px 6px;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;justify-content:space-between;width:100%;box-sizing:border-box;cursor:pointer;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-menu-container .nav-menu .menu-content-left{display:flex;align-items:center;gap:8px}.nav-menu-container .nav-menu .menu-content-right{display:flex;align-items:center;gap:4px}.nav-menu-container .nav-menu:hover{border-radius:4px;background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-menu-container .nav-menu:link,.nav-menu-container .nav-menu:link:hover{text-decoration:none;color:inherit}.nav-menu-container .nav-menu:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0;border-radius:4px}.nav-menu-container.collapsed .nav-menu{padding:8px 12px;justify-content:center;gap:0;border-left:none}.nav-menu-container.nested .nav-menu{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;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-menu-container .menu-icon{flex-shrink:0;transition:transform .2s;margin-left:auto}.nav-menu-container .menu-icon-open{transform:rotate(90deg)}.nav-menu-container .nested-menu{list-style:none;margin:0;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;padding:0 0 0 16px;gap:0}.nav-menu-container .nested-menu.nested-menu-open{max-height:1000px;padding-top:4px;padding-bottom:4px}.nav-menu-container .icon{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: NavMenuComponent, selector: "rte-nav-menu", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "items", "open", "showMenuIcon", "isNested", "parentMenuOpen", "appearance", "badge", "showDivider"], outputs: ["itemClick", "openChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: NavItemComponent, selector: "rte-nav-item", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "appearance", "active", "badge", "isNested", "parentMenuOpen", "role", "showDivider"], outputs: ["itemClick"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3140
3151
|
}
|
|
3141
3152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavMenuComponent, decorators: [{
|
|
3142
3153
|
type: Component,
|
|
@@ -3582,6 +3593,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3582
3593
|
args: [{ selector: "rte-assistive-text", imports: [CommonModule, IconComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-assistive-text {{ appearance() }}\" [ngStyle]=\"{ width: widthStyle() }\">\n <rte-icon\n *ngIf=\"showIcon() && iconName()\"\n class=\"assistive-icon-{{ appearance() }}\"\n [name]=\"iconName()!\"\n [size]=\"assistiveTextIconSize\"\n ></rte-icon>\n @if (isLink()) {\n <rte-link class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"href() || ''\" [label]=\"label() || ''\">\n </rte-link>\n } @else {\n <span>{{ label() }}</span>\n }\n</div>\n", styles: [".rte-assistive-text{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;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-assistive-text.description{color:var(--content-tertiary);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}\n"] }]
|
|
3583
3594
|
}] });
|
|
3584
3595
|
|
|
3596
|
+
class SelectFooterDirective {
|
|
3597
|
+
constructor() {
|
|
3598
|
+
this.templateRef = inject((TemplateRef), { optional: true });
|
|
3599
|
+
}
|
|
3600
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3601
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SelectFooterDirective, isStandalone: true, selector: "[rteSelectFooter]", ngImport: i0 }); }
|
|
3602
|
+
}
|
|
3603
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectFooterDirective, decorators: [{
|
|
3604
|
+
type: Directive,
|
|
3605
|
+
args: [{
|
|
3606
|
+
selector: "[rteSelectFooter]",
|
|
3607
|
+
standalone: true,
|
|
3608
|
+
}]
|
|
3609
|
+
}] });
|
|
3610
|
+
|
|
3611
|
+
class SelectHeaderDirective {
|
|
3612
|
+
constructor() {
|
|
3613
|
+
this.templateRef = inject((TemplateRef), { optional: true });
|
|
3614
|
+
}
|
|
3615
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3616
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SelectHeaderDirective, isStandalone: true, selector: "[rteSelectHeader]", ngImport: i0 }); }
|
|
3617
|
+
}
|
|
3618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectHeaderDirective, decorators: [{
|
|
3619
|
+
type: Directive,
|
|
3620
|
+
args: [{
|
|
3621
|
+
selector: "[rteSelectHeader]",
|
|
3622
|
+
standalone: true,
|
|
3623
|
+
}]
|
|
3624
|
+
}] });
|
|
3625
|
+
|
|
3585
3626
|
class SelectComponent {
|
|
3586
3627
|
constructor() {
|
|
3587
3628
|
this.id = input();
|
|
@@ -3597,17 +3638,32 @@ class SelectComponent {
|
|
|
3597
3638
|
this.showLabelRequirement = input(false);
|
|
3598
3639
|
this.disabled = input(false);
|
|
3599
3640
|
this.readOnly = input(false);
|
|
3600
|
-
this.value = input();
|
|
3601
3641
|
this.options = input([]);
|
|
3602
3642
|
this.isError = input(false);
|
|
3603
3643
|
this.showAssistiveIcon = input(false);
|
|
3604
3644
|
this.showResetButton = input(false);
|
|
3605
|
-
this.
|
|
3645
|
+
this.multiple = input(false);
|
|
3646
|
+
this.value = input();
|
|
3647
|
+
this.withSelectAll = input(false);
|
|
3648
|
+
this.optionToDisplay = input("first-selected");
|
|
3606
3649
|
this.selectRef = viewChild("selectRef");
|
|
3607
3650
|
this.buttonsContainerRef = viewChild("buttonsContainerRef");
|
|
3608
3651
|
this.selectDropdownOffset = SELECT_DROPDOWN_OFFSET;
|
|
3609
|
-
this.
|
|
3610
|
-
|
|
3652
|
+
this.headerDirective = contentChild(SelectHeaderDirective);
|
|
3653
|
+
this.footerDirective = contentChild(SelectFooterDirective);
|
|
3654
|
+
this.headerTemplate = input(undefined);
|
|
3655
|
+
this.footerTemplate = input(undefined);
|
|
3656
|
+
this.headerContentRef = viewChild("headerContent");
|
|
3657
|
+
this.footerContentRef = viewChild("footerContent");
|
|
3658
|
+
this.hasHeaderContent = computed(() => {
|
|
3659
|
+
const hasTemplate = this.headerDirective()?.templateRef || !!this.headerTemplate();
|
|
3660
|
+
const hasProjectedContent = !!this.headerContentRef()?.nativeElement?.children.length;
|
|
3661
|
+
return hasTemplate || hasProjectedContent;
|
|
3662
|
+
});
|
|
3663
|
+
this.hasFooterContent = computed(() => {
|
|
3664
|
+
const hasTemplate = this.footerDirective()?.templateRef || !!this.footerTemplate();
|
|
3665
|
+
const hasProjectedContent = !!this.footerContentRef()?.nativeElement?.children.length;
|
|
3666
|
+
return hasTemplate || hasProjectedContent;
|
|
3611
3667
|
});
|
|
3612
3668
|
this.clearButton = computed(() => {
|
|
3613
3669
|
return this.buttonsContainerRef()?.nativeElement.querySelector(".rte-icon-button.clear-button");
|
|
@@ -3621,6 +3677,11 @@ class SelectComponent {
|
|
|
3621
3677
|
}
|
|
3622
3678
|
return "bottom";
|
|
3623
3679
|
});
|
|
3680
|
+
this.optionsFormatted = signal(this.options().map(({ value, label }) => ({
|
|
3681
|
+
id: value,
|
|
3682
|
+
label: label,
|
|
3683
|
+
selected: this.isSelected(value),
|
|
3684
|
+
})));
|
|
3624
3685
|
this.internalValue = signal(this.value());
|
|
3625
3686
|
this.requirementIndicatorValue = computed(() => this.required()
|
|
3626
3687
|
? this.showLabelRequirement()
|
|
@@ -3628,20 +3689,8 @@ class SelectComponent {
|
|
|
3628
3689
|
: REQUIREMENT_INDICATOR_VALUE.requiredIcon
|
|
3629
3690
|
: REQUIREMENT_INDICATOR_VALUE.optional);
|
|
3630
3691
|
this.valueChange = output();
|
|
3631
|
-
this.
|
|
3632
|
-
|
|
3633
|
-
});
|
|
3634
|
-
this.isAssistiveTextLinkVisible = computed(() => {
|
|
3635
|
-
return this.assistiveTextAppearance() === "link" && this.assistiveTextLink() !== undefined;
|
|
3636
|
-
});
|
|
3637
|
-
this.formattedOptions = computed(() => {
|
|
3638
|
-
return this.options().map(({ value, label }) => ({
|
|
3639
|
-
id: value,
|
|
3640
|
-
label: label,
|
|
3641
|
-
selected: value === this.internalValue(),
|
|
3642
|
-
}));
|
|
3643
|
-
});
|
|
3644
|
-
this.shouldDisplayClearButton = computed(() => this.showResetButton() && !!this.internalValue() && !this.disabled());
|
|
3692
|
+
this.currentDisplayedOption = signal(getSelectedOption(this.optionToDisplay() || "first-selected", this.options(), this.internalValue()));
|
|
3693
|
+
this.shouldDisplayClearButton = signal(false);
|
|
3645
3694
|
this.shouldDisplayErrorIcon = computed(() => this.isError() && !this.disabled() && !this.readOnly());
|
|
3646
3695
|
this.isActive = signal(false);
|
|
3647
3696
|
this.selectWidth = computed(() => {
|
|
@@ -3652,6 +3701,13 @@ class SelectComponent {
|
|
|
3652
3701
|
return null;
|
|
3653
3702
|
});
|
|
3654
3703
|
}
|
|
3704
|
+
ngAfterViewInit() {
|
|
3705
|
+
this.regenerateOptionsFormatted();
|
|
3706
|
+
this.computeShouldDisplayClearButton();
|
|
3707
|
+
}
|
|
3708
|
+
areAllOptionsSelected() {
|
|
3709
|
+
return this.multiple() && this.options().every((option) => this.internalValue()?.includes(option.value));
|
|
3710
|
+
}
|
|
3655
3711
|
handleOnClickTrigger() {
|
|
3656
3712
|
if (this.readOnly() || this.disabled()) {
|
|
3657
3713
|
return;
|
|
@@ -3666,7 +3722,7 @@ class SelectComponent {
|
|
|
3666
3722
|
const clearButton = this.buttonsContainerRef()?.nativeElement.children[0].children[0];
|
|
3667
3723
|
const isClearButtonFocused = document.activeElement === clearButton;
|
|
3668
3724
|
if (isClearButtonFocused && (event.key === SPACE_KEY || event.key === ENTER_KEY)) {
|
|
3669
|
-
this.clearSelection(
|
|
3725
|
+
this.clearSelection();
|
|
3670
3726
|
return;
|
|
3671
3727
|
}
|
|
3672
3728
|
}
|
|
@@ -3674,24 +3730,53 @@ class SelectComponent {
|
|
|
3674
3730
|
this.toggleDropdown();
|
|
3675
3731
|
}
|
|
3676
3732
|
}
|
|
3733
|
+
handleOnCloseChip(event, value) {
|
|
3734
|
+
event.stopPropagation();
|
|
3735
|
+
if (this.readOnly() || this.disabled()) {
|
|
3736
|
+
return;
|
|
3737
|
+
}
|
|
3738
|
+
if (this.multiple() && value) {
|
|
3739
|
+
const currentValue = this.internalValue();
|
|
3740
|
+
if (currentValue && Array.isArray(currentValue)) {
|
|
3741
|
+
const valueIndex = currentValue.indexOf(value);
|
|
3742
|
+
if (valueIndex > -1) {
|
|
3743
|
+
currentValue.splice(valueIndex, 1);
|
|
3744
|
+
this.internalValue.set(currentValue);
|
|
3745
|
+
this.regenerateOptionsFormatted();
|
|
3746
|
+
this.valueChange.emit(value);
|
|
3747
|
+
this.currentDisplayedOption.set(getSelectedOption(this.optionToDisplay() || "first-selected", this.options(), this.internalValue()));
|
|
3748
|
+
this.computeShouldDisplayClearButton();
|
|
3749
|
+
}
|
|
3750
|
+
}
|
|
3751
|
+
}
|
|
3752
|
+
}
|
|
3677
3753
|
handleOnClickClearButton(event) {
|
|
3678
3754
|
if (this.readOnly() || this.disabled()) {
|
|
3679
3755
|
return;
|
|
3680
3756
|
}
|
|
3681
|
-
event.
|
|
3682
|
-
this.clearSelection(
|
|
3757
|
+
event.stopPropagation();
|
|
3758
|
+
this.clearSelection();
|
|
3683
3759
|
}
|
|
3684
|
-
handleOnClickItem(
|
|
3760
|
+
handleOnClickItem(value) {
|
|
3685
3761
|
if (this.readOnly() || this.disabled()) {
|
|
3686
3762
|
return;
|
|
3687
3763
|
}
|
|
3688
|
-
this.
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3764
|
+
if (this.multiple()) {
|
|
3765
|
+
if (value === "select-all") {
|
|
3766
|
+
this.clickedSelectAll();
|
|
3767
|
+
}
|
|
3768
|
+
else {
|
|
3769
|
+
this.clickedSelectItemMultiple(value);
|
|
3770
|
+
}
|
|
3771
|
+
}
|
|
3772
|
+
else {
|
|
3773
|
+
this.internalValue.set(value);
|
|
3774
|
+
this.isActive.set(!this.isActive());
|
|
3775
|
+
}
|
|
3776
|
+
this.regenerateOptionsFormatted();
|
|
3777
|
+
this.valueChange.emit(value);
|
|
3778
|
+
this.currentDisplayedOption.set(getSelectedOption(this.optionToDisplay() || "first-selected", this.options(), this.internalValue()));
|
|
3779
|
+
this.computeShouldDisplayClearButton();
|
|
3695
3780
|
this.selectRef()?.nativeElement.focus();
|
|
3696
3781
|
}
|
|
3697
3782
|
handleOnClosingDropdown() {
|
|
@@ -3709,30 +3794,117 @@ class SelectComponent {
|
|
|
3709
3794
|
this.selectRef()?.nativeElement.dispatchEvent(new Event("closeDropdown"));
|
|
3710
3795
|
}
|
|
3711
3796
|
}
|
|
3712
|
-
clearSelection(
|
|
3713
|
-
this.
|
|
3797
|
+
clearSelection() {
|
|
3798
|
+
if (!this.multiple()) {
|
|
3799
|
+
this.internalValue.set("");
|
|
3800
|
+
}
|
|
3801
|
+
else {
|
|
3802
|
+
this.internalValue.set([]);
|
|
3803
|
+
}
|
|
3714
3804
|
this.isActive.set(false);
|
|
3715
|
-
this.valueChange.emit(
|
|
3805
|
+
this.valueChange.emit("select-all");
|
|
3716
3806
|
this.selectRef()?.nativeElement.dispatchEvent(new Event("clearContent"));
|
|
3807
|
+
this.regenerateOptionsFormatted();
|
|
3808
|
+
this.currentDisplayedOption.set(getSelectedOption(this.optionToDisplay() || "first-selected", this.options(), this.internalValue()));
|
|
3809
|
+
this.computeShouldDisplayClearButton();
|
|
3810
|
+
}
|
|
3811
|
+
regenerateOptionsFormatted() {
|
|
3812
|
+
if (this.withSelectAll()) {
|
|
3813
|
+
this.optionsFormatted.set([
|
|
3814
|
+
{
|
|
3815
|
+
id: "select-all",
|
|
3816
|
+
label: "Sélectionner tout",
|
|
3817
|
+
selected: this.areAllOptionsSelected(),
|
|
3818
|
+
hasCheckbox: true,
|
|
3819
|
+
hasSeparator: true,
|
|
3820
|
+
isIndeterminate: this.options().some((option) => this.isSelected(option.value)) && !this.areAllOptionsSelected(),
|
|
3821
|
+
},
|
|
3822
|
+
...this.options().map((option) => this.mapOptionToDropdownItemConfig(option)),
|
|
3823
|
+
]);
|
|
3824
|
+
}
|
|
3825
|
+
else {
|
|
3826
|
+
this.optionsFormatted.set(this.options().map((option) => ({ ...this.mapOptionToDropdownItemConfig(option), hasSeparator: false })));
|
|
3827
|
+
}
|
|
3828
|
+
}
|
|
3829
|
+
isSelected(value) {
|
|
3830
|
+
if (this.multiple()) {
|
|
3831
|
+
const currentValue = this.internalValue();
|
|
3832
|
+
if (currentValue) {
|
|
3833
|
+
return currentValue.includes(value);
|
|
3834
|
+
}
|
|
3835
|
+
}
|
|
3836
|
+
return this.internalValue() === value;
|
|
3837
|
+
}
|
|
3838
|
+
computeShouldDisplayClearButton() {
|
|
3839
|
+
const shouldDisplay = this.showResetButton() &&
|
|
3840
|
+
(this.multiple()
|
|
3841
|
+
? Array.isArray(this.internalValue()) && this.internalValue().length > 0
|
|
3842
|
+
: !!this.internalValue()) &&
|
|
3843
|
+
!this.disabled();
|
|
3844
|
+
this.shouldDisplayClearButton.set(shouldDisplay);
|
|
3845
|
+
}
|
|
3846
|
+
clickedSelectAll() {
|
|
3847
|
+
if (this.areAllOptionsSelected()) {
|
|
3848
|
+
this.internalValue.set([]);
|
|
3849
|
+
}
|
|
3850
|
+
else {
|
|
3851
|
+
this.internalValue.set(this.options().map((option) => option.value));
|
|
3852
|
+
}
|
|
3853
|
+
}
|
|
3854
|
+
clickedSelectItemMultiple(value) {
|
|
3855
|
+
const currentValue = this.internalValue();
|
|
3856
|
+
if (currentValue === undefined) {
|
|
3857
|
+
this.internalValue.set([value]);
|
|
3858
|
+
}
|
|
3859
|
+
else {
|
|
3860
|
+
if (Array.isArray(currentValue)) {
|
|
3861
|
+
const valuesArray = currentValue;
|
|
3862
|
+
const valueIndex = valuesArray.indexOf(value);
|
|
3863
|
+
if (valueIndex > -1) {
|
|
3864
|
+
valuesArray.splice(valueIndex, 1);
|
|
3865
|
+
}
|
|
3866
|
+
else {
|
|
3867
|
+
valuesArray.push(value);
|
|
3868
|
+
}
|
|
3869
|
+
this.internalValue.set(valuesArray);
|
|
3870
|
+
}
|
|
3871
|
+
}
|
|
3872
|
+
}
|
|
3873
|
+
mapOptionToDropdownItemConfig(option) {
|
|
3874
|
+
const { value, label } = option;
|
|
3875
|
+
return {
|
|
3876
|
+
id: value,
|
|
3877
|
+
label: label,
|
|
3878
|
+
selected: this.isSelected(value),
|
|
3879
|
+
hasCheckbox: this.multiple(),
|
|
3880
|
+
};
|
|
3717
3881
|
}
|
|
3718
3882
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3719
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
3883
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "rte-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextAppearance: { classPropertyName: "assistiveTextAppearance", publicName: "assistiveTextAppearance", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLink: { classPropertyName: "assistiveTextLink", publicName: "assistiveTextLink", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", 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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, showResetButton: { classPropertyName: "showResetButton", publicName: "showResetButton", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, withSelectAll: { classPropertyName: "withSelectAll", publicName: "withSelectAll", isSignal: true, isRequired: false, transformFunction: null }, optionToDisplay: { classPropertyName: "optionToDisplay", publicName: "optionToDisplay", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
3720
3884
|
{
|
|
3721
3885
|
provide: NG_VALUE_ACCESSOR,
|
|
3722
3886
|
useExisting: SelectComponent,
|
|
3723
3887
|
multi: true,
|
|
3724
3888
|
},
|
|
3725
|
-
], viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true, isSignal: true }, { propertyName: "buttonsContainerRef", first: true, predicate: ["buttonsContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-select-container\" [attr.data-label-position]=\"labelPosition()\">\n <label\n *ngIf=\"label() && labelPosition() === 'side'\"\n class=\"rte-select-label\"\n [attr.data-label-position]=\"labelPosition()\"\n [attr.id]=\"labelId()\"\n [attr.for]=\"id()\"\n >{{ label()\n }}<span\n *ngIf=\"required() || showLabelRequirement()\"\n class=\"requirement-indicator\"\n aria-hidden=\"true\"\n [ngClass]=\"{\n required: required(),\n 'show-label-requirement': showLabelRequirement(),\n }\"\n >{{ requirementIndicatorValue() }}</span\n ></label\n >\n\n <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n >{{ label()\n }}<span\n *ngIf=\"required() || showLabelRequirement()\"\n class=\"requirement-indicator\"\n aria-hidden=\"true\"\n [ngClass]=\"{\n required: required(),\n 'show-label-requirement': showLabelRequirement(),\n }\"\n >{{ requirementIndicatorValue() }}</span\n ></label\n >\n </div>\n <div\n rteDropdown\n [rteDropdownId]=\"'dropdown_select_' + id()\"\n [rteDropdownPosition]=\"dropdownPosition()\"\n [rteDropdownOffset]=\"selectDropdownOffset\"\n [rteDropdownWidth]=\"selectWidth()\"\n (menuEvent)=\"handleOnClickItem($event.id)\"\n (clickedOutside)=\"handleOnClickOutside()\"\n (closedDropdown)=\"handleOnClosingDropdown()\"\n >\n <div\n #selectRef\n rteDropdownTrigger\n class=\"rte-select-wrapper\"\n [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n [attr.role]=\"'combobox'\"\n [attr.data-error]=\"isError()\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-read-only]=\"readOnly()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readOnly()\"\n [attr.aria-labelledby]=\"labelId()\"\n [attr.aria-expanded]=\"isActive()\"\n [attr.data-active]=\"isActive()\"\n [ngStyle]=\"{ width: computedWidth() }\"\n (dropdownTriggered)=\"handleOnClickTrigger()\"\n (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n >\n <div class=\"rte-select-content\">\n <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n <div class=\"rte-select-value\">\n <span>{{ currentOptionLabel() }}</span>\n </div>\n <div #buttonsContainerRef class=\"rte-select-right-icons\">\n <rte-icon-button\n *ngIf=\"shouldDisplayClearButton()\"\n name=\"cancel\"\n variant=\"neutral\"\n class=\"rte-select-icon-button clear-icon\"\n [disabled]=\"disabled()\"\n (clickEvent)=\"handleOnClickClearButton($event)\"\n />\n <rte-icon\n class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n variant=\"neutral\"\n [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n />\n </div>\n </div>\n </div>\n <rte-dropdown-menu [items]=\"formattedOptions()\" />\n <rte-assistive-text\n *ngIf=\"assistiveTextLabel()\"\n [label]=\"assistiveTextLabel()\"\n [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n [showIcon]=\"showAssistiveIcon()\"\n [href]=\"assistiveTextLink()\"\n [width]=\"width()\"\n />\n </div>\n</div>\n", styles: [".rte-select-container{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;display:flex;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{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;display:flex;padding:2px 8px;color:var(--content-secondary);justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{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-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{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;display:flex;padding:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{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;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: AssistiveTextComponent, selector: "rte-assistive-text", inputs: ["label", "appearance", "showIcon", "href", "width"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3889
|
+
], queries: [{ propertyName: "headerDirective", first: true, predicate: SelectHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerDirective", first: true, predicate: SelectFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true, isSignal: true }, { propertyName: "buttonsContainerRef", first: true, predicate: ["buttonsContainerRef"], descendants: true, isSignal: true }, { propertyName: "headerContentRef", first: true, predicate: ["headerContent"], descendants: true, isSignal: true }, { propertyName: "footerContentRef", first: true, predicate: ["footerContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-select-container\" [attr.data-label-position]=\"labelPosition()\">\n <label\n *ngIf=\"label() && labelPosition() === 'side'\"\n class=\"rte-select-label\"\n [attr.data-label-position]=\"labelPosition()\"\n [attr.id]=\"labelId()\"\n [attr.for]=\"id()\"\n >{{ label()\n }}<span\n *ngIf=\"required() || showLabelRequirement()\"\n class=\"requirement-indicator\"\n aria-hidden=\"true\"\n [ngClass]=\"{\n required: required(),\n 'show-label-requirement': showLabelRequirement(),\n }\"\n >{{ requirementIndicatorValue() }}</span\n ></label\n >\n\n <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n >{{ label()\n }}<span\n *ngIf=\"required() || showLabelRequirement()\"\n class=\"requirement-indicator\"\n aria-hidden=\"true\"\n [ngClass]=\"{\n required: required(),\n 'show-label-requirement': showLabelRequirement(),\n }\"\n >{{ requirementIndicatorValue() }}</span\n ></label\n >\n </div>\n <div\n rteDropdown\n [rteDropdownId]=\"'dropdown_select_' + id()\"\n [rteDropdownPosition]=\"dropdownPosition()\"\n [rteDropdownOffset]=\"selectDropdownOffset\"\n [rteDropdownWidth]=\"selectWidth()\"\n [rteCloseOnItemClick]=\"multiple() ? false : true\"\n (menuEvent)=\"handleOnClickItem($event.id)\"\n (menuChangeEvent)=\"handleOnClickItem($event.id)\"\n (clickedOutside)=\"handleOnClickOutside()\"\n (closedDropdown)=\"handleOnClosingDropdown()\"\n >\n <div\n #selectRef\n rteDropdownTrigger\n class=\"rte-select-wrapper\"\n [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n [attr.role]=\"'combobox'\"\n [attr.data-error]=\"isError()\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-read-only]=\"readOnly()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readOnly()\"\n [attr.aria-labelledby]=\"labelId()\"\n [attr.aria-expanded]=\"isActive()\"\n [attr.data-active]=\"isActive()\"\n (dropdownTriggered)=\"handleOnClickTrigger()\"\n (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n >\n <div class=\"rte-select-content\">\n <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n\n <div class=\"rte-select-value\">\n @if (this.multiple() && currentDisplayedOption()) {\n <div class=\"rte-select-multiple-values\">\n <rte-chip\n type=\"input\"\n [label]=\"currentDisplayedOption()!.label\"\n (close)=\"handleOnCloseChip($event, currentDisplayedOption()!.value)\"\n />\n <rte-badge\n *ngIf=\"internalValue()!.length > 1\"\n content=\"number\"\n badgeType=\"brand\"\n size=\"m\"\n [count]=\"internalValue()!.length - 1\"\n [withPlusSign]=\"true\"\n [simpleBadge]=\"true\"\n />\n </div>\n } @else {\n <span>{{ currentDisplayedOption()?.label }}</span>\n }\n </div>\n <div #buttonsContainerRef class=\"rte-select-right-icons\">\n <rte-icon-button\n *ngIf=\"shouldDisplayClearButton()\"\n name=\"cancel\"\n variant=\"neutral\"\n class=\"rte-select-icon-button clear-icon\"\n [disabled]=\"disabled()\"\n (clickEvent)=\"handleOnClickClearButton($event)\"\n />\n <rte-icon\n class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n variant=\"neutral\"\n [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n />\n </div>\n </div>\n </div>\n <rte-dropdown-menu [items]=\"optionsFormatted()\">\n @if (hasHeaderContent()) {\n <ng-template rteDropdownMenuHeader>\n <div #headerContent>\n @if (headerTemplate() || headerDirective()?.templateRef) {\n <ng-container\n [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"\n ></ng-container>\n } @else {\n <div #headerContent>\n <ng-content select=\"[select-header]\"></ng-content>\n </div>\n }\n </div>\n </ng-template>\n }\n @if (hasFooterContent()) {\n <ng-template rteDropdownMenuFooter>\n <div #footerContent>\n @if (footerTemplate() || footerDirective()?.templateRef) {\n <ng-container\n [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"\n ></ng-container>\n } @else {\n <div #footerContent>\n <ng-content select=\"[select-footer]\"></ng-content>\n </div>\n }\n </div>\n </ng-template>\n }\n </rte-dropdown-menu>\n <rte-assistive-text\n *ngIf=\"assistiveTextLabel()\"\n [label]=\"assistiveTextLabel()\"\n [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n [showIcon]=\"showAssistiveIcon()\"\n [href]=\"assistiveTextLink()\"\n />\n </div>\n</div>\n", styles: [".rte-select-container{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;display:flex;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{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;display:flex;padding:2px 8px;color:var(--content-secondary);white-space:normal;overflow-wrap:normal;word-break:normal;align-items:center}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{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-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{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;display:flex;padding:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value .rte-select-multiple-values,.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px;color:var(--content-secondary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:hover{color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:active{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{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;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth", "rteCloseOnItemClick"], outputs: ["menuEvent", "clickedOutside", "closedDropdown", "menuChangeEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "directive", type: DropdownMenuHeaderDirective, selector: "[rteDropdownMenuHeader]" }, { kind: "directive", type: DropdownMenuFooterDirective, selector: "[rteDropdownMenuFooter]" }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: AssistiveTextComponent, selector: "rte-assistive-text", inputs: ["label", "appearance", "showIcon", "href", "width"] }, { kind: "component", type: ChipComponent, selector: "rte-chip", inputs: ["id", "label", "selected", "disabled", "type", "compactSpacing"], outputs: ["click", "close"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3726
3890
|
}
|
|
3727
3891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
|
|
3728
3892
|
type: Component,
|
|
3729
|
-
args: [{ selector: "rte-select", imports: [
|
|
3893
|
+
args: [{ selector: "rte-select", imports: [
|
|
3894
|
+
CommonModule,
|
|
3895
|
+
IconComponent,
|
|
3896
|
+
DropdownModule,
|
|
3897
|
+
IconButtonComponent,
|
|
3898
|
+
AssistiveTextComponent,
|
|
3899
|
+
ChipComponent,
|
|
3900
|
+
BadgeComponent,
|
|
3901
|
+
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
3730
3902
|
{
|
|
3731
3903
|
provide: NG_VALUE_ACCESSOR,
|
|
3732
3904
|
useExisting: SelectComponent,
|
|
3733
3905
|
multi: true,
|
|
3734
3906
|
},
|
|
3735
|
-
], template: "<div class=\"rte-select-container\" [attr.data-label-position]=\"labelPosition()\">\n <label\n *ngIf=\"label() && labelPosition() === 'side'\"\n class=\"rte-select-label\"\n [attr.data-label-position]=\"labelPosition()\"\n [attr.id]=\"labelId()\"\n [attr.for]=\"id()\"\n >{{ label()\n }}<span\n *ngIf=\"required() || showLabelRequirement()\"\n class=\"requirement-indicator\"\n aria-hidden=\"true\"\n [ngClass]=\"{\n required: required(),\n 'show-label-requirement': showLabelRequirement(),\n }\"\n >{{ requirementIndicatorValue() }}</span\n ></label\n >\n\n <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n >{{ label()\n }}<span\n *ngIf=\"required() || showLabelRequirement()\"\n class=\"requirement-indicator\"\n aria-hidden=\"true\"\n [ngClass]=\"{\n required: required(),\n 'show-label-requirement': showLabelRequirement(),\n }\"\n >{{ requirementIndicatorValue() }}</span\n ></label\n >\n </div>\n <div\n rteDropdown\n [rteDropdownId]=\"'dropdown_select_' + id()\"\n [rteDropdownPosition]=\"dropdownPosition()\"\n [rteDropdownOffset]=\"selectDropdownOffset\"\n [rteDropdownWidth]=\"selectWidth()\"\n (menuEvent)=\"handleOnClickItem($event.id)\"\n (clickedOutside)=\"handleOnClickOutside()\"\n (closedDropdown)=\"handleOnClosingDropdown()\"\n >\n <div\n #selectRef\n rteDropdownTrigger\n class=\"rte-select-wrapper\"\n [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n [attr.role]=\"'combobox'\"\n [attr.data-error]=\"isError()\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-read-only]=\"readOnly()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readOnly()\"\n [attr.aria-labelledby]=\"labelId()\"\n [attr.aria-expanded]=\"isActive()\"\n [attr.data-active]=\"isActive()\"\n [ngStyle]=\"{ width: computedWidth() }\"\n (dropdownTriggered)=\"handleOnClickTrigger()\"\n (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n >\n <div class=\"rte-select-content\">\n <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n <div class=\"rte-select-value\">\n <span>{{ currentOptionLabel() }}</span>\n </div>\n <div #buttonsContainerRef class=\"rte-select-right-icons\">\n <rte-icon-button\n *ngIf=\"shouldDisplayClearButton()\"\n name=\"cancel\"\n variant=\"neutral\"\n class=\"rte-select-icon-button clear-icon\"\n [disabled]=\"disabled()\"\n (clickEvent)=\"handleOnClickClearButton($event)\"\n />\n <rte-icon\n class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n variant=\"neutral\"\n [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n />\n </div>\n </div>\n </div>\n <rte-dropdown-menu [items]=\"formattedOptions()\" />\n <rte-assistive-text\n *ngIf=\"assistiveTextLabel()\"\n [label]=\"assistiveTextLabel()\"\n [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n [showIcon]=\"showAssistiveIcon()\"\n [href]=\"assistiveTextLink()\"\n [width]=\"width()\"\n />\n </div>\n</div>\n", styles: [".rte-select-container{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;display:flex;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{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;display:flex;padding:2px 8px;color:var(--content-secondary);justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{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-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{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;display:flex;padding:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{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;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"] }]
|
|
3907
|
+
], template: "<div class=\"rte-select-container\" [attr.data-label-position]=\"labelPosition()\">\n <label\n *ngIf=\"label() && labelPosition() === 'side'\"\n class=\"rte-select-label\"\n [attr.data-label-position]=\"labelPosition()\"\n [attr.id]=\"labelId()\"\n [attr.for]=\"id()\"\n >{{ label()\n }}<span\n *ngIf=\"required() || showLabelRequirement()\"\n class=\"requirement-indicator\"\n aria-hidden=\"true\"\n [ngClass]=\"{\n required: required(),\n 'show-label-requirement': showLabelRequirement(),\n }\"\n >{{ requirementIndicatorValue() }}</span\n ></label\n >\n\n <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n >{{ label()\n }}<span\n *ngIf=\"required() || showLabelRequirement()\"\n class=\"requirement-indicator\"\n aria-hidden=\"true\"\n [ngClass]=\"{\n required: required(),\n 'show-label-requirement': showLabelRequirement(),\n }\"\n >{{ requirementIndicatorValue() }}</span\n ></label\n >\n </div>\n <div\n rteDropdown\n [rteDropdownId]=\"'dropdown_select_' + id()\"\n [rteDropdownPosition]=\"dropdownPosition()\"\n [rteDropdownOffset]=\"selectDropdownOffset\"\n [rteDropdownWidth]=\"selectWidth()\"\n [rteCloseOnItemClick]=\"multiple() ? false : true\"\n (menuEvent)=\"handleOnClickItem($event.id)\"\n (menuChangeEvent)=\"handleOnClickItem($event.id)\"\n (clickedOutside)=\"handleOnClickOutside()\"\n (closedDropdown)=\"handleOnClosingDropdown()\"\n >\n <div\n #selectRef\n rteDropdownTrigger\n class=\"rte-select-wrapper\"\n [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n [attr.role]=\"'combobox'\"\n [attr.data-error]=\"isError()\"\n [attr.data-disabled]=\"disabled()\"\n [attr.data-read-only]=\"readOnly()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readOnly()\"\n [attr.aria-labelledby]=\"labelId()\"\n [attr.aria-expanded]=\"isActive()\"\n [attr.data-active]=\"isActive()\"\n (dropdownTriggered)=\"handleOnClickTrigger()\"\n (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n >\n <div class=\"rte-select-content\">\n <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n\n <div class=\"rte-select-value\">\n @if (this.multiple() && currentDisplayedOption()) {\n <div class=\"rte-select-multiple-values\">\n <rte-chip\n type=\"input\"\n [label]=\"currentDisplayedOption()!.label\"\n (close)=\"handleOnCloseChip($event, currentDisplayedOption()!.value)\"\n />\n <rte-badge\n *ngIf=\"internalValue()!.length > 1\"\n content=\"number\"\n badgeType=\"brand\"\n size=\"m\"\n [count]=\"internalValue()!.length - 1\"\n [withPlusSign]=\"true\"\n [simpleBadge]=\"true\"\n />\n </div>\n } @else {\n <span>{{ currentDisplayedOption()?.label }}</span>\n }\n </div>\n <div #buttonsContainerRef class=\"rte-select-right-icons\">\n <rte-icon-button\n *ngIf=\"shouldDisplayClearButton()\"\n name=\"cancel\"\n variant=\"neutral\"\n class=\"rte-select-icon-button clear-icon\"\n [disabled]=\"disabled()\"\n (clickEvent)=\"handleOnClickClearButton($event)\"\n />\n <rte-icon\n class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n variant=\"neutral\"\n [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n />\n </div>\n </div>\n </div>\n <rte-dropdown-menu [items]=\"optionsFormatted()\">\n @if (hasHeaderContent()) {\n <ng-template rteDropdownMenuHeader>\n <div #headerContent>\n @if (headerTemplate() || headerDirective()?.templateRef) {\n <ng-container\n [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"\n ></ng-container>\n } @else {\n <div #headerContent>\n <ng-content select=\"[select-header]\"></ng-content>\n </div>\n }\n </div>\n </ng-template>\n }\n @if (hasFooterContent()) {\n <ng-template rteDropdownMenuFooter>\n <div #footerContent>\n @if (footerTemplate() || footerDirective()?.templateRef) {\n <ng-container\n [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"\n ></ng-container>\n } @else {\n <div #footerContent>\n <ng-content select=\"[select-footer]\"></ng-content>\n </div>\n }\n </div>\n </ng-template>\n }\n </rte-dropdown-menu>\n <rte-assistive-text\n *ngIf=\"assistiveTextLabel()\"\n [label]=\"assistiveTextLabel()\"\n [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n [showIcon]=\"showAssistiveIcon()\"\n [href]=\"assistiveTextLink()\"\n />\n </div>\n</div>\n", styles: [".rte-select-container{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;display:flex;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{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;display:flex;padding:2px 8px;color:var(--content-secondary);white-space:normal;overflow-wrap:normal;word-break:normal;align-items:center}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{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-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{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;display:flex;padding:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value .rte-select-multiple-values,.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px;color:var(--content-secondary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:hover{color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:active{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{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;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"] }]
|
|
3736
3908
|
}] });
|
|
3737
3909
|
|
|
3738
3910
|
class TabItemComponent {
|
|
@@ -3834,7 +4006,7 @@ class TabItemComponent {
|
|
|
3834
4006
|
});
|
|
3835
4007
|
}
|
|
3836
4008
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3837
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabItemComponent, isStandalone: true, selector: "rte-tab-item", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, handleKeydown: { classPropertyName: "handleKeydown", publicName: "handleKeydown", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "tabItemRef", first: true, predicate: ["tabItem"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n #tabItem\n class=\"rte-tabitem\"\n role=\"tab\"\n [id]=\"option()?.id\"\n [attr.aria-selected]=\"isSelected()\"\n [attr.aria-controls]=\"option()?.panelId\"\n [tabIndex]=\"isSelected() ? 0 : -1\"\n [attr.data-selected]=\"isSelected()\"\n [attr.data-inverted]=\"inverted()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-disabled]=\"option()?.disabled\"\n [attr.data-hidden]=\"isHidden()\"\n (click)=\"onClickTabItem($event, option()?.id || '')\"\n (mouseover)=\"handleMouseHover()\"\n (mouseout)=\"handleMouseOut()\"\n (keydown)=\"handleKeydown()\"\n>\n <rte-icon *ngIf=\"option()?.icon\" [name]=\"option()?.icon || ''\" [appearance]=\"isSelected() ? 'filled' : 'outlined'\" />\n <span *ngIf=\"option()?.label\">{{ option()?.label }}</span>\n <rte-badge\n *ngIf=\"displayBadge(option()!)\"\n [simpleBadge]=\"true\"\n [badgeContent]=\"option()?.badgeContent || 'empty'\"\n [badgeType]=\"option()?.badgeType || 'neutral'\"\n [icon]=\"option()?.badgeIcon || ''\"\n [count]=\"option()?.badgeCount\"\n />\n</button>\n<span\n #hoverIndicator\n class=\"rte-tab-hover-indicator\"\n [attr.data-disabled]=\"option()?.disabled\"\n [id]=\"'tab-hover-indicator' + option()?.id\"\n [ngStyle]=\"{\n width: hoverIndicatorWidth(),\n height: hoverIndicatorHeight(),\n left: hoverIndicatorLeft(),\n top: hoverIndicatorTop(),\n opacity: hoverIndicatorOpacity(),\n }\"\n></span>\n", styles: [":host{pointer-events:none;display:flex}.rte-tabitem{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;display:flex;padding:12px;justify-content:center;align-items:center;gap:12px;background:transparent;color:var(--content-tertiary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=true],.rte-tabitem[data-inverted=true]:hover,.rte-tabitem[data-inverted=true][data-selected=true]{color:var(--content-primary-inverse)}.rte-tabitem[data-direction=vertical]{flex-shrink:1;margin-left:0}.rte-tabitem[data-hidden=true]{visibility:hidden}.rte-tabitem:hover{color:var(--content-secondary)}.rte-tabitem[data-selected=true]{color:var(--content-primary)}.rte-tabitem[data-disabled=true]{color:var(--content-disabled);cursor:not-allowed}.rte-tabitem[data-compact-spacing=true]{padding:4px 12px}.rte-tabitem:focus-visible{z-index:1;outline:2px solid var(--border-brand-focused)}.rte-tab-hover-indicator{position:absolute;top:4px;height:2px;width:2px;background:var(--background-neutral-regular-hover);opacity:0;transition:left .2s ease,width .2s ease;z-index:10}.rte-tab-hover-indicator[data-disabled=true]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4009
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabItemComponent, isStandalone: true, selector: "rte-tab-item", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, handleKeydown: { classPropertyName: "handleKeydown", publicName: "handleKeydown", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "tabItemRef", first: true, predicate: ["tabItem"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n #tabItem\n class=\"rte-tabitem\"\n role=\"tab\"\n [id]=\"option()?.id\"\n [attr.aria-selected]=\"isSelected()\"\n [attr.aria-controls]=\"option()?.panelId\"\n [tabIndex]=\"isSelected() ? 0 : -1\"\n [attr.data-selected]=\"isSelected()\"\n [attr.data-inverted]=\"inverted()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-disabled]=\"option()?.disabled\"\n [attr.data-hidden]=\"isHidden()\"\n (click)=\"onClickTabItem($event, option()?.id || '')\"\n (mouseover)=\"handleMouseHover()\"\n (mouseout)=\"handleMouseOut()\"\n (keydown)=\"handleKeydown()\"\n>\n <rte-icon *ngIf=\"option()?.icon\" [name]=\"option()?.icon || ''\" [appearance]=\"isSelected() ? 'filled' : 'outlined'\" />\n <span *ngIf=\"option()?.label\">{{ option()?.label }}</span>\n <rte-badge\n *ngIf=\"displayBadge(option()!)\"\n [simpleBadge]=\"true\"\n [badgeContent]=\"option()?.badgeContent || 'empty'\"\n [badgeType]=\"option()?.badgeType || 'neutral'\"\n [icon]=\"option()?.badgeIcon || ''\"\n [count]=\"option()?.badgeCount\"\n />\n</button>\n<span\n #hoverIndicator\n class=\"rte-tab-hover-indicator\"\n [attr.data-disabled]=\"option()?.disabled\"\n [id]=\"'tab-hover-indicator' + option()?.id\"\n [ngStyle]=\"{\n width: hoverIndicatorWidth(),\n height: hoverIndicatorHeight(),\n left: hoverIndicatorLeft(),\n top: hoverIndicatorTop(),\n opacity: hoverIndicatorOpacity(),\n }\"\n></span>\n", styles: [":host{pointer-events:none;display:flex}.rte-tabitem{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;display:flex;padding:12px;justify-content:center;align-items:center;gap:12px;background:transparent;color:var(--content-tertiary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=true],.rte-tabitem[data-inverted=true]:hover,.rte-tabitem[data-inverted=true][data-selected=true]{color:var(--content-primary-inverse)}.rte-tabitem[data-direction=vertical]{flex-shrink:1;margin-left:0}.rte-tabitem[data-hidden=true]{visibility:hidden}.rte-tabitem:hover{color:var(--content-secondary)}.rte-tabitem[data-selected=true]{color:var(--content-primary)}.rte-tabitem[data-disabled=true]{color:var(--content-disabled);cursor:not-allowed}.rte-tabitem[data-compact-spacing=true]{padding:4px 12px}.rte-tabitem:focus-visible{z-index:1;outline:2px solid var(--border-brand-focused)}.rte-tab-hover-indicator{position:absolute;top:4px;height:2px;width:2px;background:var(--background-neutral-regular-hover);opacity:0;transition:left .2s ease,width .2s ease;z-index:10}.rte-tab-hover-indicator[data-disabled=true]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3838
4010
|
}
|
|
3839
4011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, decorators: [{
|
|
3840
4012
|
type: Component,
|
|
@@ -4062,7 +4234,7 @@ class TabComponent {
|
|
|
4062
4234
|
}
|
|
4063
4235
|
}
|
|
4064
4236
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "rte-tab", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, overflowType: { classPropertyName: "overflowType", publicName: "overflowType", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "hoverIndicatorRefs", predicate: ["hoverIndicator"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rte-tab-container\" [attr.data-direction]=\"direction()\">\n <div class=\"rte-tab-border-vertical\" aria-hidden=\"true\" role=\"presentation\" [attr.data-direction]=\"direction()\"></div>\n <div\n [ngStyle]=\"{\n position: 'relative',\n display: 'flex',\n 'align-items': 'center',\n 'flex-direction': direction() === 'horizontal' ? 'row' : 'column',\n }\"\n >\n <rte-icon-button\n *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n aria-label=\"Previous tabs\"\n variant=\"transparent\"\n [name]=\"direction() === 'horizontal' ? 'arrow-chevron-left' : 'arrow-chevron-up'\"\n [ngStyle]=\"{\n opacity: canScrollBackward() ? '1' : '0',\n 'pointer-events': canScrollBackward() ? 'auto' : 'none',\n }\"\n (clickEvent)=\"scrollBackward()\"\n />\n <div\n #tabList\n role=\"tablist\"\n aria-label=\"Sample Tabs\"\n class=\"rte-tab\"\n [attr.data-alignment]=\"shouldDisplayDropdown() ? 'start' : alignment()\"\n [attr.data-direction]=\"direction()\"\n [attr.data-overflow-type]=\"overflowType()\"\n >\n <span class=\"rte-tab-selected-indicator\" [ngStyle]=\"tabItemSelectedIndicatorStyle()\"></span>\n <div\n *ngIf=\"shouldDisplayDropdown() && options().length\"\n rteDropdown\n [rteDropdownOffset]=\"10\"\n (menuEvent)=\"onClickTabItem($event.id)\"\n >\n <button\n rteDropdownTrigger\n class=\"rte-tab-dropdown-button\"\n [attr.data-inverted]=\"inverted()\"\n [attr.data-overflow-type]=\"overflowType()\"\n >\n <rte-icon *ngIf=\"selectedTab()?.icon\" appearance=\"filled\" [name]=\"selectedTab()?.icon!\"></rte-icon>\n <span *ngIf=\"selectedTab()?.label\">{{ selectedTab()?.label }}</span>\n <rte-badge\n *ngIf=\"selectedTab()?.badgeCount && selectedTab()?.badgeContent === 'number'\"\n [badgeType]=\"selectedTab()?.badgeType!\"\n [badgeContent]=\"selectedTab()?.badgeContent!\"\n [count]=\"selectedTab()?.badgeCount\"\n [simpleBadge]=\"true\"\n ></rte-badge>\n <rte-icon name=\"arrow-chevron-down\" appearance=\"outlined\"></rte-icon>\n </button>\n <rte-dropdown-menu [items]=\"dropdownFilteredOptions()\" />\n </div>\n <ng-container *ngFor=\"let option of options(); let idx = index\">\n <rte-tab-item\n #tabItem\n [option]=\"option\"\n [direction]=\"direction()\"\n [compactSpacing]=\"compactSpacing()\"\n [isSelected]=\"isSelected(option.id)\"\n [inverted]=\"inverted()\"\n [attr.data-hidden]=\"shouldDisplayDropdown()\"\n [isHidden]=\"shouldDisplayDropdown()\"\n (keydown)=\"onKeydownTabItem($event)\"\n (click)=\"onClickTabItem(option.id)\"\n ></rte-tab-item>\n </ng-container>\n </div>\n <rte-icon-button\n *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n aria-label=\"Next tabs\"\n variant=\"transparent\"\n [name]=\"direction() === 'horizontal' ? 'arrow-chevron-right' : 'arrow-chevron-down'\"\n [ngStyle]=\"{\n opacity: canScrollForward() ? '1' : '0',\n 'pointer-events': canScrollForward() ? 'auto' : 'none',\n }\"\n (clickEvent)=\"scrollForward()\"\n />\n </div>\n <div\n class=\"rte-tab-border-horizontal\"\n aria-hidden=\"true\"\n role=\"presentation\"\n [attr.data-direction]=\"direction()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-scrollable]=\"isScrollable() && overflowType() === 'scrollable'\"\n ></div>\n</div>\n", styles: [".rte-tab-container{position:relative;display:flex;flex-direction:column}.rte-tab-container[data-direction=vertical]{flex-direction:row;height:100%}.rte-tab{position:relative;display:flex;height:100%;gap:24px;justify-content:flex-start;padding-bottom:2px;margin-bottom:-2px;margin-left:-2px;scrollbar-width:none;width:100%;padding-top:2px;padding-left:2px;align-items:center}.rte-tab[data-direction=horizontal]{overflow-x:scroll}.rte-tab[data-direction=horizontal][data-overflow-type=dropdown]{overflow:hidden;margin-left:0}.rte-tab[data-direction=vertical]{flex-direction:column;border-bottom:none;gap:4px;height:100%;padding-right:2px;margin-left:-2px;width:max-content;align-items:start;margin-bottom:0}.rte-tab[data-direction=vertical] .rte-tab-selected-indicator{width:2px;transition:top .2s ease,height .2s ease}.rte-tab[data-alignment=center]{justify-content:center}.rte-tab .rte-tab-selected-indicator{position:absolute;bottom:0;height:2px;background:var(--background-brand-selected-default);transition:left .2s ease,width .2s ease;pointer-events:none;z-index:1}.rte-tab .rte-tab-separator{width:24px;flex-shrink:0}.rte-tab-border-horizontal{background-color:var(--background-neutral-regular-default);position:relative;height:2px}.rte-tab-border-horizontal[data-compact-spacing=true][data-scrollable=true]{bottom:5px}.rte-tab-border-horizontal[data-direction=vertical]{display:none}.rte-tab-border-vertical{background-color:var(--background-neutral-regular-default);position:relative;width:2px}.rte-tab-border-vertical[data-direction=horizontal]{display:none}.rte-tab-dropdown-button{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-secondary);width:max-content;display:flex;align-items:center;gap:12px;background-color:transparent;border:none;cursor:pointer;padding:0;margin:12px}.rte-tab-dropdown-button:focus-visible{outline:2px solid var(--border-brand-focused);outline-offset:12px;z-index:1}.rte-tab-dropdown-button[data-inverted=true]{color:var(--content-primary-inverse)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TabItemComponent, selector: "rte-tab-item", inputs: ["direction", "option", "compactSpacing", "isSelected", "handleKeydown", "inverted", "isHidden"], outputs: ["click"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "rte-tab", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, overflowType: { classPropertyName: "overflowType", publicName: "overflowType", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "hoverIndicatorRefs", predicate: ["hoverIndicator"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rte-tab-container\" [attr.data-direction]=\"direction()\">\n <div class=\"rte-tab-border-vertical\" aria-hidden=\"true\" role=\"presentation\" [attr.data-direction]=\"direction()\"></div>\n <div\n [ngStyle]=\"{\n position: 'relative',\n display: 'flex',\n 'align-items': 'center',\n 'flex-direction': direction() === 'horizontal' ? 'row' : 'column',\n }\"\n >\n <rte-icon-button\n *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n aria-label=\"Previous tabs\"\n variant=\"transparent\"\n [name]=\"direction() === 'horizontal' ? 'arrow-chevron-left' : 'arrow-chevron-up'\"\n [ngStyle]=\"{\n opacity: canScrollBackward() ? '1' : '0',\n 'pointer-events': canScrollBackward() ? 'auto' : 'none',\n }\"\n (clickEvent)=\"scrollBackward()\"\n />\n <div\n #tabList\n role=\"tablist\"\n aria-label=\"Sample Tabs\"\n class=\"rte-tab\"\n [attr.data-alignment]=\"shouldDisplayDropdown() ? 'start' : alignment()\"\n [attr.data-direction]=\"direction()\"\n [attr.data-overflow-type]=\"overflowType()\"\n >\n <span class=\"rte-tab-selected-indicator\" [ngStyle]=\"tabItemSelectedIndicatorStyle()\"></span>\n <div\n *ngIf=\"shouldDisplayDropdown() && options().length\"\n rteDropdown\n [rteDropdownOffset]=\"10\"\n (menuEvent)=\"onClickTabItem($event.id)\"\n >\n <button\n rteDropdownTrigger\n class=\"rte-tab-dropdown-button\"\n [attr.data-inverted]=\"inverted()\"\n [attr.data-overflow-type]=\"overflowType()\"\n >\n <rte-icon *ngIf=\"selectedTab()?.icon\" appearance=\"filled\" [name]=\"selectedTab()?.icon!\"></rte-icon>\n <span *ngIf=\"selectedTab()?.label\">{{ selectedTab()?.label }}</span>\n <rte-badge\n *ngIf=\"selectedTab()?.badgeCount && selectedTab()?.badgeContent === 'number'\"\n [badgeType]=\"selectedTab()?.badgeType!\"\n [badgeContent]=\"selectedTab()?.badgeContent!\"\n [count]=\"selectedTab()?.badgeCount\"\n [simpleBadge]=\"true\"\n ></rte-badge>\n <rte-icon name=\"arrow-chevron-down\" appearance=\"outlined\"></rte-icon>\n </button>\n <rte-dropdown-menu [items]=\"dropdownFilteredOptions()\" />\n </div>\n <ng-container *ngFor=\"let option of options(); let idx = index\">\n <rte-tab-item\n #tabItem\n [option]=\"option\"\n [direction]=\"direction()\"\n [compactSpacing]=\"compactSpacing()\"\n [isSelected]=\"isSelected(option.id)\"\n [inverted]=\"inverted()\"\n [attr.data-hidden]=\"shouldDisplayDropdown()\"\n [isHidden]=\"shouldDisplayDropdown()\"\n (keydown)=\"onKeydownTabItem($event)\"\n (click)=\"onClickTabItem(option.id)\"\n ></rte-tab-item>\n </ng-container>\n </div>\n <rte-icon-button\n *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n aria-label=\"Next tabs\"\n variant=\"transparent\"\n [name]=\"direction() === 'horizontal' ? 'arrow-chevron-right' : 'arrow-chevron-down'\"\n [ngStyle]=\"{\n opacity: canScrollForward() ? '1' : '0',\n 'pointer-events': canScrollForward() ? 'auto' : 'none',\n }\"\n (clickEvent)=\"scrollForward()\"\n />\n </div>\n <div\n class=\"rte-tab-border-horizontal\"\n aria-hidden=\"true\"\n role=\"presentation\"\n [attr.data-direction]=\"direction()\"\n [attr.data-compact-spacing]=\"compactSpacing()\"\n [attr.data-scrollable]=\"isScrollable() && overflowType() === 'scrollable'\"\n ></div>\n</div>\n", styles: [".rte-tab-container{position:relative;display:flex;flex-direction:column}.rte-tab-container[data-direction=vertical]{flex-direction:row;height:100%}.rte-tab{position:relative;display:flex;height:100%;gap:24px;justify-content:flex-start;padding-bottom:2px;margin-bottom:-2px;margin-left:-2px;scrollbar-width:none;width:100%;padding-top:2px;padding-left:2px;align-items:center}.rte-tab[data-direction=horizontal]{overflow-x:scroll}.rte-tab[data-direction=horizontal][data-overflow-type=dropdown]{overflow:hidden;margin-left:0}.rte-tab[data-direction=vertical]{flex-direction:column;border-bottom:none;gap:4px;height:100%;padding-right:2px;margin-left:-2px;width:max-content;align-items:start;margin-bottom:0}.rte-tab[data-direction=vertical] .rte-tab-selected-indicator{width:2px;transition:top .2s ease,height .2s ease}.rte-tab[data-alignment=center]{justify-content:center}.rte-tab .rte-tab-selected-indicator{position:absolute;bottom:0;height:2px;background:var(--background-brand-selected-default);transition:left .2s ease,width .2s ease;pointer-events:none;z-index:1}.rte-tab .rte-tab-separator{width:24px;flex-shrink:0}.rte-tab-border-horizontal{background-color:var(--background-neutral-regular-default);position:relative;height:2px}.rte-tab-border-horizontal[data-compact-spacing=true][data-scrollable=true]{bottom:5px}.rte-tab-border-horizontal[data-direction=vertical]{display:none}.rte-tab-border-vertical{background-color:var(--background-neutral-regular-default);position:relative;width:2px}.rte-tab-border-vertical[data-direction=horizontal]{display:none}.rte-tab-dropdown-button{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-secondary);width:max-content;display:flex;align-items:center;gap:12px;background-color:transparent;border:none;cursor:pointer;padding:0;margin:12px}.rte-tab-dropdown-button:focus-visible{outline:2px solid var(--border-brand-focused);outline-offset:12px;z-index:1}.rte-tab-dropdown-button[data-inverted=true]{color:var(--content-primary-inverse)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TabItemComponent, selector: "rte-tab-item", inputs: ["direction", "option", "compactSpacing", "isSelected", "handleKeydown", "inverted", "isHidden"], outputs: ["click"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth", "rteCloseOnItemClick"], outputs: ["menuEvent", "clickedOutside", "closedDropdown", "menuChangeEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4066
4238
|
}
|
|
4067
4239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, decorators: [{
|
|
4068
4240
|
type: Component,
|