@stemy/ngx-utils 19.5.14 → 19.5.16
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/fesm2022/stemy-ngx-utils.mjs +20 -7
- package/fesm2022/stemy-ngx-utils.mjs.map +1 -1
- package/ngx-utils/common-types.d.ts +1 -1
- package/ngx-utils/components/tabs/tabs.component.d.ts +7 -2
- package/ngx-utils/directives/tabs-item.directive.d.ts +2 -1
- package/ngx-utils/ngx-utils.imports.d.ts +2 -2
- package/ngx-utils/pipes/group-by.pipe.d.ts +1 -1
- package/package.json +1 -1
|
@@ -6349,10 +6349,11 @@ class TabsItemDirective {
|
|
|
6349
6349
|
this.tooltip = input("");
|
|
6350
6350
|
this.icon = input("");
|
|
6351
6351
|
this.disabled = input(false);
|
|
6352
|
+
this.classes = input("");
|
|
6352
6353
|
this.element = inject(ElementRef);
|
|
6353
6354
|
}
|
|
6354
6355
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6355
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: TabsItemDirective, isStandalone: false, selector: "[tabsItem]", inputs: { value: { classPropertyName: "value", publicName: "tabsItem", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
6356
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: TabsItemDirective, isStandalone: false, selector: "[tabsItem]", inputs: { value: { classPropertyName: "value", publicName: "tabsItem", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
6356
6357
|
}
|
|
6357
6358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsItemDirective, decorators: [{
|
|
6358
6359
|
type: Directive,
|
|
@@ -7843,6 +7844,7 @@ class TabsComponent {
|
|
|
7843
7844
|
return;
|
|
7844
7845
|
options.push({
|
|
7845
7846
|
value,
|
|
7847
|
+
classes: item.classes(),
|
|
7846
7848
|
label: item.label(),
|
|
7847
7849
|
tooltip: item.tooltip(),
|
|
7848
7850
|
icon: item.icon(),
|
|
@@ -7850,21 +7852,32 @@ class TabsComponent {
|
|
|
7850
7852
|
});
|
|
7851
7853
|
});
|
|
7852
7854
|
options.forEach(o => {
|
|
7853
|
-
|
|
7855
|
+
const active = current === o.value;
|
|
7856
|
+
const classes = (Array.isArray(o.classes) ? o.classes : [o.classes || ""]).filter(c => !!c);
|
|
7857
|
+
classes.push(active ? "active" : "inactive");
|
|
7858
|
+
o.active = active;
|
|
7859
|
+
o.className = classes.join(" ");
|
|
7854
7860
|
});
|
|
7855
7861
|
return options;
|
|
7856
7862
|
});
|
|
7863
|
+
effect(() => {
|
|
7864
|
+
const tabOptions = this.tabs();
|
|
7865
|
+
const selectedOption = tabOptions.find(o => o.active);
|
|
7866
|
+
if (tabOptions.length && !selectedOption) {
|
|
7867
|
+
this.value.set(tabOptions[0].value);
|
|
7868
|
+
}
|
|
7869
|
+
});
|
|
7857
7870
|
}
|
|
7858
|
-
select(
|
|
7859
|
-
this.value.set(value);
|
|
7871
|
+
select(option) {
|
|
7872
|
+
this.value.set(option.value);
|
|
7860
7873
|
}
|
|
7861
7874
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7862
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TabsComponent, isStandalone: false, selector: "tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "tabItems", predicate: TabsItemDirective, isSignal: true }], ngImport: i0, template: "<ul class=\"ui-tabs\" [ngClass]=\"'type-' +
|
|
7875
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TabsComponent, isStandalone: false, selector: "tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "tabItems", predicate: TabsItemDirective, isSignal: true }], ngImport: i0, template: "@let tabList = tabs();\n@let tabType = type();\n@let tabSize = size();\n@if (tabList.length) {\n <ul class=\"ui-tabs\" [ngClass]=\"'type-' + tabType\">\n @for (option of tabList; track option.value) {\n <li [ngClass]=\"option.className\">\n <btn [label]=\"option.label\"\n [tooltip]=\"option.tooltip\"\n [icon]=\"option.icon\"\n [disabled]=\"option.disabled\"\n [type]=\"option.active ? tabType : 'transparent'\"\n [size]=\"tabSize\"\n (click)=\"select(option)\"></btn>\n </li>\n }\n </ul>\n}\n<ng-content></ng-content>\n", styles: [".ui-tabs{--tabs-bg: var(--primary-color, var(--bs-primary, #666666));--tabs-margin: 5px;--tabs-padding: 5px;display:flex;gap:5px;margin:0 0 var(--tabs-margin) 0;padding:var(--tabs-padding);position:relative;list-style-type:none}.ui-tabs:before{content:\"\";position:absolute;inset:0;background:var(--tabs-bg);opacity:.25;border-radius:5px;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-bg: var(--secondary-color, var(--bs-secondary, #666666))}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7863
7876
|
}
|
|
7864
7877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsComponent, decorators: [{
|
|
7865
7878
|
type: Component,
|
|
7866
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "<ul class=\"ui-tabs\" [ngClass]=\"'type-' +
|
|
7867
|
-
}] });
|
|
7879
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "@let tabList = tabs();\n@let tabType = type();\n@let tabSize = size();\n@if (tabList.length) {\n <ul class=\"ui-tabs\" [ngClass]=\"'type-' + tabType\">\n @for (option of tabList; track option.value) {\n <li [ngClass]=\"option.className\">\n <btn [label]=\"option.label\"\n [tooltip]=\"option.tooltip\"\n [icon]=\"option.icon\"\n [disabled]=\"option.disabled\"\n [type]=\"option.active ? tabType : 'transparent'\"\n [size]=\"tabSize\"\n (click)=\"select(option)\"></btn>\n </li>\n }\n </ul>\n}\n<ng-content></ng-content>\n", styles: [".ui-tabs{--tabs-bg: var(--primary-color, var(--bs-primary, #666666));--tabs-margin: 5px;--tabs-padding: 5px;display:flex;gap:5px;margin:0 0 var(--tabs-margin) 0;padding:var(--tabs-padding);position:relative;list-style-type:none}.ui-tabs:before{content:\"\";position:absolute;inset:0;background:var(--tabs-bg);opacity:.25;border-radius:5px;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-bg: var(--secondary-color, var(--bs-secondary, #666666))}\n"] }]
|
|
7880
|
+
}], ctorParameters: () => [] });
|
|
7868
7881
|
|
|
7869
7882
|
class UnorderedListComponent {
|
|
7870
7883
|
constructor(cdr) {
|