@acorex/components 20.3.30 → 20.3.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dropdown/index.d.ts +0 -4
- package/fesm2022/acorex-components-action-sheet.mjs +2 -2
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +7 -10
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-time-duration.mjs +6 -7
- package/fesm2022/acorex-components-time-duration.mjs.map +1 -1
- package/package.json +7 -7
package/dropdown/index.d.ts
CHANGED
|
@@ -15,10 +15,6 @@ declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base impleme
|
|
|
15
15
|
readonly hasInput: i0.InputSignal<boolean>;
|
|
16
16
|
readonly popoverWidth: i0.InputSignal<string>;
|
|
17
17
|
private _platform;
|
|
18
|
-
/**
|
|
19
|
-
* @ignore
|
|
20
|
-
*/
|
|
21
|
-
protected _isMobile: boolean;
|
|
22
18
|
/**
|
|
23
19
|
* @ignore
|
|
24
20
|
*/
|
|
@@ -523,7 +523,7 @@ class AXActionSheetComponent extends MXBaseComponent {
|
|
|
523
523
|
provide: AXFocusableComponent,
|
|
524
524
|
useExisting: AXActionSheetComponent,
|
|
525
525
|
},
|
|
526
|
-
], viewQueries: [{ propertyName: "contentContainerRef", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "@if (data().draggable) {\n <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n <div class=\"ax-drag-handle\"></div>\n </div>\n}\n@if (data().header) {\n <ax-header\n [class.draggable-header]=\"data().draggable\"\n (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n >\n <ax-prefix>\n <ax-title>{{ data().title | translate | async }}</ax-title>\n\n @if (data().subTitle) {\n <ax-subtitle>\n {{ data().subTitle }}\n </ax-subtitle>\n }\n </ax-prefix>\n @if (data().closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n@if (data().content) {\n <div class=\"ax-custom-template-container\">\n @if (templateContent()) {\n <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n }\n <!-- Component content container - always present but only populated when componentContent() is truthy -->\n <ng-container #contentContainer></ng-container>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data().items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}.ax-action-sheet-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important;width:auto!important;height:auto!important;display:block!important;align-items:unset!important;justify-content:unset!important;max-width:none!important}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
526
|
+
], viewQueries: [{ propertyName: "contentContainerRef", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "@if (data().draggable) {\n <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n <div class=\"ax-drag-handle\"></div>\n </div>\n}\n@if (data().header) {\n <ax-header\n [class.draggable-header]=\"data().draggable\"\n (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n >\n <ax-prefix>\n <ax-title class=\"line-clamp-1 line-clamp\">{{ data().title | translate | async }}</ax-title>\n\n @if (data().subTitle) {\n <ax-subtitle class=\"line-clamp-2 line-clamp\">\n {{ data().subTitle }}\n </ax-subtitle>\n }\n </ax-prefix>\n @if (data().closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n@if (data().content) {\n <div class=\"ax-custom-template-container\">\n @if (templateContent()) {\n <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n }\n <!-- Component content container - always present but only populated when componentContent() is truthy -->\n <ng-container #contentContainer></ng-container>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data().items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}.ax-action-sheet-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important;width:auto!important;height:auto!important;display:block!important;align-items:unset!important;justify-content:unset!important;max-width:none!important}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .line-clamp{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}ax-action-sheet .line-clamp-1{-webkit-line-clamp:1}ax-action-sheet .line-clamp-2{-webkit-line-clamp:2}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:calc(100vh - 102px)}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
527
527
|
}
|
|
528
528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetComponent, decorators: [{
|
|
529
529
|
type: Component,
|
|
@@ -545,7 +545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
545
545
|
NgTemplateOutlet,
|
|
546
546
|
AXTranslatorPipe,
|
|
547
547
|
AsyncPipe,
|
|
548
|
-
], template: "@if (data().draggable) {\n <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n <div class=\"ax-drag-handle\"></div>\n </div>\n}\n@if (data().header) {\n <ax-header\n [class.draggable-header]=\"data().draggable\"\n (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n >\n <ax-prefix>\n <ax-title>{{ data().title | translate | async }}</ax-title>\n\n @if (data().subTitle) {\n <ax-subtitle>\n {{ data().subTitle }}\n </ax-subtitle>\n }\n </ax-prefix>\n @if (data().closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n@if (data().content) {\n <div class=\"ax-custom-template-container\">\n @if (templateContent()) {\n <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n }\n <!-- Component content container - always present but only populated when componentContent() is truthy -->\n <ng-container #contentContainer></ng-container>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data().items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}.ax-action-sheet-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important;width:auto!important;height:auto!important;display:block!important;align-items:unset!important;justify-content:unset!important;max-width:none!important}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"] }]
|
|
548
|
+
], template: "@if (data().draggable) {\n <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n <div class=\"ax-drag-handle\"></div>\n </div>\n}\n@if (data().header) {\n <ax-header\n [class.draggable-header]=\"data().draggable\"\n (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n >\n <ax-prefix>\n <ax-title class=\"line-clamp-1 line-clamp\">{{ data().title | translate | async }}</ax-title>\n\n @if (data().subTitle) {\n <ax-subtitle class=\"line-clamp-2 line-clamp\">\n {{ data().subTitle }}\n </ax-subtitle>\n }\n </ax-prefix>\n @if (data().closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n@if (data().content) {\n <div class=\"ax-custom-template-container\">\n @if (templateContent()) {\n <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n }\n <!-- Component content container - always present but only populated when componentContent() is truthy -->\n <ng-container #contentContainer></ng-container>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data().items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}.ax-action-sheet-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important;width:auto!important;height:auto!important;display:block!important;align-items:unset!important;justify-content:unset!important;max-width:none!important}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .line-clamp{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}ax-action-sheet .line-clamp-1{-webkit-line-clamp:1}ax-action-sheet .line-clamp-2{-webkit-line-clamp:2}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:calc(100vh - 102px)}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"] }]
|
|
549
549
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }], overlayRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayRef", required: false }] }], __actionSheetRef__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__actionSheetRef__", required: false }] }], contentContainerRef: [{
|
|
550
550
|
type: ViewChild,
|
|
551
551
|
args: ['contentContainer', { read: ViewContainerRef }]
|