@design-system-rte/angular 1.1.0 → 1.2.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/breadcrumbs/breadcrumbs.component.mjs +2 -2
- package/esm2022/lib/components/dropdown/dropdown-menu/dropdown-menu-footer.directive.mjs +17 -0
- package/esm2022/lib/components/dropdown/dropdown-menu/dropdown-menu-header.directive.mjs +17 -0
- package/esm2022/lib/components/dropdown/dropdown-menu/dropdown-menu.component.mjs +24 -5
- package/esm2022/lib/components/dropdown/dropdown.directive.mjs +33 -12
- package/esm2022/lib/components/dropdown/dropdown.module.mjs +32 -5
- package/esm2022/lib/components/select/select.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 +112 -0
- package/esm2022/lib/components/tab/tab.component.mjs +242 -0
- package/esm2022/lib/components/toast/toast.component.mjs +44 -5
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/design-system-rte-angular.mjs +491 -25
- 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.directive.d.ts +1 -1
- package/lib/components/dropdown/dropdown-menu/dropdown-menu-footer.directive.d.ts +7 -0
- package/lib/components/dropdown/dropdown-menu/dropdown-menu-header.directive.d.ts +7 -0
- package/lib/components/dropdown/dropdown-menu/dropdown-menu.component.d.ts +14 -1
- package/lib/components/dropdown/dropdown.directive.d.ts +7 -1
- package/lib/components/dropdown/dropdown.module.d.ts +3 -1
- package/lib/components/icon-button/icon-button.component.d.ts +2 -2
- package/lib/components/icon-button-toggle/icon-button-toggle.component.d.ts +1 -1
- package/lib/components/popover/popover.component.d.ts +1 -1
- package/lib/components/split-button/split-button.component.d.ts +2 -2
- package/lib/components/tab/tab-item/tab-item.component.d.ts +35 -0
- package/lib/components/tab/tab.component.d.ts +70 -0
- package/lib/components/tag/tag.component.d.ts +2 -2
- package/lib/components/text-input/base-text-input/base-text-input.component.d.ts +3 -3
- package/lib/components/toast/toast.component.d.ts +9 -1
- package/lib/components/tooltip/tooltip.component.d.ts +1 -1
- package/package.json +2 -2
- package/public-api.d.ts +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, Component, ChangeDetectionStrategy, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, ElementRef, ViewContainerRef, Renderer2, HostListener, output, contentChild, signal, NgModule,
|
|
2
|
+
import { input, computed, Component, ChangeDetectionStrategy, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, ElementRef, ViewContainerRef, Renderer2, HostListener, output, TemplateRef, contentChild, viewChild, signal, NgModule, viewChildren, RendererFactory2 } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -34,11 +34,13 @@ import { IconSize, IconTypeMap } from '@design-system-rte/core/components/icon/i
|
|
|
34
34
|
import { APPEARANCE_CONFIG, SEARCHBAR_BORDER_RADIUS, SEARCHBAR_PADDING_LEFT, SEARCHBAR_BUTTON_WIDTH, SEARCHBAR_BUTTON_HEIGHT_COMPACT } from '@design-system-rte/core/components/searchbar/searchbar.constants';
|
|
35
35
|
import { sideNavCollapsedSize, sideNavPanelSize, dividerAppearanceBySideNavAppearance } from '@design-system-rte/core/components/side-nav/side-nav.constants';
|
|
36
36
|
import { getNavItemLabelIconSize } from '@design-system-rte/core/components/side-nav/nav-item/nav-item.utils';
|
|
37
|
+
import { ToastDurationMap } from '@design-system-rte/core/components/toast/toast.constants';
|
|
37
38
|
import { getToastPriority } from '@design-system-rte/core/components/toast/toast.utils';
|
|
38
39
|
import { v4 } from 'uuid';
|
|
39
40
|
import { MIN_SELECT_WIDTH, SELECT_DROPDOWN_OFFSET, THRESHOLD_BOTTOM_POSITION } from '@design-system-rte/core/components/select/select.constants';
|
|
40
41
|
import { ASSISTIVE_TEXT_ICON_SIZE } from '@design-system-rte/core/components/assistive-text/assistive-text.constants';
|
|
41
42
|
import { getIconNameFromAppearance } from '@design-system-rte/core/components/assistive-text/assistive-text.utils';
|
|
43
|
+
import { scrollToSelectedTab } from '@design-system-rte/core/components/tab/tab.utils';
|
|
42
44
|
|
|
43
45
|
class ButtonComponent {
|
|
44
46
|
constructor() {
|
|
@@ -963,6 +965,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
963
965
|
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]=\"item()?.selected\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\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 <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"] }]
|
|
964
966
|
}] });
|
|
965
967
|
|
|
968
|
+
class DropdownMenuFooterDirective {
|
|
969
|
+
constructor() {
|
|
970
|
+
this.templateRef = inject((TemplateRef), { optional: true });
|
|
971
|
+
}
|
|
972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
973
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DropdownMenuFooterDirective, isStandalone: true, selector: "[rteDropdownMenuFooter]", ngImport: i0 }); }
|
|
974
|
+
}
|
|
975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuFooterDirective, decorators: [{
|
|
976
|
+
type: Directive,
|
|
977
|
+
args: [{
|
|
978
|
+
selector: "[rteDropdownMenuFooter]",
|
|
979
|
+
standalone: true,
|
|
980
|
+
}]
|
|
981
|
+
}] });
|
|
982
|
+
|
|
983
|
+
class DropdownMenuHeaderDirective {
|
|
984
|
+
constructor() {
|
|
985
|
+
this.templateRef = inject((TemplateRef), { optional: true });
|
|
986
|
+
}
|
|
987
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
988
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DropdownMenuHeaderDirective, isStandalone: true, selector: "[rteDropdownMenuHeader]", ngImport: i0 }); }
|
|
989
|
+
}
|
|
990
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuHeaderDirective, decorators: [{
|
|
991
|
+
type: Directive,
|
|
992
|
+
args: [{
|
|
993
|
+
selector: "[rteDropdownMenuHeader]",
|
|
994
|
+
standalone: true,
|
|
995
|
+
}]
|
|
996
|
+
}] });
|
|
997
|
+
|
|
966
998
|
class DropdownService {
|
|
967
999
|
constructor() {
|
|
968
1000
|
this.initialState = {
|
|
@@ -1050,7 +1082,23 @@ class DropdownMenuComponent {
|
|
|
1050
1082
|
this.width = input(null);
|
|
1051
1083
|
this.closingMenu = output();
|
|
1052
1084
|
this.menuStyle = computed(() => {
|
|
1053
|
-
return this.width() ? { width: this.width() + "px" } : {};
|
|
1085
|
+
return this.width() ? { width: this.width() + "px", "max-width": this.width() + "px" } : {};
|
|
1086
|
+
});
|
|
1087
|
+
this.headerDirective = contentChild(DropdownMenuHeaderDirective);
|
|
1088
|
+
this.footerDirective = contentChild(DropdownMenuFooterDirective);
|
|
1089
|
+
this.headerTemplate = input(undefined);
|
|
1090
|
+
this.footerTemplate = input(undefined);
|
|
1091
|
+
this.headerContentRef = viewChild("headerContent");
|
|
1092
|
+
this.footerContentRef = viewChild("footerContent");
|
|
1093
|
+
this.hasHeaderContent = computed(() => {
|
|
1094
|
+
const hasTemplate = !!this.headerTemplate();
|
|
1095
|
+
const hasProjectedContent = !!this.headerContentRef()?.nativeElement?.children.length;
|
|
1096
|
+
return hasTemplate || hasProjectedContent;
|
|
1097
|
+
});
|
|
1098
|
+
this.hasFooterContent = computed(() => {
|
|
1099
|
+
const hasTemplate = !!this.footerTemplate();
|
|
1100
|
+
const hasProjectedContent = !!this.footerContentRef()?.nativeElement?.children.length;
|
|
1101
|
+
return hasTemplate || hasProjectedContent;
|
|
1054
1102
|
});
|
|
1055
1103
|
}
|
|
1056
1104
|
getChildMenuId(itemIndex) {
|
|
@@ -1076,11 +1124,11 @@ class DropdownMenuComponent {
|
|
|
1076
1124
|
});
|
|
1077
1125
|
}
|
|
1078
1126
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1079
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "rte-dropdown-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent", closingMenu: "closingMenu" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-menu-id": "menuId()" } }, ngImport: i0, template: "<div class=\"rte-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n
|
|
1127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "rte-dropdown-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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: { itemEvent: "itemEvent", closingMenu: "closingMenu" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-menu-id": "menuId()" } }, queries: [{ propertyName: "headerDirective", first: true, predicate: DropdownMenuHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerDirective", first: true, predicate: DropdownMenuFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ 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-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n @if (hasHeaderContent()) {\n <div class=\"rte-dropdown-menu-header\">\n @if (headerTemplate() || headerDirective()?.templateRef) {\n <ng-container [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"></ng-container>\n } @else {\n <div #headerContent>\n <ng-content select=\"[dropdown-menu-header]\"></ng-content>\n </div>\n }\n <rte-divider />\n </div>\n }\n <div class=\"rte-dropdown-menu-content\">\n <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n @for (item of items(); track item.label; let i = $index) {\n <rte-dropdown-item [item]=\"item\" (itemEvent)=\"handleItemEvent($event)\" />\n }\n </ul>\n </div>\n @if (hasFooterContent()) {\n <div class=\"rte-dropdown-menu-footer\">\n <rte-divider />\n @if (footerTemplate() || footerDirective()?.templateRef) {\n <ng-container [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"></ng-container>\n } @else {\n <div #footerContent>\n <ng-content select=\"[dropdown-menu-footer]\"></ng-content>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:none;position:absolute}.rte-dropdown-menu{opacity:0;box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu-header,.rte-dropdown-menu-content,.rte-dropdown-menu-footer{width:100%}.rte-dropdown-menu.open{opacity:1}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DropdownItemComponent, selector: "rte-dropdown-item", inputs: ["item", "menuId"], outputs: ["itemEvent"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }] }); }
|
|
1080
1128
|
}
|
|
1081
1129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
1082
1130
|
type: Component,
|
|
1083
|
-
args: [{ selector: "rte-dropdown-menu", imports: [CommonModule, DropdownItemComponent], standalone: true, host: { "[attr.data-menu-id]": "menuId()" }, template: "<div class=\"rte-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n
|
|
1131
|
+
args: [{ selector: "rte-dropdown-menu", imports: [CommonModule, DropdownItemComponent, DividerComponent], standalone: true, host: { "[attr.data-menu-id]": "menuId()" }, template: "<div class=\"rte-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n @if (hasHeaderContent()) {\n <div class=\"rte-dropdown-menu-header\">\n @if (headerTemplate() || headerDirective()?.templateRef) {\n <ng-container [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"></ng-container>\n } @else {\n <div #headerContent>\n <ng-content select=\"[dropdown-menu-header]\"></ng-content>\n </div>\n }\n <rte-divider />\n </div>\n }\n <div class=\"rte-dropdown-menu-content\">\n <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n @for (item of items(); track item.label; let i = $index) {\n <rte-dropdown-item [item]=\"item\" (itemEvent)=\"handleItemEvent($event)\" />\n }\n </ul>\n </div>\n @if (hasFooterContent()) {\n <div class=\"rte-dropdown-menu-footer\">\n <rte-divider />\n @if (footerTemplate() || footerDirective()?.templateRef) {\n <ng-container [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"></ng-container>\n } @else {\n <div #footerContent>\n <ng-content select=\"[dropdown-menu-footer]\"></ng-content>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:none;position:absolute}.rte-dropdown-menu{opacity:0;box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu-header,.rte-dropdown-menu-content,.rte-dropdown-menu-footer{width:100%}.rte-dropdown-menu.open{opacity:1}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"] }]
|
|
1084
1132
|
}], propDecorators: { onKeyDown: [{
|
|
1085
1133
|
type: HostListener,
|
|
1086
1134
|
args: ["keydown", ["$event"]]
|
|
@@ -1208,6 +1256,18 @@ class DropdownDirective {
|
|
|
1208
1256
|
this.clickedOutside = output();
|
|
1209
1257
|
this.closedDropdown = output();
|
|
1210
1258
|
this.isActive = signal(false);
|
|
1259
|
+
this.menuInputs = computed(() => {
|
|
1260
|
+
const menu = this.menu();
|
|
1261
|
+
if (!menu) {
|
|
1262
|
+
return null;
|
|
1263
|
+
}
|
|
1264
|
+
return {
|
|
1265
|
+
items: menu.items(),
|
|
1266
|
+
headerTemplate: menu.headerDirective()?.templateRef,
|
|
1267
|
+
footerTemplate: menu.footerDirective()?.templateRef,
|
|
1268
|
+
width: menu.width(),
|
|
1269
|
+
};
|
|
1270
|
+
});
|
|
1211
1271
|
this.dropdownMenuRef = null;
|
|
1212
1272
|
this.handleClickOutside = (event) => {
|
|
1213
1273
|
const target = event.target;
|
|
@@ -1216,7 +1276,8 @@ class DropdownDirective {
|
|
|
1216
1276
|
return;
|
|
1217
1277
|
}
|
|
1218
1278
|
const clickedInTrigger = this.hostElement.contains(target);
|
|
1219
|
-
|
|
1279
|
+
const clickedInMenu = this.dropdownMenuRef?.location.nativeElement.contains(target);
|
|
1280
|
+
if (!clickedInTrigger && !clickedInMenu) {
|
|
1220
1281
|
this.closeDropdown();
|
|
1221
1282
|
this.clickedOutside.emit();
|
|
1222
1283
|
}
|
|
@@ -1237,12 +1298,11 @@ class DropdownDirective {
|
|
|
1237
1298
|
}
|
|
1238
1299
|
});
|
|
1239
1300
|
effect(() => {
|
|
1240
|
-
const
|
|
1241
|
-
if (this.dropdownMenuRef &&
|
|
1242
|
-
this.
|
|
1301
|
+
const inputs = this.menuInputs();
|
|
1302
|
+
if (this.dropdownMenuRef && inputs) {
|
|
1303
|
+
this.assignInputs();
|
|
1243
1304
|
}
|
|
1244
1305
|
});
|
|
1245
|
-
effect(() => this.assignWidth());
|
|
1246
1306
|
}
|
|
1247
1307
|
onTrigger() {
|
|
1248
1308
|
if (this.rteDropdownAutoOpen()) {
|
|
@@ -1294,8 +1354,7 @@ class DropdownDirective {
|
|
|
1294
1354
|
const menuId = this.rteDropdownId() || this.dropdownId;
|
|
1295
1355
|
this.dropdownMenuRef.setInput("menuId", menuId);
|
|
1296
1356
|
this.dropdownService.openMenu(menuId);
|
|
1297
|
-
this.
|
|
1298
|
-
this.assignWidth();
|
|
1357
|
+
this.assignInputs();
|
|
1299
1358
|
this.positionDropdownMenu(this.rteDropdownPosition());
|
|
1300
1359
|
this.addClickOutsideListener();
|
|
1301
1360
|
this.dropdownMenuRef.instance.itemEvent.subscribe((event) => {
|
|
@@ -1313,17 +1372,27 @@ class DropdownDirective {
|
|
|
1313
1372
|
});
|
|
1314
1373
|
this.destroyRef.onDestroy(() => dropdownStateSubscription.unsubscribe());
|
|
1315
1374
|
}
|
|
1316
|
-
|
|
1375
|
+
assignInputs() {
|
|
1317
1376
|
if (this.dropdownMenuRef) {
|
|
1318
1377
|
const items = this.menu()?.items() ?? [];
|
|
1319
1378
|
this.dropdownMenuRef.setInput("items", items);
|
|
1379
|
+
this.dropdownMenuRef.setInput("headerTemplate", this.menu()?.headerDirective()?.templateRef);
|
|
1380
|
+
this.dropdownMenuRef.setInput("footerTemplate", this.menu()?.footerDirective()?.templateRef);
|
|
1320
1381
|
}
|
|
1382
|
+
this.assignWidth();
|
|
1321
1383
|
}
|
|
1322
1384
|
assignWidth() {
|
|
1323
|
-
if (this.dropdownMenuRef
|
|
1324
|
-
|
|
1385
|
+
if (!this.dropdownMenuRef) {
|
|
1386
|
+
return;
|
|
1387
|
+
}
|
|
1388
|
+
const width = this.menuInputs()?.width ?? this.rteDropdownWidth();
|
|
1389
|
+
if (width !== undefined && width !== null) {
|
|
1390
|
+
this.dropdownMenuRef.setInput("width", width);
|
|
1325
1391
|
waitForNextFrame(() => this.dropdownMenuRef?.setInput("isOpen", true));
|
|
1326
1392
|
}
|
|
1393
|
+
else {
|
|
1394
|
+
this.dropdownMenuRef.setInput("isOpen", true);
|
|
1395
|
+
}
|
|
1327
1396
|
}
|
|
1328
1397
|
positionDropdownMenu(position = "bottom") {
|
|
1329
1398
|
if (this.dropdownMenuRef && this.trigger()) {
|
|
@@ -1377,14 +1446,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1377
1446
|
|
|
1378
1447
|
class DropdownModule {
|
|
1379
1448
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1380
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, imports: [DropdownDirective,
|
|
1381
|
-
|
|
1449
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, imports: [DropdownDirective,
|
|
1450
|
+
DropdownTriggerDirective,
|
|
1451
|
+
DropdownMenuComponent,
|
|
1452
|
+
DropdownItemComponent,
|
|
1453
|
+
DropdownMenuHeaderDirective,
|
|
1454
|
+
DropdownMenuFooterDirective], exports: [DropdownDirective,
|
|
1455
|
+
DropdownTriggerDirective,
|
|
1456
|
+
DropdownMenuComponent,
|
|
1457
|
+
DropdownItemComponent,
|
|
1458
|
+
DropdownMenuHeaderDirective,
|
|
1459
|
+
DropdownMenuFooterDirective] }); }
|
|
1460
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, imports: [DropdownMenuComponent,
|
|
1461
|
+
DropdownItemComponent] }); }
|
|
1382
1462
|
}
|
|
1383
1463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, decorators: [{
|
|
1384
1464
|
type: NgModule,
|
|
1385
1465
|
args: [{
|
|
1386
|
-
imports: [
|
|
1387
|
-
|
|
1466
|
+
imports: [
|
|
1467
|
+
DropdownDirective,
|
|
1468
|
+
DropdownTriggerDirective,
|
|
1469
|
+
DropdownMenuComponent,
|
|
1470
|
+
DropdownItemComponent,
|
|
1471
|
+
DropdownMenuHeaderDirective,
|
|
1472
|
+
DropdownMenuFooterDirective,
|
|
1473
|
+
],
|
|
1474
|
+
exports: [
|
|
1475
|
+
DropdownDirective,
|
|
1476
|
+
DropdownTriggerDirective,
|
|
1477
|
+
DropdownMenuComponent,
|
|
1478
|
+
DropdownItemComponent,
|
|
1479
|
+
DropdownMenuHeaderDirective,
|
|
1480
|
+
DropdownMenuFooterDirective,
|
|
1481
|
+
],
|
|
1388
1482
|
}]
|
|
1389
1483
|
}] });
|
|
1390
1484
|
|
|
@@ -1452,7 +1546,7 @@ class SplitButtonComponent {
|
|
|
1452
1546
|
}
|
|
1453
1547
|
}
|
|
1454
1548
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1455
|
-
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"], outputs: ["itemEvent", "closingMenu"] }, { kind: "directive", type: BadgeDirective, selector: "[rteBadge]", inputs: ["rteBadgeType", "rteBadgeSize", "rteBadgeContent", "rteBadgeCount", "rteBadgeIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1549
|
+
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 }); }
|
|
1456
1550
|
}
|
|
1457
1551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
1458
1552
|
type: Component,
|
|
@@ -2008,7 +2102,7 @@ class BreadcrumbsComponent {
|
|
|
2008
2102
|
});
|
|
2009
2103
|
}
|
|
2010
2104
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2011
|
-
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"], 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 }); }
|
|
2105
|
+
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 }); }
|
|
2012
2106
|
}
|
|
2013
2107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
2014
2108
|
type: Component,
|
|
@@ -2914,7 +3008,6 @@ class ToastComponent {
|
|
|
2914
3008
|
this.onActionButtonClick = input(() => { });
|
|
2915
3009
|
this.close = output();
|
|
2916
3010
|
this.displayCustomIcon = computed(() => {
|
|
2917
|
-
console.log("iconName", this.iconName());
|
|
2918
3011
|
return this.showLeftIcon() && !!this.iconName();
|
|
2919
3012
|
});
|
|
2920
3013
|
this.displayLeftIcon = computed(() => {
|
|
@@ -2923,27 +3016,66 @@ class ToastComponent {
|
|
|
2923
3016
|
this.displayActionButton = computed(() => {
|
|
2924
3017
|
return this.showActionButton() && this.actionButtonLabel() && !!this.onActionButtonClick();
|
|
2925
3018
|
});
|
|
3019
|
+
this.shouldAutoDismiss = computed(() => {
|
|
3020
|
+
return this.isOpen() && this.autoDismiss() && (!this.actionButtonLabel() || !this.showActionButton());
|
|
3021
|
+
});
|
|
3022
|
+
this.timer = signal(null);
|
|
2926
3023
|
this.position = computed(() => this.placement()?.split("-")[0]);
|
|
2927
3024
|
this.alignment = computed(() => this.placement()?.split("-")[1]);
|
|
2928
3025
|
this.visible = signal(false);
|
|
2929
3026
|
this.defaultIconName = computed(() => IconTypeMap[this.type()]);
|
|
2930
3027
|
this.iconSize = IconSize["xl"];
|
|
2931
3028
|
}
|
|
3029
|
+
ngOnChanges(changes) {
|
|
3030
|
+
if (changes["isOpen"]) {
|
|
3031
|
+
if (this.shouldAutoDismiss()) {
|
|
3032
|
+
this.startTimer();
|
|
3033
|
+
}
|
|
3034
|
+
}
|
|
3035
|
+
}
|
|
2932
3036
|
onClickActionButton() {
|
|
2933
3037
|
const action = this.onActionButtonClick();
|
|
2934
3038
|
if (action) {
|
|
2935
3039
|
action();
|
|
2936
3040
|
}
|
|
2937
3041
|
}
|
|
3042
|
+
handleMouseEnter() {
|
|
3043
|
+
if (this.timer()) {
|
|
3044
|
+
this.stopTimer();
|
|
3045
|
+
}
|
|
3046
|
+
}
|
|
3047
|
+
handleMouseLeave() {
|
|
3048
|
+
if (this.shouldAutoDismiss()) {
|
|
3049
|
+
this.startTimer();
|
|
3050
|
+
}
|
|
3051
|
+
}
|
|
2938
3052
|
clickCloseButton() {
|
|
2939
3053
|
this.close.emit();
|
|
2940
3054
|
}
|
|
3055
|
+
startTimer() {
|
|
3056
|
+
this.stopTimer();
|
|
3057
|
+
const duration = this.duration();
|
|
3058
|
+
if (duration) {
|
|
3059
|
+
const timerId = setTimeout(() => {
|
|
3060
|
+
this.close.emit();
|
|
3061
|
+
this.stopTimer();
|
|
3062
|
+
}, ToastDurationMap[duration]);
|
|
3063
|
+
this.timer.set(timerId);
|
|
3064
|
+
}
|
|
3065
|
+
}
|
|
3066
|
+
stopTimer() {
|
|
3067
|
+
const timer = this.timer();
|
|
3068
|
+
if (timer) {
|
|
3069
|
+
clearTimeout(timer);
|
|
3070
|
+
this.timer.set(null);
|
|
3071
|
+
}
|
|
3072
|
+
}
|
|
2941
3073
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2942
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToastComponent, isStandalone: true, selector: "rte-toast", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoDismiss: { classPropertyName: "autoDismiss", publicName: "autoDismiss", isSignal: true, isRequired: false, transformFunction: null }, showActionButton: { classPropertyName: "showActionButton", publicName: "showActionButton", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, showLeftIcon: { classPropertyName: "showLeftIcon", publicName: "showLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, actionButtonLabel: { classPropertyName: "actionButtonLabel", publicName: "actionButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, onActionButtonClick: { classPropertyName: "onActionButtonClick", publicName: "onActionButtonClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div\n class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n role=\"status\"\n
|
|
3074
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToastComponent, isStandalone: true, selector: "rte-toast", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoDismiss: { classPropertyName: "autoDismiss", publicName: "autoDismiss", isSignal: true, isRequired: false, transformFunction: null }, showActionButton: { classPropertyName: "showActionButton", publicName: "showActionButton", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, showLeftIcon: { classPropertyName: "showLeftIcon", publicName: "showLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, actionButtonLabel: { classPropertyName: "actionButtonLabel", publicName: "actionButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, onActionButtonClick: { classPropertyName: "onActionButtonClick", publicName: "onActionButtonClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n role=\"status\"\n [ngClass]=\"{ open: isOpen() }\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n>\n <div class=\"rte-toast-content\">\n @if (displayLeftIcon()) {\n <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"defaultIconName()\" [size]=\"iconSize\" />\n } @else {\n @if (displayCustomIcon()) {\n <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"iconName()!\" [size]=\"iconSize\" />\n }\n }\n <span class=\"rte-toast-message\">{{ message() }}</span>\n </div>\n @if (displayActionButton()) {\n <button rteButton rteButtonVariant=\"text\" class=\"rte-toast-action-button\" (click)=\"onClickActionButton()\">\n {{ actionButtonLabel() }}\n </button>\n }\n @if (closable()) {\n <rte-icon-button\n name=\"close\"\n [attr.data-testid]=\"'toast-close-button'\"\n [variant]=\"type() === 'neutral' ? 'reverse' : 'neutral'\"\n (clickEvent)=\"clickCloseButton()\"\n />\n }\n</div>\n", styles: [".rte-toast{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%);display:flex;width:400px;min-width:240px;max-width:336px;padding:8px 4px 8px 16px;align-items:center;border-radius:4px;border-bottom:4px solid var(--border-info);color:var(--content-primary);background-color:var(--background-default);z-index:10;position:fixed;inset:auto;opacity:0;transition:opacity .3s ease,transform .2s ease}.rte-toast.top{top:12px}.rte-toast.bottom{bottom:12px}.rte-toast.bottom.center{left:50%;transform:translate(-50%,10px)}.rte-toast.bottom.center.open{opacity:1;transform:translate(-50%)}.rte-toast.left{left:12px;transform:translate(-10px)}.rte-toast.left.open{opacity:1;transform:translate(0)}.rte-toast.right{right:12px;transform:translate(10px)}.rte-toast.right.open{opacity:1;transform:translate(0)}.rte-toast .rte-toast-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;width:100%;-webkit-line-clamp:2;line-clamp:2}.rte-toast .rte-toast-icon{flex:1 0 auto}.rte-toast .rte-toast-content{display:flex;align-items:center;gap:12px;flex-grow:1;overflow:hidden;width:100%}.rte-toast.info{border-bottom-color:var(--border-info)}.rte-toast.info .rte-toast-icon{color:var(--content-info-default)}.rte-toast.error{border-bottom-color:var(--border-danger)}.rte-toast.error .rte-toast-icon{color:var(--content-danger-default)}.rte-toast.success{border-bottom-color:var(--border-success)}.rte-toast.success .rte-toast-icon{color:var(--content-success-default)}.rte-toast.warning{border-bottom-color:var(--border-warning)}.rte-toast.warning .rte-toast-icon{color:var(--content-warning-default)}.rte-toast.neutral{background-color:var(--background-inverse);color:var(--content-primary-inverse);border-bottom-color:var(--border-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2943
3075
|
}
|
|
2944
3076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastComponent, decorators: [{
|
|
2945
3077
|
type: Component,
|
|
2946
|
-
args: [{ selector: "rte-toast", imports: [CommonModule, IconComponent, IconButtonComponent, ButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n role=\"status\"\n
|
|
3078
|
+
args: [{ selector: "rte-toast", imports: [CommonModule, IconComponent, IconButtonComponent, ButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n role=\"status\"\n [ngClass]=\"{ open: isOpen() }\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n>\n <div class=\"rte-toast-content\">\n @if (displayLeftIcon()) {\n <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"defaultIconName()\" [size]=\"iconSize\" />\n } @else {\n @if (displayCustomIcon()) {\n <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"iconName()!\" [size]=\"iconSize\" />\n }\n }\n <span class=\"rte-toast-message\">{{ message() }}</span>\n </div>\n @if (displayActionButton()) {\n <button rteButton rteButtonVariant=\"text\" class=\"rte-toast-action-button\" (click)=\"onClickActionButton()\">\n {{ actionButtonLabel() }}\n </button>\n }\n @if (closable()) {\n <rte-icon-button\n name=\"close\"\n [attr.data-testid]=\"'toast-close-button'\"\n [variant]=\"type() === 'neutral' ? 'reverse' : 'neutral'\"\n (clickEvent)=\"clickCloseButton()\"\n />\n }\n</div>\n", styles: [".rte-toast{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%);display:flex;width:400px;min-width:240px;max-width:336px;padding:8px 4px 8px 16px;align-items:center;border-radius:4px;border-bottom:4px solid var(--border-info);color:var(--content-primary);background-color:var(--background-default);z-index:10;position:fixed;inset:auto;opacity:0;transition:opacity .3s ease,transform .2s ease}.rte-toast.top{top:12px}.rte-toast.bottom{bottom:12px}.rte-toast.bottom.center{left:50%;transform:translate(-50%,10px)}.rte-toast.bottom.center.open{opacity:1;transform:translate(-50%)}.rte-toast.left{left:12px;transform:translate(-10px)}.rte-toast.left.open{opacity:1;transform:translate(0)}.rte-toast.right{right:12px;transform:translate(10px)}.rte-toast.right.open{opacity:1;transform:translate(0)}.rte-toast .rte-toast-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;width:100%;-webkit-line-clamp:2;line-clamp:2}.rte-toast .rte-toast-icon{flex:1 0 auto}.rte-toast .rte-toast-content{display:flex;align-items:center;gap:12px;flex-grow:1;overflow:hidden;width:100%}.rte-toast.info{border-bottom-color:var(--border-info)}.rte-toast.info .rte-toast-icon{color:var(--content-info-default)}.rte-toast.error{border-bottom-color:var(--border-danger)}.rte-toast.error .rte-toast-icon{color:var(--content-danger-default)}.rte-toast.success{border-bottom-color:var(--border-success)}.rte-toast.success .rte-toast-icon{color:var(--content-success-default)}.rte-toast.warning{border-bottom-color:var(--border-warning)}.rte-toast.warning .rte-toast-icon{color:var(--content-warning-default)}.rte-toast.neutral{background-color:var(--background-inverse);color:var(--content-primary-inverse);border-bottom-color:var(--border-primary)}\n"] }]
|
|
2947
3079
|
}] });
|
|
2948
3080
|
|
|
2949
3081
|
class ToastService {
|
|
@@ -3257,7 +3389,7 @@ class SelectComponent {
|
|
|
3257
3389
|
useExisting: SelectComponent,
|
|
3258
3390
|
multi: true,
|
|
3259
3391
|
},
|
|
3260
|
-
], 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"], 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 }); }
|
|
3392
|
+
], 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 }); }
|
|
3261
3393
|
}
|
|
3262
3394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
|
|
3263
3395
|
type: Component,
|
|
@@ -3270,9 +3402,343 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3270
3402
|
], 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"] }]
|
|
3271
3403
|
}] });
|
|
3272
3404
|
|
|
3405
|
+
class TabItemComponent {
|
|
3406
|
+
constructor() {
|
|
3407
|
+
this.direction = input("horizontal");
|
|
3408
|
+
this.option = input();
|
|
3409
|
+
this.compactSpacing = input();
|
|
3410
|
+
this.isSelected = input(false);
|
|
3411
|
+
this.click = output();
|
|
3412
|
+
this.handleKeydown = input();
|
|
3413
|
+
this.inverted = input(false);
|
|
3414
|
+
this.isHidden = input(false);
|
|
3415
|
+
this.tabItemRef = viewChild("tabItem");
|
|
3416
|
+
this.hoverIndicatorStyle = signal(null);
|
|
3417
|
+
this.displayBadge = (option) => {
|
|
3418
|
+
return !!(option.badgeContent || option.badgeType || option.badgeIcon || option.badgeCount);
|
|
3419
|
+
};
|
|
3420
|
+
this.hoverIndicatorWidth = computed(() => {
|
|
3421
|
+
return `${this.hoverIndicatorStyle()?.width}px`;
|
|
3422
|
+
});
|
|
3423
|
+
this.hoverIndicatorHeight = computed(() => {
|
|
3424
|
+
return `${this.hoverIndicatorStyle()?.height}px`;
|
|
3425
|
+
});
|
|
3426
|
+
this.hoverIndicatorLeft = computed(() => {
|
|
3427
|
+
return `${this.hoverIndicatorStyle()?.left}px`;
|
|
3428
|
+
});
|
|
3429
|
+
this.hoverIndicatorTop = computed(() => {
|
|
3430
|
+
return `${this.hoverIndicatorStyle()?.top}px`;
|
|
3431
|
+
});
|
|
3432
|
+
this.hoverIndicatorOpacity = computed(() => {
|
|
3433
|
+
return this.hoverIndicatorStyle()?.opacity ?? 0;
|
|
3434
|
+
});
|
|
3435
|
+
this.computeHoverIndicatorStyle = () => {
|
|
3436
|
+
if (this.direction() === "horizontal") {
|
|
3437
|
+
this.hoverIndicatorStyle.set({
|
|
3438
|
+
width: this.tabItemRef()?.nativeElement.offsetWidth,
|
|
3439
|
+
height: 2,
|
|
3440
|
+
left: this.tabItemRef()?.nativeElement.offsetLeft,
|
|
3441
|
+
top: this.tabItemRef()
|
|
3442
|
+
? this.tabItemRef().nativeElement.offsetTop + this.tabItemRef().nativeElement.offsetHeight
|
|
3443
|
+
: 0,
|
|
3444
|
+
opacity: 0,
|
|
3445
|
+
});
|
|
3446
|
+
}
|
|
3447
|
+
else {
|
|
3448
|
+
this.hoverIndicatorStyle.set({
|
|
3449
|
+
width: 2,
|
|
3450
|
+
height: this.tabItemRef()?.nativeElement.offsetHeight,
|
|
3451
|
+
left: this.tabItemRef()?.nativeElement.offsetLeft && this.tabItemRef().nativeElement.offsetLeft - 4,
|
|
3452
|
+
top: this.tabItemRef().nativeElement.offsetTop,
|
|
3453
|
+
opacity: 0,
|
|
3454
|
+
});
|
|
3455
|
+
}
|
|
3456
|
+
};
|
|
3457
|
+
}
|
|
3458
|
+
ngAfterViewInit() {
|
|
3459
|
+
this.computeHoverIndicatorStyle();
|
|
3460
|
+
if (this.tabItemRef && this.tabItemRef()?.nativeElement) {
|
|
3461
|
+
if (this.option()?.disabled)
|
|
3462
|
+
return;
|
|
3463
|
+
window.addEventListener("resize", this.computeHoverIndicatorStyle);
|
|
3464
|
+
const parent = this.tabItemRef()?.nativeElement.parentElement?.parentElement;
|
|
3465
|
+
if (parent) {
|
|
3466
|
+
parent.addEventListener("scroll", this.computeHoverIndicatorStyle);
|
|
3467
|
+
}
|
|
3468
|
+
}
|
|
3469
|
+
}
|
|
3470
|
+
ngOnDestroy() {
|
|
3471
|
+
const parent = this.tabItemRef()?.nativeElement.parentElement?.parentElement;
|
|
3472
|
+
window.removeEventListener("resize", this.computeHoverIndicatorStyle);
|
|
3473
|
+
if (parent) {
|
|
3474
|
+
parent.removeEventListener("scroll", this.computeHoverIndicatorStyle);
|
|
3475
|
+
}
|
|
3476
|
+
}
|
|
3477
|
+
onClickTabItem(event, id) {
|
|
3478
|
+
this.hoverIndicatorStyle.set({
|
|
3479
|
+
...this.hoverIndicatorStyle(),
|
|
3480
|
+
opacity: 0,
|
|
3481
|
+
});
|
|
3482
|
+
if (!this.option()?.disabled) {
|
|
3483
|
+
this.click.emit(id);
|
|
3484
|
+
}
|
|
3485
|
+
else {
|
|
3486
|
+
event.stopPropagation();
|
|
3487
|
+
}
|
|
3488
|
+
}
|
|
3489
|
+
handleMouseHover() {
|
|
3490
|
+
if (!this.isSelected()) {
|
|
3491
|
+
this.hoverIndicatorStyle.set({
|
|
3492
|
+
...this.hoverIndicatorStyle(),
|
|
3493
|
+
opacity: 1,
|
|
3494
|
+
});
|
|
3495
|
+
}
|
|
3496
|
+
}
|
|
3497
|
+
handleMouseOut() {
|
|
3498
|
+
this.hoverIndicatorStyle.set({
|
|
3499
|
+
...this.hoverIndicatorStyle(),
|
|
3500
|
+
opacity: 0,
|
|
3501
|
+
});
|
|
3502
|
+
}
|
|
3503
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3504
|
+
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-secondary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=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[data-selected=true]:not([data-disabled=true]),.rte-tabitem:hover:not([data-disabled=true]){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}.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 }); }
|
|
3505
|
+
}
|
|
3506
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, decorators: [{
|
|
3507
|
+
type: Component,
|
|
3508
|
+
args: [{ selector: "rte-tab-item", imports: [CommonModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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-secondary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=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[data-selected=true]:not([data-disabled=true]),.rte-tabitem:hover:not([data-disabled=true]){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}.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"] }]
|
|
3509
|
+
}] });
|
|
3510
|
+
|
|
3511
|
+
class TabComponent {
|
|
3512
|
+
constructor() {
|
|
3513
|
+
this.alignment = input("start");
|
|
3514
|
+
this.direction = input("horizontal");
|
|
3515
|
+
this.options = input([]);
|
|
3516
|
+
this.selectedTabId = input();
|
|
3517
|
+
this.compactSpacing = input(false);
|
|
3518
|
+
this.overflowType = input("scrollable");
|
|
3519
|
+
this.inverted = input(false);
|
|
3520
|
+
this.sliderLeft = signal(0);
|
|
3521
|
+
this.sliderWidth = signal(0);
|
|
3522
|
+
this.sliderTop = signal(0);
|
|
3523
|
+
this.sliderHeight = signal(0);
|
|
3524
|
+
this.tabItemRefs = viewChildren("tabItem");
|
|
3525
|
+
this.containerRef = viewChild("tabList");
|
|
3526
|
+
this.hoverIndicatorRefs = viewChildren("hoverIndicator");
|
|
3527
|
+
this.selectedTabRef = computed(() => {
|
|
3528
|
+
const idx = this.options().findIndex((opt) => opt.id === this.selectedTabId());
|
|
3529
|
+
const tabItem = this.tabItemRefs()[idx];
|
|
3530
|
+
return tabItem;
|
|
3531
|
+
});
|
|
3532
|
+
this.hoverIndicatorStyle = signal(null);
|
|
3533
|
+
this.change = output();
|
|
3534
|
+
this.isScrollable = signal(false);
|
|
3535
|
+
this.isOverflowingLeft = signal(false);
|
|
3536
|
+
this.isOverflowingRight = signal(false);
|
|
3537
|
+
this.isOverflowingTop = signal(false);
|
|
3538
|
+
this.isOverflowingBottom = signal(false);
|
|
3539
|
+
this.canScrollBackward = computed(() => {
|
|
3540
|
+
return this.isOverflowingLeft() || this.isOverflowingTop();
|
|
3541
|
+
});
|
|
3542
|
+
this.canScrollForward = computed(() => {
|
|
3543
|
+
return this.isOverflowingRight() || this.isOverflowingBottom();
|
|
3544
|
+
});
|
|
3545
|
+
this.isHorizontal = computed(() => this.direction() === "horizontal" && (this.isOverflowingRight() || this.isOverflowingLeft()));
|
|
3546
|
+
this.shouldDisplayDropdown = computed(() => this.overflowType() === "dropdown" && this.isHorizontal());
|
|
3547
|
+
this.selectedTab = computed(() => {
|
|
3548
|
+
return this.options().find((option) => option.id === this.selectedTabId());
|
|
3549
|
+
});
|
|
3550
|
+
this.dropdownFilteredOptions = computed(() => {
|
|
3551
|
+
return this.options().filter((option) => option.id !== this.selectedTabId());
|
|
3552
|
+
});
|
|
3553
|
+
this.displayBadge = (option) => {
|
|
3554
|
+
return (!!option.showBadge ||
|
|
3555
|
+
(option.badgeCount !== undefined && option.badgeCount > 0 && option.badgeContent === "number") ||
|
|
3556
|
+
(option.badgeContent === "icon" && !!option.badgeIcon));
|
|
3557
|
+
};
|
|
3558
|
+
this.tabItemSelectedIndicatorStyle = computed(() => ({
|
|
3559
|
+
left: `${this.shouldDisplayDropdown() ? 0 : this.sliderLeft()}px`,
|
|
3560
|
+
top: `${this.sliderTop()}px`,
|
|
3561
|
+
width: `${this.sliderWidth() + (this.shouldDisplayDropdown() ? 32 : 0)}px`,
|
|
3562
|
+
height: `${this.sliderHeight()}px`,
|
|
3563
|
+
}));
|
|
3564
|
+
this.onKeydownTabItem = (event) => {
|
|
3565
|
+
const isVertical = this.direction() === "vertical";
|
|
3566
|
+
const isDownKeyPressed = isVertical && event.key === ARROW_DOWN_KEY;
|
|
3567
|
+
const isUpKeyPressed = isVertical && event.key === ARROW_UP_KEY;
|
|
3568
|
+
const isRightKeyPressed = !isVertical && event.key === ARROW_RIGHT_KEY;
|
|
3569
|
+
const isLeftKeyPressed = !isVertical && event.key === ARROW_LEFT_KEY;
|
|
3570
|
+
const isArrowNext = isDownKeyPressed || isRightKeyPressed;
|
|
3571
|
+
const isArrowPrev = isUpKeyPressed || isLeftKeyPressed;
|
|
3572
|
+
if (isArrowNext || isArrowPrev) {
|
|
3573
|
+
event.preventDefault();
|
|
3574
|
+
this.focusItem(isArrowNext ? "next" : "previous");
|
|
3575
|
+
}
|
|
3576
|
+
};
|
|
3577
|
+
this.onClickTabItem = (id) => {
|
|
3578
|
+
if (id !== this.selectedTabId()) {
|
|
3579
|
+
this.change.emit(id);
|
|
3580
|
+
if (!this.shouldDisplayDropdown()) {
|
|
3581
|
+
const newTab = this.getTabItem(id)?.tabItemRef()?.nativeElement;
|
|
3582
|
+
if (newTab) {
|
|
3583
|
+
const container = this.containerRef()?.nativeElement;
|
|
3584
|
+
if (container) {
|
|
3585
|
+
scrollToSelectedTab(newTab, container, this.direction());
|
|
3586
|
+
}
|
|
3587
|
+
}
|
|
3588
|
+
}
|
|
3589
|
+
}
|
|
3590
|
+
};
|
|
3591
|
+
this.getTabItem = (id) => {
|
|
3592
|
+
return this.tabItemRefs().find((tab) => tab.option()?.id === id);
|
|
3593
|
+
};
|
|
3594
|
+
this.focusItem = (direction) => {
|
|
3595
|
+
const currentIndex = this.tabItemRefs().findIndex((tab) => tab === this.selectedTabRef());
|
|
3596
|
+
const maxIterations = this.tabItemRefs().length;
|
|
3597
|
+
let newIndex = this.computeNextItemIndex(currentIndex, maxIterations, direction);
|
|
3598
|
+
let counter = 0;
|
|
3599
|
+
while (this.tabItemRefs()[newIndex].tabItemRef()?.nativeElement.getAttribute("data-disabled") === "true" &&
|
|
3600
|
+
counter < maxIterations) {
|
|
3601
|
+
newIndex = this.computeNextItemIndex(newIndex, maxIterations, direction);
|
|
3602
|
+
counter++;
|
|
3603
|
+
}
|
|
3604
|
+
this.tabItemRefs()[newIndex].tabItemRef()?.nativeElement.focus();
|
|
3605
|
+
this.tabItemRefs()[newIndex].tabItemRef()?.nativeElement.click();
|
|
3606
|
+
};
|
|
3607
|
+
this.computeScrollableSignals = () => {
|
|
3608
|
+
this.computeIsScrollable();
|
|
3609
|
+
this.computeIsOverflowingLeft();
|
|
3610
|
+
this.computeIsOverflowingRight();
|
|
3611
|
+
this.computeIsOverflowingTop();
|
|
3612
|
+
this.computeIsOverflowingBottom();
|
|
3613
|
+
};
|
|
3614
|
+
}
|
|
3615
|
+
isSelected(id) {
|
|
3616
|
+
return this.selectedTabId() === id;
|
|
3617
|
+
}
|
|
3618
|
+
ngAfterViewInit() {
|
|
3619
|
+
this.updateSelectedTabItemIndicator();
|
|
3620
|
+
this.computeScrollableSignals();
|
|
3621
|
+
window.addEventListener("resize", this.updateSelectedTabItemIndicator.bind(this));
|
|
3622
|
+
window.addEventListener("resize", this.computeScrollableSignals.bind(this));
|
|
3623
|
+
if (this.containerRef()) {
|
|
3624
|
+
this.containerRef()?.nativeElement.addEventListener("scroll", this.computeScrollableSignals.bind(this));
|
|
3625
|
+
}
|
|
3626
|
+
this.hoverIndicatorRefs().forEach((hoverIndicator) => {
|
|
3627
|
+
hoverIndicator.nativeElement.style.opacity = "0";
|
|
3628
|
+
});
|
|
3629
|
+
}
|
|
3630
|
+
ngOnDestroy() {
|
|
3631
|
+
window.removeEventListener("resize", this.updateSelectedTabItemIndicator.bind(this));
|
|
3632
|
+
window.removeEventListener("resize", this.computeScrollableSignals.bind(this));
|
|
3633
|
+
if (this.containerRef()) {
|
|
3634
|
+
this.containerRef()?.nativeElement.removeEventListener("scroll", this.computeScrollableSignals.bind(this));
|
|
3635
|
+
}
|
|
3636
|
+
}
|
|
3637
|
+
ngOnChanges(changes) {
|
|
3638
|
+
if (changes["selectedTabId"]) {
|
|
3639
|
+
this.updateSelectedTabItemIndicator();
|
|
3640
|
+
}
|
|
3641
|
+
}
|
|
3642
|
+
scrollBackward() {
|
|
3643
|
+
if (this.containerRef()?.nativeElement) {
|
|
3644
|
+
const scrollObject = this.direction() === "horizontal" ? { left: -300 } : { top: -300 };
|
|
3645
|
+
this.containerRef()?.nativeElement.scrollBy({ ...scrollObject, behavior: "smooth" });
|
|
3646
|
+
}
|
|
3647
|
+
}
|
|
3648
|
+
scrollForward() {
|
|
3649
|
+
if (this.containerRef() && this.containerRef()?.nativeElement) {
|
|
3650
|
+
const scrollObject = this.direction() === "horizontal" ? { left: 300 } : { top: 300 };
|
|
3651
|
+
this.containerRef()?.nativeElement.scrollBy({ ...scrollObject, behavior: "smooth" });
|
|
3652
|
+
}
|
|
3653
|
+
}
|
|
3654
|
+
computeNextItemIndex(currentIndex, totalItems, direction) {
|
|
3655
|
+
return direction === "next" ? (currentIndex + 1) % totalItems : (currentIndex - 1 + totalItems) % totalItems;
|
|
3656
|
+
}
|
|
3657
|
+
computeIndicatorStyle(tabItem) {
|
|
3658
|
+
if (this.direction() === "horizontal") {
|
|
3659
|
+
return {
|
|
3660
|
+
width: tabItem.offsetWidth,
|
|
3661
|
+
left: tabItem.offsetLeft,
|
|
3662
|
+
top: tabItem.offsetTop + tabItem.offsetHeight,
|
|
3663
|
+
};
|
|
3664
|
+
}
|
|
3665
|
+
else {
|
|
3666
|
+
return {
|
|
3667
|
+
left: 0,
|
|
3668
|
+
top: tabItem.offsetTop,
|
|
3669
|
+
height: tabItem.offsetHeight,
|
|
3670
|
+
width: 2,
|
|
3671
|
+
};
|
|
3672
|
+
}
|
|
3673
|
+
}
|
|
3674
|
+
updateSelectedTabItemIndicator() {
|
|
3675
|
+
const idx = this.options().findIndex((opt) => opt.id === this.selectedTabId());
|
|
3676
|
+
const tabItem = this.tabItemRefs()[idx];
|
|
3677
|
+
if (tabItem?.tabItemRef) {
|
|
3678
|
+
if (tabItem.option()?.disabled) {
|
|
3679
|
+
return;
|
|
3680
|
+
}
|
|
3681
|
+
const tabItemRef = tabItem.tabItemRef?.();
|
|
3682
|
+
if (tabItemRef && tabItemRef.nativeElement) {
|
|
3683
|
+
const tabItemElement = tabItemRef.nativeElement;
|
|
3684
|
+
const indicatorStyle = this.computeIndicatorStyle(tabItemElement);
|
|
3685
|
+
this.sliderHeight.set(indicatorStyle.height ?? 2);
|
|
3686
|
+
this.sliderTop.set(indicatorStyle.top);
|
|
3687
|
+
this.sliderWidth.set(indicatorStyle.width ?? 2);
|
|
3688
|
+
this.sliderLeft.set(indicatorStyle.left);
|
|
3689
|
+
}
|
|
3690
|
+
}
|
|
3691
|
+
}
|
|
3692
|
+
computeIsScrollable() {
|
|
3693
|
+
if (this.containerRef()?.nativeElement) {
|
|
3694
|
+
const containerNativeElement = this.containerRef()?.nativeElement;
|
|
3695
|
+
if (containerNativeElement) {
|
|
3696
|
+
this.isScrollable.set(containerNativeElement.offsetWidth < containerNativeElement.scrollWidth ||
|
|
3697
|
+
containerNativeElement.offsetHeight < containerNativeElement.scrollHeight);
|
|
3698
|
+
}
|
|
3699
|
+
}
|
|
3700
|
+
return false;
|
|
3701
|
+
}
|
|
3702
|
+
computeIsOverflowingLeft() {
|
|
3703
|
+
const containerNativeElement = this.containerRef()?.nativeElement;
|
|
3704
|
+
if (containerNativeElement) {
|
|
3705
|
+
const isOverFlowingLeft = containerNativeElement.scrollLeft > 0;
|
|
3706
|
+
this.isOverflowingLeft.set(this.isScrollable() && isOverFlowingLeft);
|
|
3707
|
+
}
|
|
3708
|
+
}
|
|
3709
|
+
computeIsOverflowingRight() {
|
|
3710
|
+
const containerNativeElement = this.containerRef()?.nativeElement;
|
|
3711
|
+
if (containerNativeElement) {
|
|
3712
|
+
const isOverflowingRight = containerNativeElement.scrollWidth - containerNativeElement.clientWidth - containerNativeElement.scrollLeft > 0;
|
|
3713
|
+
this.isOverflowingRight.set(this.isScrollable() && isOverflowingRight);
|
|
3714
|
+
}
|
|
3715
|
+
}
|
|
3716
|
+
computeIsOverflowingTop() {
|
|
3717
|
+
const containerNativeElement = this.containerRef()?.nativeElement;
|
|
3718
|
+
if (containerNativeElement) {
|
|
3719
|
+
const isOverFlowingTop = containerNativeElement.scrollTop > 0;
|
|
3720
|
+
this.isOverflowingTop.set(this.isScrollable() && isOverFlowingTop);
|
|
3721
|
+
}
|
|
3722
|
+
}
|
|
3723
|
+
computeIsOverflowingBottom() {
|
|
3724
|
+
const containerNativeElement = this.containerRef()?.nativeElement;
|
|
3725
|
+
if (containerNativeElement) {
|
|
3726
|
+
const isOverflowingBottom = containerNativeElement.scrollHeight - containerNativeElement.clientHeight - containerNativeElement.scrollTop >
|
|
3727
|
+
0;
|
|
3728
|
+
this.isOverflowingBottom.set(this.isScrollable() && isOverflowingBottom);
|
|
3729
|
+
}
|
|
3730
|
+
}
|
|
3731
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3732
|
+
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 }); }
|
|
3733
|
+
}
|
|
3734
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, decorators: [{
|
|
3735
|
+
type: Component,
|
|
3736
|
+
args: [{ selector: "rte-tab", imports: [CommonModule, TabItemComponent, IconButtonComponent, DropdownModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
3737
|
+
}] });
|
|
3738
|
+
|
|
3273
3739
|
/**
|
|
3274
3740
|
* Generated bundle index. Do not edit.
|
|
3275
3741
|
*/
|
|
3276
3742
|
|
|
3277
|
-
export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, SwitchComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
|
|
3743
|
+
export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
|
|
3278
3744
|
//# sourceMappingURL=design-system-rte-angular.mjs.map
|