ng-tailwind 5.0.19 → 5.0.21
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.
- package/esm2020/components/ngt-section/ngt-section.component.mjs +5 -3
- package/esm2020/components/ngt-select/ngt-select.component.mjs +11 -7
- package/fesm2015/ng-tailwind.mjs +14 -8
- package/fesm2015/ng-tailwind.mjs.map +1 -1
- package/fesm2020/ng-tailwind.mjs +14 -8
- package/fesm2020/ng-tailwind.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2015/ng-tailwind.mjs
CHANGED
|
@@ -1258,6 +1258,7 @@ class NgtSectionComponent {
|
|
|
1258
1258
|
my: 'my-1',
|
|
1259
1259
|
pr: 'pr-1',
|
|
1260
1260
|
px: 'md:px-5',
|
|
1261
|
+
border: 'border-b-4 md:border-b-0 border-dashed md:border-solid md:border-l',
|
|
1261
1262
|
color: {
|
|
1262
1263
|
text: 'text-gray-800'
|
|
1263
1264
|
}
|
|
@@ -1268,6 +1269,7 @@ class NgtSectionComponent {
|
|
|
1268
1269
|
ml: 'ml-2',
|
|
1269
1270
|
pb: 'pb-2',
|
|
1270
1271
|
border: 'border-none',
|
|
1272
|
+
px: 'px-5',
|
|
1271
1273
|
color: {
|
|
1272
1274
|
text: 'text-gray-800',
|
|
1273
1275
|
border: ''
|
|
@@ -1320,7 +1322,7 @@ class NgtSectionComponent {
|
|
|
1320
1322
|
}
|
|
1321
1323
|
}
|
|
1322
1324
|
NgtSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", 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 });
|
|
1323
|
-
NgtSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSectionComponent, 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 }], ngImport: i0, template: "<div *ngIf=\"canDisplay\" class=\"flex mb-6\" #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
|
|
1325
|
+
NgtSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSectionComponent, 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 }], ngImport: i0, template: "<div *ngIf=\"canDisplay\" class=\"flex mb-6\" #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-8 w-8 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-xl\"\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]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n <ng-content></ng-content>\n </fieldset>\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i2.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: [
|
|
1324
1326
|
trigger('enterAnimation', [
|
|
1325
1327
|
state('void', style({ transform: 'translateY(-20px)', opacity: 0 })),
|
|
1326
1328
|
transition(':enter', [
|
|
@@ -1337,7 +1339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
1337
1339
|
animate(400)
|
|
1338
1340
|
])
|
|
1339
1341
|
]),
|
|
1340
|
-
], template: "<div *ngIf=\"canDisplay\" class=\"flex mb-6\" #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
|
|
1342
|
+
], template: "<div *ngIf=\"canDisplay\" class=\"flex mb-6\" #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-8 w-8 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-xl\"\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]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n <ng-content></ng-content>\n </fieldset>\n </div>\n </div>\n</div>" }]
|
|
1341
1343
|
}], ctorParameters: function () {
|
|
1342
1344
|
return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: NgtStylizableDirective, decorators: [{
|
|
1343
1345
|
type: Self
|
|
@@ -3242,9 +3244,10 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3242
3244
|
this.destroySubscriptions();
|
|
3243
3245
|
}
|
|
3244
3246
|
onOpen() {
|
|
3245
|
-
const
|
|
3246
|
-
if (this.dropdownPosition == 'auto' &&
|
|
3247
|
-
|
|
3247
|
+
const parentElements = document.querySelectorAll('#ngtSelectParentContainer');
|
|
3248
|
+
if (this.dropdownPosition == 'auto' && (parentElements === null || parentElements === void 0 ? void 0 : parentElements.length)) {
|
|
3249
|
+
const parentContainer = parentElements[parentElements.length - 1];
|
|
3250
|
+
this.calculateDropdownPosition(parentContainer);
|
|
3248
3251
|
}
|
|
3249
3252
|
}
|
|
3250
3253
|
removeItem(event, item) {
|
|
@@ -3373,7 +3376,7 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3373
3376
|
disabled() {
|
|
3374
3377
|
return this.isDisabled || this.isDisabledByParent();
|
|
3375
3378
|
}
|
|
3376
|
-
calculateDropdownPosition(
|
|
3379
|
+
calculateDropdownPosition(parentContainer) {
|
|
3377
3380
|
return __awaiter(this, void 0, void 0, function* () {
|
|
3378
3381
|
while (!this.componentReady || this.loading || this.ngSelectComponent.showNoItemsFound()) {
|
|
3379
3382
|
yield delay(200);
|
|
@@ -3388,10 +3391,13 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3388
3391
|
const ngSelectYPosition = ngSelectElement.getBoundingClientRect().y;
|
|
3389
3392
|
const dropdownHeight = this.ngSelectComponent.dropdownPanel.contentElementRef.nativeElement.offsetHeight;
|
|
3390
3393
|
const openedSelectHeight = ngSelectHeight + dropdownHeight;
|
|
3391
|
-
const parentYPosition =
|
|
3394
|
+
const parentYPosition = parentContainer.getBoundingClientRect().y;
|
|
3392
3395
|
const ngSelectYPositionInsideParent = ngSelectYPosition - parentYPosition;
|
|
3393
3396
|
const openedSelectTotalHeight = openedSelectHeight + ngSelectYPositionInsideParent;
|
|
3394
|
-
const
|
|
3397
|
+
const parentContainerHeight = parentContainer.clientHeight;
|
|
3398
|
+
const fitsOnTop = openedSelectHeight < ngSelectYPositionInsideParent;
|
|
3399
|
+
const fitsOnBottom = openedSelectTotalHeight < parentContainerHeight;
|
|
3400
|
+
const dropdownPosition = !fitsOnBottom && fitsOnTop
|
|
3395
3401
|
? 'top'
|
|
3396
3402
|
: 'bottom';
|
|
3397
3403
|
this.ngSelectComponent.dropdownPanel['_currentPosition'] = dropdownPosition;
|