@acorex/components 19.10.0-next.5 → 19.10.0-next.7
Sign up to get free protection for your applications and to get access to all the features.
- package/fesm2022/acorex-components-button.mjs +4 -4
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation.mjs +2 -2
- package/fesm2022/acorex-components-conversation.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +9 -5
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +2 -2
- package/fesm2022/acorex-components-dropdown-button.mjs +2 -2
- package/fesm2022/acorex-components-dropdown-button.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-rate-picker.mjs +2 -2
- package/fesm2022/acorex-components-rate-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-skeleton.mjs +2 -2
- package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
- package/fesm2022/acorex-components-step-wizard.mjs +2 -2
- package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +2 -2
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +2 -2
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-text-box.mjs +2 -2
- package/fesm2022/acorex-components-text-box.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +4 -4
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -69,7 +69,7 @@ class AXDialogComponent extends MXBaseComponent {
|
|
|
69
69
|
provide: AXClosbaleComponent,
|
|
70
70
|
useExisting: AXDialogComponent,
|
|
71
71
|
},
|
|
72
|
-
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax-dialog ax-orientation-{{ data.orientation }}\"\n tabindex=\"-1\"\n cdkDrag\n cdkDragHandle\n [cdkDragDisabled]=\"!data.draggable\"\n>\n <div class=\"ax-dialog-content-wrapper\">\n @if (data.icon !== 'none') {\n <div class=\"ax-dialog-icon-side\">\n <i class=\"ax-dialog-icon {{ data.icon }}\"></i>\n </div>\n }\n <div class=\"ax-dialog-content-side\">\n <div class=\"ax-dialog-title\">{{ data.title }}</div>\n <div class=\"ax-dialog-content\">{{ data.content }}</div>\n </div>\n <div class=\"ax-dialog-dismiss-icon\">\n @if (data.closeButton) {\n <i class=\"ax-icon ax-icon-close\"></i>\n }\n </div>\n </div>\n <ax-footer>\n @for (button of data.buttons; let i = $index; track i) {\n <ax-button\n [text]=\"button.text | translate | async\"\n [tabindex]=\"i\"\n [axHotkey]=\"button.hotkey\"\n [axAutoFocus]=\"_hasAutoFocus(button)\"\n (onClick)=\"_handleButtonClick(button)\"\n [look]=\"button.look\"\n [disabled]=\"button.disabled\"\n [color]=\"button.color\"\n >\n @if (button.loading) {\n <ax-loading></ax-loading>\n }\n </ax-button>\n }\n </ax-footer>\n</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-primary-
|
|
72
|
+
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax-dialog ax-orientation-{{ data.orientation }}\"\n tabindex=\"-1\"\n cdkDrag\n cdkDragHandle\n [cdkDragDisabled]=\"!data.draggable\"\n>\n <div class=\"ax-dialog-content-wrapper\">\n @if (data.icon !== 'none') {\n <div class=\"ax-dialog-icon-side\">\n <i class=\"ax-dialog-icon {{ data.icon }}\"></i>\n </div>\n }\n <div class=\"ax-dialog-content-side\">\n <div class=\"ax-dialog-title\">{{ data.title }}</div>\n <div class=\"ax-dialog-content\">{{ data.content }}</div>\n </div>\n <div class=\"ax-dialog-dismiss-icon\">\n @if (data.closeButton) {\n <i class=\"ax-icon ax-icon-close\"></i>\n }\n </div>\n </div>\n <ax-footer>\n @for (button of data.buttons; let i = $index; track i) {\n <ax-button\n [text]=\"button.text | translate | async\"\n [tabindex]=\"i\"\n [axHotkey]=\"button.hotkey\"\n [axAutoFocus]=\"_hasAutoFocus(button)\"\n (onClick)=\"_handleButtonClick(button)\"\n [look]=\"button.look\"\n [disabled]=\"button.disabled\"\n [color]=\"button.color\"\n >\n @if (button.loading) {\n <ax-loading></ax-loading>\n }\n </ax-button>\n }\n </ax-footer>\n</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-primary-surface)}ax-dialog.ax-secondary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-secondary-surface)}ax-dialog.ax-success{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-success-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-success-surface)}ax-dialog.ax-warning{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-warning-surface)}ax-dialog.ax-danger{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-danger-surface)}.ax-dialog{position:relative;display:flex;width:93vw;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface));outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.ax-dialog{width:75vw}}@media (min-width: 1024px){.ax-dialog{width:50vw}}@media (min-width: 1280px){.ax-dialog{width:35vw}}@media (min-width: 1536px){.ax-dialog{width:25vw}}.ax-dialog.ax-orientation-horizontal .ax-dialog-content-wrapper{flex-direction:row}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper{flex-direction:column;align-items:center}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-icon-side{margin-bottom:1rem}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-content-side{margin:0;text-align:center}.ax-dialog.ax-orientation-vertical ax-footer ax-button{flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper{display:flex;gap:.5rem;padding:1.5rem 1.5rem 1rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-icon-side .ax-dialog-icon{background-color:rgba(var(--ax-comp-dialog-icon-bg-color));color:rgba(var(--ax-comp-dialog-icon-text-color));border-width:1px;border-color:rgba(var(--ax-comp-dialog-border-color));border-style:solid;display:flex;height:3rem;width:3rem;cursor:move;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side{margin-inline-start:1rem;flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.5rem;font-weight:500}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-content{font-size:.875rem;line-height:1.25rem}.ax-dialog ax-footer{justify-content:flex-end;padding:.75rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "directive", type: i2.AXHotkeyDirective, selector: "[axHotkey]", inputs: ["axHotkey"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
73
73
|
}
|
|
74
74
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDialogComponent, decorators: [{
|
|
75
75
|
type: Component,
|
|
@@ -78,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
78
78
|
provide: AXClosbaleComponent,
|
|
79
79
|
useExisting: AXDialogComponent,
|
|
80
80
|
},
|
|
81
|
-
], standalone: false, template: "<div\n class=\"ax-dialog ax-orientation-{{ data.orientation }}\"\n tabindex=\"-1\"\n cdkDrag\n cdkDragHandle\n [cdkDragDisabled]=\"!data.draggable\"\n>\n <div class=\"ax-dialog-content-wrapper\">\n @if (data.icon !== 'none') {\n <div class=\"ax-dialog-icon-side\">\n <i class=\"ax-dialog-icon {{ data.icon }}\"></i>\n </div>\n }\n <div class=\"ax-dialog-content-side\">\n <div class=\"ax-dialog-title\">{{ data.title }}</div>\n <div class=\"ax-dialog-content\">{{ data.content }}</div>\n </div>\n <div class=\"ax-dialog-dismiss-icon\">\n @if (data.closeButton) {\n <i class=\"ax-icon ax-icon-close\"></i>\n }\n </div>\n </div>\n <ax-footer>\n @for (button of data.buttons; let i = $index; track i) {\n <ax-button\n [text]=\"button.text | translate | async\"\n [tabindex]=\"i\"\n [axHotkey]=\"button.hotkey\"\n [axAutoFocus]=\"_hasAutoFocus(button)\"\n (onClick)=\"_handleButtonClick(button)\"\n [look]=\"button.look\"\n [disabled]=\"button.disabled\"\n [color]=\"button.color\"\n >\n @if (button.loading) {\n <ax-loading></ax-loading>\n }\n </ax-button>\n }\n </ax-footer>\n</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-primary-
|
|
81
|
+
], standalone: false, template: "<div\n class=\"ax-dialog ax-orientation-{{ data.orientation }}\"\n tabindex=\"-1\"\n cdkDrag\n cdkDragHandle\n [cdkDragDisabled]=\"!data.draggable\"\n>\n <div class=\"ax-dialog-content-wrapper\">\n @if (data.icon !== 'none') {\n <div class=\"ax-dialog-icon-side\">\n <i class=\"ax-dialog-icon {{ data.icon }}\"></i>\n </div>\n }\n <div class=\"ax-dialog-content-side\">\n <div class=\"ax-dialog-title\">{{ data.title }}</div>\n <div class=\"ax-dialog-content\">{{ data.content }}</div>\n </div>\n <div class=\"ax-dialog-dismiss-icon\">\n @if (data.closeButton) {\n <i class=\"ax-icon ax-icon-close\"></i>\n }\n </div>\n </div>\n <ax-footer>\n @for (button of data.buttons; let i = $index; track i) {\n <ax-button\n [text]=\"button.text | translate | async\"\n [tabindex]=\"i\"\n [axHotkey]=\"button.hotkey\"\n [axAutoFocus]=\"_hasAutoFocus(button)\"\n (onClick)=\"_handleButtonClick(button)\"\n [look]=\"button.look\"\n [disabled]=\"button.disabled\"\n [color]=\"button.color\"\n >\n @if (button.loading) {\n <ax-loading></ax-loading>\n }\n </ax-button>\n }\n </ax-footer>\n</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-primary-surface)}ax-dialog.ax-secondary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-secondary-surface)}ax-dialog.ax-success{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-success-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-success-surface)}ax-dialog.ax-warning{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-warning-surface)}ax-dialog.ax-danger{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-danger-surface)}.ax-dialog{position:relative;display:flex;width:93vw;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface));outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.ax-dialog{width:75vw}}@media (min-width: 1024px){.ax-dialog{width:50vw}}@media (min-width: 1280px){.ax-dialog{width:35vw}}@media (min-width: 1536px){.ax-dialog{width:25vw}}.ax-dialog.ax-orientation-horizontal .ax-dialog-content-wrapper{flex-direction:row}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper{flex-direction:column;align-items:center}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-icon-side{margin-bottom:1rem}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-content-side{margin:0;text-align:center}.ax-dialog.ax-orientation-vertical ax-footer ax-button{flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper{display:flex;gap:.5rem;padding:1.5rem 1.5rem 1rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-icon-side .ax-dialog-icon{background-color:rgba(var(--ax-comp-dialog-icon-bg-color));color:rgba(var(--ax-comp-dialog-icon-text-color));border-width:1px;border-color:rgba(var(--ax-comp-dialog-border-color));border-style:solid;display:flex;height:3rem;width:3rem;cursor:move;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side{margin-inline-start:1rem;flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.5rem;font-weight:500}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-content{font-size:.875rem;line-height:1.25rem}.ax-dialog ax-footer{justify-content:flex-end;padding:.75rem 1.5rem}\n"] }]
|
|
82
82
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
83
83
|
type: Inject,
|
|
84
84
|
args: [DIALOG_DATA]
|
|
@@ -103,7 +103,7 @@ class AXDropdownButtonComponent extends MXButtonBaseComponent {
|
|
|
103
103
|
provide: AXClosbaleComponent,
|
|
104
104
|
useExisting: AXDropdownButtonComponent,
|
|
105
105
|
},
|
|
106
|
-
], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #dropdown>\n <ax-dropdown-panel #panel>\n <ng-content></ng-content>\n </ax-dropdown-panel>\n</ng-template>\n<ng-template #decorator>\n <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner\"> </ng-content>\n</ng-template>\n\n@if (mode === 'dropdown') {\n <ax-button\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n\n <ax-suffix>\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n </ax-suffix>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n} @else {\n <ax-button\n class=\"ax-dropdown-split-button\"\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n </ax-button>\n\n <ax-divider class=\"ax-{{ color }} ax-{{ look }}\"></ax-divider>\n\n <ax-button class=\"ax-dropdown-split-button-arrow\" [look]=\"look\" [color]=\"color\" [disabled]=\"disabled\">\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n}\n", styles: ["ax-dropdown-button ax-divider.ax-primary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-primary-
|
|
106
|
+
], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #dropdown>\n <ax-dropdown-panel #panel>\n <ng-content></ng-content>\n </ax-dropdown-panel>\n</ng-template>\n<ng-template #decorator>\n <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner\"> </ng-content>\n</ng-template>\n\n@if (mode === 'dropdown') {\n <ax-button\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n\n <ax-suffix>\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n </ax-suffix>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n} @else {\n <ax-button\n class=\"ax-dropdown-split-button\"\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n </ax-button>\n\n <ax-divider class=\"ax-{{ color }} ax-{{ look }}\"></ax-divider>\n\n <ax-button class=\"ax-dropdown-split-button-arrow\" [look]=\"look\" [color]=\"color\" [disabled]=\"disabled\">\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n}\n", styles: ["ax-dropdown-button ax-divider.ax-primary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-primary-lighter-surface)}ax-dropdown-button ax-divider.ax-primary.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-primary-surface)}ax-dropdown-button ax-divider.ax-primary.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-primary-darker-surface)}ax-dropdown-button ax-divider.ax-secondary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-secondary-lighter-surface)}ax-dropdown-button ax-divider.ax-secondary.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-secondary-surface)}ax-dropdown-button ax-divider.ax-secondary.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-secondary-darker-surface)}ax-dropdown-button ax-divider.ax-success{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-success-lighter-surface)}ax-dropdown-button ax-divider.ax-success.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-success-surface)}ax-dropdown-button ax-divider.ax-success.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-success-darker-surface)}ax-dropdown-button ax-divider.ax-warning{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-warning-lighter-surface)}ax-dropdown-button ax-divider.ax-warning.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-warning-surface)}ax-dropdown-button ax-divider.ax-warning.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-warning-darker-surface)}ax-dropdown-button ax-divider.ax-danger{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-danger-lighter-surface)}ax-dropdown-button ax-divider.ax-danger.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-danger-surface)}ax-dropdown-button ax-divider.ax-danger.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-danger-darker-surface)}ax-dropdown-button{display:inline-flex;align-items:center;justify-content:center;--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio));height:var(--ax-comp-button-height);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-dropdown-button.ax-xs .ax-dropdown-split-button-arrow ax-icon{font-size:.7rem}ax-dropdown-button.ax-sm .ax-dropdown-split-button-arrow ax-icon{font-size:.8rem}ax-dropdown-button.ax-md .ax-dropdown-split-button-arrow ax-icon{font-size:.9rem}ax-dropdown-button.ax-lg .ax-dropdown-split-button-arrow ax-icon{font-size:1.2rem}ax-dropdown-button.ax-xl .ax-dropdown-split-button-arrow ax-icon{font-size:1.4rem}ax-dropdown-button ax-divider{width:1px;height:100%;background-color:rgba(var(--ax-comp-dropdown-button-divider-color-solid))}ax-dropdown-button ax-divider.ax-outline{background-color:rgba(var(--ax-comp-dropdown-button-divider-color-outline))}ax-dropdown-button ax-divider.ax-blank,ax-dropdown-button ax-divider.ax-link{background-color:transparent}ax-dropdown-button ax-divider.ax-twotone{background-color:rgba(var(--ax-comp-dropdown-button-divider-color-twotone))}ax-dropdown-button .ax-dropdown-split-button{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}ax-dropdown-button .ax-dropdown-split-button-arrow{border-end-start-radius:0;border-start-start-radius:0;border-inline-start:0}ax-dropdown-button .ax-dropdown-split-button-arrow ax-icon{font-size:.9rem}.ax-xs ax-dropdown-button,ax-dropdown-button.ax-xs{--ax-comp-button-size-ratio: .75}.ax-sm ax-dropdown-button,ax-dropdown-button.ax-sm{--ax-comp-button-size-ratio: .875}.ax-md ax-dropdown-button,ax-dropdown-button{--ax-comp-button-size-ratio: 1}.ax-lg ax-dropdown-button,ax-dropdown-button.ax-lg{--ax-comp-button-size-ratio: 1.125}.ax-xl ax-dropdown-button,ax-dropdown-button.ax-xl{--ax-comp-button-size-ratio: 1.125}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i3.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
107
107
|
}
|
|
108
108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDropdownButtonComponent, decorators: [{
|
|
109
109
|
type: Component,
|
|
@@ -112,7 +112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
112
112
|
provide: AXClosbaleComponent,
|
|
113
113
|
useExisting: AXDropdownButtonComponent,
|
|
114
114
|
},
|
|
115
|
-
], standalone: false, template: "<ng-template #dropdown>\n <ax-dropdown-panel #panel>\n <ng-content></ng-content>\n </ax-dropdown-panel>\n</ng-template>\n<ng-template #decorator>\n <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner\"> </ng-content>\n</ng-template>\n\n@if (mode === 'dropdown') {\n <ax-button\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n\n <ax-suffix>\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n </ax-suffix>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n} @else {\n <ax-button\n class=\"ax-dropdown-split-button\"\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n </ax-button>\n\n <ax-divider class=\"ax-{{ color }} ax-{{ look }}\"></ax-divider>\n\n <ax-button class=\"ax-dropdown-split-button-arrow\" [look]=\"look\" [color]=\"color\" [disabled]=\"disabled\">\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n}\n", styles: ["ax-dropdown-button ax-divider.ax-primary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-primary-
|
|
115
|
+
], standalone: false, template: "<ng-template #dropdown>\n <ax-dropdown-panel #panel>\n <ng-content></ng-content>\n </ax-dropdown-panel>\n</ng-template>\n<ng-template #decorator>\n <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner\"> </ng-content>\n</ng-template>\n\n@if (mode === 'dropdown') {\n <ax-button\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n\n <ax-suffix>\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n </ax-suffix>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n} @else {\n <ax-button\n class=\"ax-dropdown-split-button\"\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n </ax-button>\n\n <ax-divider class=\"ax-{{ color }} ax-{{ look }}\"></ax-divider>\n\n <ax-button class=\"ax-dropdown-split-button-arrow\" [look]=\"look\" [color]=\"color\" [disabled]=\"disabled\">\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n}\n", styles: ["ax-dropdown-button ax-divider.ax-primary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-primary-lighter-surface)}ax-dropdown-button ax-divider.ax-primary.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-primary-surface)}ax-dropdown-button ax-divider.ax-primary.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-primary-darker-surface)}ax-dropdown-button ax-divider.ax-secondary{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-secondary-lighter-surface)}ax-dropdown-button ax-divider.ax-secondary.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-secondary-surface)}ax-dropdown-button ax-divider.ax-secondary.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-secondary-darker-surface)}ax-dropdown-button ax-divider.ax-success{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-success-lighter-surface)}ax-dropdown-button ax-divider.ax-success.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-success-surface)}ax-dropdown-button ax-divider.ax-success.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-success-darker-surface)}ax-dropdown-button ax-divider.ax-warning{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-warning-lighter-surface)}ax-dropdown-button ax-divider.ax-warning.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-warning-surface)}ax-dropdown-button ax-divider.ax-warning.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-warning-darker-surface)}ax-dropdown-button ax-divider.ax-danger{--ax-comp-dropdown-button-divider-color-solid: var(--ax-sys-color-danger-lighter-surface)}ax-dropdown-button ax-divider.ax-danger.ax-outline{--ax-comp-dropdown-button-divider-color-outline: var(--ax-sys-color-danger-surface)}ax-dropdown-button ax-divider.ax-danger.ax-twotone{--ax-comp-dropdown-button-divider-color-twotone: var(--ax-sys-color-danger-darker-surface)}ax-dropdown-button{display:inline-flex;align-items:center;justify-content:center;--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio));height:var(--ax-comp-button-height);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-dropdown-button.ax-xs .ax-dropdown-split-button-arrow ax-icon{font-size:.7rem}ax-dropdown-button.ax-sm .ax-dropdown-split-button-arrow ax-icon{font-size:.8rem}ax-dropdown-button.ax-md .ax-dropdown-split-button-arrow ax-icon{font-size:.9rem}ax-dropdown-button.ax-lg .ax-dropdown-split-button-arrow ax-icon{font-size:1.2rem}ax-dropdown-button.ax-xl .ax-dropdown-split-button-arrow ax-icon{font-size:1.4rem}ax-dropdown-button ax-divider{width:1px;height:100%;background-color:rgba(var(--ax-comp-dropdown-button-divider-color-solid))}ax-dropdown-button ax-divider.ax-outline{background-color:rgba(var(--ax-comp-dropdown-button-divider-color-outline))}ax-dropdown-button ax-divider.ax-blank,ax-dropdown-button ax-divider.ax-link{background-color:transparent}ax-dropdown-button ax-divider.ax-twotone{background-color:rgba(var(--ax-comp-dropdown-button-divider-color-twotone))}ax-dropdown-button .ax-dropdown-split-button{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}ax-dropdown-button .ax-dropdown-split-button-arrow{border-end-start-radius:0;border-start-start-radius:0;border-inline-start:0}ax-dropdown-button .ax-dropdown-split-button-arrow ax-icon{font-size:.9rem}.ax-xs ax-dropdown-button,ax-dropdown-button.ax-xs{--ax-comp-button-size-ratio: .75}.ax-sm ax-dropdown-button,ax-dropdown-button.ax-sm{--ax-comp-button-size-ratio: .875}.ax-md ax-dropdown-button,ax-dropdown-button{--ax-comp-button-size-ratio: 1}.ax-lg ax-dropdown-button,ax-dropdown-button.ax-lg{--ax-comp-button-size-ratio: 1.125}.ax-xl ax-dropdown-button,ax-dropdown-button.ax-xl{--ax-comp-button-size-ratio: 1.125}\n"] }]
|
|
116
116
|
}], propDecorators: { dropdownPanel: [{
|
|
117
117
|
type: ViewChild,
|
|
118
118
|
args: ['panel']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-dropdown-button.mjs","sources":["../../../../libs/components/dropdown-button/src/lib/dropdown-button.component.ts","../../../../libs/components/dropdown-button/src/lib/dropdown-button.component.html","../../../../libs/components/dropdown-button/src/lib/dropdown-button.module.ts","../../../../libs/components/dropdown-button/src/acorex-components-dropdown-button.ts"],"sourcesContent":["import { AXButtonType } from '@acorex/components/button';\nimport { AXClickEvent, AXClosbaleComponent, MXButtonBaseComponent } from '@acorex/components/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\n// import { AXButtonType } from './button-item.class';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n selector: 'ax-dropdown-button',\n templateUrl: './dropdown-button.component.html',\n styleUrls: ['./dropdown-button.component.scss'],\n inputs: ['disabled', 'size', 'color', 'look', 'text'],\n outputs: ['onBlur', 'onFocus', 'onClick', 'selectedChange', 'lookChange', 'colorChange', 'disabledChange'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: AXClosbaleComponent,\n useExisting: AXDropdownButtonComponent,\n },\n ],\n standalone: false,\n})\nexport class AXDropdownButtonComponent extends MXButtonBaseComponent implements AfterViewInit {\n /**\n * Fires each time the user clicks the button.\n * @event\n */\n onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n /**\n * @ignore\n */\n @ViewChild('panel') dropdownPanel: AXClosbaleComponent;\n\n /**\n * Defines the type of the button element.\n *\n * @defaultValue 'button'\n */\n @Input()\n type: AXButtonType = 'button';\n\n /**\n * Specifies the mode of the button.\n * Can be either 'split' or 'dropdown'.\n *\n * @defaultValue 'split'\n */\n @Input() mode: 'split' | 'dropdown' = 'split';\n\n /**\n * @ignore\n */\n ngAfterViewInit(): void {\n this.getHostElement().removeAttribute('tabindex');\n }\n\n /**\n * @ignore\n */\n private getButton(): HTMLButtonElement {\n return this.getHostElement().firstElementChild as HTMLButtonElement;\n }\n\n /**\n * @ignore\n */\n _handleClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n\n // TODO: check keyboard event\n setTimeout(() => {\n this.blur();\n });\n }\n\n /**\n * Simulates a click event on the button element.\n *\n * @ignore\n */\n click() {\n this.getButton()?.click();\n }\n\n /**\n * Sets focus to the button and adds a focus state class.\n */\n override focus() {\n this.getButton()?.focus();\n this.getButton().classList.add('ax-state-focus');\n }\n\n /**\n * Removes the focus state class from the button.\n */\n override blur() {\n this.getButton().classList.remove('ax-state-focus');\n }\n\n /**\n * Closes the dropdown panel.\n * @ignore\n */\n close() {\n this.dropdownPanel.close();\n }\n}\n","<ng-template #dropdown>\n <ax-dropdown-panel #panel>\n <ng-content></ng-content>\n </ax-dropdown-panel>\n</ng-template>\n<ng-template #decorator>\n <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner\"> </ng-content>\n</ng-template>\n\n@if (mode === 'dropdown') {\n <ax-button\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n\n <ax-suffix>\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n </ax-suffix>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n} @else {\n <ax-button\n class=\"ax-dropdown-split-button\"\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n </ax-button>\n\n <ax-divider class=\"ax-{{ color }} ax-{{ look }}\"></ax-divider>\n\n <ax-button class=\"ax-dropdown-split-button-arrow\" [look]=\"look\" [color]=\"color\" [disabled]=\"disabled\">\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXCommonModule, AXRippleDirective } from '@acorex/components/common';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXDropdownButtonComponent } from './dropdown-button.component';\n\nconst COMPONENT = [AXDropdownButtonComponent];\nconst MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXRippleDirective, AXDropdownModule, AXButtonModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXDropdownButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"acorex-components-dropdown-button.mjs","sources":["../../../../libs/components/dropdown-button/src/lib/dropdown-button.component.ts","../../../../libs/components/dropdown-button/src/lib/dropdown-button.component.html","../../../../libs/components/dropdown-button/src/lib/dropdown-button.module.ts","../../../../libs/components/dropdown-button/src/acorex-components-dropdown-button.ts"],"sourcesContent":["import { AXButtonType } from '@acorex/components/button';\nimport { AXClickEvent, AXClosbaleComponent, MXButtonBaseComponent } from '@acorex/components/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\n// import { AXButtonType } from './button-item.class';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n selector: 'ax-dropdown-button',\n templateUrl: './dropdown-button.component.html',\n styleUrls: ['./dropdown-button.component.scss'],\n inputs: ['disabled', 'size', 'color', 'look', 'text'],\n outputs: ['onBlur', 'onFocus', 'onClick', 'selectedChange', 'lookChange', 'colorChange', 'disabledChange'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: AXClosbaleComponent,\n useExisting: AXDropdownButtonComponent,\n },\n ],\n standalone: false,\n})\nexport class AXDropdownButtonComponent extends MXButtonBaseComponent implements AfterViewInit {\n /**\n * Fires each time the user clicks the button.\n * @event\n */\n onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n /**\n * @ignore\n */\n @ViewChild('panel') dropdownPanel: AXClosbaleComponent;\n\n /**\n * Defines the type of the button element.\n *\n * @defaultValue 'button'\n */\n @Input()\n type: AXButtonType = 'button';\n\n /**\n * Specifies the mode of the button.\n * Can be either 'split' or 'dropdown'.\n *\n * @defaultValue 'split'\n */\n @Input() mode: 'split' | 'dropdown' = 'split';\n\n /**\n * @ignore\n */\n ngAfterViewInit(): void {\n this.getHostElement().removeAttribute('tabindex');\n }\n\n /**\n * @ignore\n */\n private getButton(): HTMLButtonElement {\n return this.getHostElement().firstElementChild as HTMLButtonElement;\n }\n\n /**\n * @ignore\n */\n _handleClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n\n // TODO: check keyboard event\n setTimeout(() => {\n this.blur();\n });\n }\n\n /**\n * Simulates a click event on the button element.\n *\n * @ignore\n */\n click() {\n this.getButton()?.click();\n }\n\n /**\n * Sets focus to the button and adds a focus state class.\n */\n override focus() {\n this.getButton()?.focus();\n this.getButton().classList.add('ax-state-focus');\n }\n\n /**\n * Removes the focus state class from the button.\n */\n override blur() {\n this.getButton().classList.remove('ax-state-focus');\n }\n\n /**\n * Closes the dropdown panel.\n * @ignore\n */\n close() {\n this.dropdownPanel.close();\n }\n}\n","<ng-template #dropdown>\n <ax-dropdown-panel #panel>\n <ng-content></ng-content>\n </ax-dropdown-panel>\n</ng-template>\n<ng-template #decorator>\n <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner\"> </ng-content>\n</ng-template>\n\n@if (mode === 'dropdown') {\n <ax-button\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n\n <ax-suffix>\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n </ax-suffix>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n} @else {\n <ax-button\n class=\"ax-dropdown-split-button\"\n [look]=\"look\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [text]=\"text\"\n >\n <ng-container [ngTemplateOutlet]=\"decorator\"></ng-container>\n </ax-button>\n\n <ax-divider class=\"ax-{{ color }} ax-{{ look }}\"></ax-divider>\n\n <ax-button class=\"ax-dropdown-split-button-arrow\" [look]=\"look\" [color]=\"color\" [disabled]=\"disabled\">\n <ax-icon class=\"far fa-chevron-down\"> </ax-icon>\n\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </ax-button>\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXCommonModule, AXRippleDirective } from '@acorex/components/common';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXDropdownButtonComponent } from './dropdown-button.component';\n\nconst COMPONENT = [AXDropdownButtonComponent];\nconst MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXRippleDirective, AXDropdownModule, AXButtonModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXDropdownButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -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
|
|
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.ax-fill{--ax-comp-navbar-bg-color: var(--ax-sys-color-surface)}ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-navbar-border-width: 1px}.ax-dark ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-darkest-surface)}ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-lightest-surface)}.ax-dark ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-darkest-surface)}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;background-color:rgba(var(--ax-comp-navbar-bg-color, none));border-bottom-width:var(--ax-comp-navbar-border-width, 0);border-color:rgba(var(--ax-comp-navbar-border-color, none))}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 }); }
|
|
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
|
|
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.ax-fill{--ax-comp-navbar-bg-color: var(--ax-sys-color-surface)}ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-navbar-border-width: 1px}.ax-dark ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-darkest-surface)}ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-lightest-surface)}.ax-dark ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-darkest-surface)}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;background-color:rgba(var(--ax-comp-navbar-bg-color, none));border-bottom-width:var(--ax-comp-navbar-border-width, 0);border-color:rgba(var(--ax-comp-navbar-border-color, none))}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"] }]
|
|
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,4kCAAA,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,4kCAAA,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;;;;"}
|
|
@@ -274,7 +274,7 @@ class AXRatePickerComponent extends MXValueComponent {
|
|
|
274
274
|
useExisting: forwardRef(() => AXRatePickerComponent),
|
|
275
275
|
multi: true,
|
|
276
276
|
},
|
|
277
|
-
], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["c"], descendants: true, isSignal: true }, { propertyName: "ratingEl", first: true, predicate: ["r"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n #c\n class=\"ax-rate-picker-container\"\n (click)=\"calculateRate($event)\"\n (touchstart)=\"calculateRate($event)\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n>\n <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n <div class=\"ax-rate-picker-icons ax-rp-active\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n }\n </div>\n </div>\n <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n }\n </div>\n</div>\n", styles: [".ax-xs ax-rate-picker,ax-rate-picker.ax-xs{--ax-comp-rate-picker-font-size: 1rem}.ax-sm ax-rate-picker,ax-rate-picker.ax-sm{--ax-comp-rate-picker-font-size: 1.5rem}.ax-md ax-rate-picker,ax-rate-picker{--ax-comp-rate-picker-font-size: 2rem}.ax-lg ax-rate-picker,ax-rate-picker.ax-lg{--ax-comp-rate-picker-font-size: 2.5rem}.ax-xl ax-rate-picker,ax-rate-picker.ax-xl{--ax-comp-rate-picker-font-size: 3rem}ax-rate-picker{font-size:var(--ax-comp-rate-picker-font-size, 1.5rem)}ax-rate-picker.ax-active{cursor:pointer}ax-rate-picker.ax-disable{cursor:not-allowed;opacity:.5}ax-rate-picker .ax-rate-picker-container{position:relative;width:min-content}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{position:relative;z-index:10;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:rgba(var(--ax-comp-rate-picker-
|
|
277
|
+
], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["c"], descendants: true, isSignal: true }, { propertyName: "ratingEl", first: true, predicate: ["r"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n #c\n class=\"ax-rate-picker-container\"\n (click)=\"calculateRate($event)\"\n (touchstart)=\"calculateRate($event)\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n>\n <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n <div class=\"ax-rate-picker-icons ax-rp-active\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n }\n </div>\n </div>\n <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n }\n </div>\n</div>\n", styles: ["ax-rate-picker{--ax-comp-rate-picker-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-rate-picker-inactive-bg-color: var(--ax-sys-color-dark);--ax-comp-rate-picker-inactive-bg-color-opacity: .2}.ax-dark ax-rate-picker{--ax-comp-rate-picker-inactive-bg-color: var(--ax-sys-color-light)}.ax-xs ax-rate-picker,ax-rate-picker.ax-xs{--ax-comp-rate-picker-font-size: 1rem}.ax-sm ax-rate-picker,ax-rate-picker.ax-sm{--ax-comp-rate-picker-font-size: 1.5rem}.ax-md ax-rate-picker,ax-rate-picker{--ax-comp-rate-picker-font-size: 2rem}.ax-lg ax-rate-picker,ax-rate-picker.ax-lg{--ax-comp-rate-picker-font-size: 2.5rem}.ax-xl ax-rate-picker,ax-rate-picker.ax-xl{--ax-comp-rate-picker-font-size: 3rem}ax-rate-picker{font-size:var(--ax-comp-rate-picker-font-size, 1.5rem)}ax-rate-picker.ax-active{cursor:pointer}ax-rate-picker.ax-disable{cursor:not-allowed;opacity:.5}ax-rate-picker .ax-rate-picker-container{position:relative;width:min-content}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{position:relative;z-index:10;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:rgba(var(--ax-comp-rate-picker-bg-color))}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons.ax-rp-inactive{color:rgba(var(--ax-comp-rate-picker-inactive-bg-color),var(--ax-comp-rate-picker-inactive-bg-color-opacity));position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
278
278
|
}
|
|
279
279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXRatePickerComponent, decorators: [{
|
|
280
280
|
type: Component,
|
|
@@ -285,7 +285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
285
285
|
useExisting: forwardRef(() => AXRatePickerComponent),
|
|
286
286
|
multi: true,
|
|
287
287
|
},
|
|
288
|
-
], standalone: false, template: "<div\n #c\n class=\"ax-rate-picker-container\"\n (click)=\"calculateRate($event)\"\n (touchstart)=\"calculateRate($event)\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n>\n <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n <div class=\"ax-rate-picker-icons ax-rp-active\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n }\n </div>\n </div>\n <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n }\n </div>\n</div>\n", styles: [".ax-xs ax-rate-picker,ax-rate-picker.ax-xs{--ax-comp-rate-picker-font-size: 1rem}.ax-sm ax-rate-picker,ax-rate-picker.ax-sm{--ax-comp-rate-picker-font-size: 1.5rem}.ax-md ax-rate-picker,ax-rate-picker{--ax-comp-rate-picker-font-size: 2rem}.ax-lg ax-rate-picker,ax-rate-picker.ax-lg{--ax-comp-rate-picker-font-size: 2.5rem}.ax-xl ax-rate-picker,ax-rate-picker.ax-xl{--ax-comp-rate-picker-font-size: 3rem}ax-rate-picker{font-size:var(--ax-comp-rate-picker-font-size, 1.5rem)}ax-rate-picker.ax-active{cursor:pointer}ax-rate-picker.ax-disable{cursor:not-allowed;opacity:.5}ax-rate-picker .ax-rate-picker-container{position:relative;width:min-content}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{position:relative;z-index:10;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:rgba(var(--ax-comp-rate-picker-
|
|
288
|
+
], standalone: false, template: "<div\n #c\n class=\"ax-rate-picker-container\"\n (click)=\"calculateRate($event)\"\n (touchstart)=\"calculateRate($event)\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n>\n <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n <div class=\"ax-rate-picker-icons ax-rp-active\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n }\n </div>\n </div>\n <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n }\n </div>\n</div>\n", styles: ["ax-rate-picker{--ax-comp-rate-picker-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-rate-picker-inactive-bg-color: var(--ax-sys-color-dark);--ax-comp-rate-picker-inactive-bg-color-opacity: .2}.ax-dark ax-rate-picker{--ax-comp-rate-picker-inactive-bg-color: var(--ax-sys-color-light)}.ax-xs ax-rate-picker,ax-rate-picker.ax-xs{--ax-comp-rate-picker-font-size: 1rem}.ax-sm ax-rate-picker,ax-rate-picker.ax-sm{--ax-comp-rate-picker-font-size: 1.5rem}.ax-md ax-rate-picker,ax-rate-picker{--ax-comp-rate-picker-font-size: 2rem}.ax-lg ax-rate-picker,ax-rate-picker.ax-lg{--ax-comp-rate-picker-font-size: 2.5rem}.ax-xl ax-rate-picker,ax-rate-picker.ax-xl{--ax-comp-rate-picker-font-size: 3rem}ax-rate-picker{font-size:var(--ax-comp-rate-picker-font-size, 1.5rem)}ax-rate-picker.ax-active{cursor:pointer}ax-rate-picker.ax-disable{cursor:not-allowed;opacity:.5}ax-rate-picker .ax-rate-picker-container{position:relative;width:min-content}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{position:relative;z-index:10;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:rgba(var(--ax-comp-rate-picker-bg-color))}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons.ax-rp-inactive{color:rgba(var(--ax-comp-rate-picker-inactive-bg-color),var(--ax-comp-rate-picker-inactive-bg-color-opacity));position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5}\n"] }]
|
|
289
289
|
}], ctorParameters: () => [], propDecorators: { isActive: [{
|
|
290
290
|
type: HostBinding,
|
|
291
291
|
args: ['class.ax-active']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-rate-picker.mjs","sources":["../../../../libs/components/rate-picker/src/lib/calculatePercentage.ts","../../../../libs/components/rate-picker/src/lib/rate-picker.component.ts","../../../../libs/components/rate-picker/src/lib/rate-picker.component.html","../../../../libs/components/rate-picker/src/lib/rate-picker.module.ts","../../../../libs/components/rate-picker/src/acorex-components-rate-picker.ts"],"sourcesContent":["/**\n * Calculates the horizontal position of a pointer event (mouse or touch) as a percentage\n * of the target element's width.\n *\n * @param event - The mouse or touch event to get the pointer position from.\n * @returns The percentage of the event's position relative to the target element's width,\n * or -1 if the event is invalid.\n *\n * @remarks\n * - For `MouseEvent`, it uses the `clientX` property.\n * - For `TouchEvent`, it uses the `clientX` of the first touch point.\n * - Returns `-1` if the event is neither a valid `MouseEvent` nor a `TouchEvent`.\n *\n * @example\n * ```typescript\n * document.addEventListener('click', function(event) {\n * const percentage = getPointerPercentage(event);\n * console.log(`Click position: ${percentage.toFixed(2)}% of the element's width`);\n * });\n *\n * document.addEventListener('touchstart', function(event) {\n * const percentage = getPointerPercentage(event);\n * console.log(`Touch position: ${percentage.toFixed(2)}% of the element's width`);\n * });\n * ```\n */\nexport function getPointerPercentage(event: MouseEvent | TouchEvent): number {\n let clientX: number;\n\n if (event instanceof MouseEvent) {\n clientX = event.clientX; // Mouse event uses clientX\n } else if (event instanceof TouchEvent && event.touches.length > 0) {\n clientX = event.touches[0].clientX; // Touch event uses the first touch's clientX\n } else {\n return -1; // Return -1 for invalid events\n }\n\n // Use currentTarget to get the bounding box of the element the event listener is attached to\n const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n const clickX = clientX - rect.left; // Calculate X position relative to the element\n const divWidth = rect.width; // Get the width from the bounding box\n const percentage = (clickX / divWidth) * 100; // Calculate percentage\n\n return percentage;\n}\n","import { AXValuableComponent, MXValueComponent } from '@acorex/components/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n forwardRef,\n HostBinding,\n inject,\n input,\n Renderer2,\n signal,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { getPointerPercentage } from './calculatePercentage';\n\n/**\n * @description\n * The `AXRatePickerComponent` provides a customizable rating picker.\n * The component allows users to select a rating between 0 and the defined maximum.\n * It supports transitions, dynamic value changes, and hover states.\n *\n * @example\n * <ax-rate-picker [max]=\"5\" [readonly]=\"false\" [disabled]=\"false\"></ax-rate-picker>\n */\n@Component({\n selector: 'ax-rate-picker',\n templateUrl: './rate-picker.component.html',\n styleUrls: ['./rate-picker.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n inputs: ['readonly', 'disabled'],\n providers: [\n { provide: AXValuableComponent, useExisting: AXRatePickerComponent },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXRatePickerComponent),\n multi: true,\n },\n ],\n standalone: false,\n})\nexport class AXRatePickerComponent extends MXValueComponent<number> {\n /**\n * @description\n * The icon to be used for each rating point.\n * @default 'fa-star'\n */\n iconName = input('fa-star');\n\n /**\n * @description\n * Maximum value for the rating.\n * Defines how many rating points are available.\n * @default 5\n */\n max = input(5);\n\n /**\n * @description\n * Defines the step increment between rating values.\n * The rating value will be rounded to the nearest multiple of this step.\n * @default 0.01\n */\n step = input(0.01);\n\n /**\n * @description\n * Whether the rating should have a transition effect when changing values.\n * @default true\n */\n hasTransition = input(true);\n\n /**\n * @description\n * The percentage of the current rating value relative to the maximum rating.\n */\n protected ratePercentage = computed(() => Math.round((this.currentValue() / this.max()) * 10000) / 100);\n\n /**\n * @description\n * The current rating value as a signal.\n */\n private currentValue = signal(this.max());\n\n /**\n * @description\n * State for tracking hover status and previous value.\n */\n private prevState: { ishover: boolean; previousValue?: number } = {\n ishover: false,\n previousValue: undefined,\n };\n\n /**\n * @description\n * Reference to the container element.\n */\n containerEl = viewChild.required<ElementRef>('c');\n\n /**\n * @description\n * Reference to the rating element.\n */\n ratingEl = viewChild.required<ElementRef>('r');\n\n /**\n * @description\n * Renderer for manipulating styles.\n */\n renderer = inject(Renderer2);\n\n /**\n * @description\n * Array of rating values from 1 to `max`.\n */\n protected rates = computed(() =>\n Array(this.max())\n .fill(0)\n .map((_, index) => index + 1),\n );\n\n /**\n * @description\n * Initializes the component and sets up value change subscription.\n */\n constructor() {\n super();\n effect(() => {\n if (!this.hasTransition()) {\n this.renderer.removeStyle(this.ratingEl().nativeElement, 'transition');\n }\n return this.hasTransition();\n });\n this.onValueChanged.subscribe((val: { value }) => {\n if (val.value < 0) {\n this.currentValue.set(0);\n console.warn('ax-rate-picker: value cant be negative!');\n } else if (val.value > this.max()) {\n this.currentValue.set(this.max());\n console.warn('ax-rate-picker: value cant be more than max!');\n } else {\n this.currentValue.set(val.value);\n }\n });\n }\n\n /**\n * @description\n * Calculates and updates the rating based on the mouse or touch event.\n *\n * @param event - The mouse or touch event triggering the rating calculation.\n */\n protected calculateRate(event: MouseEvent | TouchEvent): void {\n if (this.hasTransition()) {\n this.renderer.removeStyle(this.ratingEl().nativeElement, 'transition');\n }\n event.preventDefault();\n if (!this.readonly && !this.disabled) {\n const pointerPercentage = getPointerPercentage(event);\n if (pointerPercentage === -1) {\n return console.warn('Only support touch and click events.');\n }\n const value = this.roundToStep(pointerPercentage);\n const decimals = this.countDecimals(this.step());\n if (this.prevState.ishover === true) {\n this.currentValue.set(value);\n } else {\n this.commitValue(Number(value.toFixed(decimals)));\n this.mouseEnter();\n }\n }\n }\n\n /**\n * @description\n * Rounds the rating value to the nearest step.\n *\n * @param percentage - The calculated percentage from pointer event.\n * @returns The rounded rating value.\n */\n private roundToStep(percentage: number): number {\n const value = (percentage / 100) * this.max();\n const value2 = Math.round(value / (this.step() || 0.01)) * this.step();\n return value2;\n }\n\n /**\n * @description\n * Handles mouse enter events to start tracking mouse movements for rating.\n */\n protected mouseEnter() {\n this.prevState = {\n ishover: true,\n previousValue: this.value,\n };\n if (this.hasTransition()) {\n this.renderer.setStyle(this.ratingEl().nativeElement, 'opacity', '80%');\n }\n const moveListener = (moveEvent: MouseEvent | TouchEvent) => this.calculateRate(moveEvent);\n const endListener = () => this.onEnd(moveListener, endListener);\n const container = this.containerEl().nativeElement;\n container.addEventListener('mousemove', moveListener);\n container.addEventListener('mouseup', endListener);\n container.addEventListener('mouseleave', endListener);\n }\n\n /**\n * @description\n * Handles mouse leave events to reset styles.\n */\n mouseLeave() {\n if (this.hasTransition()) {\n this.renderer.removeStyle(this.ratingEl().nativeElement, 'opacity');\n }\n }\n\n /**\n * @description\n * Cleans up event listeners and restores the previous rating value.\n *\n * @param moveListener - The function to remove for mouse move events.\n * @param endListener - The function to remove for mouse end events.\n */\n private onEnd(moveListener: (event: MouseEvent | TouchEvent) => void, endListener: () => void): void {\n if (this.hasTransition()) {\n this.renderer.setStyle(\n this.ratingEl().nativeElement,\n 'transition',\n `width ${this.max() * 50 + 250}ms cubic-bezier(0.29, 0.72, 0.68, 0.85)`,\n );\n this.renderer.removeStyle(this.ratingEl().nativeElement, 'opacity');\n }\n this.currentValue.set(this.prevState.previousValue);\n this.prevState = {\n ishover: false,\n previousValue: undefined,\n };\n const container = this.containerEl().nativeElement;\n container.removeEventListener('mousemove', moveListener);\n container.removeEventListener('mouseup', endListener);\n container.removeEventListener('mouseleave', endListener);\n }\n\n private countDecimals(number: number): number {\n if (Math.floor(number) === number) return 0;\n return number.toString().split('.')[1].length || 0;\n }\n\n /**\n * @description\n * Determines if the component is active (i.e., not readonly or disabled).\n */\n @HostBinding('class.ax-active') get isActive() {\n return !this.readonly && !this.disabled;\n }\n\n /**\n * @description\n * Determines if the component is in readonly mode.\n */\n @HostBinding('class.ax-readonly') get isReadonly() {\n return this.readonly;\n }\n\n /**\n * @description\n * Determines if the component is disabled.\n */\n @HostBinding('class.ax-disable') get isDisabled() {\n return this.disabled;\n }\n}\n","<div\n #c\n class=\"ax-rate-picker-container\"\n (click)=\"calculateRate($event)\"\n (touchstart)=\"calculateRate($event)\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n>\n <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n <div class=\"ax-rate-picker-icons ax-rp-active\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n }\n </div>\n </div>\n <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n }\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXRatePickerComponent } from './rate-picker.component';\n\n@NgModule({\n declarations: [AXRatePickerComponent],\n imports: [CommonModule],\n exports: [AXRatePickerComponent],\n})\nexport class AXRatePickerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"acorex-components-rate-picker.mjs","sources":["../../../../libs/components/rate-picker/src/lib/calculatePercentage.ts","../../../../libs/components/rate-picker/src/lib/rate-picker.component.ts","../../../../libs/components/rate-picker/src/lib/rate-picker.component.html","../../../../libs/components/rate-picker/src/lib/rate-picker.module.ts","../../../../libs/components/rate-picker/src/acorex-components-rate-picker.ts"],"sourcesContent":["/**\n * Calculates the horizontal position of a pointer event (mouse or touch) as a percentage\n * of the target element's width.\n *\n * @param event - The mouse or touch event to get the pointer position from.\n * @returns The percentage of the event's position relative to the target element's width,\n * or -1 if the event is invalid.\n *\n * @remarks\n * - For `MouseEvent`, it uses the `clientX` property.\n * - For `TouchEvent`, it uses the `clientX` of the first touch point.\n * - Returns `-1` if the event is neither a valid `MouseEvent` nor a `TouchEvent`.\n *\n * @example\n * ```typescript\n * document.addEventListener('click', function(event) {\n * const percentage = getPointerPercentage(event);\n * console.log(`Click position: ${percentage.toFixed(2)}% of the element's width`);\n * });\n *\n * document.addEventListener('touchstart', function(event) {\n * const percentage = getPointerPercentage(event);\n * console.log(`Touch position: ${percentage.toFixed(2)}% of the element's width`);\n * });\n * ```\n */\nexport function getPointerPercentage(event: MouseEvent | TouchEvent): number {\n let clientX: number;\n\n if (event instanceof MouseEvent) {\n clientX = event.clientX; // Mouse event uses clientX\n } else if (event instanceof TouchEvent && event.touches.length > 0) {\n clientX = event.touches[0].clientX; // Touch event uses the first touch's clientX\n } else {\n return -1; // Return -1 for invalid events\n }\n\n // Use currentTarget to get the bounding box of the element the event listener is attached to\n const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n const clickX = clientX - rect.left; // Calculate X position relative to the element\n const divWidth = rect.width; // Get the width from the bounding box\n const percentage = (clickX / divWidth) * 100; // Calculate percentage\n\n return percentage;\n}\n","import { AXValuableComponent, MXValueComponent } from '@acorex/components/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n forwardRef,\n HostBinding,\n inject,\n input,\n Renderer2,\n signal,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { getPointerPercentage } from './calculatePercentage';\n\n/**\n * @description\n * The `AXRatePickerComponent` provides a customizable rating picker.\n * The component allows users to select a rating between 0 and the defined maximum.\n * It supports transitions, dynamic value changes, and hover states.\n *\n * @example\n * <ax-rate-picker [max]=\"5\" [readonly]=\"false\" [disabled]=\"false\"></ax-rate-picker>\n */\n@Component({\n selector: 'ax-rate-picker',\n templateUrl: './rate-picker.component.html',\n styleUrls: ['./rate-picker.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n inputs: ['readonly', 'disabled'],\n providers: [\n { provide: AXValuableComponent, useExisting: AXRatePickerComponent },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXRatePickerComponent),\n multi: true,\n },\n ],\n standalone: false,\n})\nexport class AXRatePickerComponent extends MXValueComponent<number> {\n /**\n * @description\n * The icon to be used for each rating point.\n * @default 'fa-star'\n */\n iconName = input('fa-star');\n\n /**\n * @description\n * Maximum value for the rating.\n * Defines how many rating points are available.\n * @default 5\n */\n max = input(5);\n\n /**\n * @description\n * Defines the step increment between rating values.\n * The rating value will be rounded to the nearest multiple of this step.\n * @default 0.01\n */\n step = input(0.01);\n\n /**\n * @description\n * Whether the rating should have a transition effect when changing values.\n * @default true\n */\n hasTransition = input(true);\n\n /**\n * @description\n * The percentage of the current rating value relative to the maximum rating.\n */\n protected ratePercentage = computed(() => Math.round((this.currentValue() / this.max()) * 10000) / 100);\n\n /**\n * @description\n * The current rating value as a signal.\n */\n private currentValue = signal(this.max());\n\n /**\n * @description\n * State for tracking hover status and previous value.\n */\n private prevState: { ishover: boolean; previousValue?: number } = {\n ishover: false,\n previousValue: undefined,\n };\n\n /**\n * @description\n * Reference to the container element.\n */\n containerEl = viewChild.required<ElementRef>('c');\n\n /**\n * @description\n * Reference to the rating element.\n */\n ratingEl = viewChild.required<ElementRef>('r');\n\n /**\n * @description\n * Renderer for manipulating styles.\n */\n renderer = inject(Renderer2);\n\n /**\n * @description\n * Array of rating values from 1 to `max`.\n */\n protected rates = computed(() =>\n Array(this.max())\n .fill(0)\n .map((_, index) => index + 1),\n );\n\n /**\n * @description\n * Initializes the component and sets up value change subscription.\n */\n constructor() {\n super();\n effect(() => {\n if (!this.hasTransition()) {\n this.renderer.removeStyle(this.ratingEl().nativeElement, 'transition');\n }\n return this.hasTransition();\n });\n this.onValueChanged.subscribe((val: { value }) => {\n if (val.value < 0) {\n this.currentValue.set(0);\n console.warn('ax-rate-picker: value cant be negative!');\n } else if (val.value > this.max()) {\n this.currentValue.set(this.max());\n console.warn('ax-rate-picker: value cant be more than max!');\n } else {\n this.currentValue.set(val.value);\n }\n });\n }\n\n /**\n * @description\n * Calculates and updates the rating based on the mouse or touch event.\n *\n * @param event - The mouse or touch event triggering the rating calculation.\n */\n protected calculateRate(event: MouseEvent | TouchEvent): void {\n if (this.hasTransition()) {\n this.renderer.removeStyle(this.ratingEl().nativeElement, 'transition');\n }\n event.preventDefault();\n if (!this.readonly && !this.disabled) {\n const pointerPercentage = getPointerPercentage(event);\n if (pointerPercentage === -1) {\n return console.warn('Only support touch and click events.');\n }\n const value = this.roundToStep(pointerPercentage);\n const decimals = this.countDecimals(this.step());\n if (this.prevState.ishover === true) {\n this.currentValue.set(value);\n } else {\n this.commitValue(Number(value.toFixed(decimals)));\n this.mouseEnter();\n }\n }\n }\n\n /**\n * @description\n * Rounds the rating value to the nearest step.\n *\n * @param percentage - The calculated percentage from pointer event.\n * @returns The rounded rating value.\n */\n private roundToStep(percentage: number): number {\n const value = (percentage / 100) * this.max();\n const value2 = Math.round(value / (this.step() || 0.01)) * this.step();\n return value2;\n }\n\n /**\n * @description\n * Handles mouse enter events to start tracking mouse movements for rating.\n */\n protected mouseEnter() {\n this.prevState = {\n ishover: true,\n previousValue: this.value,\n };\n if (this.hasTransition()) {\n this.renderer.setStyle(this.ratingEl().nativeElement, 'opacity', '80%');\n }\n const moveListener = (moveEvent: MouseEvent | TouchEvent) => this.calculateRate(moveEvent);\n const endListener = () => this.onEnd(moveListener, endListener);\n const container = this.containerEl().nativeElement;\n container.addEventListener('mousemove', moveListener);\n container.addEventListener('mouseup', endListener);\n container.addEventListener('mouseleave', endListener);\n }\n\n /**\n * @description\n * Handles mouse leave events to reset styles.\n */\n mouseLeave() {\n if (this.hasTransition()) {\n this.renderer.removeStyle(this.ratingEl().nativeElement, 'opacity');\n }\n }\n\n /**\n * @description\n * Cleans up event listeners and restores the previous rating value.\n *\n * @param moveListener - The function to remove for mouse move events.\n * @param endListener - The function to remove for mouse end events.\n */\n private onEnd(moveListener: (event: MouseEvent | TouchEvent) => void, endListener: () => void): void {\n if (this.hasTransition()) {\n this.renderer.setStyle(\n this.ratingEl().nativeElement,\n 'transition',\n `width ${this.max() * 50 + 250}ms cubic-bezier(0.29, 0.72, 0.68, 0.85)`,\n );\n this.renderer.removeStyle(this.ratingEl().nativeElement, 'opacity');\n }\n this.currentValue.set(this.prevState.previousValue);\n this.prevState = {\n ishover: false,\n previousValue: undefined,\n };\n const container = this.containerEl().nativeElement;\n container.removeEventListener('mousemove', moveListener);\n container.removeEventListener('mouseup', endListener);\n container.removeEventListener('mouseleave', endListener);\n }\n\n private countDecimals(number: number): number {\n if (Math.floor(number) === number) return 0;\n return number.toString().split('.')[1].length || 0;\n }\n\n /**\n * @description\n * Determines if the component is active (i.e., not readonly or disabled).\n */\n @HostBinding('class.ax-active') get isActive() {\n return !this.readonly && !this.disabled;\n }\n\n /**\n * @description\n * Determines if the component is in readonly mode.\n */\n @HostBinding('class.ax-readonly') get isReadonly() {\n return this.readonly;\n }\n\n /**\n * @description\n * Determines if the component is disabled.\n */\n @HostBinding('class.ax-disable') get isDisabled() {\n return this.disabled;\n }\n}\n","<div\n #c\n class=\"ax-rate-picker-container\"\n (click)=\"calculateRate($event)\"\n (touchstart)=\"calculateRate($event)\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n>\n <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n <div class=\"ax-rate-picker-icons ax-rp-active\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n }\n </div>\n </div>\n <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n @for (rate of rates(); track rate) {\n <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n }\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXRatePickerComponent } from './rate-picker.component';\n\n@NgModule({\n declarations: [AXRatePickerComponent],\n imports: [CommonModule],\n exports: [AXRatePickerComponent],\n})\nexport class AXRatePickerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACG,SAAU,oBAAoB,CAAC,KAA8B,EAAA;AACjE,IAAA,IAAI,OAAe;AAEnB,IAAA,IAAI,KAAK,YAAY,UAAU,EAAE;AAC/B,QAAA,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;;AACnB,SAAA,IAAI,KAAK,YAAY,UAAU,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;QAClE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;;SAC9B;AACL,QAAA,OAAO,CAAC,CAAC,CAAC;;;IAIZ,MAAM,IAAI,GAAI,KAAK,CAAC,aAA6B,CAAC,qBAAqB,EAAE;IACzE,MAAM,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;AACnC,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;IAC5B,MAAM,UAAU,GAAG,CAAC,MAAM,GAAG,QAAQ,IAAI,GAAG,CAAC;AAE7C,IAAA,OAAO,UAAU;AACnB;;ACzBA;;;;;;;;AAQG;AAkBG,MAAO,qBAAsB,SAAQ,gBAAwB,CAAA;AAgFjE;;;AAGG;AACH,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;AApFT;;;;AAIG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;AAE3B;;;;;AAKG;AACH,QAAA,IAAA,CAAA,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC;AAEd;;;;;AAKG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;AAElB;;;;AAIG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC;AAE3B;;;AAGG;QACO,IAAc,CAAA,cAAA,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,KAAK,CAAC,GAAG,GAAG,CAAC;AAEvG;;;AAGG;QACK,IAAY,CAAA,YAAA,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;AAEzC;;;AAGG;AACK,QAAA,IAAA,CAAA,SAAS,GAAiD;AAChE,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,aAAa,EAAE,SAAS;SACzB;AAED;;;AAGG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAa,GAAG,CAAC;AAEjD;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAa,GAAG,CAAC;AAE9C;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAE5B;;;AAGG;AACO,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MACzB,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE;aACb,IAAI,CAAC,CAAC;AACN,aAAA,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC,CAChC;QAQC,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;AACzB,gBAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC;;AAExE,YAAA,OAAO,IAAI,CAAC,aAAa,EAAE;AAC7B,SAAC,CAAC;QACF,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,GAAc,KAAI;AAC/C,YAAA,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE;AACjB,gBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;AACxB,gBAAA,OAAO,CAAC,IAAI,CAAC,yCAAyC,CAAC;;iBAClD,IAAI,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,EAAE;gBACjC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;AACjC,gBAAA,OAAO,CAAC,IAAI,CAAC,8CAA8C,CAAC;;iBACvD;gBACL,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC;;AAEpC,SAAC,CAAC;;AAGJ;;;;;AAKG;AACO,IAAA,aAAa,CAAC,KAA8B,EAAA;AACpD,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;AACxB,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC;;QAExE,KAAK,CAAC,cAAc,EAAE;QACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACpC,YAAA,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,KAAK,CAAC;AACrD,YAAA,IAAI,iBAAiB,KAAK,CAAC,CAAC,EAAE;AAC5B,gBAAA,OAAO,OAAO,CAAC,IAAI,CAAC,sCAAsC,CAAC;;YAE7D,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC;YACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAChD,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,IAAI,EAAE;AACnC,gBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC;;iBACvB;AACL,gBAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACjD,IAAI,CAAC,UAAU,EAAE;;;;AAKvB;;;;;;AAMG;AACK,IAAA,WAAW,CAAC,UAAkB,EAAA;AACpC,QAAA,MAAM,KAAK,GAAG,CAAC,UAAU,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,EAAE;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;AACtE,QAAA,OAAO,MAAM;;AAGf;;;AAGG;IACO,UAAU,GAAA;QAClB,IAAI,CAAC,SAAS,GAAG;AACf,YAAA,OAAO,EAAE,IAAI;YACb,aAAa,EAAE,IAAI,CAAC,KAAK;SAC1B;AACD,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;AACxB,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC;;AAEzE,QAAA,MAAM,YAAY,GAAG,CAAC,SAAkC,KAAK,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;AAC1F,QAAA,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,WAAW,CAAC;QAC/D,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,aAAa;AAClD,QAAA,SAAS,CAAC,gBAAgB,CAAC,WAAW,EAAE,YAAY,CAAC;AACrD,QAAA,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC;AAClD,QAAA,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC;;AAGvD;;;AAGG;IACH,UAAU,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;AACxB,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC;;;AAIvE;;;;;;AAMG;IACK,KAAK,CAAC,YAAsD,EAAE,WAAuB,EAAA;AAC3F,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;YACxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CACpB,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,EAC7B,YAAY,EACZ,CAAA,MAAA,EAAS,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAyC,uCAAA,CAAA,CACxE;AACD,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC;;QAErE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;QACnD,IAAI,CAAC,SAAS,GAAG;AACf,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,aAAa,EAAE,SAAS;SACzB;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,aAAa;AAClD,QAAA,SAAS,CAAC,mBAAmB,CAAC,WAAW,EAAE,YAAY,CAAC;AACxD,QAAA,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC;AACrD,QAAA,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,WAAW,CAAC;;AAGlD,IAAA,aAAa,CAAC,MAAc,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,MAAM;AAAE,YAAA,OAAO,CAAC;AAC3C,QAAA,OAAO,MAAM,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC;;AAGpD;;;AAGG;AACH,IAAA,IAAoC,QAAQ,GAAA;QAC1C,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;;AAGzC;;;AAGG;AACH,IAAA,IAAsC,UAAU,GAAA;QAC9C,OAAO,IAAI,CAAC,QAAQ;;AAGtB;;;AAGG;AACH,IAAA,IAAqC,UAAU,GAAA;QAC7C,OAAO,IAAI,CAAC,QAAQ;;8GApOX,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAVrB,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,qBAAqB,EAAE;AACpE,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,qBAAqB,CAAC;AACpD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,GAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,GAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1CH,otBAqBA,EAAA,MAAA,EAAA,CAAA,0lDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDwBa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAjBjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAGX,aAAA,EAAA,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EACvC,CAAC,UAAU,EAAE,UAAU,CAAC,EACrB,SAAA,EAAA;AACT,wBAAA,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,uBAAuB,EAAE;AACpE,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,2BAA2B,CAAC;AACpD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,UAAA,EACW,KAAK,EAAA,QAAA,EAAA,otBAAA,EAAA,MAAA,EAAA,CAAA,0lDAAA,CAAA,EAAA;wDAqNmB,QAAQ,EAAA,CAAA;sBAA3C,WAAW;uBAAC,iBAAiB;gBAQQ,UAAU,EAAA,CAAA;sBAA/C,WAAW;uBAAC,mBAAmB;gBAQK,UAAU,EAAA,CAAA;sBAA9C,WAAW;uBAAC,kBAAkB;;;MEvQpB,kBAAkB,CAAA;8GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,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,kBAAkB,EAJd,YAAA,EAAA,CAAA,qBAAqB,CAC1B,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAEpB,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,kBAAkB,YAHnB,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAGX,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;oBACrC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACjC,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -22,11 +22,11 @@ class AXSkeletonComponent extends MXBaseComponent {
|
|
|
22
22
|
return `ax-skeleton ${this.animated ? 'ax-skeleton-animate' : ''}`;
|
|
23
23
|
}
|
|
24
24
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXSkeletonComponent, isStandalone: false, selector: "ax-skeleton", inputs: { animated: "animated" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-comp-skeleton-bg-color,
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXSkeletonComponent, isStandalone: false, selector: "ax-skeleton", inputs: { animated: "animated" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-dark);--ax-comp-skeleton-bg-opacity: .2}.ax-dark ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-light)}ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity))}ax-skeleton.ax-skeleton-animate:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:var(--ax-comp-skeleton-line-width, 14rem);content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity)) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
26
26
|
}
|
|
27
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXSkeletonComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
|
-
args: [{ selector: 'ax-skeleton', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, standalone: false, styles: ["ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-comp-skeleton-bg-color,
|
|
29
|
+
args: [{ selector: 'ax-skeleton', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, standalone: false, styles: ["ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-dark);--ax-comp-skeleton-bg-opacity: .2}.ax-dark ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-light)}ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity))}ax-skeleton.ax-skeleton-animate:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:var(--ax-comp-skeleton-line-width, 14rem);content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity)) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}\n"] }]
|
|
30
30
|
}], propDecorators: { animated: [{
|
|
31
31
|
type: Input
|
|
32
32
|
}], __hostClass: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-skeleton.mjs","sources":["../../../../libs/components/skeleton/src/lib/skeleton.component.ts","../../../../libs/components/skeleton/src/lib/skeleton.module.ts","../../../../libs/components/skeleton/src/acorex-components-skeleton.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\n/**\n * @category\n * A skeleton component used for loading placeholders.\n */\n@Component({\n selector: 'ax-skeleton',\n template: '<ng-content></ng-content>',\n styleUrls: ['./skeleton.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class AXSkeletonComponent extends MXBaseComponent {\n /**\n * Determines whether animations are enabled.\n *\n * @defaultValue true\n */\n @Input() animated = true;\n\n /** @ignore */\n @HostBinding('class')\n get __hostClass(): string {\n return `ax-skeleton ${this.animated ? 'ax-skeleton-animate' : ''}`;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXSkeletonComponent } from './skeleton.component';\n@NgModule({\n declarations: [AXSkeletonComponent],\n imports: [CommonModule],\n exports: [AXSkeletonComponent],\n})\nexport class AXSkeletonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAGA;;;AAGG;AAQG,MAAO,mBAAoB,SAAQ,eAAe,CAAA;AAPxD,IAAA,WAAA,GAAA;;AAQE;;;;AAIG;QACM,IAAQ,CAAA,QAAA,GAAG,IAAI;AAOzB;;AAJC,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,CAAe,YAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EAAE;;8GAXzD,mBAAmB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,wLALlB,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"acorex-components-skeleton.mjs","sources":["../../../../libs/components/skeleton/src/lib/skeleton.component.ts","../../../../libs/components/skeleton/src/lib/skeleton.module.ts","../../../../libs/components/skeleton/src/acorex-components-skeleton.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\n/**\n * @category\n * A skeleton component used for loading placeholders.\n */\n@Component({\n selector: 'ax-skeleton',\n template: '<ng-content></ng-content>',\n styleUrls: ['./skeleton.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class AXSkeletonComponent extends MXBaseComponent {\n /**\n * Determines whether animations are enabled.\n *\n * @defaultValue true\n */\n @Input() animated = true;\n\n /** @ignore */\n @HostBinding('class')\n get __hostClass(): string {\n return `ax-skeleton ${this.animated ? 'ax-skeleton-animate' : ''}`;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXSkeletonComponent } from './skeleton.component';\n@NgModule({\n declarations: [AXSkeletonComponent],\n imports: [CommonModule],\n exports: [AXSkeletonComponent],\n})\nexport class AXSkeletonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAGA;;;AAGG;AAQG,MAAO,mBAAoB,SAAQ,eAAe,CAAA;AAPxD,IAAA,WAAA,GAAA;;AAQE;;;;AAIG;QACM,IAAQ,CAAA,QAAA,GAAG,IAAI;AAOzB;;AAJC,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,CAAe,YAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EAAE;;8GAXzD,mBAAmB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,wLALlB,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,sxBAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAK5B,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,YACb,2BAA2B,EAAA,aAAA,EAEtB,iBAAiB,CAAC,IAAI,cACzB,KAAK,EAAA,MAAA,EAAA,CAAA,sxBAAA,CAAA,EAAA;8BAQV,QAAQ,EAAA,CAAA;sBAAhB;gBAIG,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,OAAO;;;MCfT,gBAAgB,CAAA;8GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAhB,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,gBAAgB,EAJZ,YAAA,EAAA,CAAA,mBAAmB,CACxB,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,mBAAmB,CAAA,EAAA,CAAA,CAAA;AAElB,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,gBAAgB,YAHjB,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAGX,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,mBAAmB,CAAC;oBACnC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,mBAAmB,CAAC;AAC/B,iBAAA;;;ACPD;;AAEG;;;;"}
|