@tekus/design-system 5.3.0 → 5.3.2

package/fesm2022/tekus-design-system-components-date-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-date-picker.mjs","sources":["../../../projects/design-system/components/date-picker/src/date-picker.component.ts","../../../projects/design-system/components/date-picker/src/date-picker.component.html","../../../projects/design-system/components/date-picker/tekus-design-system-components-date-picker.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  OnInit,\n  OnDestroy,\n  forwardRef,\n} from '@angular/core';\nimport {\n  FormsModule,\n  ReactiveFormsModule,\n  FormControl,\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nimport { DatePickerModule } from 'primeng/datepicker';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faCalendarDay } from '@fortawesome/pro-regular-svg-icons';\n\nconst TK_DATE_PICKER_VALUE_ACCESSOR = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => DatePickerComponent),\n  multi: true,\n};\n\nexport type DateValue = Date | [Date, Date] | null;\n@Component({\n  selector: 'tk-date-picker',\n  standalone: true,\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    DatePickerModule,\n    FloatLabelModule,\n    FaIconComponent,\n  ],\n  providers: [TK_DATE_PICKER_VALUE_ACCESSOR],\n  templateUrl: './date-picker.component.html',\n  styleUrls: ['./date-picker.component.scss'],\n})\n/**\n * @component DatePickerComponent\n * @description\n * A wrapper around PrimeNG's DatePicker component with support for single-date\n * and range selection modes. It is compatible with both Reactive Forms (formControlName, [control])\n * and Template-Driven Forms ([(ngModel)]).\n *\n * The component emits:\n * - `handleSelect` when a valid single date or a completed date range is selected.\n * - `handleClear` when the control is cleared (value becomes `null`).\n */\nexport class DatePickerComponent\n  implements OnInit, OnDestroy, ControlValueAccessor\n{\n  /**\n   * @property {'single' | 'range'} selectionMode\n   * @description\n   * Defines how the datepicker behaves:\n   * - `'single'`: select one date\n   * - `'range'`: select a pair of dates [start, end]\n   * @default 'range'\n   */\n  @Input() selectionMode: 'single' | 'range' = 'range';\n\n  /**\n   * @property {boolean} readonlyInput\n   * @description\n   * Disables manual typing in the input and forces the user to select via the calendar.\n   * @default true\n   */\n  @Input() readonlyInput = true;\n\n  /**\n   * @property {boolean} showClear\n   * @description\n   * Displays a clear button that resets the datepicker value.\n   * @default true\n   */\n  @Input() showClear = true;\n\n  /**\n   * @property {boolean} showIcon\n   * @description\n   * Shows the calendar icon inside the input.\n   * @default true\n   */\n  @Input() showIcon = true;\n\n  /**\n   * @property {string} dateFormat\n   * @description\n   * Format used by PrimeNG for displaying dates.\n   * @default 'mm/dd/yy'\n   */\n  @Input() dateFormat = 'mm/dd/yy';\n\n  /**\n   * @property {Date | null} maxDate\n   * @description\n   * Maximum selectable date. When set, the calendar will prevent selecting dates after this value.\n   * Provide a JavaScript Date object. Use `null` to allow any future date.\n   * @default null\n   */\n  @Input() maxDate: Date | null = null;\n\n  /**\n   * @property {Date | null} minDate\n   * @description\n   * Minimum selectable date. When set, the calendar will prevent selecting dates before this value.\n   * Provide a JavaScript Date object. Use `null` to allow any past date.\n   * @default null\n   */\n  @Input() minDate: Date | null = null;\n\n  /**\n   * @property {string} labelText\n   * @description\n   * Label shown by the float-label wrapper.\n   * @default 'Select a date'\n   */\n  @Input() labelText = 'Select a date';\n\n  /**\n   * @private\n   * @property {FormControl<DateValue>} internalControl\n   * @description\n   * The internal FormControl used in the template. It handles value synchronization\n   * for both CVA and the optional external control input.\n   */\n  internalControl = new FormControl<DateValue>(null);\n\n  /**\n   * @private\n   * @property {Subscription} sub\n   * @description Subscription to the valueChanges observable.\n   */\n  private sub!: Subscription;\n\n  // Functions registered by ControlValueAccessor to communicate with the outside form\n  private onChange: (value: DateValue) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  /**\n   * @property {FormControl<DateValue> | null} control\n   * @description\n   * Allows passing an external FormControl (traditional Reactive Forms usage).\n   * If provided, it overrides the internal control.\n   */\n  @Input() set control(ctrl: FormControl<DateValue> | null) {\n    // If the user provides a control, we use that control for everything.\n    if (ctrl) {\n      this.internalControl = ctrl;\n    }\n  }\n  get control(): FormControl<DateValue> {\n    return this.internalControl;\n  }\n\n  /**\n   * @event handleSelect\n   * @description\n   * Emitted when:\n   * - single mode → a valid Date is selected\n   * - range mode → both start and end dates are selected\n   *\n   * Payload:\n   * - Date (single mode)\n   * - [Date, Date] (completed range)\n   */\n  @Output() handleSelect = new EventEmitter<DateValue>();\n\n  /**\n   * @event handleClear\n   * @description\n   * Emitted when the control's value becomes `null`.\n   */\n  @Output() handleClear = new EventEmitter<void>();\n\n  /**\n   * @property faCalendarDay\n   * @description\n   * Icon displayed inside the datepicker input.\n   */\n  faCalendarDay = faCalendarDay;\n\n  /**\n   * @method writeValue\n   * @description Writes a new value from the form model (ngModel or formControl) into the component.\n   */\n  writeValue(value: DateValue): void {\n    if (value !== undefined) {\n      // Use { emitEvent: false } to prevent an unnecessary valueChanges loop.\n      this.internalControl.setValue(value, { emitEvent: false });\n    }\n  }\n\n  /**\n   * @method registerOnChange\n   * @description Registers a callback function to be called when the control's value changes.\n   */\n  registerOnChange(fn: (value: DateValue) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description Registers a callback function to be called when the control receives a blur event (is touched).\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description Called when the control should be disabled or enabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    const actionMap: { [key: string]: () => void } = {\n      true: () => this.internalControl.disable(),\n      false: () => this.internalControl.enable(),\n    };\n    actionMap[String(isDisabled)]();\n  }\n\n  /**\n   * @method ngOnInit\n   * @description\n   * Subscribes to the internal control's valueChanges:\n   * 1. Notifies the external form (CVA) via `this.onChange()`.\n   * 2. Emits the semantic events `handleSelect` or `handleClear`.\n   */\n  ngOnInit(): void {\n    this.sub = this.internalControl.valueChanges.subscribe(value => {\n      // Notify the CVA / External Form\n      this.onChange(value);\n      this.onTouched();\n\n      if (value === null) {\n        this.handleClear.emit();\n        return;\n      }\n      // RANGE MODE\n      if (this.selectionMode === 'range') {\n        if (Array.isArray(value)) {\n          const [start, end] = value;\n          // Emit ONLY when both dates exist\n          if (start instanceof Date && end instanceof Date) {\n            this.handleSelect.emit([start, end]);\n          }\n        }\n        return;\n      }\n      // SINGLE MODE\n      if (this.selectionMode === 'single' && value instanceof Date) {\n        this.handleSelect.emit(value);\n      }\n    });\n  }\n\n  /**\n   * @method ngOnDestroy\n   * @description Cleans up the internal subscription when the component is destroyed.\n   */\n  ngOnDestroy(): void {\n    this.sub?.unsubscribe();\n  }\n\n  /**\n   * @method clear\n   * @description\n   * Programmatically clears the control's value,\n   * which automatically triggers `handleClear`.\n   */\n  clear() {\n    this.internalControl.setValue(null);\n  }\n}\n","<div class=\"datepicker-container\">\n  <p-floatlabel>\n    <p-datepicker\n      inputId=\"datepicker\"\n      iconDisplay=\"input\"\n      [formControl]=\"internalControl\"\n      [selectionMode]=\"selectionMode\"\n      [readonlyInput]=\"readonlyInput\"\n      [showClear]=\"showClear\"\n      [showIcon]=\"showIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [dateFormat]=\"dateFormat\">\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n        <fa-icon\n          tabindex=\"0\"\n          [icon]=\"faCalendarDay\"\n          (keydown.enter)=\"clickCallBack($event)\"\n          (keydown.space)=\"clickCallBack($event)\"\n          (click)=\"clickCallBack($event)\">\n        </fa-icon>\n      </ng-template>\n    </p-datepicker>\n\n    <label for=\"datepicker\">{{ labelText }}</label>\n  </p-floatlabel>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-date-picker.mjs","sources":["../../../projects/design-system/components/date-picker/src/date-picker.component.ts","../../../projects/design-system/components/date-picker/src/date-picker.component.html","../../../projects/design-system/components/date-picker/tekus-design-system-components-date-picker.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  OnInit,\n  OnDestroy,\n  forwardRef,\n} from '@angular/core';\nimport {\n  FormsModule,\n  ReactiveFormsModule,\n  FormControl,\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nimport { DatePickerModule } from 'primeng/datepicker';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faCalendarDay } from '@fortawesome/pro-regular-svg-icons';\n\nconst TK_DATE_PICKER_VALUE_ACCESSOR = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => DatePickerComponent),\n  multi: true,\n};\n\nexport type DateValue = Date | [Date, Date] | null;\n@Component({\n  selector: 'tk-date-picker',\n  standalone: true,\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    DatePickerModule,\n    FloatLabelModule,\n    FaIconComponent,\n  ],\n  providers: [TK_DATE_PICKER_VALUE_ACCESSOR],\n  templateUrl: './date-picker.component.html',\n  styleUrls: ['./date-picker.component.scss'],\n})\n/**\n * @component DatePickerComponent\n * @description\n * A wrapper around PrimeNG's DatePicker component with support for single-date\n * and range selection modes. It is compatible with both Reactive Forms (formControlName, [control])\n * and Template-Driven Forms ([(ngModel)]).\n *\n * The component emits:\n * - `handleSelect` when a valid single date or a completed date range is selected.\n * - `handleClear` when the control is cleared (value becomes `null`).\n */\nexport class DatePickerComponent\n  implements OnInit, OnDestroy, ControlValueAccessor\n{\n  /**\n   * @property {'single' | 'range'} selectionMode\n   * @description\n   * Defines how the datepicker behaves:\n   * - `'single'`: select one date\n   * - `'range'`: select a pair of dates [start, end]\n   * @default 'range'\n   */\n  @Input() selectionMode: 'single' | 'range' = 'range';\n\n  /**\n   * @property {boolean} readonlyInput\n   * @description\n   * Disables manual typing in the input and forces the user to select via the calendar.\n   * @default true\n   */\n  @Input() readonlyInput = true;\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables component.\n   * @default false\n   */\n  @Input() disabled = false;\n\n  /**\n   * @property {boolean} showClear\n   * @description\n   * Displays a clear button that resets the datepicker value.\n   * @default true\n   */\n  @Input() showClear = true;\n\n  /**\n   * @property {boolean} showIcon\n   * @description\n   * Shows the calendar icon inside the input.\n   * @default true\n   */\n  @Input() showIcon = true;\n\n  /**\n   * @property {string} dateFormat\n   * @description\n   * Format used by PrimeNG for displaying dates.\n   * @default 'mm/dd/yy'\n   */\n  @Input() dateFormat = 'mm/dd/yy';\n\n  /**\n   * @property {Date | null} maxDate\n   * @description\n   * Maximum selectable date. When set, the calendar will prevent selecting dates after this value.\n   * Provide a JavaScript Date object. Use `null` to allow any future date.\n   * @default null\n   */\n  @Input() maxDate: Date | null = null;\n\n  /**\n   * @property {Date | null} minDate\n   * @description\n   * Minimum selectable date. When set, the calendar will prevent selecting dates before this value.\n   * Provide a JavaScript Date object. Use `null` to allow any past date.\n   * @default null\n   */\n  @Input() minDate: Date | null = null;\n\n  /**\n   * @property {string} labelText\n   * @description\n   * Label shown by the float-label wrapper.\n   * @default 'Select a date'\n   */\n  @Input() labelText = 'Select a date';\n\n  /**\n   * @private\n   * @property {FormControl<DateValue>} internalControl\n   * @description\n   * The internal FormControl used in the template. It handles value synchronization\n   * for both CVA and the optional external control input.\n   */\n  internalControl = new FormControl<DateValue>(null);\n\n  /**\n   * @private\n   * @property {Subscription} sub\n   * @description Subscription to the valueChanges observable.\n   */\n  private sub!: Subscription;\n\n  // Functions registered by ControlValueAccessor to communicate with the outside form\n  private onChange: (value: DateValue) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  /**\n   * @property {FormControl<DateValue> | null} control\n   * @description\n   * Allows passing an external FormControl (traditional Reactive Forms usage).\n   * If provided, it overrides the internal control.\n   */\n  @Input() set control(ctrl: FormControl<DateValue> | null) {\n    // If the user provides a control, we use that control for everything.\n    if (ctrl) {\n      this.internalControl = ctrl;\n    }\n  }\n  get control(): FormControl<DateValue> {\n    return this.internalControl;\n  }\n\n  /**\n   * @event handleSelect\n   * @description\n   * Emitted when:\n   * - single mode → a valid Date is selected\n   * - range mode → both start and end dates are selected\n   *\n   * Payload:\n   * - Date (single mode)\n   * - [Date, Date] (completed range)\n   */\n  @Output() handleSelect = new EventEmitter<DateValue>();\n\n  /**\n   * @event handleClear\n   * @description\n   * Emitted when the control's value becomes `null`.\n   */\n  @Output() handleClear = new EventEmitter<void>();\n\n  /**\n   * @property faCalendarDay\n   * @description\n   * Icon displayed inside the datepicker input.\n   */\n  faCalendarDay = faCalendarDay;\n\n  /**\n   * @method writeValue\n   * @description Writes a new value from the form model (ngModel or formControl) into the component.\n   */\n  writeValue(value: DateValue): void {\n    if (value !== undefined) {\n      // Use { emitEvent: false } to prevent an unnecessary valueChanges loop.\n      this.internalControl.setValue(value, { emitEvent: false });\n    }\n  }\n\n  /**\n   * @method registerOnChange\n   * @description Registers a callback function to be called when the control's value changes.\n   */\n  registerOnChange(fn: (value: DateValue) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description Registers a callback function to be called when the control receives a blur event (is touched).\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description Called when the control should be disabled or enabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    const actionMap: { [key: string]: () => void } = {\n      true: () => this.internalControl.disable(),\n      false: () => this.internalControl.enable(),\n    };\n    actionMap[String(isDisabled)]();\n  }\n\n  /**\n   * @method ngOnInit\n   * @description\n   * Subscribes to the internal control's valueChanges:\n   * 1. Notifies the external form (CVA) via `this.onChange()`.\n   * 2. Emits the semantic events `handleSelect` or `handleClear`.\n   */\n  ngOnInit(): void {\n    this.sub = this.internalControl.valueChanges.subscribe(value => {\n      // Notify the CVA / External Form\n      this.onChange(value);\n      this.onTouched();\n\n      if (value === null) {\n        this.handleClear.emit();\n        return;\n      }\n      // RANGE MODE\n      if (this.selectionMode === 'range') {\n        if (Array.isArray(value)) {\n          const [start, end] = value;\n          // Emit ONLY when both dates exist\n          if (start instanceof Date && end instanceof Date) {\n            this.handleSelect.emit([start, end]);\n          }\n        }\n        return;\n      }\n      // SINGLE MODE\n      if (this.selectionMode === 'single' && value instanceof Date) {\n        this.handleSelect.emit(value);\n      }\n    });\n  }\n\n  /**\n   * @method ngOnDestroy\n   * @description Cleans up the internal subscription when the component is destroyed.\n   */\n  ngOnDestroy(): void {\n    this.sub?.unsubscribe();\n  }\n\n  /**\n   * @method clear\n   * @description\n   * Programmatically clears the control's value,\n   * which automatically triggers `handleClear`.\n   */\n  clear() {\n    this.internalControl.setValue(null);\n  }\n}\n","<div class=\"datepicker-container\">\n  <p-floatlabel>\n    <p-datepicker\n      inputId=\"datepicker\"\n      iconDisplay=\"input\"\n      [formControl]=\"internalControl\"\n      [selectionMode]=\"selectionMode\"\n      [readonlyInput]=\"readonlyInput\"\n      [showClear]=\"showClear\"\n      [showIcon]=\"showIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabled]=\"disabled\"\n      [dateFormat]=\"dateFormat\">\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n        <fa-icon\n          tabindex=\"0\"\n          [icon]=\"faCalendarDay\"\n          (keydown.enter)=\"clickCallBack($event)\"\n          (keydown.space)=\"clickCallBack($event)\"\n          (click)=\"clickCallBack($event)\">\n        </fa-icon>\n      </ng-template>\n    </p-datepicker>\n\n    <label for=\"datepicker\">{{ labelText }}</label>\n  </p-floatlabel>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,152 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i3 from 'primeng/floatlabel';
+import { FloatLabelModule } from 'primeng/floatlabel';
+
+class MultiselectComponent {
+    constructor() {
+        /**
+         * @property {FormControl<MultiSelectOption[] | null>} control
+         * @description
+         * External FormControl used to read/set the selected options.
+         * If not provided, an internal FormControl is created with an empty array value.
+         */
+        this.control = new FormControl([]);
+        /**
+         * @property {MultiSelectOption[]} options
+         * @description
+         * Array of available options shown in the multiselect dropdown.
+         */
+        this.options = [];
+        /**
+         * @property {string} labelText
+         * @description
+         * Label displayed above the multiselect input.
+         *
+         * @default 'Select'
+         */
+        this.labelText = 'Select';
+        /**
+         * @property {string} display
+         * @description
+         * Display mode for selected items. Examples: 'chip', 'comma'.
+         *
+         * @default 'chip'
+         */
+        this.display = 'chip';
+        /**
+         * @property {number} maxSelectedLabels
+         * @description
+         * Maximum number of labels shown when multiple items are selected.
+         *
+         * @default 4
+         */
+        this.maxSelectedLabels = 4;
+        /**
+         * @property {string} selectedItemsLabel
+         * @description
+         * Label template used when multiple items are selected (supports placeholders).
+         *
+         * @default '{0} elementos seleccionados'
+         */
+        this.selectedItemsLabel = '{0} elementos seleccionados';
+        /**
+         * @property {string} emptyFilterMessage
+         * @description
+         * Message displayed when the filter returns no results.
+         *
+         * @default 'No hay resultados'
+         */
+        this.emptyFilterMessage = 'No hay resultados';
+        /**
+         * @property {boolean} filter
+         * @description
+         * Enables the search/filter input inside the multiselect dropdown.
+         *
+         * @default true
+         */
+        this.filter = true;
+        /**
+         * @property {string} filterPlaceHolder
+         * @description
+         * Placeholder text for the filter input.
+         */
+        this.filterPlaceHolder = '';
+        /**
+         * @property {string} id
+         * @description
+         * HTML id attribute for the multiselect input.
+         *
+         * @default 'multiselect'
+         */
+        this.id = 'multiselect';
+        /**
+         * @property {string} styleClass
+         * @description
+         * Additional CSS class applied to the multiselect container.
+         */
+        this.styleClass = '';
+        /**
+         * @event selectionChange
+         * @description
+         * Emits when the selected options change.
+         * Payload: an array of selected MultiSelectOption or null.
+         *
+         * @example
+         * <tk-multiselect (selectionChange)="onChange($event)"></tk-multiselect>
+         */
+        this.selectionChange = new EventEmitter();
+    }
+    /**
+     * @method handleChange
+     * @description
+     * Handler forwarded from the PrimeNG MultiSelect change event.
+     * Emits the selectionChange output with the selected values.
+     *
+     * @param event - Change event containing the `value` property with selected items.
+     */
+    handleChange(event) {
+        this.selectionChange.emit(event.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { control: "control", options: "options", labelText: "labelText", display: "display", maxSelectedLabels: "maxSelectedLabels", selectedItemsLabel: "selectedItemsLabel", emptyFilterMessage: "emptyFilterMessage", filter: "filter", filterPlaceHolder: "filterPlaceHolder", id: "id", styleClass: "styleClass" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-chip-remove-icon{background-color:var(--tk-surface-700, #424243);color:var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-multiselect', standalone: true, imports: [ReactiveFormsModule, MultiSelectModule, FloatLabelModule], template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-chip-remove-icon{background-color:var(--tk-surface-700, #424243);color:var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem}\n"] }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], labelText: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], maxSelectedLabels: [{
+                type: Input
+            }], selectedItemsLabel: [{
+                type: Input
+            }], emptyFilterMessage: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], filterPlaceHolder: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MultiselectComponent };
+//# sourceMappingURL=tekus-design-system-components-multiselect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-multiselect.mjs","sources":["../../../projects/design-system/components/multiselect/src/multiselect.component.ts","../../../projects/design-system/components/multiselect/src/multiselect.component.html","../../../projects/design-system/components/multiselect/tekus-design-system-components-multiselect.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MultiSelectModule } from 'primeng/multiselect';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { MultiSelectOption } from './multiselect.types';\n@Component({\n  selector: 'tk-multiselect',\n  standalone: true,\n  imports: [ReactiveFormsModule, MultiSelectModule, FloatLabelModule],\n  templateUrl: './multiselect.component.html',\n  styleUrls: ['./multiselect.component.scss'],\n})\nexport class MultiselectComponent {\n  /**\n   * @property {FormControl<MultiSelectOption[] | null>} control\n   * @description\n   * External FormControl used to read/set the selected options.\n   * If not provided, an internal FormControl is created with an empty array value.\n   */\n  @Input() control = new FormControl<MultiSelectOption[] | null>([]);\n\n  /**\n   * @property {MultiSelectOption[]} options\n   * @description\n   * Array of available options shown in the multiselect dropdown.\n   */\n  @Input() options: MultiSelectOption[] = [];\n\n  /**\n   * @property {string} labelText\n   * @description\n   * Label displayed above the multiselect input.\n   *\n   * @default 'Select'\n   */\n  @Input() labelText: string = 'Select';\n\n  /**\n   * @property {string} display\n   * @description\n   * Display mode for selected items. Examples: 'chip', 'comma'.\n   *\n   * @default 'chip'\n   */\n  @Input() display: string = 'chip';\n\n  /**\n   * @property {number} maxSelectedLabels\n   * @description\n   * Maximum number of labels shown when multiple items are selected.\n   *\n   * @default 4\n   */\n  @Input() maxSelectedLabels: number = 4;\n\n  /**\n   * @property {string} selectedItemsLabel\n   * @description\n   * Label template used when multiple items are selected (supports placeholders).\n   *\n   * @default '{0} elementos seleccionados'\n   */\n  @Input() selectedItemsLabel: string = '{0} elementos seleccionados';\n\n  /**\n   * @property {string} emptyFilterMessage\n   * @description\n   * Message displayed when the filter returns no results.\n   *\n   * @default 'No hay resultados'\n   */\n  @Input() emptyFilterMessage: string = 'No hay resultados';\n\n  /**\n   * @property {boolean} filter\n   * @description\n   * Enables the search/filter input inside the multiselect dropdown.\n   *\n   * @default true\n   */\n  @Input() filter: boolean = true;\n\n  /**\n   * @property {string} filterPlaceHolder\n   * @description\n   * Placeholder text for the filter input.\n   */\n  @Input() filterPlaceHolder: string = '';\n\n  /**\n   * @property {string} id\n   * @description\n   * HTML id attribute for the multiselect input.\n   *\n   * @default 'multiselect'\n   */\n  @Input() id: string = 'multiselect';\n\n  /**\n   * @property {string} styleClass\n   * @description\n   * Additional CSS class applied to the multiselect container.\n   */\n  @Input() styleClass: string = '';\n\n  /**\n   * @event selectionChange\n   * @description\n   * Emits when the selected options change.\n   * Payload: an array of selected MultiSelectOption or null.\n   *\n   * @example\n   * <tk-multiselect (selectionChange)=\"onChange($event)\"></tk-multiselect>\n   */\n  @Output() selectionChange = new EventEmitter<MultiSelectOption[] | null>();\n\n  /**\n   * @method handleChange\n   * @description\n   * Handler forwarded from the PrimeNG MultiSelect change event.\n   * Emits the selectionChange output with the selected values.\n   *\n   * @param event - Change event containing the `value` property with selected items.\n   */\n  handleChange(event: { value: MultiSelectOption[] | null }): void {\n    this.selectionChange.emit(event.value);\n  }\n}\n","<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\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.3.0",
+  "version": "5.3.2",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^19.2.15",
@@ -39,6 +39,10 @@
       "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"
+    },
     "./components/button": {
       "types": "./components/button/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-button.mjs"
@@ -55,9 +59,9 @@
       "types": "./components/modal/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-modal.mjs"
     },
-    "./core/types": {
-      "types": "./core/types/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-core-types.mjs"
+    "./components/multiselect": {
+      "types": "./components/multiselect/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-multiselect.mjs"
     },
     "./directives/gird-item": {
       "types": "./directives/gird-item/index.d.ts",