@acorex/components 21.0.2-next.6 → 21.0.2-next.8
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.
|
@@ -59,7 +59,7 @@ class AXSwitchComponent extends classes((MXValueComponent), MXColorComponent) {
|
|
|
59
59
|
multi: true,
|
|
60
60
|
},
|
|
61
61
|
{ provide: AXComponent, useExisting: AXSwitchComponent },
|
|
62
|
-
], usesInheritance: true, ngImport: i0, template: "<button\n type=\"button\"\n role=\"switch\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\"\n>\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 <
|
|
62
|
+
], usesInheritance: true, ngImport: i0, template: "<button\n type=\"button\"\n role=\"switch\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\"\n>\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 <ng-content select=\"ax-switch-off-content\"></ng-content>\n }\n @if (value) {\n <ng-content select=\"ax-switch-on-content\"></ng-content>\n }\n</button>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading:initial;--tw-outline-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid}}}@layer components{ax-switch{--tw-leading:initial;line-height:initial;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}ax-switch button{height:calc(var(--spacing,.25rem) * 5);min-width:calc(var(--spacing,.25rem) * 10);cursor:pointer;background-color:#0000004d;border-radius:3.40282e38px;display:inline-block;position:relative}@supports (color:color-mix(in lab,red,red)){ax-switch button{background-color:color-mix(in oklab,var(--color-black,#000) 30%,transparent)}}ax-switch button{vertical-align:middle;--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}ax-switch button:where(.ax-dark,.ax-dark *){background-color:#ffffff4d}@supports (color:color-mix(in lab,red,red)){ax-switch button:where(.ax-dark,.ax-dark *){background-color:color-mix(in oklab,var(--color-white,#fff) 30%,transparent)}}ax-switch button:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--ax-comp-bg,var(--color-surface))}ax-switch button:active .ax-switch-handle{width:calc(var(--spacing,.25rem) * 6)}ax-switch button.ax-switch-checked{background-color:var(--ax-comp-bg,var(--color-surface))}ax-switch button.ax-switch-checked .ax-switch-handle{background-color:var(--ax-comp-text,var(--color-dark));inset-inline-start:initial;inset-inline-end:calc(var(--spacing,.25rem) * .5)}ax-switch button .ax-switch-handle{inset-inline-start:calc(var(--spacing,.25rem) * .5);top:calc(var(--spacing,.25rem) * .5);width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);background-color:var(--color-white,#fff);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-radius:3.40282e38px;justify-content:center;align-items:center;font-size:80%;display:flex;position:absolute}ax-switch button .ax-switch-handle:active{width:calc(var(--spacing,.25rem) * 6)}ax-switch button .ax-switch-handle .ax-loader{box-sizing:border-box;min-height:calc(var(--spacing,.25rem) * 3);min-width:calc(var(--spacing,.25rem) * 3);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-style:var(--tw-border-style);border-width:2px;border-color:var(--ax-comp-bg,var(--color-surface));border-bottom-color:#0000;border-radius:3.40282e38px;animation:.5s linear infinite rotation;display:inline-block;position:absolute;top:50%}ax-switch button .ax-switch-handle:before{content:\"\";transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:var(--ax-sys-color-surface);border-radius:3.40282e38px;position:absolute}ax-switch button .ax-switch-inner{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));margin-inline-start:calc(var(--spacing,.25rem) * 6);margin-inline-end:calc(var(--spacing,.25rem) * 1.5);display:block}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{padding-inline:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);display:flex}ax-switch .ax-state-disabled{cursor:not-allowed;opacity:.5}ax-switch .ax-state-readonly{opacity:.75}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
63
63
|
}
|
|
64
64
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSwitchComponent, decorators: [{
|
|
65
65
|
type: Component,
|
|
@@ -70,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
70
70
|
multi: true,
|
|
71
71
|
},
|
|
72
72
|
{ provide: AXComponent, useExisting: AXSwitchComponent },
|
|
73
|
-
], template: "<button\n type=\"button\"\n role=\"switch\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\"\n>\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 <
|
|
73
|
+
], template: "<button\n type=\"button\"\n role=\"switch\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\"\n>\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 <ng-content select=\"ax-switch-off-content\"></ng-content>\n }\n @if (value) {\n <ng-content select=\"ax-switch-on-content\"></ng-content>\n }\n</button>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading:initial;--tw-outline-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid}}}@layer components{ax-switch{--tw-leading:initial;line-height:initial;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}ax-switch button{height:calc(var(--spacing,.25rem) * 5);min-width:calc(var(--spacing,.25rem) * 10);cursor:pointer;background-color:#0000004d;border-radius:3.40282e38px;display:inline-block;position:relative}@supports (color:color-mix(in lab,red,red)){ax-switch button{background-color:color-mix(in oklab,var(--color-black,#000) 30%,transparent)}}ax-switch button{vertical-align:middle;--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}ax-switch button:where(.ax-dark,.ax-dark *){background-color:#ffffff4d}@supports (color:color-mix(in lab,red,red)){ax-switch button:where(.ax-dark,.ax-dark *){background-color:color-mix(in oklab,var(--color-white,#fff) 30%,transparent)}}ax-switch button:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--ax-comp-bg,var(--color-surface))}ax-switch button:active .ax-switch-handle{width:calc(var(--spacing,.25rem) * 6)}ax-switch button.ax-switch-checked{background-color:var(--ax-comp-bg,var(--color-surface))}ax-switch button.ax-switch-checked .ax-switch-handle{background-color:var(--ax-comp-text,var(--color-dark));inset-inline-start:initial;inset-inline-end:calc(var(--spacing,.25rem) * .5)}ax-switch button .ax-switch-handle{inset-inline-start:calc(var(--spacing,.25rem) * .5);top:calc(var(--spacing,.25rem) * .5);width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);background-color:var(--color-white,#fff);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-radius:3.40282e38px;justify-content:center;align-items:center;font-size:80%;display:flex;position:absolute}ax-switch button .ax-switch-handle:active{width:calc(var(--spacing,.25rem) * 6)}ax-switch button .ax-switch-handle .ax-loader{box-sizing:border-box;min-height:calc(var(--spacing,.25rem) * 3);min-width:calc(var(--spacing,.25rem) * 3);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-style:var(--tw-border-style);border-width:2px;border-color:var(--ax-comp-bg,var(--color-surface));border-bottom-color:#0000;border-radius:3.40282e38px;animation:.5s linear infinite rotation;display:inline-block;position:absolute;top:50%}ax-switch button .ax-switch-handle:before{content:\"\";transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:var(--ax-sys-color-surface);border-radius:3.40282e38px;position:absolute}ax-switch button .ax-switch-inner{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));margin-inline-start:calc(var(--spacing,.25rem) * 6);margin-inline-end:calc(var(--spacing,.25rem) * 1.5);display:block}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{padding-inline:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);display:flex}ax-switch .ax-state-disabled{cursor:not-allowed;opacity:.5}ax-switch .ax-state-readonly{opacity:.75}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
74
74
|
}], propDecorators: { isLoading: [{
|
|
75
75
|
type: Input
|
|
76
76
|
}], __hostClass: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-switch.mjs","sources":["../../../../packages/components/switch/src/lib/switch-content.component.ts","../../../../packages/components/switch/src/lib/switch.component.ts","../../../../packages/components/switch/src/lib/switch.component.html","../../../../packages/components/switch/src/lib/switch.module.ts","../../../../packages/components/switch/src/acorex-components-switch.ts"],"sourcesContent":["import { AXComponent, MXBaseComponent } from '@acorex/cdk/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:\n '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 providers: [{ provide: AXComponent, useExisting: AXSwitchContentComponent }],\n})\nexport class AXSwitchContentComponent extends MXBaseComponent {}\n","import { AXComponent, MXColorComponent, MXValueComponent } from '@acorex/cdk/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.compiled.css'],\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 { provide: AXComponent, useExisting: AXSwitchComponent },\n ],\n})\nexport class AXSwitchComponent extends classes(MXValueComponent<boolean>, MXColorComponent) {\n /**\n * Indicates whether the component is in a loading state.\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 === 'ax-default') {\n return 'ax-primary';\n } else {\n return `${this.color ? this.color : 'ax-primary'}`;\n }\n }\n}\n","<button\n type=\"button\"\n role=\"switch\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\"\n>\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 <
|
|
1
|
+
{"version":3,"file":"acorex-components-switch.mjs","sources":["../../../../packages/components/switch/src/lib/switch-content.component.ts","../../../../packages/components/switch/src/lib/switch.component.ts","../../../../packages/components/switch/src/lib/switch.component.html","../../../../packages/components/switch/src/lib/switch.module.ts","../../../../packages/components/switch/src/acorex-components-switch.ts"],"sourcesContent":["import { AXComponent, MXBaseComponent } from '@acorex/cdk/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:\n '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 providers: [{ provide: AXComponent, useExisting: AXSwitchContentComponent }],\n})\nexport class AXSwitchContentComponent extends MXBaseComponent {}\n","import { AXComponent, MXColorComponent, MXValueComponent } from '@acorex/cdk/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.compiled.css'],\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 { provide: AXComponent, useExisting: AXSwitchComponent },\n ],\n})\nexport class AXSwitchComponent extends classes(MXValueComponent<boolean>, MXColorComponent) {\n /**\n * Indicates whether the component is in a loading state.\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 === 'ax-default') {\n return 'ax-primary';\n } else {\n return `${this.color ? this.color : 'ax-primary'}`;\n }\n }\n}\n","<button\n type=\"button\"\n role=\"switch\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [class.ax-switch-checked]=\"value\"\n (click)=\"_handleOnClickEvent($event)\"\n>\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 <ng-content select=\"ax-switch-off-content\"></ng-content>\n }\n @if (value) {\n <ng-content select=\"ax-switch-on-content\"></ng-content>\n }\n</button>\n","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 imports: [CommonModule, FormsModule, AXSwitchComponent, AXSwitchContentComponent],\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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"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acorex/components",
|
|
3
|
-
"version": "21.0.2-next.
|
|
3
|
+
"version": "21.0.2-next.8",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@acorex/core": "21.0.2-next.
|
|
6
|
-
"@acorex/cdk": "21.0.2-next.
|
|
5
|
+
"@acorex/core": "21.0.2-next.8",
|
|
6
|
+
"@acorex/cdk": "21.0.2-next.8",
|
|
7
7
|
"polytype": ">=0.17.0",
|
|
8
8
|
"angular-imask": ">=7.6.1",
|
|
9
9
|
"gridstack": ">=12.0.0",
|