ng-tailwind 7.0.13 → 7.0.14
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,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: [{
|