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/fesm2020/ng-tailwind.mjs
CHANGED
|
@@ -1244,6 +1244,7 @@ class NgtSectionComponent {
|
|
|
1244
1244
|
my: 'my-1',
|
|
1245
1245
|
pr: 'pr-1',
|
|
1246
1246
|
px: 'md:px-5',
|
|
1247
|
+
border: 'border-b-4 md:border-b-0 border-dashed md:border-solid md:border-l',
|
|
1247
1248
|
color: {
|
|
1248
1249
|
text: 'text-gray-800'
|
|
1249
1250
|
}
|
|
@@ -1254,6 +1255,7 @@ class NgtSectionComponent {
|
|
|
1254
1255
|
ml: 'ml-2',
|
|
1255
1256
|
pb: 'pb-2',
|
|
1256
1257
|
border: 'border-none',
|
|
1258
|
+
px: 'px-5',
|
|
1257
1259
|
color: {
|
|
1258
1260
|
text: 'text-gray-800',
|
|
1259
1261
|
border: ''
|
|
@@ -1304,7 +1306,7 @@ class NgtSectionComponent {
|
|
|
1304
1306
|
}
|
|
1305
1307
|
}
|
|
1306
1308
|
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 });
|
|
1307
|
-
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
|
|
1309
|
+
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: [
|
|
1308
1310
|
trigger('enterAnimation', [
|
|
1309
1311
|
state('void', style({ transform: 'translateY(-20px)', opacity: 0 })),
|
|
1310
1312
|
transition(':enter', [
|
|
@@ -1321,7 +1323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
1321
1323
|
animate(400)
|
|
1322
1324
|
])
|
|
1323
1325
|
]),
|
|
1324
|
-
], 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
|
|
1326
|
+
], 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>" }]
|
|
1325
1327
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: NgtStylizableDirective, decorators: [{
|
|
1326
1328
|
type: Self
|
|
1327
1329
|
}, {
|
|
@@ -3193,9 +3195,10 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3193
3195
|
this.destroySubscriptions();
|
|
3194
3196
|
}
|
|
3195
3197
|
onOpen() {
|
|
3196
|
-
const
|
|
3197
|
-
if (this.dropdownPosition == 'auto' &&
|
|
3198
|
-
|
|
3198
|
+
const parentElements = document.querySelectorAll('#ngtSelectParentContainer');
|
|
3199
|
+
if (this.dropdownPosition == 'auto' && parentElements?.length) {
|
|
3200
|
+
const parentContainer = parentElements[parentElements.length - 1];
|
|
3201
|
+
this.calculateDropdownPosition(parentContainer);
|
|
3199
3202
|
}
|
|
3200
3203
|
}
|
|
3201
3204
|
removeItem(event, item) {
|
|
@@ -3324,7 +3327,7 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3324
3327
|
disabled() {
|
|
3325
3328
|
return this.isDisabled || this.isDisabledByParent();
|
|
3326
3329
|
}
|
|
3327
|
-
async calculateDropdownPosition(
|
|
3330
|
+
async calculateDropdownPosition(parentContainer) {
|
|
3328
3331
|
while (!this.componentReady || this.loading || this.ngSelectComponent.showNoItemsFound()) {
|
|
3329
3332
|
await delay(200);
|
|
3330
3333
|
if (this.ngSelectComponent.showNoItemsFound() && !this.loading && this.componentReady) {
|
|
@@ -3338,10 +3341,13 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3338
3341
|
const ngSelectYPosition = ngSelectElement.getBoundingClientRect().y;
|
|
3339
3342
|
const dropdownHeight = this.ngSelectComponent.dropdownPanel.contentElementRef.nativeElement.offsetHeight;
|
|
3340
3343
|
const openedSelectHeight = ngSelectHeight + dropdownHeight;
|
|
3341
|
-
const parentYPosition =
|
|
3344
|
+
const parentYPosition = parentContainer.getBoundingClientRect().y;
|
|
3342
3345
|
const ngSelectYPositionInsideParent = ngSelectYPosition - parentYPosition;
|
|
3343
3346
|
const openedSelectTotalHeight = openedSelectHeight + ngSelectYPositionInsideParent;
|
|
3344
|
-
const
|
|
3347
|
+
const parentContainerHeight = parentContainer.clientHeight;
|
|
3348
|
+
const fitsOnTop = openedSelectHeight < ngSelectYPositionInsideParent;
|
|
3349
|
+
const fitsOnBottom = openedSelectTotalHeight < parentContainerHeight;
|
|
3350
|
+
const dropdownPosition = !fitsOnBottom && fitsOnTop
|
|
3345
3351
|
? 'top'
|
|
3346
3352
|
: 'bottom';
|
|
3347
3353
|
this.ngSelectComponent.dropdownPanel['_currentPosition'] = dropdownPosition;
|