@tekus/design-system 5.5.0 → 5.6.0

package/fesm2022/tekus-design-system-components-toolbar.mjs

@@ -0,0 +1,126 @@
+import * as i0 from '@angular/core';
+import { model, signal, input, Component } from '@angular/core';
+import { ButtonComponent } from '@tekus/design-system/components/button';
+import { SelectComponent } from '@tekus/design-system/components/select';
+import { InputTextComponent } from '@tekus/design-system/components/input-text';
+
+class ToolbarComponent {
+    constructor() {
+        /**
+         * @property {ModelSignal<string>} searchModel
+         * @description
+         * Two-way bindable signal for the search input value.
+         * Supports [(searchModel)]="variable" syntax for two-way binding.
+         * @default ''
+         */
+        this.searchModel = model('');
+        /**
+         * @property {ModelSignal<Record<string, string> | null>} filterModel
+         * @description
+         * Two-way bindable signal for the filter select value.
+         * Supports [(filterModel)]="variable" syntax for two-way binding.
+         * @default null
+         */
+        this.filterModel = model(null);
+        /**
+         * @property {WritableSignal<boolean>} showSearchInput
+         * @description
+         * Controls the visibility of the search input. Toggles when the search button is clicked.
+         * @default false
+         */
+        this.showSearchInput = signal(false);
+        /**
+         * @property {WritableSignal<boolean>} showFilterSelect
+         * @description
+         * Controls the visibility of the filter select. Toggles when the filter button is clicked.
+         * @default false
+         */
+        this.showFilterSelect = signal(false);
+        /**
+         * @property {InputSignal<Array<{ label: string; value: string }>>} filterOptions
+         * @description
+         * Array of options available in the filter select dropdown.
+         * Each option is an object with `label` (displayed text) and `value` (internal identifier).
+         *
+         * @default
+         * [
+         *   { label: 'Option 1', value: 'option1' },
+         *   { label: 'Option 2', value: 'option2' },
+         *   { label: 'Option 3', value: 'option3' }
+         * ]
+         */
+        this.filterOptions = input([
+            { label: 'Option 1', value: 'option1' },
+            { label: 'Option 2', value: 'option2' },
+            { label: 'Option 3', value: 'option3' },
+        ]);
+        /**
+         * @property {InputSignal<string>} filterOptionLabel
+         * @description
+         * Property name used to display the label in the select dropdown options.
+         * This corresponds to the key in each option object that contains the display text.
+         *
+         * @default 'label'
+         */
+        this.filterOptionLabel = input('label');
+        /**
+         * @property {InputSignal<string>} filterFloatLabel
+         * @description
+         * Label text displayed above the filter select input using the FloatLabel wrapper.
+         * This is the placeholder/label that floats when the select is focused or has a value.
+         *
+         * @default 'Filtrar'
+         */
+        this.filterFloatLabel = input('Filtrar');
+        /**
+         * @property {InputSignal<string>} searchFloatLabel
+         * @description
+         * Label text displayed above the search input using the FloatLabel wrapper.
+         * This is the placeholder/label that floats when the search input is focused or has a value.
+         *
+         * @default 'Buscar'
+         */
+        this.searchFloatLabel = input('Buscar');
+    }
+    /**
+     * @method toggleSearchInput
+     * @description
+     * Toggles the visibility of the search input field.
+     */
+    toggleSearchInput() {
+        this.showSearchInput.update(value => !value);
+        this.searchModel.set('');
+    }
+    /**
+     * @method toggleFilterSelect
+     * @description
+     * Toggles the visibility of the filter select dropdown.
+     */
+    toggleFilterSelect() {
+        this.showFilterSelect.update(value => !value);
+        this.filterModel.set(null);
+    }
+    /**
+     * @method onSelectedOption
+     * @description
+     * Handles filter select changes and updates the filterModel signal.
+     *
+     * @param value - Selected option value from tk-select
+     */
+    onSelectedOption(value) {
+        this.filterModel.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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  } @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", styles: [".toolbar{display:flex;align-items:flex-end;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}@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"], 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", "options", "optionLabel", "label", "showClear", "disabled", "model"], outputs: ["modelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            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  } @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", styles: [".toolbar{display:flex;align-items:flex-end;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}@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"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ToolbarComponent };
+//# sourceMappingURL=tekus-design-system-components-toolbar.mjs.map

package/fesm2022/tekus-design-system-components-toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-toolbar.mjs","sources":["../../../projects/design-system/components/toolbar/src/toolbar.component.ts","../../../projects/design-system/components/toolbar/src/toolbar.component.html","../../../projects/design-system/components/toolbar/tekus-design-system-components-toolbar.ts"],"sourcesContent":["import { Component, model, signal, input } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { SelectComponent } from '@tekus/design-system/components/select';\nimport { InputTextComponent } from '@tekus/design-system/components/input-text';\n\n@Component({\n  selector: 'tk-toolbar',\n  imports: [ButtonComponent, InputTextComponent, SelectComponent],\n  templateUrl: './toolbar.component.html',\n  styleUrl: './toolbar.component.scss',\n})\nexport class ToolbarComponent {\n  /**\n   * @property {ModelSignal<string>} searchModel\n   * @description\n   * Two-way bindable signal for the search input value.\n   * Supports [(searchModel)]=\"variable\" syntax for two-way binding.\n   * @default ''\n   */\n  searchModel = model<string>('');\n\n  /**\n   * @property {ModelSignal<Record<string, string> | null>} filterModel\n   * @description\n   * Two-way bindable signal for the filter select value.\n   * Supports [(filterModel)]=\"variable\" syntax for two-way binding.\n   * @default null\n   */\n  filterModel = model<Record<string, string> | null>(null);\n\n  /**\n   * @property {WritableSignal<boolean>} showSearchInput\n   * @description\n   * Controls the visibility of the search input. Toggles when the search button is clicked.\n   * @default false\n   */\n  showSearchInput = signal<boolean>(false);\n\n  /**\n   * @property {WritableSignal<boolean>} showFilterSelect\n   * @description\n   * Controls the visibility of the filter select. Toggles when the filter button is clicked.\n   * @default false\n   */\n  showFilterSelect = signal<boolean>(false);\n\n  /**\n   * @property {InputSignal<Array<{ label: string; value: string }>>} filterOptions\n   * @description\n   * Array of options available in the filter select dropdown.\n   * Each option is an object with `label` (displayed text) and `value` (internal identifier).\n   *\n   * @default\n   * [\n   *   { label: 'Option 1', value: 'option1' },\n   *   { label: 'Option 2', value: 'option2' },\n   *   { label: 'Option 3', value: 'option3' }\n   * ]\n   */\n  filterOptions = input<Array<{ label: string; value: string }>>([\n    { label: 'Option 1', value: 'option1' },\n    { label: 'Option 2', value: 'option2' },\n    { label: 'Option 3', value: 'option3' },\n  ]);\n\n  /**\n   * @property {InputSignal<string>} filterOptionLabel\n   * @description\n   * Property name used to display the label in the select dropdown options.\n   * This corresponds to the key in each option object that contains the display text.\n   *\n   * @default 'label'\n   */\n  filterOptionLabel = input<string>('label');\n\n  /**\n   * @property {InputSignal<string>} filterFloatLabel\n   * @description\n   * Label text displayed above the filter select input using the FloatLabel wrapper.\n   * This is the placeholder/label that floats when the select is focused or has a value.\n   *\n   * @default 'Filtrar'\n   */\n  filterFloatLabel = input<string>('Filtrar');\n\n  /**\n   * @property {InputSignal<string>} searchFloatLabel\n   * @description\n   * Label text displayed above the search input using the FloatLabel wrapper.\n   * This is the placeholder/label that floats when the search input is focused or has a value.\n   *\n   * @default 'Buscar'\n   */\n  searchFloatLabel = input<string>('Buscar');\n\n  /**\n   * @method toggleSearchInput\n   * @description\n   * Toggles the visibility of the search input field.\n   */\n  toggleSearchInput(): void {\n    this.showSearchInput.update(value => !value);\n    this.searchModel.set('');\n  }\n\n  /**\n   * @method toggleFilterSelect\n   * @description\n   * Toggles the visibility of the filter select dropdown.\n   */\n  toggleFilterSelect(): void {\n    this.showFilterSelect.update(value => !value);\n    this.filterModel.set(null);\n  }\n\n  /**\n   * @method onSelectedOption\n   * @description\n   * Handles filter select changes and updates the filterModel signal.\n   *\n   * @param value - Selected option value from tk-select\n   */\n  onSelectedOption(value: Record<string, string> | null): void {\n    this.filterModel.set(value);\n  }\n}\n","<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  } @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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^19.2.15",
@@ -39,14 +39,6 @@
       "types": "./core/index.d.ts",
       "default": "./fesm2022/tekus-design-system-core.mjs"
     },
-    "./core/types": {
-      "types": "./core/types/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-core-types.mjs"
-    },
-    "./directives/gird-item": {
-      "types": "./directives/gird-item/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"
-    },
     "./components/button": {
       "types": "./components/button/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-button.mjs"
@@ -75,10 +67,30 @@
       "types": "./components/multiselect/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-multiselect.mjs"
     },
+    "./components/pagination": {
+      "types": "./components/pagination/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-pagination.mjs"
+    },
+    "./components/select": {
+      "types": "./components/select/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-select.mjs"
+    },
     "./components/tag": {
       "types": "./components/tag/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-tag.mjs"
     },
+    "./components/toolbar": {
+      "types": "./components/toolbar/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-toolbar.mjs"
+    },
+    "./directives/gird-item": {
+      "types": "./directives/gird-item/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"
+    },
+    "./core/types": {
+      "types": "./core/types/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-core-types.mjs"
+    },
     "./utils/sanitizer-utils": {
       "types": "./utils/sanitizer-utils/index.d.ts",
       "default": "./fesm2022/tekus-design-system-utils-sanitizer-utils.mjs"