@acorex/components 19.8.0-next.14 → 19.8.0-next.16
Sign up to get free protection for your applications and to get access to all the features.
- package/fesm2022/acorex-components-badge.mjs +2 -2
- package/fesm2022/acorex-components-badge.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +4 -4
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-data-pager.mjs +3 -3
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +2 -2
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-list.mjs +2 -2
- package/fesm2022/acorex-components-switch.mjs +2 -2
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -236,7 +236,7 @@ class AXListComponent extends MXSelectionValueComponent {
|
|
|
236
236
|
},
|
|
237
237
|
deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],
|
|
238
238
|
},
|
|
239
|
-
], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" cdkVirtualScrollingElement>\n <ng-content select=\"ax-header\"></ng-content>\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeightSignal()\"\n [style.--item-height]=\"itemHeightSignal() + 'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n >\n <ul>\n <!-- Item Template -->\n <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n <li\n [class.ax-state-selected]=\"isItemSelected(item)\"\n class=\"list-item\"\n [class.ax-state-disabled]=\"isItemDisabled(item)\"\n [attr.tabindex]=\"i\"\n (click)=\"_handleOnItemClick($event, item)\"\n [attr.data-id]=\"getValue(item)\"\n >\n <!-- Custom Item Template -->\n <ng-container *ngIf=\"itemTemplate; else defaultItemTpl\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: { data: item } }\">\n </ng-container>\n </ng-container>\n <!-- Default Item Template -->\n <ng-template #defaultItemTpl>\n <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n <div class=\"ax-label-container\">\n <input\n class=\"ax-checkbox\"\n *ngIf=\"multiple && checkbox\"\n type=\"checkbox\"\n [checked]=\"isItemSelected(item)\"\n [disabled]=\"isItemDisabled(item)\"\n tabindex=\"0\"\n />\n <span [class.ax-checkbox-label]=\"multiple && checkbox\">{{ getDisplayText(item) }}</span>\n </div>\n <!-- <i class=\"ax-icon ax-icon-check ax-selected-icon\" *ngIf=\"isItemSelected(item) \"></i> -->\n </ng-container>\n </ng-template>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n </cdk-virtual-scroll-viewport>\n <ng-content select=\"ax-footer\"></ng-content>\n</div>\n<!-- Loading Template -->\n<ng-template #loadingTpl>\n <!-- Custom Loading Template -->\n <ng-container *ngIf=\"loadingTemplate; else defaultLoadingTpl\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n </ng-container>\n <!-- Default Loading Template -->\n <ng-template #defaultLoadingTpl>\n <li>{{ 'loading' | translate | async }}</li>\n </ng-template>\n</ng-template>\n<!-- Empty Template -->\n@if (showEmptyTemplate()) {\n <div class=\"empty-container\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </div>\n}\n", styles: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-hover-bg-color: var(--ax-sys-color-
|
|
239
|
+
], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" cdkVirtualScrollingElement>\n <ng-content select=\"ax-header\"></ng-content>\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeightSignal()\"\n [style.--item-height]=\"itemHeightSignal() + 'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n >\n <ul>\n <!-- Item Template -->\n <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n <li\n [class.ax-state-selected]=\"isItemSelected(item)\"\n class=\"list-item\"\n [class.ax-state-disabled]=\"isItemDisabled(item)\"\n [attr.tabindex]=\"i\"\n (click)=\"_handleOnItemClick($event, item)\"\n [attr.data-id]=\"getValue(item)\"\n >\n <!-- Custom Item Template -->\n <ng-container *ngIf=\"itemTemplate; else defaultItemTpl\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: { data: item } }\">\n </ng-container>\n </ng-container>\n <!-- Default Item Template -->\n <ng-template #defaultItemTpl>\n <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n <div class=\"ax-label-container\">\n <input\n class=\"ax-checkbox\"\n *ngIf=\"multiple && checkbox\"\n type=\"checkbox\"\n [checked]=\"isItemSelected(item)\"\n [disabled]=\"isItemDisabled(item)\"\n tabindex=\"0\"\n />\n <span [class.ax-checkbox-label]=\"multiple && checkbox\">{{ getDisplayText(item) }}</span>\n </div>\n <!-- <i class=\"ax-icon ax-icon-check ax-selected-icon\" *ngIf=\"isItemSelected(item) \"></i> -->\n </ng-container>\n </ng-template>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n </cdk-virtual-scroll-viewport>\n <ng-content select=\"ax-footer\"></ng-content>\n</div>\n<!-- Loading Template -->\n<ng-template #loadingTpl>\n <!-- Custom Loading Template -->\n <ng-container *ngIf=\"loadingTemplate; else defaultLoadingTpl\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n </ng-container>\n <!-- Default Loading Template -->\n <ng-template #defaultLoadingTpl>\n <li>{{ 'loading' | translate | async }}</li>\n </ng-template>\n</ng-template>\n<!-- Empty Template -->\n@if (showEmptyTemplate()) {\n <div class=\"empty-container\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </div>\n}\n", styles: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-list-item-selected-bg-color: var(--ax-sys-color-primary-500), .1}ax-list{display:block;height:100%;width:100%;font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .empty-container{display:flex;height:var(--ax-comp-list-empty-container-height);width:100%;align-items:center;justify-content:center;padding-left:var(--ax-comp-list-empty-container-padding-x, .75rem);padding-right:var(--ax-comp-list-empty-container-padding-x, .75rem)}ax-list.ax-default .cdk-virtual-scroll-viewport ul li{position:relative;display:flex;height:var(--ax-comp-list-item-height);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;padding-inline-end:var(--ax-comp-list-item-padding-e, 1rem);padding-inline-start:var(--ax-comp-list-item-padding-s, .75rem);font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list.ax-default .cdk-virtual-scroll-viewport ul li:hover{background:rgba(var(--ax-comp-list-item-hover-bg-color, var(--ax-sys-color-input-surface), .5))}ax-list.ax-default .cdk-virtual-scroll-viewport ul li:focus,ax-list.ax-default .cdk-virtual-scroll-viewport ul li:focus-within,ax-list.ax-default .cdk-virtual-scroll-viewport ul li:focus-visible{outline-width:var(--ax-comp-list-item-focus-outline-width, 2px);outline-offset:var(--ax-comp-list-item-focus-outline-offset, -4px);outline-color:rgba(var(--ax-comp-list-item-focus-outline-color, var(--ax-sys-color-primary-500)))}ax-list.ax-default .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center}ax-list.ax-default .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:var(--ax-comp-list-checkbox-label-margin-s, .5rem)}ax-list.ax-default .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-comp-list-item-selected-bg-color))}ax-list.ax-default .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-list-item-disabled-opacity, .5)}ax-list.ax-state-empty{height:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
240
240
|
}
|
|
241
241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXListComponent, decorators: [{
|
|
242
242
|
type: Component,
|
|
@@ -267,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
267
267
|
},
|
|
268
268
|
deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],
|
|
269
269
|
},
|
|
270
|
-
], standalone: false, template: "<div class=\"list-container\" cdkVirtualScrollingElement>\n <ng-content select=\"ax-header\"></ng-content>\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeightSignal()\"\n [style.--item-height]=\"itemHeightSignal() + 'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n >\n <ul>\n <!-- Item Template -->\n <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n <li\n [class.ax-state-selected]=\"isItemSelected(item)\"\n class=\"list-item\"\n [class.ax-state-disabled]=\"isItemDisabled(item)\"\n [attr.tabindex]=\"i\"\n (click)=\"_handleOnItemClick($event, item)\"\n [attr.data-id]=\"getValue(item)\"\n >\n <!-- Custom Item Template -->\n <ng-container *ngIf=\"itemTemplate; else defaultItemTpl\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: { data: item } }\">\n </ng-container>\n </ng-container>\n <!-- Default Item Template -->\n <ng-template #defaultItemTpl>\n <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n <div class=\"ax-label-container\">\n <input\n class=\"ax-checkbox\"\n *ngIf=\"multiple && checkbox\"\n type=\"checkbox\"\n [checked]=\"isItemSelected(item)\"\n [disabled]=\"isItemDisabled(item)\"\n tabindex=\"0\"\n />\n <span [class.ax-checkbox-label]=\"multiple && checkbox\">{{ getDisplayText(item) }}</span>\n </div>\n <!-- <i class=\"ax-icon ax-icon-check ax-selected-icon\" *ngIf=\"isItemSelected(item) \"></i> -->\n </ng-container>\n </ng-template>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n </cdk-virtual-scroll-viewport>\n <ng-content select=\"ax-footer\"></ng-content>\n</div>\n<!-- Loading Template -->\n<ng-template #loadingTpl>\n <!-- Custom Loading Template -->\n <ng-container *ngIf=\"loadingTemplate; else defaultLoadingTpl\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n </ng-container>\n <!-- Default Loading Template -->\n <ng-template #defaultLoadingTpl>\n <li>{{ 'loading' | translate | async }}</li>\n </ng-template>\n</ng-template>\n<!-- Empty Template -->\n@if (showEmptyTemplate()) {\n <div class=\"empty-container\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </div>\n}\n", styles: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-hover-bg-color: var(--ax-sys-color-
|
|
270
|
+
], standalone: false, template: "<div class=\"list-container\" cdkVirtualScrollingElement>\n <ng-content select=\"ax-header\"></ng-content>\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeightSignal()\"\n [style.--item-height]=\"itemHeightSignal() + 'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n >\n <ul>\n <!-- Item Template -->\n <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n <li\n [class.ax-state-selected]=\"isItemSelected(item)\"\n class=\"list-item\"\n [class.ax-state-disabled]=\"isItemDisabled(item)\"\n [attr.tabindex]=\"i\"\n (click)=\"_handleOnItemClick($event, item)\"\n [attr.data-id]=\"getValue(item)\"\n >\n <!-- Custom Item Template -->\n <ng-container *ngIf=\"itemTemplate; else defaultItemTpl\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: { data: item } }\">\n </ng-container>\n </ng-container>\n <!-- Default Item Template -->\n <ng-template #defaultItemTpl>\n <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n <div class=\"ax-label-container\">\n <input\n class=\"ax-checkbox\"\n *ngIf=\"multiple && checkbox\"\n type=\"checkbox\"\n [checked]=\"isItemSelected(item)\"\n [disabled]=\"isItemDisabled(item)\"\n tabindex=\"0\"\n />\n <span [class.ax-checkbox-label]=\"multiple && checkbox\">{{ getDisplayText(item) }}</span>\n </div>\n <!-- <i class=\"ax-icon ax-icon-check ax-selected-icon\" *ngIf=\"isItemSelected(item) \"></i> -->\n </ng-container>\n </ng-template>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n </cdk-virtual-scroll-viewport>\n <ng-content select=\"ax-footer\"></ng-content>\n</div>\n<!-- Loading Template -->\n<ng-template #loadingTpl>\n <!-- Custom Loading Template -->\n <ng-container *ngIf=\"loadingTemplate; else defaultLoadingTpl\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n </ng-container>\n <!-- Default Loading Template -->\n <ng-template #defaultLoadingTpl>\n <li>{{ 'loading' | translate | async }}</li>\n </ng-template>\n</ng-template>\n<!-- Empty Template -->\n@if (showEmptyTemplate()) {\n <div class=\"empty-container\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </div>\n}\n", styles: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-list-item-selected-bg-color: var(--ax-sys-color-primary-500), .1}ax-list{display:block;height:100%;width:100%;font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .empty-container{display:flex;height:var(--ax-comp-list-empty-container-height);width:100%;align-items:center;justify-content:center;padding-left:var(--ax-comp-list-empty-container-padding-x, .75rem);padding-right:var(--ax-comp-list-empty-container-padding-x, .75rem)}ax-list.ax-default .cdk-virtual-scroll-viewport ul li{position:relative;display:flex;height:var(--ax-comp-list-item-height);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;padding-inline-end:var(--ax-comp-list-item-padding-e, 1rem);padding-inline-start:var(--ax-comp-list-item-padding-s, .75rem);font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list.ax-default .cdk-virtual-scroll-viewport ul li:hover{background:rgba(var(--ax-comp-list-item-hover-bg-color, var(--ax-sys-color-input-surface), .5))}ax-list.ax-default .cdk-virtual-scroll-viewport ul li:focus,ax-list.ax-default .cdk-virtual-scroll-viewport ul li:focus-within,ax-list.ax-default .cdk-virtual-scroll-viewport ul li:focus-visible{outline-width:var(--ax-comp-list-item-focus-outline-width, 2px);outline-offset:var(--ax-comp-list-item-focus-outline-offset, -4px);outline-color:rgba(var(--ax-comp-list-item-focus-outline-color, var(--ax-sys-color-primary-500)))}ax-list.ax-default .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center}ax-list.ax-default .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:var(--ax-comp-list-checkbox-label-margin-s, .5rem)}ax-list.ax-default .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-comp-list-item-selected-bg-color))}ax-list.ax-default .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-list-item-disabled-opacity, .5)}ax-list.ax-state-empty{height:auto!important}\n"] }]
|
|
271
271
|
}], propDecorators: { onItemClick: [{
|
|
272
272
|
type: Output
|
|
273
273
|
}], dataSource: [{
|
|
@@ -58,7 +58,7 @@ class AXSwitchComponent extends classes((MXValueComponent), MXColorComponent) {
|
|
|
58
58
|
useExisting: forwardRef(() => AXSwitchComponent),
|
|
59
59
|
multi: true,
|
|
60
60
|
},
|
|
61
|
-
], usesInheritance: true, ngImport: i0, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\">\n <div class=\"ax-switch-handle\">\n @if(isLoading){\n <span class=\"ax-loader\"></span>\n }\n @if(!isLoading){\n <ng-content select=\"ax-switch-handler-content\"></ng-content>\n }\n @if(!isLoading && value){\n <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n }\n @if(!isLoading && !value){\n <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n }\n </div>\n @if(!value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-off-content\"></ng-content>\n </span>\n }\n @if(value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-on-content\"></ng-content>\n </span>\n }\n</button>", styles: ["ax-switch.ax-primary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-primary-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-primary-500);--ax-comp-switch-loading-color: var(--ax-sys-color-primary-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-primary)}.ax-dark ax-switch.ax-primary{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-
|
|
61
|
+
], usesInheritance: true, ngImport: i0, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\">\n <div class=\"ax-switch-handle\">\n @if(isLoading){\n <span class=\"ax-loader\"></span>\n }\n @if(!isLoading){\n <ng-content select=\"ax-switch-handler-content\"></ng-content>\n }\n @if(!isLoading && value){\n <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n }\n @if(!isLoading && !value){\n <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n }\n </div>\n @if(!value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-off-content\"></ng-content>\n </span>\n }\n @if(value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-on-content\"></ng-content>\n </span>\n }\n</button>", styles: ["ax-switch.ax-primary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-primary-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-primary-500);--ax-comp-switch-loading-color: var(--ax-sys-color-primary-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-primary)}.ax-dark ax-switch.ax-primary{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-primary)}ax-switch.ax-success{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-success-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-success-500);--ax-comp-switch-loading-color: var(--ax-sys-color-success-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-success)}.ax-dark ax-switch.ax-success{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-success)}ax-switch.ax-danger{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-danger-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-danger-500);--ax-comp-switch-loading-color: var(--ax-sys-color-danger-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-danger)}.ax-dark ax-switch.ax-danger{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-danger)}ax-switch.ax-warning{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-warning-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-warning-500);--ax-comp-switch-loading-color: var(--ax-sys-color-warning-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-warning)}.ax-dark ax-switch.ax-warning{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-warning)}ax-switch.ax-secondary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-secondary-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-switch-loading-color: var(--ax-sys-color-secondary-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-secondary)}.ax-dark ax-switch.ax-secondary{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-secondary)}ax-switch{--ax-comp-switch-unchecked-bg-color: var(--ax-sys-color-ghost-900);--ax-comp-switch-handle-unchecked-bg-color: var(--ax-sys-color-surface-light)}ax-switch{line-height:initial}ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm button .ax-switch-handle .ax-loader{min-height:10px!important;min-width:10px!important}ax-switch.ax-sm .ax-switch-handle{height:.75rem;width:.75rem}ax-switch.ax-lg button{min-width:2.5rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{height:1.25rem;width:1.25rem}ax-switch button{position:relative;display:inline-block;height:1.25rem;min-width:2.25rem;cursor:pointer;border-radius:9999px;vertical-align:middle;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:rgba(var(--ax-comp-switch-unchecked-bg-color),.3)!important}ax-switch button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-comp-switch-focus-visible-outline-color))}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgba(var(--ax-comp-switch-checked-bg-color))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial;background-color:rgba(var(--ax-comp-switch-handle-checked-bg-color))}ax-switch button.ax-switch-checked .ax-switch-inner{margin-inline-end:1.5rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background-color:rgba(var(--ax-comp-switch-handle-unchecked-bg-color));position:absolute;inset-inline-start:.125rem;top:.125rem;display:flex;height:1rem;width:1rem;align-items:center;justify-content:center;border-radius:9999px;font-size:80%;--ax-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle .ax-loader{animation:rotation .5s linear infinite;box-sizing:border-box;display:inline-block;min-height:12px;min-width:12px;transform:translateY(-50%);border-radius:9999px;border-width:2px;border-style:solid;border-color:rgb(var(--ax-comp-switch-loading-color));border-bottom-color:transparent}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ax-switch button .ax-switch-handle:before{content:\"\";position:absolute;border-radius:1000vmax;background-color:rgba(var(--ax-sys-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-switch button .ax-switch-inner{transition:margin .2s;margin-inline-end:.375rem;margin-inline-start:1.5rem;display:block}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;padding-left:.25rem;padding-right:.25rem;font-size:.875rem;line-height:1.25rem}ax-switch .ax-state-disabled{cursor:not-allowed;opacity:.5}ax-switch .ax-state-readonly{opacity:.75}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
62
62
|
}
|
|
63
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXSwitchComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
@@ -68,7 +68,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
68
68
|
useExisting: forwardRef(() => AXSwitchComponent),
|
|
69
69
|
multi: true,
|
|
70
70
|
},
|
|
71
|
-
], standalone: false, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\">\n <div class=\"ax-switch-handle\">\n @if(isLoading){\n <span class=\"ax-loader\"></span>\n }\n @if(!isLoading){\n <ng-content select=\"ax-switch-handler-content\"></ng-content>\n }\n @if(!isLoading && value){\n <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n }\n @if(!isLoading && !value){\n <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n }\n </div>\n @if(!value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-off-content\"></ng-content>\n </span>\n }\n @if(value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-on-content\"></ng-content>\n </span>\n }\n</button>", styles: ["ax-switch.ax-primary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-primary-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-primary-500);--ax-comp-switch-loading-color: var(--ax-sys-color-primary-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-primary)}.ax-dark ax-switch.ax-primary{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-
|
|
71
|
+
], standalone: false, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\">\n <div class=\"ax-switch-handle\">\n @if(isLoading){\n <span class=\"ax-loader\"></span>\n }\n @if(!isLoading){\n <ng-content select=\"ax-switch-handler-content\"></ng-content>\n }\n @if(!isLoading && value){\n <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n }\n @if(!isLoading && !value){\n <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n }\n </div>\n @if(!value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-off-content\"></ng-content>\n </span>\n }\n @if(value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-on-content\"></ng-content>\n </span>\n }\n</button>", styles: ["ax-switch.ax-primary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-primary-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-primary-500);--ax-comp-switch-loading-color: var(--ax-sys-color-primary-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-primary)}.ax-dark ax-switch.ax-primary{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-primary)}ax-switch.ax-success{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-success-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-success-500);--ax-comp-switch-loading-color: var(--ax-sys-color-success-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-success)}.ax-dark ax-switch.ax-success{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-success)}ax-switch.ax-danger{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-danger-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-danger-500);--ax-comp-switch-loading-color: var(--ax-sys-color-danger-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-danger)}.ax-dark ax-switch.ax-danger{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-danger)}ax-switch.ax-warning{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-warning-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-warning-500);--ax-comp-switch-loading-color: var(--ax-sys-color-warning-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-warning)}.ax-dark ax-switch.ax-warning{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-warning)}ax-switch.ax-secondary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-secondary-200);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-switch-loading-color: var(--ax-sys-color-secondary-700);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-secondary)}.ax-dark ax-switch.ax-secondary{--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-secondary)}ax-switch{--ax-comp-switch-unchecked-bg-color: var(--ax-sys-color-ghost-900);--ax-comp-switch-handle-unchecked-bg-color: var(--ax-sys-color-surface-light)}ax-switch{line-height:initial}ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm button .ax-switch-handle .ax-loader{min-height:10px!important;min-width:10px!important}ax-switch.ax-sm .ax-switch-handle{height:.75rem;width:.75rem}ax-switch.ax-lg button{min-width:2.5rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{height:1.25rem;width:1.25rem}ax-switch button{position:relative;display:inline-block;height:1.25rem;min-width:2.25rem;cursor:pointer;border-radius:9999px;vertical-align:middle;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:rgba(var(--ax-comp-switch-unchecked-bg-color),.3)!important}ax-switch button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-comp-switch-focus-visible-outline-color))}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgba(var(--ax-comp-switch-checked-bg-color))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial;background-color:rgba(var(--ax-comp-switch-handle-checked-bg-color))}ax-switch button.ax-switch-checked .ax-switch-inner{margin-inline-end:1.5rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background-color:rgba(var(--ax-comp-switch-handle-unchecked-bg-color));position:absolute;inset-inline-start:.125rem;top:.125rem;display:flex;height:1rem;width:1rem;align-items:center;justify-content:center;border-radius:9999px;font-size:80%;--ax-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle .ax-loader{animation:rotation .5s linear infinite;box-sizing:border-box;display:inline-block;min-height:12px;min-width:12px;transform:translateY(-50%);border-radius:9999px;border-width:2px;border-style:solid;border-color:rgb(var(--ax-comp-switch-loading-color));border-bottom-color:transparent}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ax-switch button .ax-switch-handle:before{content:\"\";position:absolute;border-radius:1000vmax;background-color:rgba(var(--ax-sys-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-switch button .ax-switch-inner{transition:margin .2s;margin-inline-end:.375rem;margin-inline-start:1.5rem;display:block}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;padding-left:.25rem;padding-right:.25rem;font-size:.875rem;line-height:1.25rem}ax-switch .ax-state-disabled{cursor:not-allowed;opacity:.5}ax-switch .ax-state-readonly{opacity:.75}\n"] }]
|
|
72
72
|
}], propDecorators: { isLoading: [{
|
|
73
73
|
type: Input
|
|
74
74
|
}], __hostClass: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-switch.mjs","sources":["../../../../libs/components/switch/src/lib/switch-content.component.ts","../../../../libs/components/switch/src/lib/switch.component.ts","../../../../libs/components/switch/src/lib/switch.component.html","../../../../libs/components/switch/src/lib/switch.module.ts","../../../../libs/components/switch/src/acorex-components-switch.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { Component } from '@angular/core';\n\n/**\n * @category \n * Displays content for different switch states using `<ng-content>`.\n */\n@Component({\n selector: 'ax-switch-handler-content,ax-switch-handler-on-content,ax-switch-handler-off-content,ax-switch-off-content,ax-switch-on-content',\n template: `<ng-content></ng-content>`,\n standalone: false\n})\nexport class AXSwitchContentComponent extends MXBaseComponent {}\n","import { MXColorComponent, MXValueComponent } from '@acorex/components/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n ViewEncapsulation,\n forwardRef,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * @category\n * A switch component that allows toggling between on and off states.\n */\n@Component({\n selector: 'ax-switch',\n templateUrl: './switch.component.html',\n styleUrls: ['./switch.component.scss'],\n inputs: ['disabled', 'readonly', 'color', 'tabIndex', 'value', 'name'],\n outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged', 'readonlyChange', 'disabledChange'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXSwitchComponent),\n multi: true,\n },\n ],\n standalone: false,\n})\nexport class AXSwitchComponent extends classes(MXValueComponent<boolean>, MXColorComponent) {\n /**\n * Indicates whether the component is in a loading state.\n * @defaultValue boolean\n */\n @Input()\n isLoading: boolean;\n\n /**\n * @ignore\n */\n protected _handleOnClickEvent(e: MouseEvent) {\n this.onTouchedCallback();\n if (this.readonly || this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n } else {\n this.commitValue(!this.value, true);\n }\n }\n\n /**\n * @ignore\n */\n @HostBinding('class')\n private get __hostClass(): string {\n if (this.color === 'ghost') {\n return 'ax-primary';\n } else {\n return `ax-${this.color ? this.color : 'primary'}`;\n }\n }\n}\n","<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\">\n <div class=\"ax-switch-handle\">\n @if(isLoading){\n <span class=\"ax-loader\"></span>\n }\n @if(!isLoading){\n <ng-content select=\"ax-switch-handler-content\"></ng-content>\n }\n @if(!isLoading && value){\n <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n }\n @if(!isLoading && !value){\n <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n }\n </div>\n @if(!value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-off-content\"></ng-content>\n </span>\n }\n @if(value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-on-content\"></ng-content>\n </span>\n }\n</button>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSwitchContentComponent } from './switch-content.component';\nimport { AXSwitchComponent } from './switch.component';\n\n@NgModule({\n declarations: [AXSwitchComponent, AXSwitchContentComponent],\n imports: [CommonModule, FormsModule],\n exports: [AXSwitchComponent, AXSwitchContentComponent],\n providers: [],\n})\nexport class AXSwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAGA;;;AAGG;AAMG,MAAO,wBAAyB,SAAQ,eAAe,CAAA;8GAAhD,wBAAwB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,mNAHvB,CAA2B,yBAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;2FAG5B,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBALpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,iIAAiI;AAC3I,oBAAA,QAAQ,EAAE,CAA2B,yBAAA,CAAA;AACrC,oBAAA,UAAU,EAAE;AACf,iBAAA;;;ACCD;;;AAGG;AAkBG,MAAO,iBAAkB,SAAQ,OAAO,EAAC,gBAAyB,GAAE,gBAAgB,CAAC,CAAA;AAQzF;;AAEG;AACO,IAAA,mBAAmB,CAAC,CAAa,EAAA;QACzC,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClC,CAAC,CAAC,cAAc,EAAE;YAClB,CAAC,CAAC,eAAe,EAAE;;aACd;YACL,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC;;;AAIvC;;AAEG;AACH,IAAA,IACY,WAAW,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE;AAC1B,YAAA,OAAO,YAAY;;aACd;AACL,YAAA,OAAO,CAAM,GAAA,EAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,EAAE;;;8GA7B3C,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EATjB,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AAChD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9BH,i9BA2BS,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"acorex-components-switch.mjs","sources":["../../../../libs/components/switch/src/lib/switch-content.component.ts","../../../../libs/components/switch/src/lib/switch.component.ts","../../../../libs/components/switch/src/lib/switch.component.html","../../../../libs/components/switch/src/lib/switch.module.ts","../../../../libs/components/switch/src/acorex-components-switch.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { Component } from '@angular/core';\n\n/**\n * @category \n * Displays content for different switch states using `<ng-content>`.\n */\n@Component({\n selector: 'ax-switch-handler-content,ax-switch-handler-on-content,ax-switch-handler-off-content,ax-switch-off-content,ax-switch-on-content',\n template: `<ng-content></ng-content>`,\n standalone: false\n})\nexport class AXSwitchContentComponent extends MXBaseComponent {}\n","import { MXColorComponent, MXValueComponent } from '@acorex/components/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n ViewEncapsulation,\n forwardRef,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * @category\n * A switch component that allows toggling between on and off states.\n */\n@Component({\n selector: 'ax-switch',\n templateUrl: './switch.component.html',\n styleUrls: ['./switch.component.scss'],\n inputs: ['disabled', 'readonly', 'color', 'tabIndex', 'value', 'name'],\n outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged', 'readonlyChange', 'disabledChange'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXSwitchComponent),\n multi: true,\n },\n ],\n standalone: false,\n})\nexport class AXSwitchComponent extends classes(MXValueComponent<boolean>, MXColorComponent) {\n /**\n * Indicates whether the component is in a loading state.\n * @defaultValue boolean\n */\n @Input()\n isLoading: boolean;\n\n /**\n * @ignore\n */\n protected _handleOnClickEvent(e: MouseEvent) {\n this.onTouchedCallback();\n if (this.readonly || this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n } else {\n this.commitValue(!this.value, true);\n }\n }\n\n /**\n * @ignore\n */\n @HostBinding('class')\n private get __hostClass(): string {\n if (this.color === 'ghost') {\n return 'ax-primary';\n } else {\n return `ax-${this.color ? this.color : 'primary'}`;\n }\n }\n}\n","<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\">\n <div class=\"ax-switch-handle\">\n @if(isLoading){\n <span class=\"ax-loader\"></span>\n }\n @if(!isLoading){\n <ng-content select=\"ax-switch-handler-content\"></ng-content>\n }\n @if(!isLoading && value){\n <ng-content select=\"ax-switch-handler-on-content\"></ng-content>\n }\n @if(!isLoading && !value){\n <ng-content select=\"ax-switch-handler-off-content\"></ng-content>\n }\n </div>\n @if(!value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-off-content\"></ng-content>\n </span>\n }\n @if(value){\n <span class=\"ax-switch-inner\">\n <ng-content select=\"ax-switch-on-content\"></ng-content>\n </span>\n }\n</button>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSwitchContentComponent } from './switch-content.component';\nimport { AXSwitchComponent } from './switch.component';\n\n@NgModule({\n declarations: [AXSwitchComponent, AXSwitchContentComponent],\n imports: [CommonModule, FormsModule],\n exports: [AXSwitchComponent, AXSwitchContentComponent],\n providers: [],\n})\nexport class AXSwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|