@acorex/components 18.10.2 → 18.10.4
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/menu/lib/menu-item/menu-item.component.mjs +7 -6
- package/esm2022/menu/lib/menu.component.mjs +18 -9
- package/esm2022/qrcode/lib/qrcode.component.mjs +2 -17
- package/esm2022/range-slider/lib/range-slider.component.mjs +8 -10
- package/esm2022/wysiwyg/lib/wysiwyg/wysiwyg-container/wysiwyg-container.component.mjs +3 -3
- package/fesm2022/acorex-components-menu.mjs +23 -13
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-qrcode.mjs +1 -16
- package/fesm2022/acorex-components-qrcode.mjs.map +1 -1
- package/fesm2022/acorex-components-range-slider.mjs +7 -9
- package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-wysiwyg.mjs +2 -2
- package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
- package/menu/lib/menu-item/menu-item.component.d.ts +2 -1
- package/package.json +59 -59
- package/qrcode/lib/qrcode.component.d.ts +0 -4
- package/wysiwyg/lib/wysiwyg/wysiwyg-container/wysiwyg-container.component.d.ts +1 -1
|
@@ -84,6 +84,7 @@ class AXMenuItemComponent extends MXInteractiveComponent {
|
|
|
84
84
|
* Injects the root menu service.
|
|
85
85
|
*/
|
|
86
86
|
this.rootMenu = inject(AXRootMenu);
|
|
87
|
+
this.arrowState = input(true);
|
|
87
88
|
afterNextRender(() => {
|
|
88
89
|
this.children.forEach((c) => {
|
|
89
90
|
c.parent = this;
|
|
@@ -93,11 +94,11 @@ class AXMenuItemComponent extends MXInteractiveComponent {
|
|
|
93
94
|
this.getPlacement();
|
|
94
95
|
});
|
|
95
96
|
effect(() => {
|
|
96
|
-
if (!this.getHostElement()
|
|
97
|
+
if (!this.getHostElement()?.getClientRects()[0])
|
|
97
98
|
return;
|
|
98
99
|
//add overflow items to array
|
|
99
|
-
if (this.getHostElement()
|
|
100
|
-
this.getHostElement()
|
|
100
|
+
if (this.getHostElement()?.getClientRects()[0]?.right > this.service.rightOverflow() ||
|
|
101
|
+
this.getHostElement()?.getClientRects()[0]?.left < this.service.leftOverflow()) {
|
|
101
102
|
this.service.overflowElements.update((prev) => [...prev, this.getHostElement()]);
|
|
102
103
|
this.service.isOverflowExist.set(true);
|
|
103
104
|
}
|
|
@@ -184,11 +185,11 @@ class AXMenuItemComponent extends MXInteractiveComponent {
|
|
|
184
185
|
}
|
|
185
186
|
}
|
|
186
187
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
187
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-menu-item-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <p class=\"ax-menu-item-text\">{{ text() }}</p>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length) {\n <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n #popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn()\"\n [target]=\"getHostElement()\"\n [offsetY]=\"offsetY()\"\n [offsetX]=\"offsetX()\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n", styles: [".ax-menu-item-text{white-space:nowrap}\n"], dependencies: [{ kind: "component", type: i1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, arrowState: { classPropertyName: "arrowState", publicName: "arrowState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-menu-item-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <p class=\"ax-menu-item-text\">{{ text() }}</p>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length && arrowState()) {\n <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n #popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn()\"\n [target]=\"getHostElement()\"\n [offsetY]=\"offsetY()\"\n [offsetX]=\"offsetX()\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n", styles: [".ax-menu-item-text{white-space:nowrap}\n"], dependencies: [{ kind: "component", type: i1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
188
189
|
}
|
|
189
190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuItemComponent, decorators: [{
|
|
190
191
|
type: Component,
|
|
191
|
-
args: [{ selector: 'ax-menu-item', inputs: ['disabled'], host: { ngSkipHydration: 'true' }, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-menu-item-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <p class=\"ax-menu-item-text\">{{ text() }}</p>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length) {\n <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n #popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn()\"\n [target]=\"getHostElement()\"\n [offsetY]=\"offsetY()\"\n [offsetX]=\"offsetX()\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n", styles: [".ax-menu-item-text{white-space:nowrap}\n"] }]
|
|
192
|
+
args: [{ selector: 'ax-menu-item', inputs: ['disabled'], host: { ngSkipHydration: 'true' }, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-menu-item-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <p class=\"ax-menu-item-text\">{{ text() }}</p>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length && arrowState()) {\n <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n #popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn()\"\n [target]=\"getHostElement()\"\n [offsetY]=\"offsetY()\"\n [offsetX]=\"offsetX()\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n", styles: [".ax-menu-item-text{white-space:nowrap}\n"] }]
|
|
192
193
|
}], ctorParameters: () => [], propDecorators: { popover: [{
|
|
193
194
|
type: ViewChild,
|
|
194
195
|
args: [AXPopoverComponent]
|
|
@@ -221,8 +222,8 @@ class AXMenuComponent extends MXBaseComponent {
|
|
|
221
222
|
return;
|
|
222
223
|
//add menu container border for detect overflow happen
|
|
223
224
|
this.menuHeight.set(`${this.getHostElement()?.getClientRects()[0]?.height + 10}px`);
|
|
224
|
-
this.service.rightOverflow.set(this.getHostElement()
|
|
225
|
-
this.service.leftOverflow.set(this.getHostElement()
|
|
225
|
+
this.service.rightOverflow.set(this.getHostElement()?.querySelector('.ax-menu-item-container')?.getClientRects()[0]?.right);
|
|
226
|
+
this.service.leftOverflow.set(this.getHostElement()?.querySelector('.ax-menu-item-container')?.getClientRects()[0]?.left);
|
|
226
227
|
let resizeTimer;
|
|
227
228
|
window.addEventListener('resize', () => {
|
|
228
229
|
//add menu container border for detect overflow happen
|
|
@@ -230,14 +231,23 @@ class AXMenuComponent extends MXBaseComponent {
|
|
|
230
231
|
if (!this.getHostElement())
|
|
231
232
|
return;
|
|
232
233
|
resizeTimer = setTimeout(() => {
|
|
233
|
-
this.service.rightOverflow.set(this.getHostElement()
|
|
234
|
-
this.service.leftOverflow.set(this.getHostElement()
|
|
234
|
+
this.service.rightOverflow.set(this.getHostElement()?.querySelector('.ax-menu-item-container').getClientRects()[0].right);
|
|
235
|
+
this.service.leftOverflow.set(this.getHostElement()?.querySelector('.ax-menu-item-container').getClientRects()[0].left);
|
|
235
236
|
if (this.isMenuOpen())
|
|
236
237
|
this.showMenuHandler();
|
|
237
238
|
this.service.notOverflowElements.set([]);
|
|
238
239
|
this.service.overflowElements.set([]);
|
|
239
240
|
}, 200);
|
|
240
241
|
});
|
|
242
|
+
document.addEventListener('click', (event) => {
|
|
243
|
+
const menu = document.querySelector('.ax-overflow-menu-container');
|
|
244
|
+
const menuButton = document.querySelector('.ax-show-truncate-menu');
|
|
245
|
+
if (!menu.contains(event.target) &&
|
|
246
|
+
!menuButton.contains(event.target)) {
|
|
247
|
+
if (this.isMenuOpen())
|
|
248
|
+
this.showMenuHandler();
|
|
249
|
+
}
|
|
250
|
+
});
|
|
241
251
|
});
|
|
242
252
|
}
|
|
243
253
|
showMenuHandler() {
|
|
@@ -285,7 +295,7 @@ class AXMenuComponent extends MXBaseComponent {
|
|
|
285
295
|
], queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], usesInheritance: true, ngImport: i0, template: `
|
|
286
296
|
<div class="ax-main-menu-container">
|
|
287
297
|
<div
|
|
288
|
-
[style]="{ width: this.service.isOverflowExist() && this.truncateMenu() && '
|
|
298
|
+
[style]="{ width: !this.service.isOverflowExist() && !this.truncateMenu() && '100%' }"
|
|
289
299
|
class="ax-menu-item-container"
|
|
290
300
|
>
|
|
291
301
|
<ng-content select="ax-menu-item,ng-container"></ng-content>
|
|
@@ -307,14 +317,14 @@ class AXMenuComponent extends MXBaseComponent {
|
|
|
307
317
|
[style]="{ top: menuHeight(), display: this.isMenuOpen() ? 'block' : 'none' }"
|
|
308
318
|
class="ax-overflow-menu-container ax-menu-item-children"
|
|
309
319
|
></div>
|
|
310
|
-
`, isInline: true, styles: ["ax-menu{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit;position:relative}ax-menu .ax-main-menu-container{display:flex;align-items:center;width:100%;overflow:hidden}ax-menu .ax-menu-item-container{display:flex;overflow:hidden;width:100%}ax-menu .ax-show-truncate-menu{position:absolute;right:0;width:
|
|
320
|
+
`, isInline: true, styles: ["ax-menu{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit;position:relative}ax-menu .ax-main-menu-container{display:flex;align-items:center;width:100%;overflow:hidden}ax-menu .ax-menu-item-container{display:flex;overflow:hidden;width:calc(100% - 1.3rem)}ax-menu .ax-show-truncate-menu{position:absolute;right:0;width:1.3rem}ax-menu .ax-overflow-menu-container{position:absolute;right:0}ax-menu.ax-orientation-horizontal{display:flex}ax-menu.ax-orientation-horizontal ax-menu-item:not(ax-menu.ax-orientation-horizontal ax-menu-item:last-child){margin-inline-end:1rem}ax-menu.ax-orientation-vertical{display:flex;flex-direction:column}ax-menu.ax-orientation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-orientation-vertical ax-menu-item:not(ax-menu.ax-orientation-vertical ax-menu-item:last-child){margin-bottom:1rem}ax-menu ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{position:relative;display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;justify-content:space-between;color:rgba(var(--ax-color-text-default))}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item .ax-menu-item-start-side{display:flex;align-items:center;gap:.5rem}ax-menu-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{width:fit-content;line-height:1;font-size:10px}ax-menu-item ax-popover{position:absolute}.overflowMenuOverride{margin-inline-end:0!important}.overflowMenuOverride:hover:not(.overflowMenuOverride:hover.ax-state-disabled){color:rgba(var(--ax-color-text-default))!important}.ax-menu-item-children{padding-top:.5rem;padding-bottom:.5rem}.ax-menu-item-children:not(.ax-menu-item-children:empty){display:flex;min-width:12rem;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.75}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1 1 0%}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon:before{-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);-o-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scaleY(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"], dependencies: [{ kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
311
321
|
}
|
|
312
322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuComponent, decorators: [{
|
|
313
323
|
type: Component,
|
|
314
324
|
args: [{ selector: 'ax-menu', template: `
|
|
315
325
|
<div class="ax-main-menu-container">
|
|
316
326
|
<div
|
|
317
|
-
[style]="{ width: this.service.isOverflowExist() && this.truncateMenu() && '
|
|
327
|
+
[style]="{ width: !this.service.isOverflowExist() && !this.truncateMenu() && '100%' }"
|
|
318
328
|
class="ax-menu-item-container"
|
|
319
329
|
>
|
|
320
330
|
<ng-content select="ax-menu-item,ng-container"></ng-content>
|
|
@@ -344,7 +354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
344
354
|
{
|
|
345
355
|
provide: AXMenuService,
|
|
346
356
|
},
|
|
347
|
-
], styles: ["ax-menu{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit;position:relative}ax-menu .ax-main-menu-container{display:flex;align-items:center;width:100%;overflow:hidden}ax-menu .ax-menu-item-container{display:flex;overflow:hidden;width:100%}ax-menu .ax-show-truncate-menu{position:absolute;right:0;width:
|
|
357
|
+
], styles: ["ax-menu{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit;position:relative}ax-menu .ax-main-menu-container{display:flex;align-items:center;width:100%;overflow:hidden}ax-menu .ax-menu-item-container{display:flex;overflow:hidden;width:calc(100% - 1.3rem)}ax-menu .ax-show-truncate-menu{position:absolute;right:0;width:1.3rem}ax-menu .ax-overflow-menu-container{position:absolute;right:0}ax-menu.ax-orientation-horizontal{display:flex}ax-menu.ax-orientation-horizontal ax-menu-item:not(ax-menu.ax-orientation-horizontal ax-menu-item:last-child){margin-inline-end:1rem}ax-menu.ax-orientation-vertical{display:flex;flex-direction:column}ax-menu.ax-orientation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-orientation-vertical ax-menu-item:not(ax-menu.ax-orientation-vertical ax-menu-item:last-child){margin-bottom:1rem}ax-menu ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{position:relative;display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;justify-content:space-between;color:rgba(var(--ax-color-text-default))}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item .ax-menu-item-start-side{display:flex;align-items:center;gap:.5rem}ax-menu-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{width:fit-content;line-height:1;font-size:10px}ax-menu-item ax-popover{position:absolute}.overflowMenuOverride{margin-inline-end:0!important}.overflowMenuOverride:hover:not(.overflowMenuOverride:hover.ax-state-disabled){color:rgba(var(--ax-color-text-default))!important}.ax-menu-item-children{padding-top:.5rem;padding-bottom:.5rem}.ax-menu-item-children:not(.ax-menu-item-children:empty){display:flex;min-width:12rem;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.75}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1 1 0%}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon:before{-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);-o-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scaleY(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"] }]
|
|
348
358
|
}], ctorParameters: () => [], propDecorators: { children: [{
|
|
349
359
|
type: ContentChildren,
|
|
350
360
|
args: [AXMenuItemComponent]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-menu.mjs","sources":["../../../../libs/components/menu/src/lib/class/root-menu.class.ts","../../../../libs/components/menu/src/lib/menu.service.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.html","../../../../libs/components/menu/src/lib/menu.component.ts","../../../../libs/components/menu/src/lib/menu.module.ts","../../../../libs/components/menu/src/acorex-components-menu.ts"],"sourcesContent":["import { AXOrientation } from '@acorex/components/common';\nimport { WritableSignal, signal } from '@angular/core';\nimport { AXMenuPopoverTrigger } from './popover.class';\nexport class AXRootMenu {\n orientation: WritableSignal<AXOrientation> = signal('horizontal');\n openOn: WritableSignal<AXMenuPopoverTrigger> = signal('toggle');\n}\n","import { Injectable, signal } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class AXMenuService {\n activeMenus$: BehaviorSubject<AXMenuItemComponent[]> = new BehaviorSubject<AXMenuItemComponent[]>([]);\n\n rightOverflow = signal<number>(0);\n leftOverflow = signal<number>(0);\n overflowElements = signal<HTMLElement[]>([]);\n notOverflowElements = signal<HTMLElement[]>([]);\n isOverflowExist = signal(false);\n}\n","import { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport {\n Component,\n ContentChildren,\n HostBinding,\n HostListener,\n QueryList,\n ViewChild,\n ViewEncapsulation,\n afterNextRender,\n effect,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { AXRootMenu } from '../class/root-menu.class';\nimport { AXMenuService } from '../menu.service';\n\n/**\n * Represents a menu item component used within an `ax-menu`.\n * @category Components\n */\n@Component({\n selector: 'ax-menu-item',\n inputs: ['disabled'],\n templateUrl: './menu-item.component.html',\n host: { ngSkipHydration: 'true' },\n styles: `\n .ax-menu-item-text {\n white-space: nowrap;\n }\n `,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXMenuItemComponent extends MXInteractiveComponent {\n service = inject(AXMenuService);\n\n /** @ignore */\n @ViewChild(AXPopoverComponent)\n\n /** @ignore */\n private popover: AXPopoverComponent;\n\n /**\n * Injects the `AXMenuService` for managing menu interactions.\n */\n menuService = inject(AXMenuService);\n\n /**\n * The vertical offset for positioning, initialized to 0.\n */\n offsetY = signal(0);\n\n /**\n * The horizontal offset for positioning, initialized to 0.\n */\n offsetX = signal(0);\n\n /**\n * The text content, initialized to an empty string.\n */\n text = input<string>();\n\n /**\n * Indicates whether the item is active.\n */\n active = input<boolean>();\n\n /**\n * Emitted when the active state changes.\n */\n activeChange = output<boolean>();\n\n /**\n * Emitted when the element is clicked.\n */\n onClick = output<AXClickEvent>();\n\n /**\n * Indicates whether the component is a root menu item.\n * @defaultValue false\n */\n isRoot = false;\n\n /**\n * The parent menu item component, if any.\n */\n parent?: AXMenuItemComponent;\n\n /**\n * Injects the root menu service.\n */\n rootMenu = inject(AXRootMenu);\n\n /** @ignore */\n @ContentChildren(AXMenuItemComponent)\n children: QueryList<AXMenuItemComponent>;\n\n /** @ignore */\n constructor() {\n super();\n\n afterNextRender(() => {\n this.children.forEach((c) => {\n c.parent = this;\n });\n\n this.offsetY.set(this.isRoot ? 8 : 0);\n this.offsetX.set(this.isRoot ? 0 : 4);\n\n this.getPlacement();\n });\n\n effect(\n () => {\n if (!this.getHostElement().getClientRects()[0]?.right) return;\n //add overflow items to array\n if (\n this.getHostElement().getClientRects()[0]?.right > this.service.rightOverflow() ||\n this.getHostElement().getClientRects()[0]?.left < this.service.leftOverflow()\n ) {\n this.service.overflowElements.update((prev) => [...prev, this.getHostElement()]);\n this.service.isOverflowExist.set(true);\n } else {\n this.service.notOverflowElements.update((prev) => [...prev, this.getHostElement()]);\n }\n },\n { allowSignalWrites: true },\n );\n }\n\n /**\n * Closes the popover if it is open.\n */\n close() {\n this.popover?.close();\n }\n\n /** @ignore */\n _handleOnOpened() {\n this.parent.children.forEach((c) => {\n if (c != this) {\n c.close();\n }\n });\n if (this.children.length) {\n this.menuService.activeMenus$.next(this.menuService.activeMenus$.getValue().concat(this));\n }\n }\n\n /** @ignore */\n _handleOnClosed() {\n this.children.forEach((c) => {\n c.close();\n });\n }\n\n /**\n * Returns the icon based on the orientation of the root menu.\n */\n getIcon() {\n if (this.rootMenu.orientation() === 'vertical') {\n return 'ax-icon-chevron-right';\n } else {\n return 'ax-icon-chevron-down';\n }\n }\n\n /**\n * Determines the placement based on the root menu's orientation: 'bottom-start' for horizontal root, 'end-top' otherwise.\n */\n getPlacement() {\n switch (this.rootMenu.orientation()) {\n case 'horizontal':\n if (this.isRoot) {\n return 'bottom-start';\n } else {\n return 'end-top';\n }\n break;\n case 'vertical':\n if (this.isRoot) {\n return 'end-top';\n } else {\n return 'end-top';\n }\n break;\n default:\n return 'bottom-start';\n }\n }\n\n /** @ignore */\n @HostBinding('class')\n get __hostClass(): string[] {\n return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.active() ? 'ax-state-active' : ''}`];\n }\n\n /** @ignore */\n @HostListener('click', ['$event'])\n private __hostClick(e: MouseEvent) {\n if (!this.disabled) {\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n if (!this.children.length) {\n this.menuService.activeMenus$.subscribe((c) => c.forEach((x) => x.close())).unsubscribe();\n this.menuService.activeMenus$.next([]);\n }\n }\n }\n}\n","<div class=\"ax-menu-item-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <p class=\"ax-menu-item-text\">{{ text() }}</p>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length) {\n <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n #popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn()\"\n [target]=\"getHostElement()\"\n [offsetY]=\"offsetY()\"\n [offsetX]=\"offsetX()\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n","import { AXOrientation, MXBaseComponent } from '@acorex/components/common';\nimport {\n afterNextRender,\n AfterViewInit,\n Component,\n ContentChildren,\n HostBinding,\n inject,\n input,\n QueryList,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXMenuPopoverTrigger } from './class/popover.class';\nimport { AXRootMenu } from './class/root-menu.class';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuService } from './menu.service';\n\n/**\n * Represents a menu component that displays menu items.\n * @category Components\n */\n@Component({\n selector: 'ax-menu',\n template: `\n <div class=\"ax-main-menu-container\">\n <div\n [style]=\"{ width: this.service.isOverflowExist() && this.truncateMenu() && '90%' }\"\n class=\"ax-menu-item-container\"\n >\n <ng-content select=\"ax-menu-item,ng-container\"></ng-content>\n </div>\n\n @if (this.service.overflowElements().length !== 0 && this.truncateMenu()) {\n <button\n class=\"ax-general-button ax-button-icon ax-show-truncate-menu\"\n (click)=\"showMenuHandler()\"\n tabindex=\"0\"\n type=\"button\"\n >\n <ax-icon class=\"ax-icon ax-icon-more-horizontal ng-star-inserted ax-text-xl\"></ax-icon>\n </button>\n }\n </div>\n\n <div\n [style]=\"{ top: menuHeight(), display: this.isMenuOpen() ? 'block' : 'none' }\"\n class=\"ax-overflow-menu-container ax-menu-item-children\"\n ></div>\n `,\n styleUrls: ['./menu.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: AXRootMenu,\n useExisting: AXMenuComponent,\n },\n {\n provide: AXMenuService,\n },\n ],\n})\nexport class AXMenuComponent extends MXBaseComponent implements AfterViewInit {\n orientation = input<AXOrientation>('horizontal');\n openOn = input<AXMenuPopoverTrigger>('toggle');\n service = inject(AXMenuService);\n menuHeight = signal<string>('');\n isMenuOpen = signal(false);\n truncateMenu = input(false);\n\n /** @ignore */\n @ContentChildren(AXMenuItemComponent)\n children: QueryList<AXMenuItemComponent>;\n\n constructor() {\n super();\n afterNextRender(() => {\n if (!this.truncateMenu()) return;\n\n //add menu container border for detect overflow happen\n this.menuHeight.set(`${this.getHostElement()?.getClientRects()[0]?.height + 10}px`);\n this.service.rightOverflow.set(\n this.getHostElement().querySelector('.ax-menu-item-container')?.getClientRects()[0]?.right,\n );\n this.service.leftOverflow.set(\n this.getHostElement().querySelector('.ax-menu-item-container')?.getClientRects()[0]?.left,\n );\n\n let resizeTimer;\n\n window.addEventListener('resize', () => {\n //add menu container border for detect overflow happen\n clearTimeout(resizeTimer);\n if (!this.getHostElement()) return;\n resizeTimer = setTimeout(() => {\n this.service.rightOverflow.set(\n this.getHostElement().querySelector('.ax-menu-item-container').getClientRects()[0].right,\n );\n this.service.leftOverflow.set(\n this.getHostElement().querySelector('.ax-menu-item-container').getClientRects()[0].left,\n );\n if (this.isMenuOpen()) this.showMenuHandler();\n this.service.notOverflowElements.set([]);\n this.service.overflowElements.set([]);\n }, 200);\n });\n });\n }\n\n showMenuHandler() {\n this.isMenuOpen.update((prev) => !prev);\n\n const injectContainer = this.getHostElement().querySelector('.ax-overflow-menu-container');\n const injectContainer2 = this.getHostElement().querySelector('.ax-menu-item-container');\n\n if (this.isMenuOpen()) {\n this.service.overflowElements().forEach((item) => {\n item.classList.add('overflowMenuOverride');\n injectContainer.appendChild(item);\n });\n this.service.notOverflowElements().forEach((item) => {\n item.classList.remove('overflowMenuOverride');\n injectContainer2.appendChild(item);\n });\n } else {\n const allItems = [...this.service.notOverflowElements(), ...this.service.overflowElements()];\n allItems.forEach((item) => {\n item.classList.remove('overflowMenuOverride');\n injectContainer2.appendChild(item);\n });\n }\n }\n\n /** @ignore */\n ngAfterViewInit() {\n this.children.forEach((c) => {\n c.isRoot = true;\n c.parent = this as unknown as AXMenuItemComponent;\n });\n }\n\n /** @ignore */\n @HostBinding('class')\n get __hostClass(): string {\n return `ax-orientation-${this.orientation()}`;\n }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuComponent } from './menu.component';\n\nconst COMPONENT = [AXMenuItemComponent, AXMenuComponent];\nconst MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [CommonModule, ...MODULES, AXButtonModule],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"acorex-components-menu.mjs","sources":["../../../../libs/components/menu/src/lib/class/root-menu.class.ts","../../../../libs/components/menu/src/lib/menu.service.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.html","../../../../libs/components/menu/src/lib/menu.component.ts","../../../../libs/components/menu/src/lib/menu.module.ts","../../../../libs/components/menu/src/acorex-components-menu.ts"],"sourcesContent":["import { AXOrientation } from '@acorex/components/common';\nimport { WritableSignal, signal } from '@angular/core';\nimport { AXMenuPopoverTrigger } from './popover.class';\nexport class AXRootMenu {\n orientation: WritableSignal<AXOrientation> = signal('horizontal');\n openOn: WritableSignal<AXMenuPopoverTrigger> = signal('toggle');\n}\n","import { Injectable, signal } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class AXMenuService {\n activeMenus$: BehaviorSubject<AXMenuItemComponent[]> = new BehaviorSubject<AXMenuItemComponent[]>([]);\n\n rightOverflow = signal<number>(0);\n leftOverflow = signal<number>(0);\n overflowElements = signal<HTMLElement[]>([]);\n notOverflowElements = signal<HTMLElement[]>([]);\n isOverflowExist = signal(false);\n}\n","import { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport {\n Component,\n ContentChildren,\n HostBinding,\n HostListener,\n QueryList,\n ViewChild,\n ViewEncapsulation,\n afterNextRender,\n effect,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { AXRootMenu } from '../class/root-menu.class';\nimport { AXMenuService } from '../menu.service';\n\n/**\n * Represents a menu item component used within an `ax-menu`.\n * @category Components\n */\n@Component({\n selector: 'ax-menu-item',\n inputs: ['disabled'],\n templateUrl: './menu-item.component.html',\n host: { ngSkipHydration: 'true' },\n styles: `\n .ax-menu-item-text {\n white-space: nowrap;\n }\n `,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXMenuItemComponent extends MXInteractiveComponent {\n service = inject(AXMenuService);\n\n /** @ignore */\n @ViewChild(AXPopoverComponent)\n\n /** @ignore */\n private popover: AXPopoverComponent;\n\n /**\n * Injects the `AXMenuService` for managing menu interactions.\n */\n menuService = inject(AXMenuService);\n\n /**\n * The vertical offset for positioning, initialized to 0.\n */\n offsetY = signal(0);\n\n /**\n * The horizontal offset for positioning, initialized to 0.\n */\n offsetX = signal(0);\n\n /**\n * The text content, initialized to an empty string.\n */\n text = input<string>();\n\n /**\n * Indicates whether the item is active.\n */\n active = input<boolean>();\n\n /**\n * Emitted when the active state changes.\n */\n activeChange = output<boolean>();\n\n /**\n * Emitted when the element is clicked.\n */\n onClick = output<AXClickEvent>();\n\n /**\n * Indicates whether the component is a root menu item.\n * @defaultValue false\n */\n isRoot = false;\n\n /**\n * The parent menu item component, if any.\n */\n parent?: AXMenuItemComponent;\n\n /**\n * Injects the root menu service.\n */\n rootMenu = inject(AXRootMenu);\n\n /** @ignore */\n @ContentChildren(AXMenuItemComponent)\n children: QueryList<AXMenuItemComponent>;\n\n arrowState = input(true);\n\n /** @ignore */\n constructor() {\n super();\n\n afterNextRender(() => {\n this.children.forEach((c) => {\n c.parent = this;\n });\n\n this.offsetY.set(this.isRoot ? 8 : 0);\n this.offsetX.set(this.isRoot ? 0 : 4);\n\n this.getPlacement();\n });\n\n effect(\n () => {\n if (!this.getHostElement()?.getClientRects()[0]) return;\n //add overflow items to array\n if (\n this.getHostElement()?.getClientRects()[0]?.right > this.service.rightOverflow() ||\n this.getHostElement()?.getClientRects()[0]?.left < this.service.leftOverflow()\n ) {\n this.service.overflowElements.update((prev) => [...prev, this.getHostElement()]);\n this.service.isOverflowExist.set(true);\n } else {\n this.service.notOverflowElements.update((prev) => [...prev, this.getHostElement()]);\n }\n },\n { allowSignalWrites: true },\n );\n }\n\n /**\n * Closes the popover if it is open.\n */\n close() {\n this.popover?.close();\n }\n\n /** @ignore */\n _handleOnOpened() {\n this.parent.children.forEach((c) => {\n if (c != this) {\n c.close();\n }\n });\n if (this.children.length) {\n this.menuService.activeMenus$.next(this.menuService.activeMenus$.getValue().concat(this));\n }\n }\n\n /** @ignore */\n _handleOnClosed() {\n this.children.forEach((c) => {\n c.close();\n });\n }\n\n /**\n * Returns the icon based on the orientation of the root menu.\n */\n getIcon() {\n if (this.rootMenu.orientation() === 'vertical') {\n return 'ax-icon-chevron-right';\n } else {\n return 'ax-icon-chevron-down';\n }\n }\n\n /**\n * Determines the placement based on the root menu's orientation: 'bottom-start' for horizontal root, 'end-top' otherwise.\n */\n getPlacement() {\n switch (this.rootMenu.orientation()) {\n case 'horizontal':\n if (this.isRoot) {\n return 'bottom-start';\n } else {\n return 'end-top';\n }\n break;\n case 'vertical':\n if (this.isRoot) {\n return 'end-top';\n } else {\n return 'end-top';\n }\n break;\n default:\n return 'bottom-start';\n }\n }\n\n /** @ignore */\n @HostBinding('class')\n get __hostClass(): string[] {\n return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.active() ? 'ax-state-active' : ''}`];\n }\n\n /** @ignore */\n @HostListener('click', ['$event'])\n private __hostClick(e: MouseEvent) {\n if (!this.disabled) {\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n if (!this.children.length) {\n this.menuService.activeMenus$.subscribe((c) => c.forEach((x) => x.close())).unsubscribe();\n this.menuService.activeMenus$.next([]);\n }\n }\n }\n}\n","<div class=\"ax-menu-item-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <p class=\"ax-menu-item-text\">{{ text() }}</p>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length && arrowState()) {\n <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n #popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn()\"\n [target]=\"getHostElement()\"\n [offsetY]=\"offsetY()\"\n [offsetX]=\"offsetX()\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n","import { AXOrientation, MXBaseComponent } from '@acorex/components/common';\nimport {\n afterNextRender,\n AfterViewInit,\n Component,\n ContentChildren,\n HostBinding,\n inject,\n input,\n QueryList,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXMenuPopoverTrigger } from './class/popover.class';\nimport { AXRootMenu } from './class/root-menu.class';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuService } from './menu.service';\n\n/**\n * Represents a menu component that displays menu items.\n * @category Components\n */\n@Component({\n selector: 'ax-menu',\n template: `\n <div class=\"ax-main-menu-container\">\n <div\n [style]=\"{ width: !this.service.isOverflowExist() && !this.truncateMenu() && '100%' }\"\n class=\"ax-menu-item-container\"\n >\n <ng-content select=\"ax-menu-item,ng-container\"></ng-content>\n </div>\n\n @if (this.service.overflowElements().length !== 0 && this.truncateMenu()) {\n <button\n class=\"ax-general-button ax-button-icon ax-show-truncate-menu\"\n (click)=\"showMenuHandler()\"\n tabindex=\"0\"\n type=\"button\"\n >\n <ax-icon class=\"ax-icon ax-icon-more-horizontal ng-star-inserted ax-text-xl\"></ax-icon>\n </button>\n }\n </div>\n\n <div\n [style]=\"{ top: menuHeight(), display: this.isMenuOpen() ? 'block' : 'none' }\"\n class=\"ax-overflow-menu-container ax-menu-item-children\"\n ></div>\n `,\n styleUrls: ['./menu.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: AXRootMenu,\n useExisting: AXMenuComponent,\n },\n {\n provide: AXMenuService,\n },\n ],\n})\nexport class AXMenuComponent extends MXBaseComponent implements AfterViewInit {\n orientation = input<AXOrientation>('horizontal');\n openOn = input<AXMenuPopoverTrigger>('toggle');\n service = inject(AXMenuService);\n menuHeight = signal<string>('');\n isMenuOpen = signal(false);\n truncateMenu = input(false);\n\n /** @ignore */\n @ContentChildren(AXMenuItemComponent)\n children: QueryList<AXMenuItemComponent>;\n\n constructor() {\n super();\n afterNextRender(() => {\n if (!this.truncateMenu()) return;\n\n //add menu container border for detect overflow happen\n this.menuHeight.set(`${this.getHostElement()?.getClientRects()[0]?.height + 10}px`);\n this.service.rightOverflow.set(\n this.getHostElement()?.querySelector('.ax-menu-item-container')?.getClientRects()[0]?.right,\n );\n this.service.leftOverflow.set(\n this.getHostElement()?.querySelector('.ax-menu-item-container')?.getClientRects()[0]?.left,\n );\n\n let resizeTimer;\n\n window.addEventListener('resize', () => {\n //add menu container border for detect overflow happen\n clearTimeout(resizeTimer);\n if (!this.getHostElement()) return;\n resizeTimer = setTimeout(() => {\n this.service.rightOverflow.set(\n this.getHostElement()?.querySelector('.ax-menu-item-container').getClientRects()[0].right,\n );\n this.service.leftOverflow.set(\n this.getHostElement()?.querySelector('.ax-menu-item-container').getClientRects()[0].left,\n );\n if (this.isMenuOpen()) this.showMenuHandler();\n this.service.notOverflowElements.set([]);\n this.service.overflowElements.set([]);\n }, 200);\n });\n\n document.addEventListener('click', (event) => {\n const menu = document.querySelector('.ax-overflow-menu-container');\n const menuButton = document.querySelector('.ax-show-truncate-menu');\n if (\n !menu.contains(event.target as HTMLElement) &&\n !menuButton.contains(event.target as HTMLElement)\n ) {\n if (this.isMenuOpen()) this.showMenuHandler();\n }\n });\n });\n }\n\n showMenuHandler() {\n this.isMenuOpen.update((prev) => !prev);\n\n const injectContainer = this.getHostElement().querySelector('.ax-overflow-menu-container');\n const injectContainer2 = this.getHostElement().querySelector('.ax-menu-item-container');\n\n if (this.isMenuOpen()) {\n this.service.overflowElements().forEach((item) => {\n item.classList.add('overflowMenuOverride');\n injectContainer.appendChild(item);\n });\n this.service.notOverflowElements().forEach((item) => {\n item.classList.remove('overflowMenuOverride');\n injectContainer2.appendChild(item);\n });\n } else {\n const allItems = [...this.service.notOverflowElements(), ...this.service.overflowElements()];\n allItems.forEach((item) => {\n item.classList.remove('overflowMenuOverride');\n injectContainer2.appendChild(item);\n });\n }\n }\n\n /** @ignore */\n ngAfterViewInit() {\n this.children.forEach((c) => {\n c.isRoot = true;\n c.parent = this as unknown as AXMenuItemComponent;\n });\n }\n\n /** @ignore */\n @HostBinding('class')\n get __hostClass(): string {\n return `ax-orientation-${this.orientation()}`;\n }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuComponent } from './menu.component';\n\nconst COMPONENT = [AXMenuItemComponent, AXMenuComponent];\nconst MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [CommonModule, ...MODULES, AXButtonModule],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":";;;;;;;;;;;;;;MAGa,UAAU,CAAA;AAAvB,IAAA,WAAA,GAAA;AACE,QAAA,IAAA,CAAA,WAAW,GAAkC,MAAM,CAAC,YAAY,CAAC,CAAC;AAClE,QAAA,IAAA,CAAA,MAAM,GAAyC,MAAM,CAAC,QAAQ,CAAC,CAAC;KACjE;AAAA;;MCCY,aAAa,CAAA;AAH1B,IAAA,WAAA,GAAA;AAIE,QAAA,IAAA,CAAA,YAAY,GAA2C,IAAI,eAAe,CAAwB,EAAE,CAAC,CAAC;AAEtG,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;AAClC,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAgB,EAAE,CAAC,CAAC;AAC7C,QAAA,IAAA,CAAA,mBAAmB,GAAG,MAAM,CAAgB,EAAE,CAAC,CAAC;AAChD,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACjC,KAAA;8GARY,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;AAAb,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,cAFZ,MAAM,EAAA,CAAA,CAAA,EAAA;;2FAEP,aAAa,EAAA,UAAA,EAAA,CAAA;kBAHzB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA,CAAA;;;ACcD;;;AAGG;AAaG,MAAO,mBAAoB,SAAQ,sBAAsB,CAAA;;AAmE7D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;AAnEV,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;AAQhC;;AAEG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;AAEpC;;AAEG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAEpB;;AAEG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAEpB;;AAEG;QACH,IAAI,CAAA,IAAA,GAAG,KAAK,EAAU,CAAC;AAEvB;;AAEG;QACH,IAAM,CAAA,MAAA,GAAG,KAAK,EAAW,CAAC;AAE1B;;AAEG;QACH,IAAY,CAAA,YAAA,GAAG,MAAM,EAAW,CAAC;AAEjC;;AAEG;QACH,IAAO,CAAA,OAAA,GAAG,MAAM,EAAgB,CAAC;AAEjC;;;AAGG;QACH,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;AAOf;;AAEG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAM9B,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QAMvB,eAAe,CAAC,MAAK;YACnB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;AAC1B,gBAAA,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC;AAClB,aAAC,CAAC,CAAC;AAEH,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AACtC,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAEtC,IAAI,CAAC,YAAY,EAAE,CAAC;AACtB,SAAC,CAAC,CAAC;QAEH,MAAM,CACJ,MAAK;YACH,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC;gBAAE,OAAO;;AAExD,YAAA,IACE,IAAI,CAAC,cAAc,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE;AAChF,gBAAA,IAAI,CAAC,cAAc,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,EAC9E;gBACA,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;gBACjF,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;aACxC;iBAAM;gBACL,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;aACrF;AACH,SAAC,EACD,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAC5B,CAAC;KACH;AAED;;AAEG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;KACvB;;IAGD,eAAe,GAAA;QACb,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;AACjC,YAAA,IAAI,CAAC,IAAI,IAAI,EAAE;gBACb,CAAC,CAAC,KAAK,EAAE,CAAC;aACX;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACxB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;SAC3F;KACF;;IAGD,eAAe,GAAA;QACb,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;YAC1B,CAAC,CAAC,KAAK,EAAE,CAAC;AACZ,SAAC,CAAC,CAAC;KACJ;AAED;;AAEG;IACH,OAAO,GAAA;QACL,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;AAC9C,YAAA,OAAO,uBAAuB,CAAC;SAChC;aAAM;AACL,YAAA,OAAO,sBAAsB,CAAC;SAC/B;KACF;AAED;;AAEG;IACH,YAAY,GAAA;AACV,QAAA,QAAQ,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;AACjC,YAAA,KAAK,YAAY;AACf,gBAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,oBAAA,OAAO,cAAc,CAAC;iBACvB;qBAAM;AACL,oBAAA,OAAO,SAAS,CAAC;iBAClB;gBACD,MAAM;AACR,YAAA,KAAK,UAAU;AACb,gBAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,oBAAA,OAAO,SAAS,CAAC;iBAClB;qBAAM;AACL,oBAAA,OAAO,SAAS,CAAC;iBAClB;gBACD,MAAM;AACR,YAAA;AACE,gBAAA,OAAO,cAAc,CAAC;SACzB;KACF;;AAGD,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,CAAC,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE,CAAE,CAAA,EAAE,CAAG,EAAA,IAAI,CAAC,MAAM,EAAE,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,CAAC,CAAC;KACrG;;AAIO,IAAA,WAAW,CAAC,CAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;AAChB,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE;AAClC,gBAAA,WAAW,EAAE,CAAC;AACf,aAAA,CAAC,CAAC;AACH,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;AACzB,gBAAA,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;gBAC1F,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aACxC;SACF;KACF;8GApLU,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EA6Db,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,qBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,mBAAmB,EAzDzB,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,kBAAkB,uECxC/B,ywBAwBA,EAAA,MAAA,EAAA,CAAA,0CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,EAAA,WAAA,EAAA,SAAA,EAAA,QAAA,EAAA,SAAA,EAAA,aAAA,EAAA,WAAA,EAAA,YAAA,EAAA,eAAA,EAAA,mBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FDYa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAZ/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAChB,MAAA,EAAA,CAAC,UAAU,CAAC,EAEd,IAAA,EAAA,EAAE,eAAe,EAAE,MAAM,EAAE,EAMlB,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,ywBAAA,EAAA,MAAA,EAAA,CAAA,0CAAA,CAAA,EAAA,CAAA;wDAS7B,OAAO,EAAA,CAAA;sBAHd,SAAS;uBAAC,kBAAkB,CAAA;gBA0D7B,QAAQ,EAAA,CAAA;sBADP,eAAe;uBAAC,mBAAmB,CAAA;gBAqGhC,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,OAAO,CAAA;gBAOZ,WAAW,EAAA,CAAA;sBADlB,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAA;;;AEzLnC;;;AAGG;AAyCG,MAAO,eAAgB,SAAQ,eAAe,CAAA;AAYlD,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;AAZV,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAgB,YAAY,CAAC,CAAC;AACjD,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAuB,QAAQ,CAAC,CAAC;AAC/C,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;AAChC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;AAChC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC3B,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QAQ1B,eAAe,CAAC,MAAK;AACnB,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBAAE,OAAO;;YAGjC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAG,EAAA,IAAI,CAAC,cAAc,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,EAAE,CAAI,EAAA,CAAA,CAAC,CAAC;YACpF,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAC5B,IAAI,CAAC,cAAc,EAAE,EAAE,aAAa,CAAC,yBAAyB,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAC5F,CAAC;YACF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAC3B,IAAI,CAAC,cAAc,EAAE,EAAE,aAAa,CAAC,yBAAyB,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAC3F,CAAC;AAEF,YAAA,IAAI,WAAW,CAAC;AAEhB,YAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAK;;gBAErC,YAAY,CAAC,WAAW,CAAC,CAAC;AAC1B,gBAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;oBAAE,OAAO;AACnC,gBAAA,WAAW,GAAG,UAAU,CAAC,MAAK;oBAC5B,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAC5B,IAAI,CAAC,cAAc,EAAE,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAC1F,CAAC;oBACF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAC3B,IAAI,CAAC,cAAc,EAAE,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CACzF,CAAC;oBACF,IAAI,IAAI,CAAC,UAAU,EAAE;wBAAE,IAAI,CAAC,eAAe,EAAE,CAAC;oBAC9C,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;oBACzC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;iBACvC,EAAE,GAAG,CAAC,CAAC;AACV,aAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,KAAI;gBAC3C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;gBACnE,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;gBACpE,IACE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC;oBAC3C,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,EACjD;oBACA,IAAI,IAAI,CAAC,UAAU,EAAE;wBAAE,IAAI,CAAC,eAAe,EAAE,CAAC;iBAC/C;AACH,aAAC,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;KACJ;IAED,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC;QAExC,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;QAC3F,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;AAExF,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;YACrB,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AAC/C,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;AAC3C,gBAAA,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACpC,aAAC,CAAC,CAAC;YACH,IAAI,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AAClD,gBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC;AAC9C,gBAAA,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACrC,aAAC,CAAC,CAAC;SACJ;aAAM;AACL,YAAA,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7F,YAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACxB,gBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC;AAC9C,gBAAA,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACrC,aAAC,CAAC,CAAC;SACJ;KACF;;IAGD,eAAe,GAAA;QACb,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;AAC1B,YAAA,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC;AAChB,YAAA,CAAC,CAAC,MAAM,GAAG,IAAsC,CAAC;AACpD,SAAC,CAAC,CAAC;KACJ;;AAGD,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,kBAAkB,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;KAC/C;8GA9FU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAVf,QAAA,EAAA,SAAA,EAAA,MAAA,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,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,UAAU;AACnB,gBAAA,WAAW,EAAE,eAAe;AAC7B,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,aAAa;AACvB,aAAA;AACF,SAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAWgB,mBAAmB,EA/C1B,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,uhHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,wBAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAaU,eAAe,EAAA,UAAA,EAAA,CAAA;kBAxC3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EACT,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBT,EAEc,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAC1B,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,UAAU;AACnB,4BAAA,WAAW,EAAiB,eAAA;AAC7B,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,aAAa;AACvB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,uhHAAA,CAAA,EAAA,CAAA;wDAYD,QAAQ,EAAA,CAAA;sBADP,eAAe;uBAAC,mBAAmB,CAAA;gBAmFhC,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,OAAO,CAAA;;;AC9ItB,MAAM,SAAS,GAAG,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AACzD,MAAM,OAAO,GAAG,CAAC,iBAAiB,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC;MAQ7F,YAAY,CAAA;8GAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;+GAAZ,YAAY,EAAA,YAAA,EAAA,CATN,mBAAmB,EAAE,eAAe,aAK3C,YAAY,EAJP,iBAAiB,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAIlE,cAAc,CAAA,EAAA,OAAA,EAAA,CALjC,mBAAmB,EAAE,eAAe,CAAA,EAAA,CAAA,CAAA,EAAA;AAS1C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,EAJb,OAAA,EAAA,CAAA,YAAY,EAAK,OAAO,EAAE,cAAc,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAIvC,YAAY,EAAA,UAAA,EAAA,CAAA;kBANxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;oBAC5B,OAAO,EAAE,CAAC,YAAY,EAAE,GAAG,OAAO,EAAE,cAAc,CAAC;AACnD,oBAAA,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;AACvB,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA,CAAA;;;ACnBD;;AAEG;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { generateQRCode } from '@acorex/cdk/qrcode';
|
|
2
2
|
import { AXValuableComponent } from '@acorex/components/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { input, signal, viewChild,
|
|
4
|
+
import { input, signal, viewChild, effect, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
7
|
|
|
@@ -63,21 +63,6 @@ class AXQrcodeComponent {
|
|
|
63
63
|
* @ignore
|
|
64
64
|
*/
|
|
65
65
|
this.svg = viewChild('svg');
|
|
66
|
-
/**
|
|
67
|
-
* @ignore
|
|
68
|
-
*/
|
|
69
|
-
this.calculateLogoSize = computed(() => {
|
|
70
|
-
switch (this.level()) {
|
|
71
|
-
case 'L':
|
|
72
|
-
return Math.sqrt((5 / 100) * (this.size() * this.size()));
|
|
73
|
-
case 'M':
|
|
74
|
-
return Math.sqrt((8 / 100) * (this.size() * this.size()));
|
|
75
|
-
case 'Q':
|
|
76
|
-
return Math.sqrt((11 / 100) * (this.size() * this.size()));
|
|
77
|
-
case 'H':
|
|
78
|
-
return Math.sqrt((14 / 100) * (this.size() * this.size()));
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
66
|
effect(() => {
|
|
82
67
|
this.generate();
|
|
83
68
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-qrcode.mjs","sources":["../../../../libs/components/qrcode/src/lib/qrcode.class.ts","../../../../libs/components/qrcode/src/lib/qrcode.component.ts","../../../../libs/components/qrcode/src/lib/qrcode.component.html","../../../../libs/components/qrcode/src/lib/qrcode.module.ts","../../../../libs/components/qrcode/src/acorex-components-qrcode.ts"],"sourcesContent":["export type AXQrcodeOutputType = 'canvas' | 'svg' | 'url';\nexport type AXQrcodeLevel = 'L' | 'M' | 'Q' | 'H';\n\nexport function debounce(func: (...args: any) => void, delayMS: number) {\n let timeoutId;\n\n return function (...args) {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n timeoutId = setTimeout(() => {\n func(...args);\n }, delayMS);\n };\n}\n","import { generateQRCode } from '@acorex/cdk/qrcode';\nimport { AXValuableComponent } from '@acorex/components/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n
|
|
1
|
+
{"version":3,"file":"acorex-components-qrcode.mjs","sources":["../../../../libs/components/qrcode/src/lib/qrcode.class.ts","../../../../libs/components/qrcode/src/lib/qrcode.component.ts","../../../../libs/components/qrcode/src/lib/qrcode.component.html","../../../../libs/components/qrcode/src/lib/qrcode.module.ts","../../../../libs/components/qrcode/src/acorex-components-qrcode.ts"],"sourcesContent":["export type AXQrcodeOutputType = 'canvas' | 'svg' | 'url';\nexport type AXQrcodeLevel = 'L' | 'M' | 'Q' | 'H';\n\nexport function debounce(func: (...args: any) => void, delayMS: number) {\n let timeoutId;\n\n return function (...args) {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n timeoutId = setTimeout(() => {\n func(...args);\n }, delayMS);\n };\n}\n","import { generateQRCode } from '@acorex/cdk/qrcode';\nimport { AXValuableComponent } from '@acorex/components/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n forwardRef,\n input,\n signal,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { AXQrcodeLevel, AXQrcodeOutputType } from './qrcode.class';\n\n@Component({\n selector: 'ax-qrcode',\n templateUrl: './qrcode.component.html',\n styleUrls: ['./qrcode.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n { provide: AXValuableComponent, useExisting: AXQrcodeComponent },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXQrcodeComponent),\n multi: true,\n },\n ],\n})\nexport class AXQrcodeComponent implements AfterViewInit {\n /**\n * @description Value of QR code\n */\n content = input.required<string>();\n /**\n * @description Size of the QR code\n * @default 256\n */\n size = input(256);\n /**\n * @description Error correction level can be 'L' | 'M' | 'Q' | 'H'\n * @default 'M'\n */\n level = input<AXQrcodeLevel>('M');\n /**\n * @description QR code color, can be a hex code or CSS color name\n * @default '#000000'\n */\n color = input('#000000');\n /**\n * @description QR code Background color, can be a hex code or CSS color name\n * @default '#FFFFFF'\n */\n backgroundColor = input('#FFFFFF');\n /**\n * @description Type of output can be 'canvas' | 'svg' | 'url'\n * @default 'canvas'\n */\n outputType = input<AXQrcodeOutputType>('canvas'); //\n /**\n * @ignore\n */\n /**\n * @description // Holds base64 or URL if outputType is 'url' or 'base64'\n */\n protected qrCodeUrl = signal<string | undefined>(undefined);\n /**\n * @ignore\n */\n private canvas = viewChild<ElementRef<HTMLCanvasElement>>('canvas');\n /**\n * @ignore\n */\n private svg = viewChild<ElementRef<HTMLCanvasElement>>('svg');\n\n constructor() {\n effect(\n () => {\n this.generate();\n },\n {\n allowSignalWrites: true,\n },\n );\n }\n\n ngAfterViewInit() {\n this.generate();\n }\n generate() {\n generateQRCode(\n this.content(),\n this.size(),\n this.level(),\n this.color(),\n this.backgroundColor(),\n this.outputType(),\n this.canvas()?.nativeElement,\n this.svg()?.nativeElement,\n )\n .then((result) => {\n if (this.outputType() === 'url') {\n this.qrCodeUrl.set(result as string);\n }\n })\n .catch((error) => {\n console.error(error);\n });\n }\n}\n","<div class=\"qrcode\">\n @if (outputType() === 'canvas') {\n <canvas #canvas></canvas>\n } @else if (outputType() === 'svg') {\n <div #svg></div>\n } @else {\n <img [src]=\"qrCodeUrl()\" alt=\"QR Code\" />\n }\n <div class=\"logo-container\">\n <ng-content select=\"img\"></ng-content>\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXQrcodeComponent } from './qrcode.component';\n\n@NgModule({\n declarations: [AXQrcodeComponent],\n imports: [CommonModule],\n exports: [AXQrcodeComponent],\n})\nexport class AXQrcodeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -166,24 +166,22 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
|
|
|
166
166
|
*/
|
|
167
167
|
this.AXRangeSliderHandler1 = computed(() => this.isHorizontal()
|
|
168
168
|
? {
|
|
169
|
-
left: this.isDual()
|
|
170
|
-
? this.calculatePos()[0] + 0.1 + '%'
|
|
171
|
-
: this.calculatePos() + 0.1 + '%',
|
|
169
|
+
left: this.isDual() ? this.calculatePos()[0] + '%' : this.calculatePos() + '%',
|
|
172
170
|
}
|
|
173
171
|
: {
|
|
174
172
|
bottom: this.isDual()
|
|
175
|
-
? this.calculatePos()[0] -
|
|
176
|
-
: this.calculatePos() -
|
|
173
|
+
? 'calc(' + this.calculatePos()[0] + '% - ' + 6 * this.height + 'rem)'
|
|
174
|
+
: 'calc(' + this.calculatePos() + '% - ' + 6 * this.height + 'rem)',
|
|
177
175
|
});
|
|
178
176
|
/**
|
|
179
177
|
* @ignore
|
|
180
178
|
*/
|
|
181
179
|
this.AXRangeSliderHandler2 = computed(() => this.isHorizontal()
|
|
182
180
|
? {
|
|
183
|
-
left: this.calculatePos()[1] +
|
|
181
|
+
left: this.calculatePos()[1] + '%',
|
|
184
182
|
}
|
|
185
183
|
: {
|
|
186
|
-
bottom: this.calculatePos()[1] -
|
|
184
|
+
bottom: 'calc(' + this.calculatePos()[1] + '% - ' + 6 * this.height + 'rem)',
|
|
187
185
|
});
|
|
188
186
|
/**
|
|
189
187
|
* @ignore
|
|
@@ -600,7 +598,7 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
|
|
|
600
598
|
useExisting: forwardRef(() => AXRangeSliderComponent),
|
|
601
599
|
multi: true,
|
|
602
600
|
},
|
|
603
|
-
], usesInheritance: true, ngImport: i0, template: "@if (correctMinMax()) {\n <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n <div\n class=\"ax-range-slider-highlight\"\n [ngStyle]=\"AXRangeSliderHighlight()\"\n (mousedown)=\"onStartBar($event)\"\n (touchstart)=\"onStartBar($event)\"\n ></div>\n\n <div\n class=\"ax-range-slider-handler\"\n [ngStyle]=\"AXRangeSliderHandler1()\"\n name=\"first\"\n (mousedown)=\"onStartHandler($event, 'first')\"\n (touchstart)=\"onStartHandler($event, 'first')\"\n >\n @if (hasTooltip()) {\n <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n }\n </div>\n\n @if (isDual()) {\n <div\n class=\"ax-range-slider-handler\"\n [ngStyle]=\"AXRangeSliderHandler2()\"\n name=\"second\"\n (mousedown)=\"onStartHandler($event, 'second')\"\n (touchstart)=\"onStartHandler($event, 'second')\"\n >\n @if (hasTooltip()) {\n <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n }\n </div>\n }\n @if (hasSnap()) {\n <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n @for (item of calculateSnapBar(); track $index) {\n <div\n class=\"ax-range-slider-steps\"\n [ngStyle]=\"\n isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\n \"\n >\n @if (hasLable()) {\n <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n {{ item + min() }}\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-range-slider-base-thickness) * 2.8);top:calc(var(--ax-range-slider-base-thickness) * -2);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 7);left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgb(var(--ax-range-slider-fg)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-range-slider-base-thickness) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-range-slider-base-thickness) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-range-slider-base-thickness);height:100.1%;transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 8.5);left:calc(var(--ax-range-slider-base-thickness) * -8);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-range-slider-base-thickness) * -3)}ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-200);--ax-range-slider-fg: var(--ax-color-primary-500);--ax-range-tooltip-text: var(--ax-color-primary-fore)}ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-200);--ax-range-slider-fg: var(--ax-color-secondary-500);--ax-range-tooltip-text: var(--ax-color-secondary-fore)}ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-200);--ax-range-slider-fg: var(--ax-color-success-500);--ax-range-tooltip-text: var(--ax-color-success-fore)}ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-200);--ax-range-slider-fg: var(--ax-color-warning-500);--ax-range-tooltip-text: var(--ax-color-warning-fore)}ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-200);--ax-range-slider-fg: var(--ax-color-danger-500);--ax-range-tooltip-text: var(--ax-color-danger-fore)}ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-200);--ax-range-slider-fg: var(--ax-color-info-500);--ax-range-tooltip-text: var(--ax-color-info-fore)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-range-slider.ax-state-readonly{opacity:.75}.ax-dark ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-700);--ax-range-slider-fg: var(--ax-color-primary-200);--ax-range-tooltip-text: var(--ax-color-primary-fore-tint)}.ax-dark ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-700);--ax-range-slider-fg: var(--ax-color-secondary-200);--ax-range-tooltip-text: var(--ax-color-secondary-fore-tint)}.ax-dark ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-700);--ax-range-slider-fg: var(--ax-color-success-200);--ax-range-tooltip-text: var(--ax-color-success-fore-tint)}.ax-dark ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-700);--ax-range-slider-fg: var(--ax-color-warning-200);--ax-range-tooltip-text: var(--ax-color-warning-fore-tint)}.ax-dark ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-700);--ax-range-slider-fg: var(--ax-color-danger-200);--ax-range-tooltip-text: var(--ax-color-danger-fore-tint)}.ax-dark ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-700);--ax-range-slider-fg: var(--ax-color-info-200);--ax-range-tooltip-text: var(--ax-color-info-fore-tint)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
601
|
+
], usesInheritance: true, ngImport: i0, template: "@if (correctMinMax()) {\n <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n <div\n class=\"ax-range-slider-highlight\"\n [ngStyle]=\"AXRangeSliderHighlight()\"\n (mousedown)=\"onStartBar($event)\"\n (touchstart)=\"onStartBar($event)\"\n ></div>\n\n <div\n class=\"ax-range-slider-handler\"\n [ngStyle]=\"AXRangeSliderHandler1()\"\n name=\"first\"\n (mousedown)=\"onStartHandler($event, 'first')\"\n (touchstart)=\"onStartHandler($event, 'first')\"\n >\n @if (hasTooltip()) {\n <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n }\n </div>\n\n @if (isDual()) {\n <div\n class=\"ax-range-slider-handler\"\n [ngStyle]=\"AXRangeSliderHandler2()\"\n name=\"second\"\n (mousedown)=\"onStartHandler($event, 'second')\"\n (touchstart)=\"onStartHandler($event, 'second')\"\n >\n @if (hasTooltip()) {\n <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n }\n </div>\n }\n @if (hasSnap()) {\n <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n @for (item of calculateSnapBar(); track $index) {\n <div\n class=\"ax-range-slider-steps\"\n [ngStyle]=\"\n isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\n \"\n >\n @if (hasLable()) {\n <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n {{ item + min() }}\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-45%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-range-slider-base-thickness) * 2.8);top:calc(var(--ax-range-slider-base-thickness) * -2);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 7);left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgb(var(--ax-range-slider-fg)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-range-slider-base-thickness) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-range-slider-base-thickness) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-range-slider-base-thickness);height:100.1%;transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-50%,-55%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 8.5);left:calc(var(--ax-range-slider-base-thickness) * -8);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-range-slider-base-thickness) * -3)}ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-200);--ax-range-slider-fg: var(--ax-color-primary-500);--ax-range-tooltip-text: var(--ax-color-primary-fore)}ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-200);--ax-range-slider-fg: var(--ax-color-secondary-500);--ax-range-tooltip-text: var(--ax-color-secondary-fore)}ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-200);--ax-range-slider-fg: var(--ax-color-success-500);--ax-range-tooltip-text: var(--ax-color-success-fore)}ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-200);--ax-range-slider-fg: var(--ax-color-warning-500);--ax-range-tooltip-text: var(--ax-color-warning-fore)}ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-200);--ax-range-slider-fg: var(--ax-color-danger-500);--ax-range-tooltip-text: var(--ax-color-danger-fore)}ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-200);--ax-range-slider-fg: var(--ax-color-info-500);--ax-range-tooltip-text: var(--ax-color-info-fore)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-range-slider.ax-state-readonly{opacity:.75}.ax-dark ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-700);--ax-range-slider-fg: var(--ax-color-primary-200);--ax-range-tooltip-text: var(--ax-color-primary-fore-tint)}.ax-dark ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-700);--ax-range-slider-fg: var(--ax-color-secondary-200);--ax-range-tooltip-text: var(--ax-color-secondary-fore-tint)}.ax-dark ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-700);--ax-range-slider-fg: var(--ax-color-success-200);--ax-range-tooltip-text: var(--ax-color-success-fore-tint)}.ax-dark ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-700);--ax-range-slider-fg: var(--ax-color-warning-200);--ax-range-tooltip-text: var(--ax-color-warning-fore-tint)}.ax-dark ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-700);--ax-range-slider-fg: var(--ax-color-danger-200);--ax-range-tooltip-text: var(--ax-color-danger-fore-tint)}.ax-dark ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-700);--ax-range-slider-fg: var(--ax-color-info-200);--ax-range-tooltip-text: var(--ax-color-info-fore-tint)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
604
602
|
}
|
|
605
603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
|
|
606
604
|
type: Component,
|
|
@@ -611,7 +609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
611
609
|
useExisting: forwardRef(() => AXRangeSliderComponent),
|
|
612
610
|
multi: true,
|
|
613
611
|
},
|
|
614
|
-
], template: "@if (correctMinMax()) {\n <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n <div\n class=\"ax-range-slider-highlight\"\n [ngStyle]=\"AXRangeSliderHighlight()\"\n (mousedown)=\"onStartBar($event)\"\n (touchstart)=\"onStartBar($event)\"\n ></div>\n\n <div\n class=\"ax-range-slider-handler\"\n [ngStyle]=\"AXRangeSliderHandler1()\"\n name=\"first\"\n (mousedown)=\"onStartHandler($event, 'first')\"\n (touchstart)=\"onStartHandler($event, 'first')\"\n >\n @if (hasTooltip()) {\n <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n }\n </div>\n\n @if (isDual()) {\n <div\n class=\"ax-range-slider-handler\"\n [ngStyle]=\"AXRangeSliderHandler2()\"\n name=\"second\"\n (mousedown)=\"onStartHandler($event, 'second')\"\n (touchstart)=\"onStartHandler($event, 'second')\"\n >\n @if (hasTooltip()) {\n <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n }\n </div>\n }\n @if (hasSnap()) {\n <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n @for (item of calculateSnapBar(); track $index) {\n <div\n class=\"ax-range-slider-steps\"\n [ngStyle]=\"\n isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\n \"\n >\n @if (hasLable()) {\n <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n {{ item + min() }}\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-
|
|
612
|
+
], template: "@if (correctMinMax()) {\n <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n <div\n class=\"ax-range-slider-highlight\"\n [ngStyle]=\"AXRangeSliderHighlight()\"\n (mousedown)=\"onStartBar($event)\"\n (touchstart)=\"onStartBar($event)\"\n ></div>\n\n <div\n class=\"ax-range-slider-handler\"\n [ngStyle]=\"AXRangeSliderHandler1()\"\n name=\"first\"\n (mousedown)=\"onStartHandler($event, 'first')\"\n (touchstart)=\"onStartHandler($event, 'first')\"\n >\n @if (hasTooltip()) {\n <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n }\n </div>\n\n @if (isDual()) {\n <div\n class=\"ax-range-slider-handler\"\n [ngStyle]=\"AXRangeSliderHandler2()\"\n name=\"second\"\n (mousedown)=\"onStartHandler($event, 'second')\"\n (touchstart)=\"onStartHandler($event, 'second')\"\n >\n @if (hasTooltip()) {\n <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n }\n </div>\n }\n @if (hasSnap()) {\n <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n @for (item of calculateSnapBar(); track $index) {\n <div\n class=\"ax-range-slider-steps\"\n [ngStyle]=\"\n isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\n \"\n >\n @if (hasLable()) {\n <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n {{ item + min() }}\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-45%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-range-slider-base-thickness) * 2.8);top:calc(var(--ax-range-slider-base-thickness) * -2);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 7);left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgb(var(--ax-range-slider-fg)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-range-slider-base-thickness) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-range-slider-base-thickness) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-range-slider-base-thickness);height:100.1%;transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-50%,-55%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 8.5);left:calc(var(--ax-range-slider-base-thickness) * -8);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-range-slider-base-thickness) * -3)}ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-200);--ax-range-slider-fg: var(--ax-color-primary-500);--ax-range-tooltip-text: var(--ax-color-primary-fore)}ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-200);--ax-range-slider-fg: var(--ax-color-secondary-500);--ax-range-tooltip-text: var(--ax-color-secondary-fore)}ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-200);--ax-range-slider-fg: var(--ax-color-success-500);--ax-range-tooltip-text: var(--ax-color-success-fore)}ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-200);--ax-range-slider-fg: var(--ax-color-warning-500);--ax-range-tooltip-text: var(--ax-color-warning-fore)}ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-200);--ax-range-slider-fg: var(--ax-color-danger-500);--ax-range-tooltip-text: var(--ax-color-danger-fore)}ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-200);--ax-range-slider-fg: var(--ax-color-info-500);--ax-range-tooltip-text: var(--ax-color-info-fore)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-range-slider.ax-state-readonly{opacity:.75}.ax-dark ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-700);--ax-range-slider-fg: var(--ax-color-primary-200);--ax-range-tooltip-text: var(--ax-color-primary-fore-tint)}.ax-dark ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-700);--ax-range-slider-fg: var(--ax-color-secondary-200);--ax-range-tooltip-text: var(--ax-color-secondary-fore-tint)}.ax-dark ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-700);--ax-range-slider-fg: var(--ax-color-success-200);--ax-range-tooltip-text: var(--ax-color-success-fore-tint)}.ax-dark ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-700);--ax-range-slider-fg: var(--ax-color-warning-200);--ax-range-tooltip-text: var(--ax-color-warning-fore-tint)}.ax-dark ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-700);--ax-range-slider-fg: var(--ax-color-danger-200);--ax-range-tooltip-text: var(--ax-color-danger-fore-tint)}.ax-dark ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-700);--ax-range-slider-fg: var(--ax-color-info-200);--ax-range-tooltip-text: var(--ax-color-info-fore-tint)}\n"] }]
|
|
615
613
|
}], ctorParameters: () => [], propDecorators: { onWheel: [{
|
|
616
614
|
type: HostListener,
|
|
617
615
|
args: ['wheel', ['$event']]
|