@acorex/components 16.19.12 → 16.19.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ElementRef, Input, Inject, Optional, Component, Injectable, EventEmitter, Output, Directive, ContentChild, ViewChild, TemplateRef, HostListener, ViewEncapsulation, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren,
|
|
2
|
+
import { ElementRef, Input, Inject, Optional, Component, Injectable, EventEmitter, Output, Directive, ContentChild, ViewChild, TemplateRef, HostListener, ViewEncapsulation, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, input, ViewChildren, output, inject, model, contentChild, afterNextRender, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i1$2 from '@acorex/core';
|
|
4
4
|
import { AXTranslator, AXHtmlUtil, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXPlatform, AXObjectUtil, AXScrollModule, setPropByPath, AXColorUtil } from '@acorex/core';
|
|
5
5
|
import * as i1 from '@angular/cdk/overlay';
|
|
@@ -15,9 +15,9 @@ import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
|
15
15
|
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
16
16
|
import * as i2$2 from '@angular/forms';
|
|
17
17
|
import { FormsModule } from '@angular/forms';
|
|
18
|
+
import moment from 'jalali-moment';
|
|
18
19
|
import * as i3 from 'ngx-mask';
|
|
19
20
|
import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
|
|
20
|
-
import moment from 'jalali-moment';
|
|
21
21
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
22
22
|
import * as i5 from '@angular/cdk/a11y';
|
|
23
23
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
@@ -1003,11 +1003,11 @@ class AXCalendarBoxComponent {
|
|
|
1003
1003
|
_min;
|
|
1004
1004
|
set min(v) {
|
|
1005
1005
|
if (v) {
|
|
1006
|
-
this._min = v;
|
|
1007
1006
|
this.focusedValue = this.today;
|
|
1008
1007
|
this.viewRange = this.today.month.range;
|
|
1009
1008
|
this.navigate(0);
|
|
1010
1009
|
}
|
|
1010
|
+
this._min = v;
|
|
1011
1011
|
}
|
|
1012
1012
|
get min() {
|
|
1013
1013
|
return this._min;
|
|
@@ -1015,11 +1015,11 @@ class AXCalendarBoxComponent {
|
|
|
1015
1015
|
_max;
|
|
1016
1016
|
set max(v) {
|
|
1017
1017
|
if (v) {
|
|
1018
|
-
this._max = v;
|
|
1019
1018
|
this.focusedValue = this.today;
|
|
1020
1019
|
this.viewRange = this.today.month.range;
|
|
1021
1020
|
this.navigate(0);
|
|
1022
1021
|
}
|
|
1022
|
+
this._max = v;
|
|
1023
1023
|
}
|
|
1024
1024
|
get max() {
|
|
1025
1025
|
return this._max;
|
|
@@ -4087,8 +4087,8 @@ class AXDatePickerComponent extends AXValidatableComponent {
|
|
|
4087
4087
|
this._validation = v;
|
|
4088
4088
|
}
|
|
4089
4089
|
placeholder = '';
|
|
4090
|
-
min;
|
|
4091
|
-
max;
|
|
4090
|
+
min = input(null);
|
|
4091
|
+
max = input(null);
|
|
4092
4092
|
readonly;
|
|
4093
4093
|
disabled;
|
|
4094
4094
|
allowClear = false;
|
|
@@ -4173,7 +4173,7 @@ class AXDatePickerComponent extends AXValidatableComponent {
|
|
|
4173
4173
|
}
|
|
4174
4174
|
if (this.text &&
|
|
4175
4175
|
this.text.indexOf('_') === -1 &&
|
|
4176
|
-
this.text
|
|
4176
|
+
this.text?.length == 8 &&
|
|
4177
4177
|
(this.type == 'jalali' || this.type == 'gregorian')) {
|
|
4178
4178
|
this.isTypeDate = true;
|
|
4179
4179
|
this.textChangeSubject.next(this.text);
|
|
@@ -4265,7 +4265,7 @@ class AXDatePickerComponent extends AXValidatableComponent {
|
|
|
4265
4265
|
this._value = null;
|
|
4266
4266
|
}
|
|
4267
4267
|
let unValidDate = false;
|
|
4268
|
-
if (this.max || this.min) {
|
|
4268
|
+
if (this.max() || this.min()) {
|
|
4269
4269
|
unValidDate = this.isInMInMaxRange(AXDateTime.convert(v));
|
|
4270
4270
|
}
|
|
4271
4271
|
if (!unValidDate) {
|
|
@@ -4322,18 +4322,18 @@ class AXDatePickerComponent extends AXValidatableComponent {
|
|
|
4322
4322
|
isInMInMaxRange(d) {
|
|
4323
4323
|
let r = false;
|
|
4324
4324
|
if (d !== undefined) {
|
|
4325
|
-
if (this.min && !this.max) {
|
|
4325
|
+
if (this.min() && !this.max()) {
|
|
4326
4326
|
r =
|
|
4327
|
-
d.compaireNew(new AXDateTime(this.min, this.type), 'YMD', this.type) === -1;
|
|
4327
|
+
d.compaireNew(new AXDateTime(this.min(), this.type), 'YMD', this.type) === -1;
|
|
4328
4328
|
}
|
|
4329
|
-
if (this.max && !this.min) {
|
|
4329
|
+
if (this.max() && !this.min()) {
|
|
4330
4330
|
r =
|
|
4331
|
-
d.compaireNew(new AXDateTime(this.max, this.type), 'YMD', this.type) === 1;
|
|
4331
|
+
d.compaireNew(new AXDateTime(this.max(), this.type), 'YMD', this.type) === 1;
|
|
4332
4332
|
}
|
|
4333
|
-
if (this.min && this.max) {
|
|
4333
|
+
if (this.min() && this.max()) {
|
|
4334
4334
|
r =
|
|
4335
|
-
d.compaireNew(new AXDateTime(this.min, this.type), 'YMD', this.type) === -1 ||
|
|
4336
|
-
d.compaireNew(new AXDateTime(this.max, this.type), 'YMD', this.type) === 1;
|
|
4335
|
+
d.compaireNew(new AXDateTime(this.min(), this.type), 'YMD', this.type) === -1 ||
|
|
4336
|
+
d.compaireNew(new AXDateTime(this.max(), this.type), 'YMD', this.type) === 1;
|
|
4337
4337
|
}
|
|
4338
4338
|
}
|
|
4339
4339
|
return r;
|
|
@@ -4369,7 +4369,7 @@ class AXDatePickerComponent extends AXValidatableComponent {
|
|
|
4369
4369
|
// this.input.input.nativeElement.focus();
|
|
4370
4370
|
}
|
|
4371
4371
|
handleInputBlur() {
|
|
4372
|
-
if (this.text
|
|
4372
|
+
if (this.text?.length < 8) {
|
|
4373
4373
|
this.clearTextBox();
|
|
4374
4374
|
}
|
|
4375
4375
|
}
|
|
@@ -5142,15 +5142,15 @@ class AXDatePickerComponent extends AXValidatableComponent {
|
|
|
5142
5142
|
this.destroy$.complete();
|
|
5143
5143
|
}
|
|
5144
5144
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXDatePickerComponent, isStandalone: false, selector: "ax-date-picker", inputs: { dayStyle: { classPropertyName: "dayStyle", publicName: "dayStyle", isSignal: false, isRequired: false, transformFunction: null }, dayMinMaxResoan: { classPropertyName: "dayMinMaxResoan", publicName: "dayMinMaxResoan", isSignal: false, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: false, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: false, isRequired: false, transformFunction: null }, selectableHoliday: { classPropertyName: "selectableHoliday", publicName: "selectableHoliday", isSignal: false, isRequired: false, transformFunction: null }, dateType: { classPropertyName: "dateType", publicName: "dateType", isSignal: false, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: false, isRequired: false, transformFunction: null }, openByClick: { classPropertyName: "openByClick", publicName: "openByClick", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [
|
|
5146
5146
|
{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent },
|
|
5147
|
-
], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n [readonly]=\"readonly\"\n [fitParent]=\"false\"\n [size]=\"size\"\n [showDropDownButton]=\"false\"\n icon=\"far fa-calendar-alt\"\n #dropdown\n maxHeight=\"unset\"\n>\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n [mask]=\"dateType\"\n [showMask]=\"true\"\n #input\n [textAlign]=\"textAlign\"\n [value]=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n (onBlur)=\"handleInputBlur()\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n <ax-calendar-box\n #calendarRef\n
|
|
5147
|
+
], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n [readonly]=\"readonly\"\n [fitParent]=\"false\"\n [size]=\"size\"\n [showDropDownButton]=\"false\"\n icon=\"far fa-calendar-alt\"\n #dropdown\n maxHeight=\"unset\"\n>\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n [mask]=\"dateType\"\n [showMask]=\"true\"\n #input\n [textAlign]=\"textAlign\"\n [value]=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n (onBlur)=\"handleInputBlur()\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n @if (_renderPicker) {\n <ax-calendar-box\n #calendarRef\n [showTodayButton]=\"showTodayButton\"\n [selectableHoliday]=\"selectableHoliday\"\n [min]=\"min()\"\n [max]=\"max()\"\n [size]=\"size\"\n (onClick)=\"onClick($event)\"\n (onValueChanged)=\"onDateChange($event)\"\n [type]=\"type\"\n [(value)]=\"calendarValue\"\n [dayStyle]=\"dayStyle\"\n [dayMinMaxResoan]=\"dayMinMaxResoan\"\n >\n </ax-calendar-box>\n }\n </ng-container>\n <ng-container end>\n <ax-button\n end\n *ngIf=\"allowClear && value\"\n [disabled]=\"disabled\"\n icon=\"far fa-times icon\"\n type=\"blank danger\"\n (click)=\"clearTextBox()\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n <ax-button\n end\n icon=\"far fa-calendar-alt icon\"\n type=\"light blank\"\n (click)=\"handleButtonClick()\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
5148
5148
|
}
|
|
5149
5149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDatePickerComponent, decorators: [{
|
|
5150
5150
|
type: Component,
|
|
5151
5151
|
args: [{ selector: 'ax-date-picker', encapsulation: ViewEncapsulation.None, providers: [
|
|
5152
5152
|
{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent },
|
|
5153
|
-
], host: { style: 'width: 100%' }, standalone: false, template: "<ax-drop-down\n [readonly]=\"readonly\"\n [fitParent]=\"false\"\n [size]=\"size\"\n [showDropDownButton]=\"false\"\n icon=\"far fa-calendar-alt\"\n #dropdown\n maxHeight=\"unset\"\n>\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n [mask]=\"dateType\"\n [showMask]=\"true\"\n #input\n [textAlign]=\"textAlign\"\n [value]=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n (onBlur)=\"handleInputBlur()\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n <ax-calendar-box\n #calendarRef\n
|
|
5153
|
+
], host: { style: 'width: 100%' }, standalone: false, template: "<ax-drop-down\n [readonly]=\"readonly\"\n [fitParent]=\"false\"\n [size]=\"size\"\n [showDropDownButton]=\"false\"\n icon=\"far fa-calendar-alt\"\n #dropdown\n maxHeight=\"unset\"\n>\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n [mask]=\"dateType\"\n [showMask]=\"true\"\n #input\n [textAlign]=\"textAlign\"\n [value]=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n (onBlur)=\"handleInputBlur()\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n @if (_renderPicker) {\n <ax-calendar-box\n #calendarRef\n [showTodayButton]=\"showTodayButton\"\n [selectableHoliday]=\"selectableHoliday\"\n [min]=\"min()\"\n [max]=\"max()\"\n [size]=\"size\"\n (onClick)=\"onClick($event)\"\n (onValueChanged)=\"onDateChange($event)\"\n [type]=\"type\"\n [(value)]=\"calendarValue\"\n [dayStyle]=\"dayStyle\"\n [dayMinMaxResoan]=\"dayMinMaxResoan\"\n >\n </ax-calendar-box>\n }\n </ng-container>\n <ng-container end>\n <ax-button\n end\n *ngIf=\"allowClear && value\"\n [disabled]=\"disabled\"\n icon=\"far fa-times icon\"\n type=\"blank danger\"\n (click)=\"clearTextBox()\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n <ax-button\n end\n icon=\"far fa-calendar-alt icon\"\n type=\"light blank\"\n (click)=\"handleButtonClick()\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
|
|
5154
5154
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { dropdown: [{
|
|
5155
5155
|
type: ViewChild,
|
|
5156
5156
|
args: ['dropdown', { static: true }]
|
|
@@ -5171,10 +5171,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
5171
5171
|
type: Input
|
|
5172
5172
|
}], placeholder: [{
|
|
5173
5173
|
type: Input
|
|
5174
|
-
}], min: [{
|
|
5175
|
-
type: Input
|
|
5176
|
-
}], max: [{
|
|
5177
|
-
type: Input
|
|
5178
5174
|
}], readonly: [{
|
|
5179
5175
|
type: Input
|
|
5180
5176
|
}], disabled: [{
|
|
@@ -5661,7 +5657,6 @@ class AXToastMessageComponent {
|
|
|
5661
5657
|
type = 'info';
|
|
5662
5658
|
style = 'info';
|
|
5663
5659
|
icon = '';
|
|
5664
|
-
toastWidth = signal(100);
|
|
5665
5660
|
intervalSubscription;
|
|
5666
5661
|
ngAfterViewInit() {
|
|
5667
5662
|
if (this.progressBar) {
|
|
@@ -5671,16 +5666,6 @@ class AXToastMessageComponent {
|
|
|
5671
5666
|
}
|
|
5672
5667
|
}
|
|
5673
5668
|
ngOnInit() {
|
|
5674
|
-
// if (this.timeOut) {
|
|
5675
|
-
// const intervalDuration = this.timeOut / 100;
|
|
5676
|
-
// this.intervalSubscription = interval(intervalDuration).subscribe(() => {
|
|
5677
|
-
// this.toastWidth.update((prev) => prev - 1);
|
|
5678
|
-
// if (this.toastWidth() === 0) {
|
|
5679
|
-
// this.intervalSubscription.unsubscribe();
|
|
5680
|
-
// this.close();
|
|
5681
|
-
// }
|
|
5682
|
-
// });
|
|
5683
|
-
// }
|
|
5684
5669
|
switch (this.type) {
|
|
5685
5670
|
case 'success':
|
|
5686
5671
|
this.style = 'success';
|
|
@@ -5714,11 +5699,11 @@ class AXToastMessageComponent {
|
|
|
5714
5699
|
this.elRef.nativeElement.parentElement.removeChild(this.elRef.nativeElement);
|
|
5715
5700
|
}
|
|
5716
5701
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXToastMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5717
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXToastMessageComponent, isStandalone: false, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true }], ngImport: i0, template: "
|
|
5702
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXToastMessageComponent, isStandalone: false, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true }], ngImport: i0, template: "<div class=\"toast-container\">\n @if (title) {\n <header class=\"ax toast {{ style }}\">\n <div><i class=\"{{ icon }}\"></i> {{ title }}</div>\n @if (closeable) {\n <div (click)=\"close()\" class=\"toast-close\">\n <i class=\"far fa-times\"></i>\n </div>\n }\n </header>\n }\n <div class=\"content ax toast {{ style }}\">\n {{ message }}\n @if (!title && closeable) {\n <div (click)=\"close()\" class=\"toast-close\">\n <i class=\"far fa-times\"></i>\n </div>\n }\n <div\n #progressBar\n class=\"toast-progress\"\n [style.animation-duration.ms]=\"timeOut\"\n ></div>\n </div>\n</div>\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
5718
5703
|
}
|
|
5719
5704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXToastMessageComponent, decorators: [{
|
|
5720
5705
|
type: Component,
|
|
5721
|
-
args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "
|
|
5706
|
+
args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"toast-container\">\n @if (title) {\n <header class=\"ax toast {{ style }}\">\n <div><i class=\"{{ icon }}\"></i> {{ title }}</div>\n @if (closeable) {\n <div (click)=\"close()\" class=\"toast-close\">\n <i class=\"far fa-times\"></i>\n </div>\n }\n </header>\n }\n <div class=\"content ax toast {{ style }}\">\n {{ message }}\n @if (!title && closeable) {\n <div (click)=\"close()\" class=\"toast-close\">\n <i class=\"far fa-times\"></i>\n </div>\n }\n <div\n #progressBar\n class=\"toast-progress\"\n [style.animation-duration.ms]=\"timeOut\"\n ></div>\n </div>\n</div>\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
|
|
5722
5707
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { progressBar: [{
|
|
5723
5708
|
type: ViewChild,
|
|
5724
5709
|
args: ['progressBar', { static: false }]
|