@acorex/components 7.3.2 → 7.4.1

package/fesm2022/acorex-components-text-box.mjs

@@ -9,10 +9,10 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import { CommonModule } from '@angular/common';
 
 class AXMaskOptionsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXMaskOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.8", type: AXMaskOptionsDirective, selector: "ax-mask-options", inputs: { mask: "mask", updateValue: "updateValue" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMaskOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXMaskOptionsDirective, selector: "ax-mask-options", inputs: { mask: "mask", updateValue: "updateValue" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXMaskOptionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMaskOptionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ax-mask-options',
@@ -71,8 +71,8 @@ class AXTextBoxComponent extends MXInputBaseValueComponent {
     _handleModelChange(value) {
         this.commitValue(value, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", id: "id", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", maskOptions: ["mask-options", "maskOptions"] }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { classAttribute: "ax-editor-container" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", id: "id", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", maskOptions: ["mask-options", "maskOptions"] }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { classAttribute: "ax-editor-container" }, providers: [
             { provide: AXComponent, useExisting: AXTextBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXTextBoxComponent },
             { provide: AXClearableComponent, useExisting: AXTextBoxComponent },
@@ -84,7 +84,7 @@ class AXTextBoxComponent extends MXInputBaseValueComponent {
             }
         ], queries: [{ propertyName: "_maskOptionsContent", first: true, predicate: AXMaskOptionsDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" [id]=\"id\" [name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\" (ngModelChange)=\"_handleModelChange($event)\" [ngModelOptions]=\"{ updateOn:_updateOn }\"\n    (keydown)=\"emitOnKeydownEvent($event)\" (keyup)=\"emitOnKeyupEvent($event)\" (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\">\n<ng-content select=\"ax-clear-button\"></ng-content>\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>", dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTextBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-text-box', inputs: [
                         'disabled',
@@ -128,19 +128,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
             }] } });
 
 class AXTextBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.8", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent, AXMaskOptionsDirective], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent, AXMaskOptionsDirective], imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXButtonModule,
             AXDecoratorModule], exports: [AXTextBoxComponent, AXMaskOptionsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXButtonModule,
             AXDecoratorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTextBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/acorex-components-toast.mjs

@@ -93,10 +93,10 @@ class AXToastComponent extends MXBaseComponent {
             htmlElement: this.getHostElement(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXToastComponent, deps: [{ token: DIALOG_DATA }, { token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: AXToastComponent, selector: "ax-toast", host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }], usesInheritance: true, ngImport: i0, template: "<span [class]=\"'ax-toast-icon {{_icon}}'\"></span>\n<div class=\"ax-toast-content\">\n  <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">{{ config.title }}</div>\n  <div class=\"ax-toast-content\" [innerHTML]=\"config.content\"></div>\n</div>\n<ax-close-button *ngIf=\"config.closeButton\"></ax-close-button>\n<div class=\"ax-toast-progress\" [style.animation-duration.ms]=\"config.timeOut\"\n  *ngIf=\"config.timeOutProgress && config.timeOut\"></div>", styles: [".ax-dark ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-600));color:rgba(var(--ax-color-primary-fore));border-color:rgba(var(--ax-color-primary-600))}.ax-dark ax-toast.ax-primary .ax-toast-title{color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-toast.ax-primary ax-button[class$=blank]{color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-600));color:rgba(var(--ax-color-secondary-fore));border-color:rgba(var(--ax-color-secondary-600))}.ax-dark ax-toast.ax-secondary .ax-toast-title{color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-toast.ax-secondary ax-button[class$=blank]{color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-200))}.ax-dark ax-toast.ax-success{background-color:rgba(var(--ax-color-success-600));color:rgba(var(--ax-color-success-fore));border-color:rgba(var(--ax-color-success-600))}.ax-dark ax-toast.ax-success .ax-toast-title{color:rgba(var(--ax-color-success-fore))}.ax-dark ax-toast.ax-success ax-button[class$=blank]{color:rgba(var(--ax-color-success-fore))}.ax-dark ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-200))}.ax-dark ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-600));color:rgba(var(--ax-color-warning-fore));border-color:rgba(var(--ax-color-warning-600))}.ax-dark ax-toast.ax-warning .ax-toast-title{color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-toast.ax-warning ax-button[class$=blank]{color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-200))}.ax-dark ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-600));color:rgba(var(--ax-color-danger-fore));border-color:rgba(var(--ax-color-danger-600))}.ax-dark ax-toast.ax-danger .ax-toast-title{color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-toast.ax-danger ax-button[class$=blank]{color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-200))}.ax-dark ax-toast.ax-info{background-color:rgba(var(--ax-color-info-600));color:rgba(var(--ax-color-info-fore));border-color:rgba(var(--ax-color-info-600))}.ax-dark ax-toast.ax-info .ax-toast-title{color:rgba(var(--ax-color-info-fore))}.ax-dark ax-toast.ax-info ax-button[class$=blank]{color:rgba(var(--ax-color-info-fore))}.ax-dark ax-toast.ax-info .ax-toast-progress{background-color:rgba(var(--ax-color-info-200))}ax-toast{width:max(20vw,380px);display:flex;padding:.75rem 1rem;border-radius:var(--ax-rounded-border-default);font-size:.875rem;background-color:rgba(var(--ax-color-black));color:rgba(var(--ax-color-white));border-color:rgba(var(--ax-color-border-default));position:relative;overflow:hidden;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f}ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-800))}ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-800))}ax-toast.ax-success{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-800))}ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-800))}ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-800))}ax-toast.ax-info{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-toast.ax-info .ax-toast-progress{background-color:rgba(var(--ax-color-info-800))}@media (max-width: 599px){ax-toast{width:98vw}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem}ax-toast .ax-toast-icon{padding-inline-end:.75rem}ax-toast .ax-toast-content{display:flex;flex-direction:column;flex:1}ax-toast .ax-toast-content .ax-toast-title{font-weight:500}ax-toast .ax-toast-content .ax-toast-title.ax-mb-2{margin-bottom:.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin:.75rem 0;display:flex;gap:.5rem}ax-toast .ax-toast-content .ax-toast-buttons ax-button{color:inherit!important;margin-inline-end:.5rem}ax-toast .ax-toast-content .ax-toast-buttons ax-button[class*=default]{background-color:#fff3!important;border-color:transparent!important}ax-toast .ax-toast-content .ax-toast-buttons ax-button[class*=outline]{background-color:transparent!important;color:inherit!important;border-color:currentColor!important;border:2px solid}ax-toast .ax-toast-content .ax-toast-buttons ax-button[class*=blank]{background-color:transparent!important;color:inherit!important}ax-toast ax-icon-close{height:-moz-fit-content;height:fit-content}ax-toast ax-icon-close:hover{opacity:.6}ax-toast .ax-toast-progress{position:absolute;right:0;left:0;bottom:0;height:.25rem;width:100%;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar;background-color:#ffffff75}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXToastComponent, deps: [{ token: DIALOG_DATA }, { token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXToastComponent, selector: "ax-toast", host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }], usesInheritance: true, ngImport: i0, template: "<span [class]=\"'ax-toast-icon {{_icon}}'\"></span>\n<div class=\"ax-toast-content\">\n  <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">{{ config.title }}</div>\n  <div class=\"ax-toast-content\" [innerHTML]=\"config.content\"></div>\n</div>\n<ax-close-button *ngIf=\"config.closeButton\"></ax-close-button>\n<div class=\"ax-toast-progress\" [style.animation-duration.ms]=\"config.timeOut\"\n  *ngIf=\"config.timeOutProgress && config.timeOut\"></div>", styles: [".ax-dark ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-600));color:rgba(var(--ax-color-primary-fore));border-color:rgba(var(--ax-color-primary-600))}.ax-dark ax-toast.ax-primary .ax-toast-title{color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-toast.ax-primary ax-button[class$=blank]{color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-600));color:rgba(var(--ax-color-secondary-fore));border-color:rgba(var(--ax-color-secondary-600))}.ax-dark ax-toast.ax-secondary .ax-toast-title{color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-toast.ax-secondary ax-button[class$=blank]{color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-200))}.ax-dark ax-toast.ax-success{background-color:rgba(var(--ax-color-success-600));color:rgba(var(--ax-color-success-fore));border-color:rgba(var(--ax-color-success-600))}.ax-dark ax-toast.ax-success .ax-toast-title{color:rgba(var(--ax-color-success-fore))}.ax-dark ax-toast.ax-success ax-button[class$=blank]{color:rgba(var(--ax-color-success-fore))}.ax-dark ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-200))}.ax-dark ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-600));color:rgba(var(--ax-color-warning-fore));border-color:rgba(var(--ax-color-warning-600))}.ax-dark ax-toast.ax-warning .ax-toast-title{color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-toast.ax-warning ax-button[class$=blank]{color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-200))}.ax-dark ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-600));color:rgba(var(--ax-color-danger-fore));border-color:rgba(var(--ax-color-danger-600))}.ax-dark ax-toast.ax-danger .ax-toast-title{color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-toast.ax-danger ax-button[class$=blank]{color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-200))}.ax-dark ax-toast.ax-info{background-color:rgba(var(--ax-color-info-600));color:rgba(var(--ax-color-info-fore));border-color:rgba(var(--ax-color-info-600))}.ax-dark ax-toast.ax-info .ax-toast-title{color:rgba(var(--ax-color-info-fore))}.ax-dark ax-toast.ax-info ax-button[class$=blank]{color:rgba(var(--ax-color-info-fore))}.ax-dark ax-toast.ax-info .ax-toast-progress{background-color:rgba(var(--ax-color-info-200))}ax-toast{width:max(20vw,380px);display:flex;padding:.75rem 1rem;border-radius:var(--ax-rounded-border-default);font-size:.875rem;background-color:rgba(var(--ax-color-black));color:rgba(var(--ax-color-white));border-color:rgba(var(--ax-color-border-default));position:relative;overflow:hidden;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f}ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-800))}ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-800))}ax-toast.ax-success{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-800))}ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-800))}ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-800))}ax-toast.ax-info{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-toast.ax-info .ax-toast-progress{background-color:rgba(var(--ax-color-info-800))}@media (max-width: 599px){ax-toast{width:98vw}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem}ax-toast .ax-toast-icon{padding-inline-end:.75rem}ax-toast .ax-toast-content{display:flex;flex-direction:column;flex:1}ax-toast .ax-toast-content .ax-toast-title{font-weight:500}ax-toast .ax-toast-content .ax-toast-title.ax-mb-2{margin-bottom:.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin:.75rem 0;display:flex;gap:.5rem}ax-toast .ax-toast-content .ax-toast-buttons ax-button{color:inherit!important;margin-inline-end:.5rem}ax-toast .ax-toast-content .ax-toast-buttons ax-button[class*=default]{background-color:#fff3!important;border-color:transparent!important}ax-toast .ax-toast-content .ax-toast-buttons ax-button[class*=outline]{background-color:transparent!important;color:inherit!important;border-color:currentColor!important;border:2px solid}ax-toast .ax-toast-content .ax-toast-buttons ax-button[class*=blank]{background-color:transparent!important;color:inherit!important}ax-toast ax-icon-close{height:-moz-fit-content;height:fit-content}ax-toast ax-icon-close:hover{opacity:.6}ax-toast .ax-toast-progress{position:absolute;right:0;left:0;bottom:0;height:.25rem;width:100%;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar;background-color:#ffffff75}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }], template: "<span [class]=\"'ax-toast-icon {{_icon}}'\"></span>\n<div class=\"ax-toast-content\">\n  <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">{{ config.title }}</div>\n  <div class=\"ax-toast-content\" [innerHTML]=\"config.content\"></div>\n</div>\n<ax-close-button *ngIf=\"config.closeButton\"></ax-close-button>\n<div class=\"ax-toast-progress\" [style.animation-duration.ms]=\"config.timeOut\"\n  *ngIf=\"config.timeOutProgress && config.timeOut\"></div>", styles: [".ax-dark ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-600));color:rgba(var(--ax-color-primary-fore));border-color:rgba(var(--ax-color-primary-600))}.ax-dark ax-toast.ax-primary .ax-toast-title{color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-toast.ax-primary ax-button[class$=blank]{color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-600));color:rgba(var(--ax-color-secondary-fore));border-color:rgba(var(--ax-color-secondary-600))}.ax-dark ax-toast.ax-secondary .ax-toast-title{color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-toast.ax-secondary ax-button[class$=blank]{color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-200))}.ax-dark ax-toast.ax-success{background-color:rgba(var(--ax-color-success-600));color:rgba(var(--ax-color-success-fore));border-color:rgba(var(--ax-color-success-600))}.ax-dark ax-toast.ax-success .ax-toast-title{color:rgba(var(--ax-color-success-fore))}.ax-dark ax-toast.ax-success ax-button[class$=blank]{color:rgba(var(--ax-color-success-fore))}.ax-dark ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-200))}.ax-dark ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-600));color:rgba(var(--ax-color-warning-fore));border-color:rgba(var(--ax-color-warning-600))}.ax-dark ax-toast.ax-warning .ax-toast-title{color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-toast.ax-warning ax-button[class$=blank]{color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-200))}.ax-dark ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-600));color:rgba(var(--ax-color-danger-fore));border-color:rgba(var(--ax-color-danger-600))}.ax-dark ax-toast.ax-danger .ax-toast-title{color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-toast.ax-danger ax-button[class$=blank]{color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-200))}.ax-dark ax-toast.ax-info{background-color:rgba(var(--ax-color-info-600));color:rgba(var(--ax-color-info-fore));border-color:rgba(var(--ax-color-info-600))}.ax-dark ax-toast.ax-info .ax-toast-title{color:rgba(var(--ax-color-info-fore))}.ax-dark ax-toast.ax-info ax-button[class$=blank]{color:rgba(var(--ax-color-info-fore))}.ax-dark ax-toast.ax-info .ax-toast-progress{background-color:rgba(var(--ax-color-info-200))}ax-toast{width:max(20vw,380px);display:flex;padding:.75rem 1rem;border-radius:var(--ax-rounded-border-default);font-size:.875rem;background-color:rgba(var(--ax-color-black));color:rgba(var(--ax-color-white));border-color:rgba(var(--ax-color-border-default));position:relative;overflow:hidden;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f}ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-800))}ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-800))}ax-toast.ax-success{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-800))}ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-800))}ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-800))}ax-toast.ax-info{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-toast.ax-info .ax-toast-progress{background-color:rgba(var(--ax-color-info-800))}@media (max-width: 599px){ax-toast{width:98vw}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem}ax-toast .ax-toast-icon{padding-inline-end:.75rem}ax-toast .ax-toast-content{display:flex;flex-direction:column;flex:1}ax-toast .ax-toast-content .ax-toast-title{font-weight:500}ax-toast .ax-toast-content .ax-toast-title.ax-mb-2{margin-bottom:.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin:.75rem 0;display:flex;gap:.5rem}ax-toast .ax-toast-content .ax-toast-buttons ax-button{color:inherit!important;margin-inline-end:.5rem}ax-toast .ax-toast-content .ax-toast-buttons ax-button[class*=default]{background-color:#fff3!important;border-color:transparent!important}ax-toast .ax-toast-content .ax-toast-buttons ax-button[class*=outline]{background-color:transparent!important;color:inherit!important;border-color:currentColor!important;border:2px solid}ax-toast .ax-toast-content .ax-toast-buttons ax-button[class*=blank]{background-color:transparent!important;color:inherit!important}ax-toast ax-icon-close{height:-moz-fit-content;height:fit-content}ax-toast ax-icon-close:hover{opacity:.6}ax-toast .ax-toast-progress{position:absolute;right:0;left:0;bottom:0;height:.25rem;width:100%;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar;background-color:#ffffff75}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -220,23 +220,23 @@ class AXToastService {
             return list[list.length - 1].getHostElement().offsetTop + list[list.length - 1].getHostElement().offsetHeight;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXToastService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXToastService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXToastService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXToastService, decorators: [{
             type: Injectable
         }] });
 
 const COMPONENT = [AXToastComponent];
 const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, DialogModule];
 class AXToastModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.8", ngImport: i0, type: AXToastModule, declarations: [AXToastComponent], imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, DialogModule], exports: [AXToastComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXToastModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXToastModule, declarations: [AXToastComponent], imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, DialogModule], exports: [AXToastComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXToastModule, providers: [
             AXToastService,
         ], imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXToastModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-tooltip.mjs

@@ -1,188 +1,76 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
+import { MXBaseComponent, convertToPlacement } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, Directive, HostListener, NgModule } from '@angular/core';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { AXPositions } from '@acorex/components/common';
+import { Component, ViewEncapsulation, Input, TemplateRef, Directive, NgModule } from '@angular/core';
+import { AXPopoverComponent } from '@acorex/components/popover';
 import { CommonModule } from '@angular/common';
+import { OverlayModule } from '@angular/cdk/overlay';
 
-class AXTooltipComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.text = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: AXTooltipComponent, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\n  <div class=\"ax-tooltip\">\n    {{ text }}\n  </div>\n  <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div>\n</div>\n", styles: [".ax-dark .ax-tooltip-container{--ax-tooltip-background: 255, 255, 255;--ax-tooltip-color: 97, 97, 97}.ax-tooltip-container{position:relative;--ax-tooltip-background: 97, 97, 97;--ax-tooltip-color: 255, 255, 255}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-tooltip-background));color:rgba(var(--ax-tooltip-color));border-radius:.25rem;font-size:.75rem;font-weight:400}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+class AXTooltipComponent extends MXBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXTooltipComponent, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\n  <div class=\"ax-tooltip\">\n    {{ text }}\n  </div>\n  <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>", styles: [".ax-dark .ax-tooltip-container{--ax-tooltip-background: 255, 255, 255;--ax-tooltip-color: 97, 97, 97}.ax-tooltip-container{position:relative;--ax-tooltip-background: 97, 97, 97;--ax-tooltip-color: 255, 255, 255}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-tooltip-background));color:rgba(var(--ax-tooltip-color));border-radius:.25rem;font-size:.75rem;font-weight:400}.ax-tooltip-container .ax-tooltip-tringle{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid rgba(var(--ax-tooltip-background));position:absolute}.ax-tooltip-container .ax-tooltip-tringle.ax-tooltip-tringle-bottom{transform:rotate(180deg);left:0;right:0;margin:auto;top:-5px}.ax-tooltip-container .ax-tooltip-tringle.ax-tooltip-tringle-right{transform:rotate(90deg);top:0;bottom:0;margin:auto;left:-7px}.ax-tooltip-container .ax-tooltip-tringle.ax-tooltip-tringle-top{transform:rotate(0);left:0;right:0;margin:auto}.ax-tooltip-container .ax-tooltip-tringle.ax-tooltip-tringle-left{transform:rotate(270deg);top:0;bottom:0;margin:auto;right:-7px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tooltip', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-tooltip-container\">\n  <div class=\"ax-tooltip\">\n    {{ text }}\n  </div>\n  <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div>\n</div>\n", styles: [".ax-dark .ax-tooltip-container{--ax-tooltip-background: 255, 255, 255;--ax-tooltip-color: 97, 97, 97}.ax-tooltip-container{position:relative;--ax-tooltip-background: 97, 97, 97;--ax-tooltip-color: 255, 255, 255}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-tooltip-background));color:rgba(var(--ax-tooltip-color));border-radius:.25rem;font-size:.75rem;font-weight:400}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+            args: [{ selector: 'ax-tooltip', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-tooltip-container\">\n  <div class=\"ax-tooltip\">\n    {{ text }}\n  </div>\n  <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>", styles: [".ax-dark .ax-tooltip-container{--ax-tooltip-background: 255, 255, 255;--ax-tooltip-color: 97, 97, 97}.ax-tooltip-container{position:relative;--ax-tooltip-background: 97, 97, 97;--ax-tooltip-color: 255, 255, 255}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-tooltip-background));color:rgba(var(--ax-tooltip-color));border-radius:.25rem;font-size:.75rem;font-weight:400}.ax-tooltip-container .ax-tooltip-tringle{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid rgba(var(--ax-tooltip-background));position:absolute}.ax-tooltip-container .ax-tooltip-tringle.ax-tooltip-tringle-bottom{transform:rotate(180deg);left:0;right:0;margin:auto;top:-5px}.ax-tooltip-container .ax-tooltip-tringle.ax-tooltip-tringle-right{transform:rotate(90deg);top:0;bottom:0;margin:auto;left:-7px}.ax-tooltip-container .ax-tooltip-tringle.ax-tooltip-tringle-top{transform:rotate(0);left:0;right:0;margin:auto}.ax-tooltip-container .ax-tooltip-tringle.ax-tooltip-tringle-left{transform:rotate(270deg);top:0;bottom:0;margin:auto;right:-7px}\n"] }]
+        }], propDecorators: { text: [{
                 type: Input
             }], position: [{
                 type: Input
             }] } });
 
 class AXTooltipDirective {
-    constructor(overlay, overlayPositionBuilder, elementRef, cdr) {
-        this.overlay = overlay;
-        this.overlayPositionBuilder = overlayPositionBuilder;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.text = '';
-        this.position = 'top-center';
-    }
-    ngOnInit() {
-        //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
-        //Add 'implements OnInit' to the class.
-        this.positioning();
+    get placement() {
+        return this._placement;
     }
-    ngAfterViewInit() { }
-    positioning() {
-        const offset = 8;
-        switch (this.position) {
-            case 'top-start':
-                this.positions = [
-                    {
-                        ...AXPositions.topStart,
-                        offsetY: -offset,
-                    },
-                ];
-                break;
-            default:
-            case 'top-center':
-                this.positions = [
-                    {
-                        ...AXPositions.topCenter,
-                        offsetY: -offset,
-                    },
-                ];
-                break;
-            case 'top-end':
-                this.positions = [
-                    {
-                        ...AXPositions.topEnd,
-                        offsetY: -offset,
-                    },
-                ];
-                break;
-            case 'start-start':
-                this.positions = [
-                    {
-                        ...AXPositions.startStart,
-                        offsetX: -offset,
-                    },
-                ];
-                break;
-            case 'start-center':
-                this.positions = [
-                    {
-                        ...AXPositions.startCenter,
-                        offsetX: -offset,
-                    },
-                ];
-                break;
-            case 'start-end':
-                this.positions = [
-                    {
-                        ...AXPositions.startEnd,
-                        offsetX: -offset,
-                    },
-                ];
-                break;
-            case 'bottom-start':
-                this.positions = [
-                    {
-                        ...AXPositions.bottomStart,
-                        offsetY: offset,
-                    },
-                ];
-                break;
-            case 'bottom-center':
-                this.positions = [
-                    {
-                        ...AXPositions.bottomCenter,
-                        offsetY: offset,
-                    },
-                ];
-                break;
-            case 'bottom-end':
-                this.positions = [
-                    {
-                        ...AXPositions.bottomEnd,
-                        offsetY: offset,
-                    },
-                ];
-                break;
-            case 'end-start':
-                this.positions = [
-                    {
-                        ...AXPositions.endStart,
-                        offsetX: offset,
-                    },
-                ];
-                break;
-            case 'end-center':
-                this.positions = [
-                    {
-                        ...AXPositions.endCenter,
-                        offsetX: offset,
-                    },
-                ];
-                break;
-            case 'end-end':
-                this.positions = [
-                    {
-                        ...AXPositions.endEnd,
-                        offsetX: offset,
-                    },
-                ];
-                break;
+    set placement(v) {
+        this._placement = v;
+        if (this.popupRef) {
+            this.popupRef.placement = v;
         }
-        const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions(this.positions);
-        this.overlayRef = this.overlay.create({ positionStrategy });
     }
-    show() {
-        const tooltipRef = this.overlayRef.attach(new ComponentPortal(AXTooltipComponent));
-        tooltipRef.instance.text = this.text;
-        tooltipRef.instance.position = this.position;
-        setTimeout(() => {
-            this.cdr.markForCheck();
-        });
+    constructor(elementRef, vc) {
+        this.elementRef = elementRef;
+        this.vc = vc;
+        this._placement = convertToPlacement("top");
+        this.popupRef = this.vc.createComponent(AXPopoverComponent).instance;
+        this.popupRef.target = this.elementRef.nativeElement;
     }
-    hide() {
-        this.overlayRef.detach();
-        this.cdr.markForCheck();
+    ngOnInit() {
+        this.popupRef.target = this.elementRef.nativeElement;
+        this.popupRef.openOn = 'hover';
+        this.popupRef.closeOn = 'leave';
+        this.popupRef.placement = this.placement;
+        if (typeof this.content === 'string') {
+            this.popupRef.content = AXTooltipComponent;
+            this.popupRef.context = { text: this.content };
+        }
+        else if (this.content instanceof TemplateRef) {
+            this.popupRef.content = this.content;
+            //this.popupRef.context = { text: this.content };
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i1.Overlay }, { token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.8", type: AXTooltipDirective, selector: "[axTooltip]", inputs: { text: ["axTooltip", "text"], position: ["axTooltipPosition", "position"] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXTooltipDirective, selector: "[axTooltip]", inputs: { content: ["axTooltip", "content"], placement: ["axTooltipPlacement", "placement"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTooltipDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axTooltip]' }]
-        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { content: [{
                 type: Input,
                 args: ['axTooltip']
-            }], position: [{
+            }], placement: [{
                 type: Input,
-                args: ['axTooltipPosition']
-            }], show: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], hide: [{
-                type: HostListener,
-                args: ['mouseleave']
+                args: ['axTooltipPlacement']
             }] } });
 
 const COMPONENT = [AXTooltipComponent, AXTooltipDirective];
 const MODULES = [CommonModule, OverlayModule];
 class AXTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.8", ngImport: i0, type: AXTooltipModule, declarations: [AXTooltipComponent, AXTooltipDirective], imports: [CommonModule, OverlayModule], exports: [AXTooltipComponent, AXTooltipDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTooltipModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXTooltipModule, declarations: [AXTooltipComponent, AXTooltipDirective], imports: [CommonModule, OverlayModule], exports: [AXTooltipComponent, AXTooltipDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTooltipModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-tooltip.mjs","sources":["../../../../libs/components/tooltip/src/lib/tooltip.component.ts","../../../../libs/components/tooltip/src/lib/tooltip.component.html","../../../../libs/components/tooltip/src/lib/tooltip.directive.ts","../../../../libs/components/tooltip/src/lib/tooltip.module.ts","../../../../libs/components/tooltip/src/acorex-components-tooltip.ts"],"sourcesContent":["import { AXPosition } from '@acorex/components/common';\nimport { AXBaseComponentMixin } from '@acorex/components/mixin';\nimport { Component, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input } from '@angular/core';\n\n@Component({\n  selector: 'ax-tooltip',\n  templateUrl: './tooltip.component.html',\n  styleUrls: ['./tooltip.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXTooltipComponent extends AXBaseComponentMixin {\n  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {\n    super(elementRef, cdr);\n  }\n\n  @Input()\n  text: string = '';\n\n  @Input() position: AXPosition;\n}\n","<div class=\"ax-tooltip-container\">\n  <div class=\"ax-tooltip\">\n    {{ text }}\n  </div>\n  <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div>\n</div>\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  ComponentRef,\n  Directive,\n  ElementRef,\n  HostListener,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { AXTooltipComponent } from './tooltip.component';\nimport { AXPosition, AXPositions } from '@acorex/components/common';\n\n@Directive({ selector: '[axTooltip]' })\nexport class AXTooltipDirective {\n  @Input('axTooltip') text = '';\n  @Input('axTooltipPosition') position: AXPosition = 'top-center';\n\n  private overlayRef: OverlayRef;\n  protected positions: any[];\n\n  constructor(\n    private overlay: Overlay,\n    private overlayPositionBuilder: OverlayPositionBuilder,\n    private elementRef: ElementRef,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.\n    //Add 'implements OnInit' to the class.\n    this.positioning();\n  }\n  ngAfterViewInit(): void {}\n\n  protected positioning() {\n    const offset = 8;\n    switch (this.position) {\n      case 'top-start':\n        this.positions = [\n          {\n            ...AXPositions.topStart,\n            offsetY: -offset,\n          },\n        ];\n        break;\n      default:\n      case 'top-center':\n        this.positions = [\n          {\n            ...AXPositions.topCenter,\n            offsetY: -offset,\n          },\n        ];\n        break;\n      case 'top-end':\n        this.positions = [\n          {\n            ...AXPositions.topEnd,\n            offsetY: -offset,\n          },\n        ];\n        break;\n\n      case 'start-start':\n        this.positions = [\n          {\n            ...AXPositions.startStart,\n            offsetX: -offset,\n          },\n        ];\n        break;\n\n      case 'start-center':\n        this.positions = [\n          {\n            ...AXPositions.startCenter,\n            offsetX: -offset,\n          },\n        ];\n        break;\n\n      case 'start-end':\n        this.positions = [\n          {\n            ...AXPositions.startEnd,\n            offsetX: -offset,\n          },\n        ];\n        break;\n\n      case 'bottom-start':\n        this.positions = [\n          {\n            ...AXPositions.bottomStart,\n            offsetY: offset,\n          },\n        ];\n        break;\n      case 'bottom-center':\n        this.positions = [\n          {\n            ...AXPositions.bottomCenter,\n            offsetY: offset,\n          },\n        ];\n        break;\n      case 'bottom-end':\n        this.positions = [\n          {\n            ...AXPositions.bottomEnd,\n            offsetY: offset,\n          },\n        ];\n        break;\n\n      case 'end-start':\n        this.positions = [\n          {\n            ...AXPositions.endStart,\n            offsetX: offset,\n          },\n        ];\n        break;\n      case 'end-center':\n        this.positions = [\n          {\n            ...AXPositions.endCenter,\n            offsetX: offset,\n          },\n        ];\n        break;\n      case 'end-end':\n        this.positions = [\n          {\n            ...AXPositions.endEnd,\n            offsetX: offset,\n          },\n        ];\n        break;\n    }\n    const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions(this.positions);\n    this.overlayRef = this.overlay.create({ positionStrategy });\n  }\n\n  @HostListener('mouseenter')\n  show() {\n    const tooltipRef: ComponentRef<AXTooltipComponent> = this.overlayRef.attach(new ComponentPortal(AXTooltipComponent));\n    tooltipRef.instance.text = this.text;\n    tooltipRef.instance.position = this.position;\n    setTimeout(() => {\n      this.cdr.markForCheck();\n    });\n  }\n\n  @HostListener('mouseleave')\n  hide() {\n    this.overlayRef.detach();\n    this.cdr.markForCheck();\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXTooltipComponent } from './tooltip.component';\nimport { AXTooltipDirective } from './tooltip.directive';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nconst COMPONENT = [AXTooltipComponent, AXTooltipDirective];\nconst MODULES = [CommonModule, OverlayModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n})\nexport class AXTooltipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-tooltip.mjs","sources":["../../../../libs/components/tooltip/src/lib/tooltip.component.ts","../../../../libs/components/tooltip/src/lib/tooltip.component.html","../../../../libs/components/tooltip/src/lib/tooltip.directive.ts","../../../../libs/components/tooltip/src/lib/tooltip.module.ts","../../../../libs/components/tooltip/src/acorex-components-tooltip.ts"],"sourcesContent":["import { AXPlacement, MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation, Input } from '@angular/core';\n\n@Component({\n  selector: 'ax-tooltip',\n  templateUrl: './tooltip.component.html',\n  styleUrls: ['./tooltip.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXTooltipComponent extends MXBaseComponent {\n\n  @Input()\n  text: string;\n\n  @Input()\n  position: AXPlacement;\n}\n","<div class=\"ax-tooltip-container\">\n  <div class=\"ax-tooltip\">\n    {{ text }}\n  </div>\n  <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>","import {\n  Directive,\n  ElementRef,\n  Input,\n  OnInit,\n  TemplateRef,\n  ViewContainerRef,\n} from '@angular/core';\nimport { AXTooltipComponent } from './tooltip.component';\nimport { AXPlacementType, convertToPlacement } from '@acorex/components/common';\nimport { AXPopoverComponent } from '@acorex/components/popover';\n\n@Directive({ selector: '[axTooltip]' })\nexport class AXTooltipDirective implements OnInit {\n\n  @Input('axTooltip')\n  public content: string | TemplateRef<unknown>;\n\n  private _placement: AXPlacementType = convertToPlacement(\"top\");\n  @Input('axTooltipPlacement')\n  public get placement(): AXPlacementType {\n    return this._placement;\n  }\n  public set placement(v: AXPlacementType) {\n    this._placement = v;\n    if (this.popupRef) {\n      this.popupRef.placement = v;\n    }\n  }\n\n  private popupRef: AXPopoverComponent;\n\n  constructor(\n    private elementRef: ElementRef,\n    private vc: ViewContainerRef\n  ) {\n    this.popupRef = this.vc.createComponent(AXPopoverComponent).instance\n    this.popupRef.target = this.elementRef.nativeElement;\n  }\n\n  ngOnInit(): void {\n    this.popupRef.target = this.elementRef.nativeElement;\n    this.popupRef.openOn = 'hover';\n    this.popupRef.closeOn = 'leave';\n    this.popupRef.placement = this.placement;\n    if (typeof this.content === 'string') {\n      this.popupRef.content = AXTooltipComponent;\n      this.popupRef.context = { text: this.content };\n    }\n    else if (this.content instanceof TemplateRef) {\n      this.popupRef.content = this.content;\n      //this.popupRef.context = { text: this.content };\n    }\n  }\n}","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXTooltipComponent } from './tooltip.component';\nimport { AXTooltipDirective } from './tooltip.directive';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nconst COMPONENT = [AXTooltipComponent, AXTooltipDirective];\nconst MODULES = [CommonModule, OverlayModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n})\nexport class AXTooltipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}