ng-tailwind 7.0.13 → 7.0.15
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,14 +1,10 @@
|
|
|
1
1
|
import { ValidatorFn } from "@angular/forms";
|
|
2
|
-
import { NgtReactiveFormValidationService } from "../../../../../services/validation/ngt-reactive-form-validation.service";
|
|
3
2
|
import * as i0 from "@angular/core";
|
|
4
3
|
export interface NgtReactiveSelectValidationConfig {
|
|
5
4
|
isRequired: boolean;
|
|
6
|
-
multiple: boolean;
|
|
7
5
|
customSyncValidators?: ValidatorFn[];
|
|
8
6
|
}
|
|
9
7
|
export declare class NgtReactiveSelectValidationService {
|
|
10
|
-
private reactiveFormValidationService;
|
|
11
|
-
constructor(reactiveFormValidationService: NgtReactiveFormValidationService);
|
|
12
8
|
getSyncValidators(config: NgtReactiveSelectValidationConfig): ValidatorFn[];
|
|
13
9
|
private isRequiredValidator;
|
|
14
10
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgtReactiveSelectValidationService, never>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, Injector } from '@angular/core';
|
|
1
|
+
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnChanges, SimpleChanges, WritableSignal } from '@angular/core';
|
|
2
2
|
import { NgtStylizableDirective } from '../../directives/ngt-stylizable/ngt-stylizable.directive';
|
|
3
3
|
import { NgtStylizableService } from '../../services/ngt-stylizable/ngt-stylizable.service';
|
|
4
4
|
import { NgtAbilityValidationService } from '../../services/validation/ngt-ability-validation.service';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
|
-
export declare class NgtSectionComponent implements AfterViewInit {
|
|
6
|
+
export declare class NgtSectionComponent implements AfterViewInit, OnChanges {
|
|
7
7
|
private injector;
|
|
8
8
|
private changeDetector;
|
|
9
9
|
private ngtStylizableDirective;
|
|
@@ -19,16 +19,16 @@ export declare class NgtSectionComponent implements AfterViewInit {
|
|
|
19
19
|
helpTitle: string;
|
|
20
20
|
helpText: string;
|
|
21
21
|
helpIconColor: string;
|
|
22
|
+
isDisabled: boolean;
|
|
22
23
|
onRemove: EventEmitter<void>;
|
|
23
24
|
onToggleSection: EventEmitter<boolean>;
|
|
24
|
-
readonly isDisabled: import("@angular/core").InputSignal<boolean>;
|
|
25
|
-
readonly isDisabledState: import("@angular/core").Signal<boolean>;
|
|
26
25
|
ngtSectionStyle: NgtStylizableService;
|
|
27
26
|
ngtCaptionStyle: NgtStylizableService;
|
|
28
27
|
ngtSubtitleStyle: NgtStylizableService;
|
|
29
28
|
canDisplay: boolean;
|
|
30
|
-
|
|
29
|
+
readonly isDisabledState: WritableSignal<boolean>;
|
|
31
30
|
constructor(injector: Injector, changeDetector: ChangeDetectorRef, ngtStylizableDirective: NgtStylizableDirective, ngtAbilityValidationService: NgtAbilityValidationService);
|
|
31
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
32
32
|
ngAfterViewInit(): Promise<void>;
|
|
33
33
|
open(): void;
|
|
34
34
|
close(): void;
|
|
@@ -36,5 +36,5 @@ export declare class NgtSectionComponent implements AfterViewInit {
|
|
|
36
36
|
scrollTo(): void;
|
|
37
37
|
remove(event: Event): void;
|
|
38
38
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgtSectionComponent, [null, null, { optional: true; self: true; }, { optional: true; }]>;
|
|
39
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NgtSectionComponent, "ngt-section", never, { "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "accordion": { "alias": "accordion"; "required": false; }; "showSection": { "alias": "showSection"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "helpTitle": { "alias": "helpTitle"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "helpIconColor": { "alias": "helpIconColor"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false;
|
|
39
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgtSectionComponent, "ngt-section", never, { "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "accordion": { "alias": "accordion"; "required": false; }; "showSection": { "alias": "showSection"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "helpTitle": { "alias": "helpTitle"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "helpIconColor": { "alias": "helpIconColor"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; }, { "onRemove": "onRemove"; "onToggleSection": "onToggleSection"; }, never, ["*"], false, never>;
|
|
40
40
|
}
|
package/fesm2022/ng-tailwind.mjs
CHANGED
|
@@ -1390,9 +1390,7 @@ class NgtSectionComponent {
|
|
|
1390
1390
|
this.showSection = true;
|
|
1391
1391
|
this.onRemove = new EventEmitter();
|
|
1392
1392
|
this.onToggleSection = new EventEmitter();
|
|
1393
|
-
this.
|
|
1394
|
-
this.isDisabledState = computed(() => this.isDisabled() || this.internalDisabledState());
|
|
1395
|
-
this.internalDisabledState = signal(false);
|
|
1393
|
+
this.isDisabledState = signal(false);
|
|
1396
1394
|
this.ngtCaptionStyle = new NgtStylizableService();
|
|
1397
1395
|
this.ngtSubtitleStyle = new NgtStylizableService();
|
|
1398
1396
|
if (this.ngtStylizableDirective) {
|
|
@@ -1436,14 +1434,19 @@ class NgtSectionComponent {
|
|
|
1436
1434
|
}
|
|
1437
1435
|
});
|
|
1438
1436
|
}
|
|
1437
|
+
ngOnChanges(changes) {
|
|
1438
|
+
if (changes.isDisabled) {
|
|
1439
|
+
this.isDisabledState.set(changes.isDisabled.currentValue);
|
|
1440
|
+
}
|
|
1441
|
+
}
|
|
1439
1442
|
async ngAfterViewInit() {
|
|
1440
1443
|
if (!this.ngtAbilityValidationService || !this.name) {
|
|
1441
1444
|
this.canDisplay = true;
|
|
1442
1445
|
this.changeDetector.detectChanges();
|
|
1443
1446
|
}
|
|
1444
1447
|
if (this.ngtAbilityValidationService && this.name) {
|
|
1445
|
-
if (this.isDisabled
|
|
1446
|
-
this.
|
|
1448
|
+
if (this.isDisabled === undefined) {
|
|
1449
|
+
this.isDisabledState.set(!(await this.ngtAbilityValidationService.isSectionEnabled(this.name)));
|
|
1447
1450
|
}
|
|
1448
1451
|
this.canDisplay = !(await this.ngtAbilityValidationService.isSectionHidden(this.name));
|
|
1449
1452
|
}
|
|
@@ -1469,7 +1472,7 @@ class NgtSectionComponent {
|
|
|
1469
1472
|
this.onRemove.emit();
|
|
1470
1473
|
}
|
|
1471
1474
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtSectionComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtAbilityValidationService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1472
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1475
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtSectionComponent, isStandalone: false, selector: "ngt-section", inputs: { name: "name", icon: "icon", caption: "caption", subtitle: "subtitle", accordion: "accordion", showSection: "showSection", removable: "removable", helpTitle: "helpTitle", helpText: "helpText", helpIconColor: "helpIconColor", isDisabled: "isDisabled" }, outputs: { onRemove: "onRemove", onToggleSection: "onToggleSection" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["elementRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"canDisplay\" class=\"flex {{ ngtSectionStyle.compile(['mb']) }}\" #elementRef>\n <ngt-svg *ngIf=\"icon\" [src]='icon'\n class=\"hidden md:block {{ ngtSectionStyle.compile(['color.text', 'h', 'w', 'my', 'pr']) }}\">\n </ngt-svg>\n\n <div\n class=\"w-full pb-4 md:pb-0 {{ accordion && !showSection ? 'flex' : '' }} {{ ngtSectionStyle.compile(['border']) }}\">\n <div *ngIf=\"!accordion && caption\" class=\"flex\">\n <span class=\"pl-5 {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n {{ caption }}\n </span>\n\n <span *ngIf=\"subtitle\"\n class=\"self-center {{ ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml']) }}\">\n {{ subtitle }}\n </span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1 hover:opacity-100 opacity-100\"\n [iconColor]=\"helpIconColor\">\n {{ helpText }}\n </ngt-helper>\n </div>\n\n <ng-container *ngIf=\"accordion\">\n <div class=\"flex flex-wrap items-center cursor-pointer {{ helpText ? '' : 'hover:opacity-75' }} {{ accordion && showSection ? ngtCaptionStyle.compile(['pb', 'px']) : ngtCaptionStyle.compile(['py', 'px']) }}\"\n (click)='toggle()' style=\"max-width: fit-content;\">\n <div *ngIf=\"!showSection\"\n class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M2.82 4.59l9.18 9.16 9.18 -9.16 2.82 2.82 -12 12 -12 -12 2.82 -2.82z\" />\n </svg>\n </div>\n\n <div *ngIf=\"showSection\"\n class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M2.82 19.41l9.18 -9.16 9.18 9.16 2.82 -2.82 -12 -12 -12 12 2.82 2.82z\" />\n </svg>\n </div>\n\n <span [class]=\"ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n {{ caption }}\n </span>\n\n <span *ngIf=\"subtitle\"\n [class]=\"ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n {{ subtitle }}\n </span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1\" [iconColor]=\"helpIconColor\"\n class=\"ml-1 hover:opacity-100 opacity-100\">\n {{ helpText }}\n </ngt-helper>\n\n <div *ngIf=\"removable\"\n class=\"flex items-center justify-center h-6 w-6 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-sm\"\n (click)='remove($event)'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M4 21.33c0,1.47 1.2,2.67 2.67,2.67l10.66 0c1.47,0 2.67,-1.2 2.67,-2.67l0 -16 -16 0 0 16zm17.33 -20l-4.66 0 -1.34 -1.33 -6.66 0 -1.34 1.33 -4.66 0 0 2.67 18.66 0 0 -2.67z\" />\n </svg>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf='showSection' class=\"{{ ngtSectionStyle.compile(['px', 'pl']) }}\" [@enterAnimation]='!showSection'>\n <fieldset [disabled]=\"isDisabledState()\" style=\"min-inline-size: 100% !important\">\n <ng-content></ng-content>\n </fieldset>\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], animations: [
|
|
1473
1476
|
trigger('enterAnimation', [
|
|
1474
1477
|
state('void', style({ transform: 'translateY(-20px)', opacity: 0 })),
|
|
1475
1478
|
transition(':enter', [
|
|
@@ -1517,6 +1520,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1517
1520
|
type: Input
|
|
1518
1521
|
}], helpIconColor: [{
|
|
1519
1522
|
type: Input
|
|
1523
|
+
}], isDisabled: [{
|
|
1524
|
+
type: Input
|
|
1520
1525
|
}], onRemove: [{
|
|
1521
1526
|
type: Output
|
|
1522
1527
|
}], onToggleSection: [{
|
|
@@ -10144,40 +10149,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
10144
10149
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
10145
10150
|
|
|
10146
10151
|
class NgtReactiveSelectValidationService {
|
|
10147
|
-
constructor(reactiveFormValidationService) {
|
|
10148
|
-
this.reactiveFormValidationService = reactiveFormValidationService;
|
|
10149
|
-
}
|
|
10150
10152
|
getSyncValidators(config) {
|
|
10151
10153
|
const validators = [];
|
|
10152
10154
|
if (config.isRequired) {
|
|
10153
|
-
validators.push(this.isRequiredValidator(
|
|
10155
|
+
validators.push(this.isRequiredValidator());
|
|
10154
10156
|
}
|
|
10155
10157
|
if (config.customSyncValidators?.length) {
|
|
10156
10158
|
validators.push(...config.customSyncValidators);
|
|
10157
10159
|
}
|
|
10158
|
-
validators.push(...this.reactiveFormValidationService.getSyncValidators(config));
|
|
10159
10160
|
return validators;
|
|
10160
10161
|
}
|
|
10161
|
-
isRequiredValidator(
|
|
10162
|
+
isRequiredValidator() {
|
|
10162
10163
|
return (control) => {
|
|
10163
|
-
if (
|
|
10164
|
-
|
|
10165
|
-
|
|
10166
|
-
|
|
10167
|
-
}
|
|
10168
|
-
|
|
10169
|
-
|
|
10170
|
-
|
|
10171
|
-
return { 'required': true };
|
|
10164
|
+
if (Array.isArray(control.value)) {
|
|
10165
|
+
return control.value.length > 0
|
|
10166
|
+
? null
|
|
10167
|
+
: { 'required': true };
|
|
10168
|
+
}
|
|
10169
|
+
return control.value
|
|
10170
|
+
? null
|
|
10171
|
+
: { 'required': true };
|
|
10172
10172
|
};
|
|
10173
10173
|
}
|
|
10174
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSelectValidationService, deps: [
|
|
10174
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSelectValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
10175
10175
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSelectValidationService, providedIn: null }); }
|
|
10176
10176
|
}
|
|
10177
10177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSelectValidationService, decorators: [{
|
|
10178
10178
|
type: Injectable,
|
|
10179
10179
|
args: [{ providedIn: null }]
|
|
10180
|
-
}]
|
|
10180
|
+
}] });
|
|
10181
10181
|
|
|
10182
10182
|
class NgtReactiveSelectStateService {
|
|
10183
10183
|
constructor() {
|
|
@@ -10624,6 +10624,7 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
|
|
|
10624
10624
|
}
|
|
10625
10625
|
this.stateService.updateFormControlState(this.formControl);
|
|
10626
10626
|
}));
|
|
10627
|
+
this.setupValidators();
|
|
10627
10628
|
}
|
|
10628
10629
|
}
|
|
10629
10630
|
ngOnDestroy() {
|
|
@@ -10764,13 +10765,12 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
|
|
|
10764
10765
|
}
|
|
10765
10766
|
const config = {
|
|
10766
10767
|
isRequired: this.isRequired(),
|
|
10767
|
-
multiple: this.multiple(),
|
|
10768
10768
|
customSyncValidators: this.customSyncValidators(),
|
|
10769
10769
|
};
|
|
10770
10770
|
const syncValidators = this.validationService.getSyncValidators(config);
|
|
10771
10771
|
this.formControl.setValidators(syncValidators);
|
|
10772
10772
|
this.formControl.updateValueAndValidity();
|
|
10773
|
-
if (this.value) {
|
|
10773
|
+
if (this.value && (!Array.isArray(this.value) || this.value.length)) {
|
|
10774
10774
|
this.markAsDirty();
|
|
10775
10775
|
this.stateService.formControlHasErrors.set(!!this.formControl.errors);
|
|
10776
10776
|
this.stateService.formControlIsDirty.set(true);
|