@tekus/design-system 5.15.0 → 5.17.0
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/assets/readme-images/tabs-badge.svg +20 -0
- package/assets/readme-images/tabs-default.svg +16 -0
- package/assets/readme-images/tabs-multiple.svg +17 -0
- package/assets/readme-images/tabs-truncation.svg +16 -0
- package/components/tabs/index.d.ts +5 -0
- package/components/tabs/public-api.d.ts +2 -0
- package/components/tabs/src/tabs.component.d.ts +52 -0
- package/components/tabs/src/tabs.interface.d.ts +11 -0
- package/fesm2022/tekus-design-system-components-autocomplete.mjs +3 -3
- package/fesm2022/tekus-design-system-components-badge.mjs +3 -3
- package/fesm2022/tekus-design-system-components-button.mjs +3 -3
- package/fesm2022/tekus-design-system-components-checkbox.mjs +3 -3
- package/fesm2022/tekus-design-system-components-date-picker.mjs +3 -3
- package/fesm2022/tekus-design-system-components-fallback-view.mjs +3 -3
- package/fesm2022/tekus-design-system-components-icon.mjs +3 -3
- package/fesm2022/tekus-design-system-components-input-number.mjs +3 -3
- package/fesm2022/tekus-design-system-components-input-text.mjs +3 -3
- package/fesm2022/tekus-design-system-components-modal.mjs +6 -6
- package/fesm2022/tekus-design-system-components-multiselect.mjs +3 -3
- package/fesm2022/tekus-design-system-components-pagination.mjs +3 -3
- package/fesm2022/tekus-design-system-components-radio-button.mjs +3 -3
- package/fesm2022/tekus-design-system-components-select.mjs +3 -3
- package/fesm2022/tekus-design-system-components-table.mjs +3 -3
- package/fesm2022/tekus-design-system-components-tabs.mjs +77 -0
- package/fesm2022/tekus-design-system-components-tabs.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-tag.mjs +3 -3
- package/fesm2022/tekus-design-system-components-textarea.mjs +3 -3
- package/fesm2022/tekus-design-system-components-toolbar.mjs +3 -3
- package/fesm2022/tekus-design-system-components-tooltip.mjs +3 -3
- package/fesm2022/tekus-design-system-directives-gird-item.mjs +3 -3
- package/package.json +13 -9
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, model, output, viewChild, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/common';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
import * as i2 from 'primeng/tabs';
|
|
6
|
+
import { TabsModule } from 'primeng/tabs';
|
|
7
|
+
import { TooltipComponent } from '@tekus/design-system/components/tooltip';
|
|
8
|
+
import { BadgeComponent } from '@tekus/design-system/components/badge';
|
|
9
|
+
|
|
10
|
+
class TabsComponent {
|
|
11
|
+
constructor() {
|
|
12
|
+
/**
|
|
13
|
+
* @property {InputSignal<TabData[]>} tabs
|
|
14
|
+
* @description
|
|
15
|
+
* Array of tab configurations to display.
|
|
16
|
+
*/
|
|
17
|
+
this.tabs = input([]);
|
|
18
|
+
/**
|
|
19
|
+
* @property {ModelSignal<number>} activeIndex
|
|
20
|
+
* @description
|
|
21
|
+
* The index of the currently active tab. Supports two-way binding via signals.
|
|
22
|
+
* @default 0
|
|
23
|
+
*/
|
|
24
|
+
this.activeIndex = model(0);
|
|
25
|
+
/**
|
|
26
|
+
* @event tabChange
|
|
27
|
+
* @description
|
|
28
|
+
* Emitted when the active tab changes.
|
|
29
|
+
* Payload: object containing the tab index and tab data.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* <tk-tabs (tabChange)="onTabChange($event)"></tk-tabs>
|
|
33
|
+
*/
|
|
34
|
+
this.tabChange = output();
|
|
35
|
+
/**
|
|
36
|
+
* @property {ViewChild<TabsComponent>} tkTabs
|
|
37
|
+
* @description
|
|
38
|
+
* Reference to the tabs component for programmatic access.
|
|
39
|
+
*/
|
|
40
|
+
this.tkTabs = viewChild('tkTabs');
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* @method visibleTabs
|
|
44
|
+
* @description
|
|
45
|
+
* Returns only the tabs that are marked as visible.
|
|
46
|
+
* @returns {TabData[]} Array of visible tabs.
|
|
47
|
+
*/
|
|
48
|
+
get visibleTabs() {
|
|
49
|
+
return this.tabs().filter(t => t.visible !== false);
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* @method onTabChange
|
|
53
|
+
* @description
|
|
54
|
+
* Handles tab change events and emits the tabChange output.
|
|
55
|
+
* @param {number} index - The index of the newly selected tab.
|
|
56
|
+
*/
|
|
57
|
+
onTabChange(index) {
|
|
58
|
+
this.activeIndex.set(index);
|
|
59
|
+
this.tabChange.emit({
|
|
60
|
+
index,
|
|
61
|
+
tab: this.visibleTabs[index],
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
65
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TabsComponent, isStandalone: true, selector: "tk-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tkTabs", first: true, predicate: ["tkTabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-tabs\n #tkTabs\n [value]=\"activeIndex()\"\n scrollable\n (valueChange)=\"onTabChange(+$event)\"\n class=\"tk-tabs\">\n <p-tablist>\n <p-tab\n *ngFor=\"let tab of visibleTabs; let i = index\"\n [value]=\"i\"\n [disabled]=\"tab.disabled\"\n tooltipPosition=\"top\">\n <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n <span\n class=\"tk-tab-label\"\n [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n {{ tab.label }}\n </span>\n </tk-tooltip>\n @if(tab.badge){\n <tk-badge [value]=\"tab.badge\"></tk-badge>\n }\n </p-tab>\n </p-tablist>\n\n <p-tabpanels>\n @for (tab of visibleTabs; track $index) {\n <p-tabpanel [value]=\"$index\">\n @if (!tab.lazy || activeIndex() === $index) {\n <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n }\n </p-tabpanel>\n }\n </p-tabpanels>\n</p-tabs>\n", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }] }); }
|
|
66
|
+
}
|
|
67
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabsComponent, decorators: [{
|
|
68
|
+
type: Component,
|
|
69
|
+
args: [{ selector: 'tk-tabs', imports: [CommonModule, TabsModule, TooltipComponent, BadgeComponent], template: "<p-tabs\n #tkTabs\n [value]=\"activeIndex()\"\n scrollable\n (valueChange)=\"onTabChange(+$event)\"\n class=\"tk-tabs\">\n <p-tablist>\n <p-tab\n *ngFor=\"let tab of visibleTabs; let i = index\"\n [value]=\"i\"\n [disabled]=\"tab.disabled\"\n tooltipPosition=\"top\">\n <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n <span\n class=\"tk-tab-label\"\n [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n {{ tab.label }}\n </span>\n </tk-tooltip>\n @if(tab.badge){\n <tk-badge [value]=\"tab.badge\"></tk-badge>\n }\n </p-tab>\n </p-tablist>\n\n <p-tabpanels>\n @for (tab of visibleTabs; track $index) {\n <p-tabpanel [value]=\"$index\">\n @if (!tab.lazy || activeIndex() === $index) {\n <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n }\n </p-tabpanel>\n }\n </p-tabpanels>\n</p-tabs>\n", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"] }]
|
|
70
|
+
}] });
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* Generated bundle index. Do not edit.
|
|
74
|
+
*/
|
|
75
|
+
|
|
76
|
+
export { TabsComponent };
|
|
77
|
+
//# sourceMappingURL=tekus-design-system-components-tabs.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-tabs.mjs","sources":["../../../projects/design-system/components/tabs/src/tabs.component.ts","../../../projects/design-system/components/tabs/src/tabs.component.html","../../../projects/design-system/components/tabs/tekus-design-system-components-tabs.ts"],"sourcesContent":["import { Component, input, output, model, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabsModule } from 'primeng/tabs';\nimport { TabData } from './tabs.interface';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\nimport { BadgeComponent } from '@tekus/design-system/components/badge';\n\n@Component({\n selector: 'tk-tabs',\n imports: [CommonModule, TabsModule, TooltipComponent, BadgeComponent],\n templateUrl: './tabs.component.html',\n styleUrl: './tabs.component.scss',\n})\nexport class TabsComponent {\n /**\n * @property {InputSignal<TabData[]>} tabs\n * @description\n * Array of tab configurations to display.\n */\n tabs = input<TabData[]>([]);\n\n /**\n * @property {ModelSignal<number>} activeIndex\n * @description\n * The index of the currently active tab. Supports two-way binding via signals.\n * @default 0\n */\n activeIndex = model<number>(0);\n\n /**\n * @event tabChange\n * @description\n * Emitted when the active tab changes.\n * Payload: object containing the tab index and tab data.\n *\n * @example\n * <tk-tabs (tabChange)=\"onTabChange($event)\"></tk-tabs>\n */\n tabChange = output<{\n index: number;\n tab: TabData;\n }>();\n\n /**\n * @property {ViewChild<TabsComponent>} tkTabs\n * @description\n * Reference to the tabs component for programmatic access.\n */\n tkTabs = viewChild('tkTabs');\n\n /**\n * @method visibleTabs\n * @description\n * Returns only the tabs that are marked as visible.\n * @returns {TabData[]} Array of visible tabs.\n */\n get visibleTabs(): TabData[] {\n return this.tabs().filter(t => t.visible !== false);\n }\n\n /**\n * @method onTabChange\n * @description\n * Handles tab change events and emits the tabChange output.\n * @param {number} index - The index of the newly selected tab.\n */\n onTabChange(index: number) {\n this.activeIndex.set(index);\n\n this.tabChange.emit({\n index,\n tab: this.visibleTabs[index],\n });\n }\n}\n","<p-tabs\n #tkTabs\n [value]=\"activeIndex()\"\n scrollable\n (valueChange)=\"onTabChange(+$event)\"\n class=\"tk-tabs\">\n <p-tablist>\n <p-tab\n *ngFor=\"let tab of visibleTabs; let i = index\"\n [value]=\"i\"\n [disabled]=\"tab.disabled\"\n tooltipPosition=\"top\">\n <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n <span\n class=\"tk-tab-label\"\n [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n {{ tab.label }}\n </span>\n </tk-tooltip>\n @if(tab.badge){\n <tk-badge [value]=\"tab.badge\"></tk-badge>\n }\n </p-tab>\n </p-tablist>\n\n <p-tabpanels>\n @for (tab of visibleTabs; track $index) {\n <p-tabpanel [value]=\"$index\">\n @if (!tab.lazy || activeIndex() === $index) {\n <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n }\n </p-tabpanel>\n }\n </p-tabpanels>\n</p-tabs>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -63,10 +63,10 @@ class TagComponent {
|
|
|
63
63
|
return val;
|
|
64
64
|
});
|
|
65
65
|
}
|
|
66
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
67
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
66
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
67
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TagComponent, isStandalone: true, selector: "tk-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, truncationLimit: { classPropertyName: "truncationLimit", publicName: "truncationLimit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-tag \n [value]=\"displayValue()\" \n [severity]=\"primeSeverity()\" \n [styleClass]=\"'tk-tag-' + severity()\"\n></p-tag>", styles: [":host ::ng-deep .tk-tag-primary .p-tag-label{color:var(--tk-color-base-primary-700)!important}:host ::ng-deep .tk-tag-secondary .p-tag-label{color:var(--tk-color-base-surface-950)!important}:host ::ng-deep .tk-tag-success .p-tag-label{color:var(--tk-color-base-green-700)!important}:host ::ng-deep .tk-tag-info .p-tag-label{color:var(--tk-color-base-sky-700)!important}:host ::ng-deep .tk-tag-warn .p-tag-label{color:var(--tk-color-base-yellow-700)!important}:host ::ng-deep .tk-tag-danger .p-tag-label{color:var(--tk-color-base-red-700)!important}:host ::ng-deep .tk-tag-contrast .p-tag-label{color:var(--tk-color-base-surface-0)!important}:host ::ng-deep .tk-tag-contrast{background-color:var(--tk-color-base-surface-950)!important}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
|
|
68
68
|
}
|
|
69
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
69
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TagComponent, decorators: [{
|
|
70
70
|
type: Component,
|
|
71
71
|
args: [{ selector: 'tk-tag', imports: [TagModule], template: "<p-tag \n [value]=\"displayValue()\" \n [severity]=\"primeSeverity()\" \n [styleClass]=\"'tk-tag-' + severity()\"\n></p-tag>", styles: [":host ::ng-deep .tk-tag-primary .p-tag-label{color:var(--tk-color-base-primary-700)!important}:host ::ng-deep .tk-tag-secondary .p-tag-label{color:var(--tk-color-base-surface-950)!important}:host ::ng-deep .tk-tag-success .p-tag-label{color:var(--tk-color-base-green-700)!important}:host ::ng-deep .tk-tag-info .p-tag-label{color:var(--tk-color-base-sky-700)!important}:host ::ng-deep .tk-tag-warn .p-tag-label{color:var(--tk-color-base-yellow-700)!important}:host ::ng-deep .tk-tag-danger .p-tag-label{color:var(--tk-color-base-red-700)!important}:host ::ng-deep .tk-tag-contrast .p-tag-label{color:var(--tk-color-base-surface-0)!important}:host ::ng-deep .tk-tag-contrast{background-color:var(--tk-color-base-surface-950)!important}\n"] }]
|
|
72
72
|
}] });
|
|
@@ -213,10 +213,10 @@ class TextareaComponent {
|
|
|
213
213
|
get effectiveControl() {
|
|
214
214
|
return this.getControl();
|
|
215
215
|
}
|
|
216
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
217
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
216
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
217
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TextareaComponent, isStandalone: true, selector: "tk-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n <div class=\"tk-textarea-wrapper\">\n <textarea\n pTextarea\n [autoResize]=\"true\"\n [id]=\"id()\"\n [rows]=\"rows()\"\n [cols]=\"cols()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.maxlength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [class.p-filled]=\"!!value()\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\"></textarea>\n\n <label [for]=\"id()\">{{ label() }}</label>\n </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty ||\n effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">\n {{ errorMessage() }}\n </p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">\n {{ hint() }}\n </p-message>\n }\n </div>\n\n @if (maxLength()) {\n <p-message\n severity=\"secondary\"\n size=\"small\"\n variant=\"simple\"\n class=\"tk-character-counter\">\n {{ counterText() }}\n </p-message>\n }\n</div>\n", styles: [":host ::ng-deep .p-textarea{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:var(--tk-borderRadius-null, 0);padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-textarea:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-textarea.ng-invalid.ng-dirty,:host ::ng-deep .p-textarea.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-textarea.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-textarea:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-textarea) label{top:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .p-floatlabel:has(textarea:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(textarea.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(textarea:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
|
|
218
218
|
}
|
|
219
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
220
220
|
type: Component,
|
|
221
221
|
args: [{ selector: 'tk-textarea', standalone: true, imports: [
|
|
222
222
|
CommonModule,
|
|
@@ -110,10 +110,10 @@ class ToolbarComponent {
|
|
|
110
110
|
onSelectedOption(value) {
|
|
111
111
|
this.filterModel.set(value);
|
|
112
112
|
}
|
|
113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
114
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ToolbarComponent, isStandalone: true, selector: "tk-toolbar", inputs: { searchModel: { classPropertyName: "searchModel", publicName: "searchModel", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterOptionLabel: { classPropertyName: "filterOptionLabel", publicName: "filterOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFloatLabel: { classPropertyName: "filterFloatLabel", publicName: "filterFloatLabel", isSignal: true, isRequired: false, transformFunction: null }, searchFloatLabel: { classPropertyName: "searchFloatLabel", publicName: "searchFloatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", filterModel: "filterModelChange" }, ngImport: i0, template: "<div class=\"toolbar\">\n @if (showSearchInput()) {\n <div class=\"toolbar__input-container\">\n <tk-input-text\n [label]=\"searchFloatLabel()\"\n icon=\"magnifying-glass\"\n [clearable]=\"true\"\n [value]=\"searchModel()\"\n (valueChange)=\"searchModel.set($event)\">\n </tk-input-text>\n </div>\n } @if (showFilterSelect()) {\n <div class=\"toolbar__input-container\">\n <tk-select\n [options]=\"filterOptions()\"\n [optionLabel]=\"filterOptionLabel()\"\n [label]=\"filterFloatLabel()\"\n (modelChange)=\"onSelectedOption($event ?? null)\">\n </tk-select>\n </div>\n }\n <div class=\"toolbar__buttons\">\n @if (searchModel() !== undefined) {\n <tk-button\n [icon]=\"'magnifying-glass'\"\n severity=\"secondary\"\n [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n (clicked)=\"toggleSearchInput()\">\n </tk-button>\n } @if (filterModel() !== undefined) {\n <tk-button\n [icon]=\"'filter'\"\n severity=\"secondary\"\n [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n (clicked)=\"toggleFilterSelect()\">\n </tk-button>\n }\n </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);row-gap:var(--tk-spacing-base-150, 1.5rem)}.toolbar__input-container{width:15rem}.toolbar__buttons{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-50, .5rem)}@media (max-width: 768px){.toolbar{justify-content:flex-start}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-button-outlined{border:1px solid transparent!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "tk-select", inputs: ["id", "control", "options", "optionLabel", "label", "showClear", "disabled", "errorMessage", "hint", "model"], outputs: ["modelChange"] }] }); }
|
|
115
115
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
117
117
|
type: Component,
|
|
118
118
|
args: [{ selector: 'tk-toolbar', imports: [ButtonComponent, InputTextComponent, SelectComponent], template: "<div class=\"toolbar\">\n @if (showSearchInput()) {\n <div class=\"toolbar__input-container\">\n <tk-input-text\n [label]=\"searchFloatLabel()\"\n icon=\"magnifying-glass\"\n [clearable]=\"true\"\n [value]=\"searchModel()\"\n (valueChange)=\"searchModel.set($event)\">\n </tk-input-text>\n </div>\n } @if (showFilterSelect()) {\n <div class=\"toolbar__input-container\">\n <tk-select\n [options]=\"filterOptions()\"\n [optionLabel]=\"filterOptionLabel()\"\n [label]=\"filterFloatLabel()\"\n (modelChange)=\"onSelectedOption($event ?? null)\">\n </tk-select>\n </div>\n }\n <div class=\"toolbar__buttons\">\n @if (searchModel() !== undefined) {\n <tk-button\n [icon]=\"'magnifying-glass'\"\n severity=\"secondary\"\n [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n (clicked)=\"toggleSearchInput()\">\n </tk-button>\n } @if (filterModel() !== undefined) {\n <tk-button\n [icon]=\"'filter'\"\n severity=\"secondary\"\n [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n (clicked)=\"toggleFilterSelect()\">\n </tk-button>\n }\n </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);row-gap:var(--tk-spacing-base-150, 1.5rem)}.toolbar__input-container{width:15rem}.toolbar__buttons{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-50, .5rem)}@media (max-width: 768px){.toolbar{justify-content:flex-start}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-button-outlined{border:1px solid transparent!important}\n"] }]
|
|
119
119
|
}] });
|
|
@@ -21,10 +21,10 @@ class TooltipComponent {
|
|
|
21
21
|
*/
|
|
22
22
|
this.position = input('top');
|
|
23
23
|
}
|
|
24
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
25
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
24
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TooltipComponent, isStandalone: true, selector: "tk-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [pTooltip]=\"content()\" [tooltipPosition]=\"position()\" class=\"tk-tooltip-wrapper\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:inline-block}.tk-tooltip-wrapper{display:inline-block}\n"], dependencies: [{ kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
29
|
args: [{ selector: 'tk-tooltip', imports: [Tooltip], template: "<span [pTooltip]=\"content()\" [tooltipPosition]=\"position()\" class=\"tk-tooltip-wrapper\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:inline-block}.tk-tooltip-wrapper{display:inline-block}\n"] }]
|
|
30
30
|
}] });
|
|
@@ -71,10 +71,10 @@ class GridItemDirective {
|
|
|
71
71
|
get columnSpan() {
|
|
72
72
|
return `span ${this.finalSpan()}`;
|
|
73
73
|
}
|
|
74
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
75
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
74
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
75
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: GridItemDirective, isStandalone: true, selector: "[tkGridItem]", inputs: { span: "span" }, host: { properties: { "style.grid-column": "this.columnSpan" } }, ngImport: i0 }); }
|
|
76
76
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridItemDirective, decorators: [{
|
|
78
78
|
type: Directive,
|
|
79
79
|
args: [{
|
|
80
80
|
selector: '[tkGridItem]',
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tekus/design-system",
|
|
3
3
|
"description": "Tekus design system library",
|
|
4
|
-
"version": "5.
|
|
4
|
+
"version": "5.17.0",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@angular/core": "^19.2.15",
|
|
@@ -39,14 +39,6 @@
|
|
|
39
39
|
"types": "./core/index.d.ts",
|
|
40
40
|
"default": "./fesm2022/tekus-design-system-core.mjs"
|
|
41
41
|
},
|
|
42
|
-
"./core/types": {
|
|
43
|
-
"types": "./core/types/index.d.ts",
|
|
44
|
-
"default": "./fesm2022/tekus-design-system-core-types.mjs"
|
|
45
|
-
},
|
|
46
|
-
"./directives/gird-item": {
|
|
47
|
-
"types": "./directives/gird-item/index.d.ts",
|
|
48
|
-
"default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"
|
|
49
|
-
},
|
|
50
42
|
"./components/autocomplete": {
|
|
51
43
|
"types": "./components/autocomplete/index.d.ts",
|
|
52
44
|
"default": "./fesm2022/tekus-design-system-components-autocomplete.mjs"
|
|
@@ -103,6 +95,10 @@
|
|
|
103
95
|
"types": "./components/select/index.d.ts",
|
|
104
96
|
"default": "./fesm2022/tekus-design-system-components-select.mjs"
|
|
105
97
|
},
|
|
98
|
+
"./components/tabs": {
|
|
99
|
+
"types": "./components/tabs/index.d.ts",
|
|
100
|
+
"default": "./fesm2022/tekus-design-system-components-tabs.mjs"
|
|
101
|
+
},
|
|
106
102
|
"./components/table": {
|
|
107
103
|
"types": "./components/table/index.d.ts",
|
|
108
104
|
"default": "./fesm2022/tekus-design-system-components-table.mjs"
|
|
@@ -123,6 +119,14 @@
|
|
|
123
119
|
"types": "./components/tooltip/index.d.ts",
|
|
124
120
|
"default": "./fesm2022/tekus-design-system-components-tooltip.mjs"
|
|
125
121
|
},
|
|
122
|
+
"./core/types": {
|
|
123
|
+
"types": "./core/types/index.d.ts",
|
|
124
|
+
"default": "./fesm2022/tekus-design-system-core-types.mjs"
|
|
125
|
+
},
|
|
126
|
+
"./directives/gird-item": {
|
|
127
|
+
"types": "./directives/gird-item/index.d.ts",
|
|
128
|
+
"default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"
|
|
129
|
+
},
|
|
126
130
|
"./utils/sanitizer-utils": {
|
|
127
131
|
"types": "./utils/sanitizer-utils/index.d.ts",
|
|
128
132
|
"default": "./fesm2022/tekus-design-system-utils-sanitizer-utils.mjs"
|