@yuuvis/client-framework 2.16.0 → 2.18.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/fesm2022/yuuvis-client-framework-object-details.mjs +21 -10
- package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs +1 -1
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-overflow-menu.mjs +2 -2
- package/fesm2022/yuuvis-client-framework-overflow-menu.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-token-search.mjs +503 -0
- package/fesm2022/yuuvis-client-framework-token-search.mjs.map +1 -0
- package/overflow-menu/lib/overflow-menu.interface.d.ts +1 -0
- package/package.json +8 -4
- package/token-search/README.md +3 -0
- package/token-search/index.d.ts +3 -0
- package/token-search/lib/token-search.component.d.ts +35 -0
- package/token-search/lib/token-search.interface.d.ts +27 -0
- package/token-search/lib/token-search.module.d.ts +7 -0
- package/widget-grid/lib/widget-grid.interface.d.ts +1 -1
|
@@ -107,13 +107,13 @@ class OverflowMenuComponent {
|
|
|
107
107
|
this.#itemObserver.observer.disconnect();
|
|
108
108
|
}
|
|
109
109
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: OverflowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
110
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: OverflowMenuComponent, isStandalone: true, selector: "yuv-overflow-menu", inputs: { overflowIcon: { classPropertyName: "overflowIcon", publicName: "overflowIcon", isSignal: true, isRequired: false, transformFunction: null }, groupLabels: { classPropertyName: "groupLabels", publicName: "groupLabels", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.vertical": "vertical()" } }, ngImport: i0, template: "<div class=\"overflow-wrapper\">\n @for (group of __menuGroups(); track group.id) {\n <section>\n @for (item of group.items; track item.id) {\n <button\n mat-icon-button\n class=\"menu-item\"\n [disabled]=\"item.disabled\"\n [ngClass]=\"{ active: item.active }\"\n [matTooltip]=\"item.label\"\n [matTooltipPosition]=\"vertical() ? 'after' : 'below'\"\n [attr.data-item-id]=\"item.id\"\n (click)=\"item.callback(item)\"\n >\n <mat-icon>{{ item.icon }}</mat-icon>\n </button>\n }\n </section>\n }\n</div>\n\n<button class=\"overflow-trigger\" inert=\"true\" mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>{{ overflowIcon() }}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n @let gl = groupLabels();\n @for (g of overflowGroups(); track g.id) {\n @if (gl && gl[g.id]) {\n <div class=\"group\">{{ gl[g.id] }}</div>\n }\n @for (item of g.items; track item.id) {\n <div class=\"menu-item\" mat-menu-item [disabled]=\"item.disabled\" [ngStyle]=\"item.active ? activeStyles : {}\" (click)=\"item.callback(item)\">\n <mat-icon>{{ item.icon }}</mat-icon>\n <span> {{ item.label }} </span>\n </div>\n }\n }\n</mat-menu>\n", styles: [":host{--menu-group-divider-color: var(--ymt-outline-variant);--menu-item-gap: 2px;--menu-item-padding: var(--ymt-spacing-xs);--menu-item-icon-size: 24px;--menu-item-overflow-padding: var(--menu-item-padding);--menu-item-overflow-icon-size: var(--menu-item-icon-size);--menu-item-max-label-width: 20ch;--menu-item-flow: row;--menu-active-background: var(--ymt-primary-container);--menu-on-active: var(--ymt-on-primary-container);overflow:hidden;display:flex;align-items:center;flex-wrap:nowrap}:host.vertical{height:100%;flex-direction:column}:host.vertical .overflow-wrapper>section{flex-direction:column}:host.noLabel .menu-item span{display:none}:host .overflow-wrapper{overflow:hidden;display:flex}:host .overflow-wrapper>section{display:flex;gap:var(--menu-item-gap)}:host .overflow-wrapper>section:not(:first-child){border-inline-start:1px solid var(--menu-group-divider-color);padding-inline-start:var(--ymt-spacing-xs)}:host .menu-item{display:flex;align-items:center;border-radius:var(--ymt-corner-s)}:host .menu-item:after{content:\"\";height:var(--ymt-sizing-3xs);width:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);position:absolute;left:50%;bottom:0;transform:translate3d(-50%,0,0);background-color:transparent;transition:background-color .1s ease-in-out}:host .menu-item.active:after{background-color:var(--menu-active-background);background-color:var(--ymt-primary);color:var(--menu-on-active)}:host .menu-item[inert=true]{opacity:0}:host .overflow-trigger{opacity:0;display:none}:host .overflow-trigger:not([inert=true]){opacity:1;display:inline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
110
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: OverflowMenuComponent, isStandalone: true, selector: "yuv-overflow-menu", inputs: { overflowIcon: { classPropertyName: "overflowIcon", publicName: "overflowIcon", isSignal: true, isRequired: false, transformFunction: null }, groupLabels: { classPropertyName: "groupLabels", publicName: "groupLabels", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.vertical": "vertical()" } }, ngImport: i0, template: "<div class=\"overflow-wrapper\">\n @for (group of __menuGroups(); track group.id) {\n <section>\n @for (item of group.items; track item.id) {\n <button\n mat-icon-button\n class=\"menu-item\"\n [disabled]=\"item.disabled\"\n [ngClass]=\"{ active: item.active }\"\n [matTooltip]=\"item.label\"\n [matTooltipPosition]=\"vertical() ? 'after' : 'below'\"\n [attr.data-item-id]=\"item.id\"\n (click)=\"item.callback(item)\"\n >\n @if (item.svgIcon) {\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\n } @else {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n }\n </section>\n }\n</div>\n\n<button class=\"overflow-trigger\" inert=\"true\" mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>{{ overflowIcon() }}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n @let gl = groupLabels();\n @for (g of overflowGroups(); track g.id) {\n @if (gl && gl[g.id]) {\n <div class=\"group\">{{ gl[g.id] }}</div>\n }\n @for (item of g.items; track item.id) {\n <div class=\"menu-item\" mat-menu-item [disabled]=\"item.disabled\" [ngStyle]=\"item.active ? activeStyles : {}\" (click)=\"item.callback(item)\">\n @if (item.svgIcon) {\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\n } @else {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n <span> {{ item.label }} </span>\n </div>\n }\n }\n</mat-menu>\n", styles: [":host{--menu-group-divider-color: var(--ymt-outline-variant);--menu-item-gap: 2px;--menu-item-padding: var(--ymt-spacing-xs);--menu-item-icon-size: 24px;--menu-item-overflow-padding: var(--menu-item-padding);--menu-item-overflow-icon-size: var(--menu-item-icon-size);--menu-item-max-label-width: 20ch;--menu-item-flow: row;--menu-active-background: var(--ymt-primary-container);--menu-on-active: var(--ymt-on-primary-container);overflow:hidden;display:flex;align-items:center;flex-wrap:nowrap}:host.vertical{height:100%;flex-direction:column}:host.vertical .overflow-wrapper>section{flex-direction:column}:host.noLabel .menu-item span{display:none}:host .overflow-wrapper{overflow:hidden;display:flex}:host .overflow-wrapper>section{display:flex;gap:var(--menu-item-gap)}:host .overflow-wrapper>section:not(:first-child){border-inline-start:1px solid var(--menu-group-divider-color);padding-inline-start:var(--ymt-spacing-xs)}:host .menu-item{display:flex;align-items:center;border-radius:var(--ymt-corner-s)}:host .menu-item:after{content:\"\";height:var(--ymt-sizing-3xs);width:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);position:absolute;left:50%;bottom:0;transform:translate3d(-50%,0,0);background-color:transparent;transition:background-color .1s ease-in-out}:host .menu-item.active:after{background-color:var(--menu-active-background);background-color:var(--ymt-primary);color:var(--menu-on-active)}:host .menu-item[inert=true]{opacity:0}:host .overflow-trigger{opacity:0;display:none}:host .overflow-trigger:not([inert=true]){opacity:1;display:inline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
111
111
|
}
|
|
112
112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: OverflowMenuComponent, decorators: [{
|
|
113
113
|
type: Component,
|
|
114
114
|
args: [{ selector: 'yuv-overflow-menu', imports: [CommonModule, MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule], host: {
|
|
115
115
|
'[class.vertical]': 'vertical()'
|
|
116
|
-
}, template: "<div class=\"overflow-wrapper\">\n @for (group of __menuGroups(); track group.id) {\n <section>\n @for (item of group.items; track item.id) {\n <button\n mat-icon-button\n class=\"menu-item\"\n [disabled]=\"item.disabled\"\n [ngClass]=\"{ active: item.active }\"\n [matTooltip]=\"item.label\"\n [matTooltipPosition]=\"vertical() ? 'after' : 'below'\"\n [attr.data-item-id]=\"item.id\"\n (click)=\"item.callback(item)\"\n >\n <mat-icon>{{ item.icon }}</mat-icon>\n </button>\n }\n </section>\n }\n</div>\n\n<button class=\"overflow-trigger\" inert=\"true\" mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>{{ overflowIcon() }}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n @let gl = groupLabels();\n @for (g of overflowGroups(); track g.id) {\n @if (gl && gl[g.id]) {\n <div class=\"group\">{{ gl[g.id] }}</div>\n }\n @for (item of g.items; track item.id) {\n <div class=\"menu-item\" mat-menu-item [disabled]=\"item.disabled\" [ngStyle]=\"item.active ? activeStyles : {}\" (click)=\"item.callback(item)\">\n <mat-icon>{{ item.icon }}</mat-icon>\n <span> {{ item.label }} </span>\n </div>\n }\n }\n</mat-menu>\n", styles: [":host{--menu-group-divider-color: var(--ymt-outline-variant);--menu-item-gap: 2px;--menu-item-padding: var(--ymt-spacing-xs);--menu-item-icon-size: 24px;--menu-item-overflow-padding: var(--menu-item-padding);--menu-item-overflow-icon-size: var(--menu-item-icon-size);--menu-item-max-label-width: 20ch;--menu-item-flow: row;--menu-active-background: var(--ymt-primary-container);--menu-on-active: var(--ymt-on-primary-container);overflow:hidden;display:flex;align-items:center;flex-wrap:nowrap}:host.vertical{height:100%;flex-direction:column}:host.vertical .overflow-wrapper>section{flex-direction:column}:host.noLabel .menu-item span{display:none}:host .overflow-wrapper{overflow:hidden;display:flex}:host .overflow-wrapper>section{display:flex;gap:var(--menu-item-gap)}:host .overflow-wrapper>section:not(:first-child){border-inline-start:1px solid var(--menu-group-divider-color);padding-inline-start:var(--ymt-spacing-xs)}:host .menu-item{display:flex;align-items:center;border-radius:var(--ymt-corner-s)}:host .menu-item:after{content:\"\";height:var(--ymt-sizing-3xs);width:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);position:absolute;left:50%;bottom:0;transform:translate3d(-50%,0,0);background-color:transparent;transition:background-color .1s ease-in-out}:host .menu-item.active:after{background-color:var(--menu-active-background);background-color:var(--ymt-primary);color:var(--menu-on-active)}:host .menu-item[inert=true]{opacity:0}:host .overflow-trigger{opacity:0;display:none}:host .overflow-trigger:not([inert=true]){opacity:1;display:inline}\n"] }]
|
|
116
|
+
}, template: "<div class=\"overflow-wrapper\">\n @for (group of __menuGroups(); track group.id) {\n <section>\n @for (item of group.items; track item.id) {\n <button\n mat-icon-button\n class=\"menu-item\"\n [disabled]=\"item.disabled\"\n [ngClass]=\"{ active: item.active }\"\n [matTooltip]=\"item.label\"\n [matTooltipPosition]=\"vertical() ? 'after' : 'below'\"\n [attr.data-item-id]=\"item.id\"\n (click)=\"item.callback(item)\"\n >\n @if (item.svgIcon) {\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\n } @else {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n }\n </section>\n }\n</div>\n\n<button class=\"overflow-trigger\" inert=\"true\" mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>{{ overflowIcon() }}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n @let gl = groupLabels();\n @for (g of overflowGroups(); track g.id) {\n @if (gl && gl[g.id]) {\n <div class=\"group\">{{ gl[g.id] }}</div>\n }\n @for (item of g.items; track item.id) {\n <div class=\"menu-item\" mat-menu-item [disabled]=\"item.disabled\" [ngStyle]=\"item.active ? activeStyles : {}\" (click)=\"item.callback(item)\">\n @if (item.svgIcon) {\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\n } @else {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n <span> {{ item.label }} </span>\n </div>\n }\n }\n</mat-menu>\n", styles: [":host{--menu-group-divider-color: var(--ymt-outline-variant);--menu-item-gap: 2px;--menu-item-padding: var(--ymt-spacing-xs);--menu-item-icon-size: 24px;--menu-item-overflow-padding: var(--menu-item-padding);--menu-item-overflow-icon-size: var(--menu-item-icon-size);--menu-item-max-label-width: 20ch;--menu-item-flow: row;--menu-active-background: var(--ymt-primary-container);--menu-on-active: var(--ymt-on-primary-container);overflow:hidden;display:flex;align-items:center;flex-wrap:nowrap}:host.vertical{height:100%;flex-direction:column}:host.vertical .overflow-wrapper>section{flex-direction:column}:host.noLabel .menu-item span{display:none}:host .overflow-wrapper{overflow:hidden;display:flex}:host .overflow-wrapper>section{display:flex;gap:var(--menu-item-gap)}:host .overflow-wrapper>section:not(:first-child){border-inline-start:1px solid var(--menu-group-divider-color);padding-inline-start:var(--ymt-spacing-xs)}:host .menu-item{display:flex;align-items:center;border-radius:var(--ymt-corner-s)}:host .menu-item:after{content:\"\";height:var(--ymt-sizing-3xs);width:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);position:absolute;left:50%;bottom:0;transform:translate3d(-50%,0,0);background-color:transparent;transition:background-color .1s ease-in-out}:host .menu-item.active:after{background-color:var(--menu-active-background);background-color:var(--ymt-primary);color:var(--menu-on-active)}:host .menu-item[inert=true]{opacity:0}:host .overflow-trigger{opacity:0;display:none}:host .overflow-trigger:not([inert=true]){opacity:1;display:inline}\n"] }]
|
|
117
117
|
}] });
|
|
118
118
|
|
|
119
119
|
class YuvOverflowMenuModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yuuvis-client-framework-overflow-menu.mjs","sources":["../../../../../libs/yuuvis/client-framework/overflow-menu/src/lib/overflow-menu.component.ts","../../../../../libs/yuuvis/client-framework/overflow-menu/src/lib/overflow-menu.component.html","../../../../../libs/yuuvis/client-framework/overflow-menu/src/lib/overflow-menu.module.ts","../../../../../libs/yuuvis/client-framework/overflow-menu/src/yuuvis-client-framework-overflow-menu.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterViewInit, Component, computed, effect, ElementRef, inject, input, OnDestroy, signal } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OverflowMenuItem } from './overflow-menu.interface';\n\ntype __MenuItem = OverflowMenuItem & { overflow: boolean };\ninterface MenuGroup {\n id: string;\n items: __MenuItem[];\n}\n\n/**\n * Renders items in a toolbar. If menu items provide a 'group' property they will\n * be organized in sections.\n */\n@Component({\n selector: 'yuv-overflow-menu',\n imports: [CommonModule, MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule],\n templateUrl: './overflow-menu.component.html',\n styleUrl: './overflow-menu.component.scss',\n host: {\n '[class.vertical]': 'vertical()'\n }\n})\nexport class OverflowMenuComponent implements AfterViewInit, OnDestroy {\n #elRef = inject(ElementRef);\n\n overflowIcon = input<string>('more_horiz');\n groupLabels = input<Record<string, string>>();\n\n /**\n * Items of the menu\n */\n menuItems = input<OverflowMenuItem[]>([]);\n #menuItemsEffect = effect(() => {\n this.#observe(this.menuItems());\n });\n\n vertical = input<boolean>(false);\n\n __menuGroups = computed<MenuGroup[]>(() => this.#groupItems(this.__menuItems()));\n\n private __menuItems = computed<__MenuItem[]>(() => {\n return this.menuItems().map((i) => ({ ...i, overflow: false }));\n });\n\n overflowGroups = signal<MenuGroup[]>([]);\n\n #itemObserver: {\n observer: IntersectionObserver | undefined;\n observedElements: Element[];\n } = {\n observer: undefined,\n observedElements: []\n };\n\n activeStyles = {};\n\n #initObservers() {\n // observe tab navigation elements to show navigation controls (arrow buttons) once\n // the first or the last tab is not visible anymore\n this.#itemObserver.observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((e, i) => {\n const id = e.target.getAttribute('data-item-id');\n const _i: __MenuItem | undefined = this.__menuItems().find((mi) => id === mi.id);\n if (_i) _i.overflow = !e.isIntersecting;\n const overflowTrigger = (this.#elRef.nativeElement as HTMLElement).querySelector('button.overflow-trigger');\n\n if (overflowTrigger) {\n !this.__menuItems().find((i) => i.overflow) ? overflowTrigger.setAttribute('inert', 'true') : overflowTrigger.removeAttribute('inert');\n }\n const intersecting = !e.isIntersecting;\n if (intersecting) e.target.setAttribute('inert', 'true');\n else e.target.removeAttribute('inert');\n });\n\n this.overflowGroups.set(this.#groupItems(this.__menuItems().filter((i) => i.overflow)));\n },\n {\n threshold: 1,\n root: this.#elRef.nativeElement.querySelector('.overflow-wrapper')\n }\n );\n }\n\n #observe(items: OverflowMenuItem[]) {\n setTimeout(() => {\n if (this.#itemObserver.observer) {\n // cleanup existing observed elements\n this.#itemObserver.observedElements.forEach((e) => this.#itemObserver.observer!.unobserve(e));\n this.#itemObserver.observedElements = [];\n\n if (items.length > 0) {\n this.#itemObserver.observedElements = this.#elRef.nativeElement.querySelectorAll('.menu-item');\n this.#itemObserver.observedElements.forEach((e) => this.#itemObserver.observer!.observe(e));\n }\n }\n });\n }\n\n #groupItems(items: OverflowMenuItem[]): MenuGroup[] {\n const g = this.#groupBy(items, 'group');\n return Object.keys(g).map((id) => ({\n id,\n items: g[id]\n }));\n }\n\n #groupBy(arr: any[], key: string): Record<string, any> {\n return arr.reduce((rv, x) => {\n (rv[x[key]] = rv[x[key]] || []).push(x);\n return rv;\n }, {});\n }\n\n ngAfterViewInit(): void {\n this.#initObservers();\n // get active styles\n const style = window.getComputedStyle(this.#elRef.nativeElement);\n this.activeStyles = {\n 'background-color': style.getPropertyValue('--menu-active-background'),\n 'color': style.getPropertyValue('--menu-on-active'),\n }\n\n }\n\n ngOnDestroy(): void {\n if (this.#itemObserver.observer) this.#itemObserver.observer.disconnect();\n }\n}\n","<div class=\"overflow-wrapper\">\n @for (group of __menuGroups(); track group.id) {\n <section>\n @for (item of group.items; track item.id) {\n <button\n mat-icon-button\n class=\"menu-item\"\n [disabled]=\"item.disabled\"\n [ngClass]=\"{ active: item.active }\"\n [matTooltip]=\"item.label\"\n [matTooltipPosition]=\"vertical() ? 'after' : 'below'\"\n [attr.data-item-id]=\"item.id\"\n (click)=\"item.callback(item)\"\n >\n <mat-icon>{{ item.icon }}</mat-icon>\n </button>\n }\n </section>\n }\n</div>\n\n<button class=\"overflow-trigger\" inert=\"true\" mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>{{ overflowIcon() }}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n @let gl = groupLabels();\n @for (g of overflowGroups(); track g.id) {\n @if (gl && gl[g.id]) {\n <div class=\"group\">{{ gl[g.id] }}</div>\n }\n @for (item of g.items; track item.id) {\n <div class=\"menu-item\" mat-menu-item [disabled]=\"item.disabled\" [ngStyle]=\"item.active ? activeStyles : {}\" (click)=\"item.callback(item)\">\n <mat-icon>{{ item.icon }}</mat-icon>\n <span> {{ item.label }} </span>\n </div>\n }\n }\n</mat-menu>\n","import { NgModule } from '@angular/core';\nimport { OverflowMenuComponent } from './overflow-menu.component';\n\n@NgModule({\n imports: [OverflowMenuComponent],\n exports: [OverflowMenuComponent]\n})\nexport class YuvOverflowMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"yuuvis-client-framework-overflow-menu.mjs","sources":["../../../../../libs/yuuvis/client-framework/overflow-menu/src/lib/overflow-menu.component.ts","../../../../../libs/yuuvis/client-framework/overflow-menu/src/lib/overflow-menu.component.html","../../../../../libs/yuuvis/client-framework/overflow-menu/src/lib/overflow-menu.module.ts","../../../../../libs/yuuvis/client-framework/overflow-menu/src/yuuvis-client-framework-overflow-menu.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterViewInit, Component, computed, effect, ElementRef, inject, input, OnDestroy, signal } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OverflowMenuItem } from './overflow-menu.interface';\n\ntype __MenuItem = OverflowMenuItem & { overflow: boolean };\ninterface MenuGroup {\n id: string;\n items: __MenuItem[];\n}\n\n/**\n * Renders items in a toolbar. If menu items provide a 'group' property they will\n * be organized in sections.\n */\n@Component({\n selector: 'yuv-overflow-menu',\n imports: [CommonModule, MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule],\n templateUrl: './overflow-menu.component.html',\n styleUrl: './overflow-menu.component.scss',\n host: {\n '[class.vertical]': 'vertical()'\n }\n})\nexport class OverflowMenuComponent implements AfterViewInit, OnDestroy {\n #elRef = inject(ElementRef);\n\n overflowIcon = input<string>('more_horiz');\n groupLabels = input<Record<string, string>>();\n\n /**\n * Items of the menu\n */\n menuItems = input<OverflowMenuItem[]>([]);\n #menuItemsEffect = effect(() => {\n this.#observe(this.menuItems());\n });\n\n vertical = input<boolean>(false);\n\n __menuGroups = computed<MenuGroup[]>(() => this.#groupItems(this.__menuItems()));\n\n private __menuItems = computed<__MenuItem[]>(() => {\n return this.menuItems().map((i) => ({ ...i, overflow: false }));\n });\n\n overflowGroups = signal<MenuGroup[]>([]);\n\n #itemObserver: {\n observer: IntersectionObserver | undefined;\n observedElements: Element[];\n } = {\n observer: undefined,\n observedElements: []\n };\n\n activeStyles = {};\n\n #initObservers() {\n // observe tab navigation elements to show navigation controls (arrow buttons) once\n // the first or the last tab is not visible anymore\n this.#itemObserver.observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((e, i) => {\n const id = e.target.getAttribute('data-item-id');\n const _i: __MenuItem | undefined = this.__menuItems().find((mi) => id === mi.id);\n if (_i) _i.overflow = !e.isIntersecting;\n const overflowTrigger = (this.#elRef.nativeElement as HTMLElement).querySelector('button.overflow-trigger');\n\n if (overflowTrigger) {\n !this.__menuItems().find((i) => i.overflow) ? overflowTrigger.setAttribute('inert', 'true') : overflowTrigger.removeAttribute('inert');\n }\n const intersecting = !e.isIntersecting;\n if (intersecting) e.target.setAttribute('inert', 'true');\n else e.target.removeAttribute('inert');\n });\n\n this.overflowGroups.set(this.#groupItems(this.__menuItems().filter((i) => i.overflow)));\n },\n {\n threshold: 1,\n root: this.#elRef.nativeElement.querySelector('.overflow-wrapper')\n }\n );\n }\n\n #observe(items: OverflowMenuItem[]) {\n setTimeout(() => {\n if (this.#itemObserver.observer) {\n // cleanup existing observed elements\n this.#itemObserver.observedElements.forEach((e) => this.#itemObserver.observer!.unobserve(e));\n this.#itemObserver.observedElements = [];\n\n if (items.length > 0) {\n this.#itemObserver.observedElements = this.#elRef.nativeElement.querySelectorAll('.menu-item');\n this.#itemObserver.observedElements.forEach((e) => this.#itemObserver.observer!.observe(e));\n }\n }\n });\n }\n\n #groupItems(items: OverflowMenuItem[]): MenuGroup[] {\n const g = this.#groupBy(items, 'group');\n return Object.keys(g).map((id) => ({\n id,\n items: g[id]\n }));\n }\n\n #groupBy(arr: any[], key: string): Record<string, any> {\n return arr.reduce((rv, x) => {\n (rv[x[key]] = rv[x[key]] || []).push(x);\n return rv;\n }, {});\n }\n\n ngAfterViewInit(): void {\n this.#initObservers();\n // get active styles\n const style = window.getComputedStyle(this.#elRef.nativeElement);\n this.activeStyles = {\n 'background-color': style.getPropertyValue('--menu-active-background'),\n 'color': style.getPropertyValue('--menu-on-active'),\n }\n\n }\n\n ngOnDestroy(): void {\n if (this.#itemObserver.observer) this.#itemObserver.observer.disconnect();\n }\n}\n","<div class=\"overflow-wrapper\">\n @for (group of __menuGroups(); track group.id) {\n <section>\n @for (item of group.items; track item.id) {\n <button\n mat-icon-button\n class=\"menu-item\"\n [disabled]=\"item.disabled\"\n [ngClass]=\"{ active: item.active }\"\n [matTooltip]=\"item.label\"\n [matTooltipPosition]=\"vertical() ? 'after' : 'below'\"\n [attr.data-item-id]=\"item.id\"\n (click)=\"item.callback(item)\"\n >\n @if (item.svgIcon) {\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\n } @else {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n }\n </section>\n }\n</div>\n\n<button class=\"overflow-trigger\" inert=\"true\" mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>{{ overflowIcon() }}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n @let gl = groupLabels();\n @for (g of overflowGroups(); track g.id) {\n @if (gl && gl[g.id]) {\n <div class=\"group\">{{ gl[g.id] }}</div>\n }\n @for (item of g.items; track item.id) {\n <div class=\"menu-item\" mat-menu-item [disabled]=\"item.disabled\" [ngStyle]=\"item.active ? activeStyles : {}\" (click)=\"item.callback(item)\">\n @if (item.svgIcon) {\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\n } @else {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n <span> {{ item.label }} </span>\n </div>\n }\n }\n</mat-menu>\n","import { NgModule } from '@angular/core';\nimport { OverflowMenuComponent } from './overflow-menu.component';\n\n@NgModule({\n imports: [OverflowMenuComponent],\n exports: [OverflowMenuComponent]\n})\nexport class YuvOverflowMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcA;;;AAGG;MAUU,qBAAqB,CAAA;AATlC,IAAA,WAAA,GAAA;AAUE,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC;AAE3B,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,YAAY,CAAC;QAC1C,IAAA,CAAA,WAAW,GAAG,KAAK,EAA0B;AAE7C;;AAEG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAqB,EAAE,CAAC;AACzC,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,MAAK;YAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;AACjC,QAAA,CAAC,CAAC;AAEF,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;AAEhC,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAc,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AAExE,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAe,MAAK;YAChD,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AACjE,QAAA,CAAC,CAAC;AAEF,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAc,EAAE,CAAC;AAExC,QAAA,IAAA,CAAA,aAAa,GAGT;AACF,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,gBAAgB,EAAE;SACnB;QAED,IAAA,CAAA,YAAY,GAAG,EAAE;AA0ElB,IAAA;AAzGC,IAAA,MAAM;AASN,IAAA,gBAAgB;AAchB,IAAA,aAAa;IAUb,cAAc,GAAA;;;QAGZ,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CACpD,CAAC,OAAO,KAAI;YACV,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;gBACvB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC;gBAChD,MAAM,EAAE,GAA2B,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AAChF,gBAAA,IAAI,EAAE;AAAE,oBAAA,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,cAAc;AACvC,gBAAA,MAAM,eAAe,GAAI,IAAI,CAAC,MAAM,CAAC,aAA6B,CAAC,aAAa,CAAC,yBAAyB,CAAC;gBAE3G,IAAI,eAAe,EAAE;AACnB,oBAAA,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,eAAe,CAAC,eAAe,CAAC,OAAO,CAAC;gBACxI;AACA,gBAAA,MAAM,YAAY,GAAG,CAAC,CAAC,CAAC,cAAc;AACtC,gBAAA,IAAI,YAAY;oBAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;;AACnD,oBAAA,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;AACxC,YAAA,CAAC,CAAC;YAEF,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AACzF,QAAA,CAAC,EACD;AACE,YAAA,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,aAAa,CAAC,mBAAmB;AAClE,SAAA,CACF;IACH;AAEA,IAAA,QAAQ,CAAC,KAAyB,EAAA;QAChC,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE;;gBAE/B,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,QAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAC7F,gBAAA,IAAI,CAAC,aAAa,CAAC,gBAAgB,GAAG,EAAE;AAExC,gBAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AACpB,oBAAA,IAAI,CAAC,aAAa,CAAC,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,CAAC;oBAC9F,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,QAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBAC7F;YACF;AACF,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,WAAW,CAAC,KAAyB,EAAA;QACnC,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;AACvC,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM;YACjC,EAAE;AACF,YAAA,KAAK,EAAE,CAAC,CAAC,EAAE;AACZ,SAAA,CAAC,CAAC;IACL;IAEA,QAAQ,CAAC,GAAU,EAAE,GAAW,EAAA;QAC9B,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;YAC1B,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;AACvC,YAAA,OAAO,EAAE;QACX,CAAC,EAAE,EAAE,CAAC;IACR;IAEA,eAAe,GAAA;QACb,IAAI,CAAC,cAAc,EAAE;;AAErB,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;QAChE,IAAI,CAAC,YAAY,GAAG;AAClB,YAAA,kBAAkB,EAAE,KAAK,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;AACtE,YAAA,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;SACpD;IAEH;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,EAAE;IAC3E;+GAzGW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3BlC,0gDA8CA,EAAA,MAAA,EAAA,CAAA,yiDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED1BY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,OAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,MAAA,EAAA,CAAA,sBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,4BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAO5E,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBATjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,OAAA,EACpB,CAAC,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,CAAC,EAAA,IAAA,EAGlF;AACJ,wBAAA,kBAAkB,EAAE;AACrB,qBAAA,EAAA,QAAA,EAAA,0gDAAA,EAAA,MAAA,EAAA,CAAA,yiDAAA,CAAA,EAAA;;;MElBU,qBAAqB,CAAA;+GAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAArB,qBAAqB,EAAA,OAAA,EAAA,CAHtB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CACrB,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAEpB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAHtB,qBAAqB,CAAA,EAAA,CAAA,CAAA;;4FAGpB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,qBAAqB;AAChC,iBAAA;;;ACND;;AAEG;;;;"}
|