@acorex/components 19.10.0-next.4 → 19.10.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-components-data-table.mjs +2 -2
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-navbar.mjs +2 -2
- package/fesm2022/acorex-components-navbar.mjs.map +1 -1
- package/fesm2022/acorex-components-progress-bar.mjs +2 -2
- package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +2 -2
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -13,11 +13,11 @@ class AXNavbarComponent extends MXLookComponent {
|
|
|
13
13
|
return `ax-alert ax-none ax-${this.look}`;
|
|
14
14
|
}
|
|
15
15
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXNavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
16
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXNavbarComponent, isStandalone: false, selector: "ax-navbar", inputs: { look: "look" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-navbar-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem}ax-navbar.ax-solid{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-navbar.ax-flat{border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-navbar.ax-fill{background-color:rgba(var(--ax-sys-color-surface))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
16
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXNavbarComponent, isStandalone: false, selector: "ax-navbar", inputs: { look: "look" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-navbar-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem}ax-navbar.ax-solid{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-navbar.ax-flat{border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-navbar.ax-fill{background-color:rgba(var(--ax-sys-color-surface))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}.ax-dark ax-navbar.ax-solid{background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-dark ax-navbar.ax-flat{border-color:rgba(var(--ax-sys-color-border-darkest-surface))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
17
17
|
}
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXNavbarComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ selector: 'ax-navbar', inputs: ['look'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"ax-navbar-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem}ax-navbar.ax-solid{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-navbar.ax-flat{border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-navbar.ax-fill{background-color:rgba(var(--ax-sys-color-surface))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}\n"] }]
|
|
20
|
+
args: [{ selector: 'ax-navbar', inputs: ['look'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"ax-navbar-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem}ax-navbar.ax-solid{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-navbar.ax-flat{border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-navbar.ax-fill{background-color:rgba(var(--ax-sys-color-surface))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}.ax-dark ax-navbar.ax-solid{background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-dark ax-navbar.ax-flat{border-color:rgba(var(--ax-sys-color-border-darkest-surface))}\n"] }]
|
|
21
21
|
}], propDecorators: { __hostClass: [{
|
|
22
22
|
type: HostBinding,
|
|
23
23
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-navbar.mjs","sources":["../../../../libs/components/navbar/src/lib/navbar.component.ts","../../../../libs/components/navbar/src/lib/navbar.component.html","../../../../libs/components/navbar/src/lib/navbar.module.ts","../../../../libs/components/navbar/src/acorex-components-navbar.ts"],"sourcesContent":["import { MXLookComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n/**\n * @category Components\n * A navigation bar component that supports custom styling and encapsulation.\n */\n@Component({\n selector: 'ax-navbar',\n templateUrl: './navbar.component.html',\n styleUrls: ['./navbar.component.scss'],\n inputs: ['look'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false,\n})\nexport class AXNavbarComponent extends MXLookComponent {\n /** @ignore */\n @HostBinding('class')\n get __hostClass(): string {\n return `ax-alert ax-none ax-${this.look}`;\n }\n}\n","<div class=\"ax-navbar-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXNavbarComponent } from './navbar.component';\n\n@NgModule({\n declarations: [AXNavbarComponent],\n imports: [CommonModule],\n exports: [AXNavbarComponent],\n})\nexport class AXNavbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAGA;;;AAGG;AAUG,MAAO,iBAAkB,SAAQ,eAAe,CAAA;;AAEpD,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,CAAuB,oBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;8GAJhC,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,8KChB9B,4QAQA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"acorex-components-navbar.mjs","sources":["../../../../libs/components/navbar/src/lib/navbar.component.ts","../../../../libs/components/navbar/src/lib/navbar.component.html","../../../../libs/components/navbar/src/lib/navbar.module.ts","../../../../libs/components/navbar/src/acorex-components-navbar.ts"],"sourcesContent":["import { MXLookComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n/**\n * @category Components\n * A navigation bar component that supports custom styling and encapsulation.\n */\n@Component({\n selector: 'ax-navbar',\n templateUrl: './navbar.component.html',\n styleUrls: ['./navbar.component.scss'],\n inputs: ['look'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false,\n})\nexport class AXNavbarComponent extends MXLookComponent {\n /** @ignore */\n @HostBinding('class')\n get __hostClass(): string {\n return `ax-alert ax-none ax-${this.look}`;\n }\n}\n","<div class=\"ax-navbar-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXNavbarComponent } from './navbar.component';\n\n@NgModule({\n declarations: [AXNavbarComponent],\n imports: [CommonModule],\n exports: [AXNavbarComponent],\n})\nexport class AXNavbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAGA;;;AAGG;AAUG,MAAO,iBAAkB,SAAQ,eAAe,CAAA;;AAEpD,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,CAAuB,oBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;8GAJhC,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,8KChB9B,4QAQA,EAAA,MAAA,EAAA,CAAA,22BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDQa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAT7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAGb,MAAA,EAAA,CAAC,MAAM,CAAC,EACC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,cACzB,KAAK,EAAA,QAAA,EAAA,4QAAA,EAAA,MAAA,EAAA,CAAA,22BAAA,CAAA,EAAA;8BAKb,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,OAAO;;;METT,cAAc,CAAA;8GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,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,cAAc,EAJV,YAAA,EAAA,CAAA,iBAAiB,CACtB,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAEhB,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,cAAc,YAHf,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAGX,cAAc,EAAA,UAAA,EAAA,CAAA;kBAL1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,iBAAiB,CAAC;oBACjC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC7B,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -63,11 +63,11 @@ class AXProgressBarComponent extends MXColorComponent {
|
|
|
63
63
|
return `ax-${this['color']}`;
|
|
64
64
|
}
|
|
65
65
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
66
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXProgressBarComponent, isStandalone: false, selector: "ax-progress-bar", inputs: { color: "color", mode: "mode", progress: "progress", height: "height" }, outputs: { ValueChange: "ValueChange", sizeChange: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["c"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n @case ('indeterminate') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n </div>\n }\n @case ('query') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-query-progress\"></div>\n </div>\n }\n @case ('buffer') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n </div>\n }\n @default {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n </div>\n }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-progress-bar.ax-default{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-
|
|
66
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXProgressBarComponent, isStandalone: false, selector: "ax-progress-bar", inputs: { color: "color", mode: "mode", progress: "progress", height: "height" }, outputs: { ValueChange: "ValueChange", sizeChange: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["c"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n @case ('indeterminate') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n </div>\n }\n @case ('query') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-query-progress\"></div>\n </div>\n }\n @case ('buffer') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n </div>\n }\n @default {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n </div>\n }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-progress-bar.ax-default{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-light-surface)}ax-progress-bar.ax-primary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar.ax-secondary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-secondary-surface)}ax-progress-bar.ax-success{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-success-surface)}ax-progress-bar.ax-warning{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-warning-surface)}ax-progress-bar.ax-danger{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-danger-surface)}ax-progress-bar{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;position:relative}ax-progress-bar .ax-progress{width:100%;overflow:hidden;background-color:rgba(var(--ax-comp-progress-bar-backdrop-bg-color));border-radius:var(--ax-sys-border-radius)}ax-progress-bar .ax-progress .ax-progress-bar{height:100%;background-color:rgba(var(--ax-comp-progress-bar-bg-color));transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);border-style:solid}ax-progress-bar .ax-indeterminate-progress{animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}ax-progress-bar .ax-query-progress{animation:queryAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes queryAnimation{0%{transform:translate(100%) scaleX(0)}40%{transform:translate(0) scaleX(.7)}to{transform:translate(-50%) scaleX(.5)}}ax-progress-bar .ax-buffer-progress{animation:bufferAnimation 5s infinite linear;transform-origin:0% 50%;width:100%;height:100%;background-color:transparent!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) 1rem)!important;background-size:100%}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
67
67
|
}
|
|
68
68
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXProgressBarComponent, decorators: [{
|
|
69
69
|
type: Component,
|
|
70
|
-
args: [{ selector: 'ax-progress-bar', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n @case ('indeterminate') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n </div>\n }\n @case ('query') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-query-progress\"></div>\n </div>\n }\n @case ('buffer') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n </div>\n }\n @default {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n </div>\n }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-progress-bar.ax-default{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-
|
|
70
|
+
args: [{ selector: 'ax-progress-bar', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n @case ('indeterminate') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n </div>\n }\n @case ('query') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-query-progress\"></div>\n </div>\n }\n @case ('buffer') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n </div>\n }\n @default {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n </div>\n }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-progress-bar.ax-default{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-light-surface)}ax-progress-bar.ax-primary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar.ax-secondary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-secondary-surface)}ax-progress-bar.ax-success{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-success-surface)}ax-progress-bar.ax-warning{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-warning-surface)}ax-progress-bar.ax-danger{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-danger-surface)}ax-progress-bar{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;position:relative}ax-progress-bar .ax-progress{width:100%;overflow:hidden;background-color:rgba(var(--ax-comp-progress-bar-backdrop-bg-color));border-radius:var(--ax-sys-border-radius)}ax-progress-bar .ax-progress .ax-progress-bar{height:100%;background-color:rgba(var(--ax-comp-progress-bar-bg-color));transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);border-style:solid}ax-progress-bar .ax-indeterminate-progress{animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}ax-progress-bar .ax-query-progress{animation:queryAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes queryAnimation{0%{transform:translate(100%) scaleX(0)}40%{transform:translate(0) scaleX(.7)}to{transform:translate(-50%) scaleX(.5)}}ax-progress-bar .ax-buffer-progress{animation:bufferAnimation 5s infinite linear;transform-origin:0% 50%;width:100%;height:100%;background-color:transparent!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) 1rem)!important;background-size:100%}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
|
|
71
71
|
}], propDecorators: { circle: [{
|
|
72
72
|
type: ViewChild,
|
|
73
73
|
args: ['c']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-progress-bar.mjs","sources":["../../../../libs/components/progress-bar/src/lib/progress-bar.component.ts","../../../../libs/components/progress-bar/src/lib/progress-bar.component.html","../../../../libs/components/progress-bar/src/lib/progress-bar.module.ts","../../../../libs/components/progress-bar/src/acorex-components-progress-bar.ts"],"sourcesContent":["import { MXColorComponent } from '@acorex/components/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n\nexport type AXProgressMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';\n\n@Component({\n selector: 'ax-progress-bar',\n templateUrl: './progress-bar.component.html',\n styleUrls: ['./progress-bar.component.scss'],\n inputs: ['color'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false,\n})\nexport class AXProgressBarComponent extends MXColorComponent {\n /** @ignore */\n @ViewChild('c') circle: ElementRef;\n\n /**\n * @event\n * Emits when the slider value changes.\n */\n @Output()\n ValueChange: EventEmitter<number> = new EventEmitter();\n\n /** @ignore */\n private _progress = 0;\n\n /**\n * Specifies the progress indicator mode.\n */\n @Input()\n mode: AXProgressMode = 'determinate';\n\n /**\n * Gets or sets the progress value (0-100).\n */\n @Input()\n\n /**\n * Retrieves the current progress value (0-100).\n */\n public get progress(): number {\n return this._progress;\n }\n\n /**\n * Sets the progress value (0-100).\n * @param {number} v\n */\n public set progress(v: number) {\n this.setOption({\n name: 'progress',\n value: v,\n });\n }\n\n /**\n * Emitted when the size changes.\n * @event\n */\n @Output()\n sizeChange: EventEmitter<number> = new EventEmitter();\n\n /** @ignore */\n private _height = 8;\n\n /**\n * Gets or sets the height of the component.\n * @param {number} v\n */\n @Input()\n\n /**\n * Gets the height of the component.\n */\n public get height(): number {\n return this._height;\n }\n\n /**\n * Sets the height of the component.\n * @param {number} v\n */\n public set height(v: number) {\n this.setOption({\n name: 'height',\n value: v,\n });\n }\n\n /** @ignore */\n @HostBinding('class')\n private get __hostClass(): string {\n return `ax-${this['color']}`;\n }\n}\n","<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n @case ('indeterminate') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n </div>\n }\n @case ('query') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-query-progress\"></div>\n </div>\n }\n @case ('buffer') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n </div>\n }\n @default {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n </div>\n }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXProgressBarComponent } from './progress-bar.component';\n\n@NgModule({\n declarations: [AXProgressBarComponent],\n imports: [CommonModule],\n exports: [AXProgressBarComponent],\n providers: [],\n})\nexport class AXProgressBarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AA8BM,MAAO,sBAAuB,SAAQ,gBAAgB,CAAA;AAT5D,IAAA,WAAA,GAAA;;AAaE;;;AAGG;AAEH,QAAA,IAAA,CAAA,WAAW,GAAyB,IAAI,YAAY,EAAE;;QAG9C,IAAS,CAAA,SAAA,GAAG,CAAC;AAErB;;AAEG;QAEH,IAAI,CAAA,IAAA,GAAmB,aAAa;AAyBpC;;;AAGG;AAEH,QAAA,IAAA,CAAA,UAAU,GAAyB,IAAI,YAAY,EAAE;;QAG7C,IAAO,CAAA,OAAA,GAAG,CAAC;AA+BpB;AA9DC;;AAEG;AACH,IAAA,IAKW,QAAQ,GAAA;QACjB,OAAO,IAAI,CAAC,SAAS;;AAGvB;;;AAGG;IACH,IAAW,QAAQ,CAAC,CAAS,EAAA;QAC3B,IAAI,CAAC,SAAS,CAAC;AACb,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,KAAK,EAAE,CAAC;AACT,SAAA,CAAC;;AAaJ;;;AAGG;AACH,IAAA,IAKW,MAAM,GAAA;QACf,OAAO,IAAI,CAAC,OAAO;;AAGrB;;;AAGG;IACH,IAAW,MAAM,CAAC,CAAS,EAAA;QACzB,IAAI,CAAC,SAAS,CAAC;AACb,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,KAAK,EAAE,CAAC;AACT,SAAA,CAAC;;;AAIJ,IAAA,IACY,WAAW,GAAA;AACrB,QAAA,OAAO,MAAM,IAAI,CAAC,OAAO,CAAC,EAAE;;8GAhFnB,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,4YC9BnC,62BAwBA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"acorex-components-progress-bar.mjs","sources":["../../../../libs/components/progress-bar/src/lib/progress-bar.component.ts","../../../../libs/components/progress-bar/src/lib/progress-bar.component.html","../../../../libs/components/progress-bar/src/lib/progress-bar.module.ts","../../../../libs/components/progress-bar/src/acorex-components-progress-bar.ts"],"sourcesContent":["import { MXColorComponent } from '@acorex/components/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n\nexport type AXProgressMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';\n\n@Component({\n selector: 'ax-progress-bar',\n templateUrl: './progress-bar.component.html',\n styleUrls: ['./progress-bar.component.scss'],\n inputs: ['color'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false,\n})\nexport class AXProgressBarComponent extends MXColorComponent {\n /** @ignore */\n @ViewChild('c') circle: ElementRef;\n\n /**\n * @event\n * Emits when the slider value changes.\n */\n @Output()\n ValueChange: EventEmitter<number> = new EventEmitter();\n\n /** @ignore */\n private _progress = 0;\n\n /**\n * Specifies the progress indicator mode.\n */\n @Input()\n mode: AXProgressMode = 'determinate';\n\n /**\n * Gets or sets the progress value (0-100).\n */\n @Input()\n\n /**\n * Retrieves the current progress value (0-100).\n */\n public get progress(): number {\n return this._progress;\n }\n\n /**\n * Sets the progress value (0-100).\n * @param {number} v\n */\n public set progress(v: number) {\n this.setOption({\n name: 'progress',\n value: v,\n });\n }\n\n /**\n * Emitted when the size changes.\n * @event\n */\n @Output()\n sizeChange: EventEmitter<number> = new EventEmitter();\n\n /** @ignore */\n private _height = 8;\n\n /**\n * Gets or sets the height of the component.\n * @param {number} v\n */\n @Input()\n\n /**\n * Gets the height of the component.\n */\n public get height(): number {\n return this._height;\n }\n\n /**\n * Sets the height of the component.\n * @param {number} v\n */\n public set height(v: number) {\n this.setOption({\n name: 'height',\n value: v,\n });\n }\n\n /** @ignore */\n @HostBinding('class')\n private get __hostClass(): string {\n return `ax-${this['color']}`;\n }\n}\n","<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n @case ('indeterminate') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n </div>\n }\n @case ('query') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-query-progress\"></div>\n </div>\n }\n @case ('buffer') {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n </div>\n }\n @default {\n <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n </div>\n }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXProgressBarComponent } from './progress-bar.component';\n\n@NgModule({\n declarations: [AXProgressBarComponent],\n imports: [CommonModule],\n exports: [AXProgressBarComponent],\n providers: [],\n})\nexport class AXProgressBarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -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-comp-switch-unchecked-bg-color: var(--ax-sys-color-
|
|
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-comp-switch-unchecked-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-switch-handle-unchecked-bg-color: var(--ax-sys-color-light)}ax-switch.ax-primary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-primary-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-primary-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-primary-surface)}ax-switch.ax-secondary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-secondary-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-secondary-surface)}ax-switch.ax-success{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-success-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-success-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-success-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-success-surface)}ax-switch.ax-warning{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-warning-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-warning-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-warning-surface)}ax-switch.ax-danger{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-danger-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-danger-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-danger-surface)}.ax-dark ax-switch{--ax-comp-switch-unchecked-bg-color: var(--ax-sys-color-lightest-surface)}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),1)!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-comp-switch-unchecked-bg-color: var(--ax-sys-color-
|
|
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-comp-switch-unchecked-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-switch-handle-unchecked-bg-color: var(--ax-sys-color-light)}ax-switch.ax-primary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-primary-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-primary-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-primary-surface)}ax-switch.ax-secondary{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-secondary-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-secondary-surface)}ax-switch.ax-success{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-success-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-success-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-success-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-success-surface)}ax-switch.ax-warning{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-warning-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-warning-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-warning-surface)}ax-switch.ax-danger{--ax-comp-switch-focus-visible-outline-color: var(--ax-sys-color-danger-surface);--ax-comp-switch-checked-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-switch-handle-checked-bg-color: var(--ax-sys-color-on-danger-surface);--ax-comp-switch-loading-color: var(--ax-sys-color-danger-surface)}.ax-dark ax-switch{--ax-comp-switch-unchecked-bg-color: var(--ax-sys-color-lightest-surface)}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),1)!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 { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation, forwardRef } 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 === 'default') {\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;;;ACND;;;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,SAAS,EAAE;AAC5B,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,ECvBH,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 { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation, forwardRef } 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 === 'default') {\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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"}
|