@acorex/components 16.19.4 → 16.19.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, output, inject, ChangeDetectorRef, model, contentChild, afterNextRender, input, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
|
|
2
|
+
import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, signal, ViewChildren, output, inject, ChangeDetectorRef, model, contentChild, afterNextRender, input, 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, AXObjectUtil, AXScrollModule, setPropByPath, AXColorUtil } from '@acorex/core';
|
|
5
5
|
import * as i1 from '@angular/cdk/overlay';
|
|
6
6
|
import { OverlayContainer, Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
7
7
|
import * as i1$3 from '@angular/cdk/portal';
|
|
8
8
|
import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
|
|
9
|
-
import { merge, Subject, Observable, debounceTime as debounceTime$1, takeUntil } from 'rxjs';
|
|
9
|
+
import { merge, Subject, Observable, debounceTime as debounceTime$1, takeUntil, interval } from 'rxjs';
|
|
10
10
|
import * as i2 from '@angular/cdk/bidi';
|
|
11
11
|
import * as i1$1 from '@angular/common';
|
|
12
12
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
@@ -5660,16 +5660,17 @@ class AXToastMessageComponent {
|
|
|
5660
5660
|
type = 'info';
|
|
5661
5661
|
style = 'info';
|
|
5662
5662
|
icon = '';
|
|
5663
|
-
toastWidth = 100;
|
|
5663
|
+
toastWidth = signal(100);
|
|
5664
|
+
intervalSubscription;
|
|
5664
5665
|
ngOnInit() {
|
|
5665
5666
|
if (this.timeOut) {
|
|
5666
|
-
|
|
5667
|
-
|
|
5668
|
-
if (this.toastWidth === 0) {
|
|
5669
|
-
|
|
5667
|
+
this.intervalSubscription = interval(this.timeOut / 100).subscribe(() => {
|
|
5668
|
+
this.toastWidth.update((prev) => prev - 1);
|
|
5669
|
+
if (this.toastWidth() === 0) {
|
|
5670
|
+
this.intervalSubscription.unsubscribe();
|
|
5670
5671
|
this.close();
|
|
5671
5672
|
}
|
|
5672
|
-
}
|
|
5673
|
+
});
|
|
5673
5674
|
}
|
|
5674
5675
|
switch (this.type) {
|
|
5675
5676
|
case 'success':
|
|
@@ -5704,11 +5705,11 @@ class AXToastMessageComponent {
|
|
|
5704
5705
|
this.elRef.nativeElement.parentElement.removeChild(this.elRef.nativeElement);
|
|
5705
5706
|
}
|
|
5706
5707
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXToastMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5707
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5708
|
+
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" }, ngImport: i0, template: "@if (toastWidth()) {\n<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 class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\n </div>\n</div>\n\n}\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-duration:4s;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 });
|
|
5708
5709
|
}
|
|
5709
5710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXToastMessageComponent, decorators: [{
|
|
5710
5711
|
type: Component,
|
|
5711
|
-
args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"toast-container\">\n
|
|
5712
|
+
args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (toastWidth()) {\n<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 class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\n </div>\n</div>\n\n}\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-duration:4s;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"] }]
|
|
5712
5713
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
|
|
5713
5714
|
type: Input
|
|
5714
5715
|
}], message: [{
|
|
@@ -6327,14 +6328,6 @@ class AXFormGroupComponent extends AXBaseComponent {
|
|
|
6327
6328
|
});
|
|
6328
6329
|
break;
|
|
6329
6330
|
case 'textArea':
|
|
6330
|
-
convertTypeComponent.onValueChanged.subscribe((e) => {
|
|
6331
|
-
if (e.value) {
|
|
6332
|
-
this.labelMode.set('over');
|
|
6333
|
-
}
|
|
6334
|
-
else {
|
|
6335
|
-
this.labelMode.set('float');
|
|
6336
|
-
}
|
|
6337
|
-
});
|
|
6338
6331
|
convertTypeComponent.onFocus.subscribe((e) => {
|
|
6339
6332
|
if (!e.target.value) {
|
|
6340
6333
|
this.labelMode.set('over');
|
|
@@ -6347,14 +6340,7 @@ class AXFormGroupComponent extends AXBaseComponent {
|
|
|
6347
6340
|
});
|
|
6348
6341
|
break;
|
|
6349
6342
|
default:
|
|
6350
|
-
convertTypeComponent.onValueChanged.subscribe((e) => {
|
|
6351
|
-
if (e.value) {
|
|
6352
|
-
this.labelMode.set('over');
|
|
6353
|
-
}
|
|
6354
|
-
else {
|
|
6355
|
-
this.labelMode.set('float');
|
|
6356
|
-
}
|
|
6357
|
-
});
|
|
6343
|
+
convertTypeComponent.onValueChanged.subscribe((e) => { });
|
|
6358
6344
|
convertTypeComponent.onFocus.subscribe((e) => {
|
|
6359
6345
|
if (!e.component?.value) {
|
|
6360
6346
|
this.labelMode.set('over');
|
|
@@ -6368,11 +6354,11 @@ class AXFormGroupComponent extends AXBaseComponent {
|
|
|
6368
6354
|
}
|
|
6369
6355
|
});
|
|
6370
6356
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6371
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: AXFormGroupComponent, isStandalone: false, selector: "ax-form-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelMode: "labelModeChange" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "label", first: true, predicate: AXLabelComponent, descendants: true, isSignal: true }, { propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div *ngIf=\"labelMode() === 'static'\" class=\"ax-lable-static\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{
|
|
6357
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: AXFormGroupComponent, isStandalone: false, selector: "ax-form-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelMode: "labelModeChange" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "label", first: true, predicate: AXLabelComponent, descendants: true, isSignal: true }, { propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div *ngIf=\"labelMode() === 'static'\" class=\"ax-lable-static\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div\n #div\n class=\"ax form-item {{ size }} \"\n [ngClass]=\"{\n 'required-state': required,\n 'ax-lable-over-state': labelMode() !== 'static'\n }\"\n >\n <div *ngIf=\"labelMode() !== 'static'\" class=\"ax-lable-{{ labelMode() }}\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div class=\"content\" #content>\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #lableRef><ng-content select=\"ax-label\"></ng-content></ng-template>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-over{top:-9%}.ax-form-group-container .ax-lable-over label{transition:all .2s ease-in-out}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:10;top:0;left:.5rem;transform:translateY(-50%);background:#fff;padding:0 .2rem;pointer-events:none;transition:all .15s ease-in-out}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{font-size:.75rem}.ax-form-group-container .form-group-label{padding:.1rem .5rem!important}.ax-form-group-container.ax-margin-form{margin-top:1.25rem}.ax-form-group-container .ax-lable-over-state{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6372
6358
|
}
|
|
6373
6359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFormGroupComponent, decorators: [{
|
|
6374
6360
|
type: Component,
|
|
6375
|
-
args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, standalone: false, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div *ngIf=\"labelMode() === 'static'\" class=\"ax-lable-static\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{
|
|
6361
|
+
args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, standalone: false, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div *ngIf=\"labelMode() === 'static'\" class=\"ax-lable-static\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div\n #div\n class=\"ax form-item {{ size }} \"\n [ngClass]=\"{\n 'required-state': required,\n 'ax-lable-over-state': labelMode() !== 'static'\n }\"\n >\n <div *ngIf=\"labelMode() !== 'static'\" class=\"ax-lable-{{ labelMode() }}\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div class=\"content\" #content>\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #lableRef><ng-content select=\"ax-label\"></ng-content></ng-template>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-over{top:-9%}.ax-form-group-container .ax-lable-over label{transition:all .2s ease-in-out}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:10;top:0;left:.5rem;transform:translateY(-50%);background:#fff;padding:0 .2rem;pointer-events:none;transition:all .15s ease-in-out}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{font-size:.75rem}.ax-form-group-container .form-group-label{padding:.1rem .5rem!important}.ax-form-group-container.ax-margin-form{margin-top:1.25rem}.ax-form-group-container .ax-lable-over-state{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}\n"] }]
|
|
6376
6362
|
}], propDecorators: { size: [{
|
|
6377
6363
|
type: Input
|
|
6378
6364
|
}], div: [{
|