@stemy/ngx-utils 19.9.20 → 19.9.22
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 +42 -11
- package/fesm2022/stemy-ngx-utils.mjs.map +1 -1
- package/ngx-utils/common-types.d.ts +2 -1
- package/ngx-utils/components/btn/btn.component.d.ts +1 -0
- package/ngx-utils/components/tabs/tabs.component.d.ts +7 -3
- package/ngx-utils/directives/tabs-item.directive.d.ts +3 -1
- package/ngx-utils/ngx-utils.imports.d.ts +2 -2
- package/package.json +1 -1
|
@@ -7280,12 +7280,13 @@ class TabsItemDirective {
|
|
|
7280
7280
|
this.tooltip = input("");
|
|
7281
7281
|
this.icon = input("");
|
|
7282
7282
|
this.disabled = input(false);
|
|
7283
|
+
this.path = input(null);
|
|
7283
7284
|
this.classes = input("");
|
|
7284
7285
|
this.element = inject(ElementRef, { optional: true });
|
|
7285
7286
|
this.template = inject(TemplateRef, { optional: true });
|
|
7286
7287
|
}
|
|
7287
7288
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7288
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.19", 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 }); }
|
|
7289
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.19", 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 }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
7289
7290
|
}
|
|
7290
7291
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsItemDirective, decorators: [{
|
|
7291
7292
|
type: Directive,
|
|
@@ -7417,7 +7418,7 @@ class BtnComponent {
|
|
|
7417
7418
|
this.tooltip = input("");
|
|
7418
7419
|
this.icon = input("");
|
|
7419
7420
|
this.disabled = input(false);
|
|
7420
|
-
this.path = input(
|
|
7421
|
+
this.path = input(null);
|
|
7421
7422
|
this.type = input("primary");
|
|
7422
7423
|
this.size = input("normal");
|
|
7423
7424
|
this.buttonType = inject(BUTTON_TYPE);
|
|
@@ -7437,13 +7438,22 @@ class BtnComponent {
|
|
|
7437
7438
|
contains(target) {
|
|
7438
7439
|
return !(target instanceof HTMLElement) || this.element.nativeElement?.contains(target);
|
|
7439
7440
|
}
|
|
7441
|
+
onBtnClick(event) {
|
|
7442
|
+
const isNewTabAction = event.ctrlKey || event.metaKey || event.button === 1;
|
|
7443
|
+
if (!isNewTabAction) {
|
|
7444
|
+
event.preventDefault();
|
|
7445
|
+
}
|
|
7446
|
+
}
|
|
7440
7447
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: BtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7441
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.19", type: BtnComponent, isStandalone: false, selector: "btn", inputs: { 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 }, path: { classPropertyName: "path", publicName: "path", 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 } }, ngImport: i0, template: "<ng-container [ngComponentOutlet]=\"buttonType\"\r\n [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7448
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.19", type: BtnComponent, isStandalone: false, selector: "btn", inputs: { 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 }, path: { classPropertyName: "path", publicName: "path", 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 } }, host: { listeners: { "click": "onBtnClick($event)" } }, ngImport: i0, template: "<ng-container [ngComponentOutlet]=\"buttonType\"\r\n [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7442
7449
|
}
|
|
7443
7450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: BtnComponent, decorators: [{
|
|
7444
7451
|
type: Component,
|
|
7445
7452
|
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "btn", template: "<ng-container [ngComponentOutlet]=\"buttonType\"\r\n [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\r\n" }]
|
|
7446
|
-
}]
|
|
7453
|
+
}], propDecorators: { onBtnClick: [{
|
|
7454
|
+
type: HostListener,
|
|
7455
|
+
args: ["click", ["$event"]]
|
|
7456
|
+
}] } });
|
|
7447
7457
|
|
|
7448
7458
|
class IconComponent {
|
|
7449
7459
|
constructor() {
|
|
@@ -9102,6 +9112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
9102
9112
|
|
|
9103
9113
|
class TabsComponent {
|
|
9104
9114
|
constructor() {
|
|
9115
|
+
this.urlSerializer = inject(UrlSerializer);
|
|
9116
|
+
this.router = inject(Router);
|
|
9105
9117
|
this.value = model();
|
|
9106
9118
|
this.options = input([]);
|
|
9107
9119
|
this.type = input("primary");
|
|
@@ -9112,7 +9124,17 @@ class TabsComponent {
|
|
|
9112
9124
|
this.selectedChange = output();
|
|
9113
9125
|
this.template = signal(null);
|
|
9114
9126
|
this.tabs = computed(() => {
|
|
9115
|
-
const options =
|
|
9127
|
+
const options = (this.options() || [])
|
|
9128
|
+
.filter(option => ObjectUtils.isStringWithValue(option?.label))
|
|
9129
|
+
.map(option => {
|
|
9130
|
+
const path = !option.path
|
|
9131
|
+
? null
|
|
9132
|
+
: (option.path instanceof UrlTree ? this.urlSerializer.serialize(option.path) : option.path);
|
|
9133
|
+
return {
|
|
9134
|
+
...option,
|
|
9135
|
+
path
|
|
9136
|
+
};
|
|
9137
|
+
});
|
|
9116
9138
|
const current = this.value();
|
|
9117
9139
|
this.tabItems().forEach(item => {
|
|
9118
9140
|
const value = item.value();
|
|
@@ -9122,6 +9144,7 @@ class TabsComponent {
|
|
|
9122
9144
|
const label = item.label();
|
|
9123
9145
|
if (!label)
|
|
9124
9146
|
return;
|
|
9147
|
+
const path = item.path();
|
|
9125
9148
|
options.push({
|
|
9126
9149
|
value,
|
|
9127
9150
|
label,
|
|
@@ -9129,6 +9152,9 @@ class TabsComponent {
|
|
|
9129
9152
|
tooltip: item.tooltip(),
|
|
9130
9153
|
icon: item.icon(),
|
|
9131
9154
|
disabled: item.disabled(),
|
|
9155
|
+
path: !path
|
|
9156
|
+
? null
|
|
9157
|
+
: (path instanceof UrlTree ? this.urlSerializer.serialize(path) : path),
|
|
9132
9158
|
template: item.template
|
|
9133
9159
|
});
|
|
9134
9160
|
});
|
|
@@ -9141,6 +9167,15 @@ class TabsComponent {
|
|
|
9141
9167
|
});
|
|
9142
9168
|
return options;
|
|
9143
9169
|
});
|
|
9170
|
+
this.select = async (option) => {
|
|
9171
|
+
if (option.path) {
|
|
9172
|
+
await this.router.navigateByUrl(option.path);
|
|
9173
|
+
return null;
|
|
9174
|
+
}
|
|
9175
|
+
this.value.set(option.value);
|
|
9176
|
+
this.selectedChange.emit(option);
|
|
9177
|
+
return null;
|
|
9178
|
+
};
|
|
9144
9179
|
effect(() => {
|
|
9145
9180
|
const tabOptions = this.tabs();
|
|
9146
9181
|
const selectedOption = tabOptions.find(o => o.active);
|
|
@@ -9153,16 +9188,12 @@ class TabsComponent {
|
|
|
9153
9188
|
}
|
|
9154
9189
|
});
|
|
9155
9190
|
}
|
|
9156
|
-
select(option) {
|
|
9157
|
-
this.value.set(option.value);
|
|
9158
|
-
this.selectedChange.emit(option);
|
|
9159
|
-
}
|
|
9160
9191
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9161
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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 }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, tabsClass: { classPropertyName: "tabsClass", publicName: "tabsClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedChange: "selectedChange" }, queries: [{ propertyName: "tabItems", predicate: TabsItemDirective, isSignal: true }], ngImport: i0, template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n @for (option of tabList; track option.value) {\r\n <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n <btn [label]=\"option.label\"\r\n [tooltip]=\"option.tooltip\"\r\n [icon]=\"option.icon\"\r\n [disabled]=\"option.disabled\"\r\n [type]=\"option.active ? tabType : 'transparent'\"\r\n [size]=\"tabSize\"\r\n
|
|
9192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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 }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, tabsClass: { classPropertyName: "tabsClass", publicName: "tabsClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedChange: "selectedChange" }, queries: [{ propertyName: "tabItems", predicate: TabsItemDirective, isSignal: true }], ngImport: i0, template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n @for (option of tabList; track option.value) {\r\n <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n <btn [label]=\"option.label\"\r\n [tooltip]=\"option.tooltip\"\r\n [icon]=\"option.icon\"\r\n [disabled]=\"option.disabled\"\r\n [path]=\"option.path\"\r\n [type]=\"option.active ? tabType : 'transparent'\"\r\n [size]=\"tabSize\"\r\n [async-method]=\"select\"\r\n [context]=\"option\"></btn>\r\n </li>\r\n }\r\n </ul>\r\n}\r\n@if (tabTemplate) {\r\n <div class=\"ui-tab\">\r\n <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\r\n </div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--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);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AsyncMethodDirective, selector: "[async-method]", inputs: ["async-method"], exportAs: ["async-method"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9162
9193
|
}
|
|
9163
9194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, decorators: [{
|
|
9164
9195
|
type: Component,
|
|
9165
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n @for (option of tabList; track option.value) {\r\n <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n <btn [label]=\"option.label\"\r\n [tooltip]=\"option.tooltip\"\r\n [icon]=\"option.icon\"\r\n [disabled]=\"option.disabled\"\r\n [type]=\"option.active ? tabType : 'transparent'\"\r\n [size]=\"tabSize\"\r\n
|
|
9196
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n @for (option of tabList; track option.value) {\r\n <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n <btn [label]=\"option.label\"\r\n [tooltip]=\"option.tooltip\"\r\n [icon]=\"option.icon\"\r\n [disabled]=\"option.disabled\"\r\n [path]=\"option.path\"\r\n [type]=\"option.active ? tabType : 'transparent'\"\r\n [size]=\"tabSize\"\r\n [async-method]=\"select\"\r\n [context]=\"option\"></btn>\r\n </li>\r\n }\r\n </ul>\r\n}\r\n@if (tabTemplate) {\r\n <div class=\"ui-tab\">\r\n <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\r\n </div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--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);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"] }]
|
|
9166
9197
|
}], ctorParameters: () => [] });
|
|
9167
9198
|
|
|
9168
9199
|
class UnorderedListComponent {
|