@tekus/design-system 5.18.0 → 5.19.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/tokens/tk-foundations.json +3 -3
- package/components/checkbox/src/checkbox.component.d.ts +9 -2
- package/components/drawer/index.d.ts +5 -0
- package/components/drawer/public-api.d.ts +3 -0
- package/components/drawer/src/drawer.component.d.ts +78 -0
- package/components/drawer/src/drawer.types.d.ts +19 -0
- package/components/drawer/src/services/drawer.service.d.ts +15 -0
- package/components/icon/core/icons/arrows-rotate.d.ts +2 -0
- package/components/icon/core/icons/edit.d.ts +2 -0
- package/components/icon/core/icons/globe-pointer.d.ts +2 -0
- package/components/icon/core/icons/grip-vertical.d.ts +2 -0
- package/components/multiselect/src/multiselect.component.d.ts +115 -19
- package/components/panel/index.d.ts +5 -0
- package/components/panel/public-api.d.ts +1 -0
- package/components/panel/src/panel.component.d.ts +82 -0
- package/components/table/src/table.component.d.ts +45 -1
- package/components/table/src/table.interface.d.ts +1 -1
- package/fesm2022/tekus-design-system-components-checkbox.mjs +32 -14
- package/fesm2022/tekus-design-system-components-checkbox.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-drawer.mjs +172 -0
- package/fesm2022/tekus-design-system-components-drawer.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-icon.mjs +56 -0
- package/fesm2022/tekus-design-system-components-icon.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-multiselect.mjs +164 -45
- package/fesm2022/tekus-design-system-components-multiselect.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-panel.mjs +102 -0
- package/fesm2022/tekus-design-system-components-panel.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-select.mjs +3 -8
- package/fesm2022/tekus-design-system-components-select.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-table.mjs +72 -5
- package/fesm2022/tekus-design-system-components-table.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toolbar.mjs +2 -2
- package/fesm2022/tekus-design-system-components-toolbar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core-types.mjs +31 -1
- package/fesm2022/tekus-design-system-core-types.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core.mjs +31 -1
- package/fesm2022/tekus-design-system-core.mjs.map +1 -1
- package/package.json +13 -5
- package/styles/variables.css +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n Component,\n effect,\n model,\n\n input,\n output,\n signal,\n inject\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormsModule,\n NgControl, \n FormControl, \n ReactiveFormsModule\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-select',\n imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n /**\n * @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n *\n * @default 'select'\n */\n id = input<string>('select');\n\n /**\n * @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the input value.\n * If not provided, an internal FormControl is created.\n */\n control = input<FormControl>();\n \n /**\n * @property {T[]} options\n * @description\n * Array of available options displayed in the dropdown.\n */\n options = input<T[]>([]);\n\n /**\n * @property {string} optionLabel\n * @description\n * Name of the property used to display the text of each option.\n *\n * @default 'label'\n */\n optionLabel = input<string>('label');\n\n /**\n * @property {string} label\n * @description\n * Floating label displayed above the select input.\n */\n label = input<string>('');\n\n /**\n * @property {boolean} showClear\n * @description\n * Enables the clear button to remove the current selection.\n *\n * @default true\n */\n showClear = input<boolean>(true);\n\n /**\n * @property {T | null} value\n * @description\n * Internal selected value. Synced with Angular forms and the model signal.\n *\n * @internal\n */\n value: T | null = null;\n\n /**\n * @property {boolean} disabled\n * @description\n * Determines whether the select field is disabled.\n *\n * @default false\n */\n disabled = input<boolean>(false);\n internalDisabled = signal(false);\n\n /**\n * @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n */\n errorMessage = input<string>('');\n\n /**\n * @property {InputSignal<string>} hint\n * @description\n * Hint text to display below the input.\n */\n hint = input<string>('');\n\n /**\n * @property {Signal<T | null>} model\n * @description\n * Two-way binding model using Angular signals.\n * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n */\n model = model<T | null>();\n\n /**\n * @event modelChange\n * @description\n * Emits whenever the value changes.\n * Payload: the selected item of type `T` or `null`.\n *\n * @example\n * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n */\n modelChange = output<T | null>();\n\n // CVA callbacks\n private onChangeFn: (value: T | null) => void = () => {};\n private onTouchedFn = () => {};\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n /**\n * @effect disabled → internalDisabled\n * @description\n * Synchronizes the disabled input signal with the internal disabled state.\n */\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n /**\n * @effect model → internal value\n * @description\n * Synchronizes changes coming from the Signal `model()` back into the internal value.\n * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n */\n effect(() => {\n const v = this.model();\n if (v !== this.value) {\n this.value = v ?? null;\n this.onChangeFn(v ?? null);\n }\n });\n }\n\n // -----------------------------------\n // CONTROL VALUE ACCESSOR (Forms API)\n // -----------------------------------\n\n /**\n * @method writeValue\n * @description\n * Receives value updates from Angular Forms and writes them into the component.\n *\n * @param {T | null} value - New value from the forms API.\n */\n writeValue(value: T | null): void {\n this.model.set(value);\n }\n\n /**\n * @method registerOnChange\n * @description\n * Registers a callback that is invoked when the component's value changes.\n */\n registerOnChange(fn: (value: T | null) => void): void {\n this.onChangeFn = fn;\n }\n\n /**\n * @method registerOnTouched\n * @description\n * Registers a callback invoked when the component is touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouchedFn = fn;\n }\n\n /**\n * @method setDisabledState\n * @description\n * Updates the disabled state of the select control.\n *\n * @param {boolean} isDisabled - Whether the component should be disabled.\n */\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n // -----------------------------------\n // UI EVENTS\n // -----------------------------------\n\n /**\n * @method handleChange\n * @description\n * Handles the selection event emitted by the PrimeNG Select component.\n * Updates Angular Forms, Signals, and emits the modelChange event.\n *\n * @param event - Event containing the `value` of the selected option.\n */\n handleChange(event: { value: T | null }) {\n const value = event.value ?? null;\n\n // Update internal state\n this.value = value;\n\n // 1. Update Angular Forms\n this.onChangeFn(value);\n this.onTouchedFn();\n\n // 2. Update signals\n this.model.set(value);\n\n // 3. Notify external listeners\n this.modelChange.emit(value);\n\n // 4. Explicitly update effective control to ensure UI consistency (matches input-text)\n if (this.effectiveControl) {\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.effectiveControl.markAsTouched();\n }\n }\n get effectiveControl() {\n return (this.ngControl?.control as FormControl) || this.control();\n }\n}\n\n","<p-floatlabel class=\"w-full\">\n <p-select\n [id]=\"id()\"\n class=\"w-full\"\n [options]=\"options()\"\n [optionLabel]=\"optionLabel()\"\n [showClear]=\"showClear()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value\"\n [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n [class.ng-dirty]=\"effectiveControl?.dirty\"\n [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if ((effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n }\n </div>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n Component,\n effect,\n model,\n\n input,\n output,\n signal,\n inject\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormsModule,\n NgControl,\n FormControl,\n ReactiveFormsModule\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-select',\n imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n /**\n * @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n *\n * @default 'select'\n */\n id = input<string>('select');\n\n /**\n * @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the input value.\n * If not provided, an internal FormControl is created.\n */\n control = input<FormControl>();\n\n /**\n * @property {T[]} options\n * @description\n * Array of available options displayed in the dropdown.\n */\n options = input<T[]>([]);\n\n /**\n * @property {string} optionLabel\n * @description\n * Name of the property used to display the text of each option.\n *\n * @default 'label'\n */\n optionLabel = input<string>('label');\n\n /**\n * @property {string} label\n * @description\n * Floating label displayed above the select input.\n */\n label = input<string>('');\n\n /**\n * @property {boolean} showClear\n * @description\n * Enables the clear button to remove the current selection.\n *\n * @default true\n */\n showClear = input<boolean>(true);\n\n /**\n * @property {T | null} value\n * @description\n * Internal selected value. Synced with Angular forms and the model signal.\n *\n * @internal\n */\n value: T | null = null;\n\n /**\n * @property {boolean} disabled\n * @description\n * Determines whether the select field is disabled.\n *\n * @default false\n */\n disabled = input<boolean>(false);\n internalDisabled = signal(false);\n\n /**\n * @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n */\n errorMessage = input<string>('');\n\n /**\n * @property {InputSignal<string>} hint\n * @description\n * Hint text to display below the input.\n */\n hint = input<string>('');\n\n /**\n * @property {Signal<T | null>} model\n * @description\n * Two-way binding model using Angular signals.\n * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n */\n model = model<T | null>();\n\n /**\n * @event modelChange\n * @description\n * Emits whenever the value changes.\n * Payload: the selected item of type `T` or `null`.\n *\n * @example\n * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n */\n modelChange = output<T | null>();\n\n // CVA callbacks\n private onChangeFn: (value: T | null) => void = () => {};\n private onTouchedFn = () => {};\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n /**\n * @effect disabled → internalDisabled\n * @description\n * Synchronizes the disabled input signal with the internal disabled state.\n */\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n /**\n * @effect model → internal value\n * @description\n * Synchronizes changes coming from the Signal `model()` back into the internal value.\n * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n */\n effect(() => {\n const v = this.model();\n if (v !== this.value) {\n this.value = v ?? null;\n this.onChangeFn(v ?? null);\n }\n });\n }\n\n // -----------------------------------\n // CONTROL VALUE ACCESSOR (Forms API)\n // -----------------------------------\n\n /**\n * @method writeValue\n * @description\n * Receives value updates from Angular Forms and writes them into the component.\n *\n * @param {T | null} value - New value from the forms API.\n */\n writeValue(value: T | null): void {\n this.model.set(value);\n }\n\n /**\n * @method registerOnChange\n * @description\n * Registers a callback that is invoked when the component's value changes.\n */\n registerOnChange(fn: (value: T | null) => void): void {\n this.onChangeFn = fn;\n }\n\n /**\n * @method registerOnTouched\n * @description\n * Registers a callback invoked when the component is touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouchedFn = fn;\n }\n\n /**\n * @method setDisabledState\n * @description\n * Updates the disabled state of the select control.\n *\n * @param {boolean} isDisabled - Whether the component should be disabled.\n */\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n // -----------------------------------\n // UI EVENTS\n // -----------------------------------\n\n /**\n * @method handleChange\n * @description\n * Handles the selection event emitted by the PrimeNG Select component.\n * Updates Angular Forms, Signals, and emits the modelChange event.\n *\n * @param event - Event containing the `value` of the selected option.\n */\n handleChange(event: { value: T | null }) {\n const value = event.value ?? null;\n\n this.value = value;\n\n this.onChangeFn(value);\n this.onTouchedFn();\n\n this.model.set(value);\n\n this.modelChange.emit(value);\n\n if (this.effectiveControl) {\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.effectiveControl.markAsTouched();\n }\n }\n get effectiveControl() {\n return (this.ngControl?.control as FormControl) || null;\n }\n}\n\n","<p-floatlabel class=\"w-full\">\n <p-select\n [id]=\"id()\"\n class=\"w-full\"\n [options]=\"options()\"\n [optionLabel]=\"optionLabel()\"\n [showClear]=\"showClear()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value\"\n [class.ng-invalid]=\"\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched)\n \"\n [class.ng-dirty]=\"effectiveControl?.dirty\"\n [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if (\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched) &&\n errorMessage()\n ) {\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</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MA4Ba,eAAe,CAAA;AA2G1B,IAAA,WAAA,GAAA;AA1GS,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACtE;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,EAAE,GAAG,KAAK,CAAS,QAAQ,CAAC;AAE5B;;;;;AAKG;QACH,IAAO,CAAA,OAAA,GAAG,KAAK,EAAe;AAE9B;;;;AAIG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAM,EAAE,CAAC;AAExB;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,OAAO,CAAC;AAEpC;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AAEzB;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,CAAC;AAEhC;;;;;;AAMG;QACH,IAAK,CAAA,KAAA,GAAa,IAAI;AAEtB;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;AAChC,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC;AAEhC;;;;AAIG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,EAAE,CAAC;AAEhC;;;;AAIG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;AAExB;;;;;AAKG;QACH,IAAK,CAAA,KAAA,GAAG,KAAK,EAAY;AAEzB;;;;;;;;AAQG;QACH,IAAW,CAAA,WAAA,GAAG,MAAM,EAAY;;AAGxB,QAAA,IAAA,CAAA,UAAU,GAA8B,MAAK,GAAG;AAChD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAK,GAAG;AAG5B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;;AAErC;;;;AAIG;QACH,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC5C,SAAC,CAAC;AAEF;;;;;AAKG;QACH,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE;AACpB,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,IAAI,CAAC;;AAE9B,SAAC,CAAC;;;;;AAOJ;;;;;;AAMG;AACH,IAAA,UAAU,CAAC,KAAe,EAAA;AACxB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;;AAGvB;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,EAA6B,EAAA;AAC5C,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;;AAGtB;;;;AAIG;AACH,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE;;AAGvB;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,UAAU,CAAC;;;;;AAOvC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAA0B,EAAA;AACrC,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI;AAEjC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAElB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,WAAW,EAAE;AAElB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AAErB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;AAE5B,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AACrC,YAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE;AACnC,YAAA,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE;;;AAGzC,IAAA,IAAI,gBAAgB,GAAA;AAClB,QAAA,OAAQ,IAAI,CAAC,SAAS,EAAE,OAAuB,IAAI,IAAI;;+GAlN9C,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5B5B,skCAoCA,EAAA,MAAA,EAAA,CAAA,m7FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDbY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,MAAM,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,cAAA,EAAA,QAAA,EAAA,MAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,aAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,SAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,SAAA,EAAA,aAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,cAAA,EAAA,MAAA,EAAA,eAAA,EAAA,uBAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,YAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,aAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,SAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,MAAA,EAAA,WAAA,EAAA,MAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,mBAAmB,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAKxE,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;+BACE,WAAW,EAAA,OAAA,EACZ,CAAC,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,aAAa,EAAE,mBAAmB,CAAC,EAAA,QAAA,EAAA,skCAAA,EAAA,MAAA,EAAA,CAAA,m7FAAA,CAAA,EAAA;;;AEvBtF;;AAEG;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, effect, ViewChild, Component } from '@angular/core';
|
|
2
|
+
import { input, model, computed, effect, ViewChild, Component } from '@angular/core';
|
|
3
3
|
import * as i1 from 'primeng/table';
|
|
4
4
|
import { TableModule } from 'primeng/table';
|
|
5
5
|
import { TagModule } from 'primeng/tag';
|
|
6
6
|
import { ButtonModule } from 'primeng/button';
|
|
7
7
|
import { TagComponent } from '@tekus/design-system/components/tag';
|
|
8
|
-
import { IconComponent } from '@tekus/design-system/components/icon';
|
|
9
8
|
import { ButtonComponent } from '@tekus/design-system/components/button';
|
|
9
|
+
import { CheckboxComponent } from '@tekus/design-system/components/checkbox';
|
|
10
10
|
import * as i2 from 'primeng/api';
|
|
11
11
|
|
|
12
12
|
/**
|
|
@@ -53,9 +53,53 @@ class TableComponent {
|
|
|
53
53
|
* ]"
|
|
54
54
|
*/
|
|
55
55
|
this.columns = input([]);
|
|
56
|
+
/**
|
|
57
|
+
* @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode
|
|
58
|
+
* @description
|
|
59
|
+
* Selection mode of the table.
|
|
60
|
+
*/
|
|
61
|
+
this.selectionMode = input(undefined);
|
|
62
|
+
/**
|
|
63
|
+
* @property {ModelSignal<any[]>} selection
|
|
64
|
+
* @description
|
|
65
|
+
* Selected row(s) in the table.
|
|
66
|
+
*/
|
|
67
|
+
this.selection = model([]);
|
|
68
|
+
/**
|
|
69
|
+
* @property {InputSignal<string | undefined>} dataKey
|
|
70
|
+
* @description
|
|
71
|
+
* Property name to uniquely identify a row.
|
|
72
|
+
*/
|
|
73
|
+
this.dataKey = input(undefined);
|
|
56
74
|
this.initialData = [...this.data()];
|
|
57
75
|
this.internalData = [];
|
|
58
76
|
this.isSorted = null;
|
|
77
|
+
/**
|
|
78
|
+
* @computed isAllSelected
|
|
79
|
+
* @description
|
|
80
|
+
* Returns true if all visible rows are selected.
|
|
81
|
+
*/
|
|
82
|
+
this.isAllSelected = computed(() => {
|
|
83
|
+
const data = this.internalData;
|
|
84
|
+
const selected = this.selection();
|
|
85
|
+
if (data.length === 0 || selected.length === 0)
|
|
86
|
+
return false;
|
|
87
|
+
// We strictly use full objects for selection now.
|
|
88
|
+
return data.every(row => selected.includes(row));
|
|
89
|
+
});
|
|
90
|
+
/**
|
|
91
|
+
* @computed isPartiallySelected
|
|
92
|
+
* @description
|
|
93
|
+
* Returns true if some but not all rows are selected.
|
|
94
|
+
*/
|
|
95
|
+
this.isPartiallySelected = computed(() => {
|
|
96
|
+
const data = this.internalData;
|
|
97
|
+
const selected = this.selection();
|
|
98
|
+
if (data.length === 0 || selected.length === 0)
|
|
99
|
+
return false;
|
|
100
|
+
const allSelected = this.isAllSelected();
|
|
101
|
+
return !allSelected && selected.length > 0;
|
|
102
|
+
});
|
|
59
103
|
/**
|
|
60
104
|
* @effect data → initialData sync
|
|
61
105
|
* @description
|
|
@@ -66,6 +110,29 @@ class TableComponent {
|
|
|
66
110
|
this.initialData = [...this.data()];
|
|
67
111
|
});
|
|
68
112
|
}
|
|
113
|
+
/**
|
|
114
|
+
* @method toggleAll
|
|
115
|
+
* @description
|
|
116
|
+
* Toggles selection of all visible rows using full objects.
|
|
117
|
+
* @param checked {unknown}
|
|
118
|
+
*/
|
|
119
|
+
toggleAll(checked) {
|
|
120
|
+
if (checked) {
|
|
121
|
+
this.selection.set([...this.internalData]);
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
this.selection.set([]);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* @method updateSelection
|
|
129
|
+
* @description
|
|
130
|
+
* Updates row selection state from checkbox interaction.
|
|
131
|
+
* @param value {any[]}
|
|
132
|
+
*/
|
|
133
|
+
updateSelection(value) {
|
|
134
|
+
this.selection.set([...value]);
|
|
135
|
+
}
|
|
69
136
|
customSort(event) {
|
|
70
137
|
if (this.isSorted === null || this.isSorted === undefined) {
|
|
71
138
|
this.isSorted = true;
|
|
@@ -109,7 +176,7 @@ class TableComponent {
|
|
|
109
176
|
});
|
|
110
177
|
}
|
|
111
178
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
112
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table\n #tableRef\n [value]=\"internalData\"\n [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\"\n [tableStyle]=\"{ 'min-width': '60rem' }\"\n responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n
|
|
179
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table\n #tableRef\n [selection]=\"selection()\"\n (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\"\n [dataKey]=\"dataKey()\"\n [value]=\"internalData\"\n [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\"\n [tableStyle]=\"{ 'min-width': '60rem' }\"\n responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th\n [id]=\"col.field\"\n [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\" >\n <tk-checkbox\n [binary]=\"true\"\n [model]=\"isAllSelected()\"\n [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n {{ col.header }}\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox\n [model]=\"selection()\"\n [value]=\"row\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox\n [binary]=\"true\"\n [(model)]=\"row[col.field!]\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag\n [value]=\"row[col.field!]\"\n [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button\n [icon]=\"action.icon\"\n severity=\"secondary\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }] }); }
|
|
113
180
|
}
|
|
114
181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, decorators: [{
|
|
115
182
|
type: Component,
|
|
@@ -118,9 +185,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
118
185
|
TagModule,
|
|
119
186
|
ButtonModule,
|
|
120
187
|
TagComponent,
|
|
121
|
-
IconComponent,
|
|
122
188
|
ButtonComponent,
|
|
123
|
-
|
|
189
|
+
CheckboxComponent,
|
|
190
|
+
], template: "<p-table\n #tableRef\n [selection]=\"selection()\"\n (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\"\n [dataKey]=\"dataKey()\"\n [value]=\"internalData\"\n [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\"\n [tableStyle]=\"{ 'min-width': '60rem' }\"\n responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th\n [id]=\"col.field\"\n [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\" >\n <tk-checkbox\n [binary]=\"true\"\n [model]=\"isAllSelected()\"\n [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n {{ col.header }}\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox\n [model]=\"selection()\"\n [value]=\"row\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox\n [binary]=\"true\"\n [(model)]=\"row[col.field!]\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag\n [value]=\"row[col.field!]\"\n [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button\n [icon]=\"action.icon\"\n severity=\"secondary\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"] }]
|
|
124
191
|
}], ctorParameters: () => [], propDecorators: { tableRef: [{
|
|
125
192
|
type: ViewChild,
|
|
126
193
|
args: ['tableRef']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-table.mjs","sources":["../../../projects/design-system/components/table/src/table.component.ts","../../../projects/design-system/components/table/src/table.component.html","../../../projects/design-system/components/table/tekus-design-system-components-table.ts"],"sourcesContent":["import { Component, effect, input, ViewChild } from '@angular/core';\nimport { Table, TableModule } from 'primeng/table';\nimport { TagModule } from 'primeng/tag';\nimport { ButtonModule } from 'primeng/button';\nimport { TableColumn } from './table.interface';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { SortEvent } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\n\n@Component({\n selector: 'tk-table',\n standalone: true,\n imports: [\n TableModule,\n TagModule,\n ButtonModule,\n TagComponent,\n IconComponent,\n ButtonComponent,\n ],\n templateUrl: './table.component.html',\n styleUrl: './table.component.scss',\n})\n/**\n * @component TableComponent\n * @description\n * Generic table wrapper around PrimeNG Table component.\n * Displays tabular data with configurable columns and support for custom rendering via template.\n *\n * @usage\n * ```html\n * <tk-table [data]=\"items\" [columns]=\"columnConfig\"></tk-table>\n * ```\n */\nexport class TableComponent<T = unknown> {\n /**\n * @property {InputSignal<T[]>} data\n * @description\n * Array of data objects to display in the table rows.\n * Each object corresponds to one row; properties are mapped to columns via the `columns` input.\n *\n * @default []\n *\n * @example\n * [data]=\"[\n * { id: 1, name: 'John', status: 'active' },\n * { id: 2, name: 'Jane', status: 'inactive' }\n * ]\"\n */\n data = input<T[]>([]);\n\n /**\n * @property {ViewChild} tableRef\n * @description\n * Reference to the PrimeNG Table component instance.\n * Used to access table methods and properties directly.\n */\n @ViewChild('tableRef')\n tableRef!: Table;\n\n /**\n * @property {InputSignal<TableColumn<T>[]>} columns\n * @description\n * Array of column definitions that describe how to render each column.\n * Each column object specifies the field name, header label, and optional rendering behavior.\n *\n * @default []\n *\n * @example\n * [columns]=\"[\n * { field: 'id', header: 'ID' },\n * { field: 'name', header: 'Name' },\n * { field: 'status', header: 'Status', renderAs: 'tag' }\n * ]\"\n */\n columns = input<TableColumn<T>[]>([]);\n\n initialData: T[] = [...this.data()];\n internalData: T[] = [];\n isSorted: boolean | null = null;\n\n constructor() {\n /**\n * @effect data → initialData sync\n * @description\n * Whenever the data input changes, update initialData and reset sort state.\n */\n effect(() => {\n this.internalData = [...this.data()];\n this.initialData = [...this.data()];\n });\n }\n\n customSort(event: SortEvent) {\n if (this.isSorted === null || this.isSorted === undefined) {\n this.isSorted = true;\n this.sortTableData(event);\n } else if (this.isSorted) {\n this.isSorted = false;\n this.sortTableData(event);\n } else {\n this.isSorted = null;\n this.internalData = [...this.initialData];\n this.tableRef.reset();\n }\n }\n\n sortTableData(event: SortEvent) {\n if (!event.data || !event.field) return;\n\n event.data.sort((data1, data2) => {\n const value1 = data1[event.field!];\n const value2 = data2[event.field!];\n let result = null;\n if (value1 == null && value2 != null) result = -1;\n else if (value1 != null && value2 == null) result = 1;\n else if (value1 == null && value2 == null) result = 0;\n else if (typeof value1 === 'string' && typeof value2 === 'string')\n result = value1.localeCompare(value2);\n else if (value1 < value2) {\n result = -1;\n } else if (value1 > value2) {\n result = 1;\n } else {\n result = 0;\n }\n\n return (event.order ?? 1) * result;\n });\n }\n}\n","<p-table\n #tableRef\n [value]=\"internalData\"\n [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\"\n [tableStyle]=\"{ 'min-width': '60rem' }\"\n responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th\n [id]=\"col.field\"\n [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n <div>\n {{ col.header }}\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr>\n @for (col of columns(); track col.header) {\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button\n [icon]=\"'eye'\"\n severity=\"secondary\"\n (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n } }\n </tr>\n </ng-template>\n</p-table>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-table.mjs","sources":["../../../projects/design-system/components/table/src/table.component.ts","../../../projects/design-system/components/table/src/table.component.html","../../../projects/design-system/components/table/tekus-design-system-components-table.ts"],"sourcesContent":["import { Component, computed, effect, input, model, ViewChild } from '@angular/core';\nimport { Table, TableModule } from 'primeng/table';\nimport { TagModule } from 'primeng/tag';\nimport { ButtonModule } from 'primeng/button';\nimport { TableColumn } from './table.interface';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { SortEvent } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\n\n@Component({\n selector: 'tk-table',\n standalone: true,\n imports: [\n TableModule,\n TagModule,\n ButtonModule,\n TagComponent,\n ButtonComponent,\n CheckboxComponent,\n ],\n templateUrl: './table.component.html',\n styleUrl: './table.component.scss',\n})\n/**\n * @component TableComponent\n * @description\n * Generic table wrapper around PrimeNG Table component.\n * Displays tabular data with configurable columns and support for custom rendering via template.\n *\n * @usage\n * ```html\n * <tk-table [data]=\"items\" [columns]=\"columnConfig\"></tk-table>\n * ```\n */\nexport class TableComponent<T = unknown> {\n /**\n * @property {InputSignal<T[]>} data\n * @description\n * Array of data objects to display in the table rows.\n * Each object corresponds to one row; properties are mapped to columns via the `columns` input.\n *\n * @default []\n *\n * @example\n * [data]=\"[\n * { id: 1, name: 'John', status: 'active' },\n * { id: 2, name: 'Jane', status: 'inactive' }\n * ]\"\n */\n data = input<T[]>([]);\n\n /**\n * @property {ViewChild} tableRef\n * @description\n * Reference to the PrimeNG Table component instance.\n * Used to access table methods and properties directly.\n */\n @ViewChild('tableRef')\n tableRef!: Table;\n\n /**\n * @property {InputSignal<TableColumn<T>[]>} columns\n * @description\n * Array of column definitions that describe how to render each column.\n * Each column object specifies the field name, header label, and optional rendering behavior.\n *\n * @default []\n *\n * @example\n * [columns]=\"[\n * { field: 'id', header: 'ID' },\n * { field: 'name', header: 'Name' },\n * { field: 'status', header: 'Status', renderAs: 'tag' }\n * ]\"\n */\n columns = input<TableColumn<T>[]>([]);\n\n /**\n * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode\n * @description\n * Selection mode of the table.\n */\n selectionMode = input<'single' | 'multiple' | undefined>(undefined);\n\n /**\n * @property {ModelSignal<any[]>} selection\n * @description\n * Selected row(s) in the table.\n */\n selection = model<T[]>([]);\n\n /**\n * @property {InputSignal<string | undefined>} dataKey\n * @description\n * Property name to uniquely identify a row.\n */\n dataKey = input<string | undefined>(undefined);\n\n initialData: T[] = [...this.data()];\n internalData: T[] = [];\n isSorted: boolean | null = null;\n\n /**\n * @computed isAllSelected\n * @description\n * Returns true if all visible rows are selected.\n */\n isAllSelected = computed(() => {\n const data = this.internalData;\n const selected = this.selection();\n if (data.length === 0 || selected.length === 0) return false;\n \n // We strictly use full objects for selection now.\n return data.every(row => selected.includes(row));\n });\n\n /**\n * @computed isPartiallySelected\n * @description\n * Returns true if some but not all rows are selected.\n */\n isPartiallySelected = computed(() => {\n const data = this.internalData;\n const selected = this.selection();\n if (data.length === 0 || selected.length === 0) return false;\n \n const allSelected = this.isAllSelected();\n return !allSelected && selected.length > 0;\n });\n\n constructor() {\n /**\n * @effect data → initialData sync\n * @description\n * Whenever the data input changes, update initialData and reset sort state.\n */\n effect(() => {\n this.internalData = [...this.data()];\n this.initialData = [...this.data()];\n });\n }\n\n /**\n * @method toggleAll\n * @description\n * Toggles selection of all visible rows using full objects.\n * @param checked {unknown}\n */\n toggleAll(checked: unknown) {\n if (checked) {\n this.selection.set([...this.internalData]);\n } else {\n this.selection.set([]);\n }\n }\n\n /**\n * @method updateSelection\n * @description\n * Updates row selection state from checkbox interaction.\n * @param value {any[]}\n */\n updateSelection(value: T[]) {\n this.selection.set([...value]);\n }\n\n customSort(event: SortEvent) {\n if (this.isSorted === null || this.isSorted === undefined) {\n this.isSorted = true;\n this.sortTableData(event);\n } else if (this.isSorted) {\n this.isSorted = false;\n this.sortTableData(event);\n } else {\n this.isSorted = null;\n this.internalData = [...this.initialData];\n this.tableRef.reset();\n }\n }\n\n sortTableData(event: SortEvent) {\n if (!event.data || !event.field) return;\n\n event.data.sort((data1, data2) => {\n const value1 = data1[event.field!];\n const value2 = data2[event.field!];\n let result = null;\n if (value1 == null && value2 != null) result = -1;\n else if (value1 != null && value2 == null) result = 1;\n else if (value1 == null && value2 == null) result = 0;\n else if (typeof value1 === 'string' && typeof value2 === 'string')\n result = value1.localeCompare(value2);\n else if (value1 < value2) {\n result = -1;\n } else if (value1 > value2) {\n result = 1;\n } else {\n result = 0;\n }\n\n return (event.order ?? 1) * result;\n });\n }\n}\n","<p-table\n #tableRef\n [selection]=\"selection()\"\n (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\"\n [dataKey]=\"dataKey()\"\n [value]=\"internalData\"\n [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\"\n [tableStyle]=\"{ 'min-width': '60rem' }\"\n responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th\n [id]=\"col.field\"\n [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\" >\n <tk-checkbox\n [binary]=\"true\"\n [model]=\"isAllSelected()\"\n [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n {{ col.header }}\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox\n [model]=\"selection()\"\n [value]=\"row\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox\n [binary]=\"true\"\n [(model)]=\"row[col.field!]\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag\n [value]=\"row[col.field!]\"\n [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button\n [icon]=\"action.icon\"\n severity=\"secondary\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -111,11 +111,11 @@ class ToolbarComponent {
|
|
|
111
111
|
this.filterModel.set(value);
|
|
112
112
|
}
|
|
113
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:
|
|
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:end;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
116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
117
117
|
type: Component,
|
|
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:
|
|
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:end;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
|
}] });
|
|
120
120
|
|
|
121
121
|
/**
|
|
@@ -1 +1 @@
|
|
|
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 }\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAWa,gBAAgB,CAAA;AAN7B,IAAA,WAAA,GAAA;AAOE;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,EAAE,CAAC;AAE/B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAgC,IAAI,CAAC;AAExD;;;;;AAKG;AACH,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAU,KAAK,CAAC;AAExC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAU,KAAK,CAAC;AAEzC;;;;;;;;;;;;AAYG;QACH,IAAa,CAAA,aAAA,GAAG,KAAK,CAA0C;AAC7D,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;AACvC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;AACvC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;AACxC,SAAA,CAAC;AAEF;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,iBAAiB,GAAG,KAAK,CAAS,OAAO,CAAC;AAE1C;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAS,SAAS,CAAC;AAE3C;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAS,QAAQ,CAAC;AAgC3C;AA9BC;;;;AAIG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;AAC5C,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;;AAG1B;;;;AAIG;IACH,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;AAC7C,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;;AAG5B;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,KAAoC,EAAA;AACnD,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;;+GAhHlB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,qhCCX7B,uqCAuCA,EAAA,MAAA,EAAA,CAAA,
|
|
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 }\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -232,7 +232,37 @@ const TkPreset = definePreset(Aura, {
|
|
|
232
232
|
}
|
|
233
233
|
}
|
|
234
234
|
}
|
|
235
|
-
}
|
|
235
|
+
},
|
|
236
|
+
panel: {
|
|
237
|
+
root: {
|
|
238
|
+
background: 'var(--tk-color-background-soft)',
|
|
239
|
+
borderRadius: 'var(--tk-borderRadius-s)',
|
|
240
|
+
borderColor: 'var(--tk-color-transparent)',
|
|
241
|
+
},
|
|
242
|
+
header: {
|
|
243
|
+
background: 'transparent',
|
|
244
|
+
color: 'var(--tk-color-text-default)',
|
|
245
|
+
borderColor: 'var(--tk-color-transparent)',
|
|
246
|
+
borderWidth: '0',
|
|
247
|
+
padding: 'var(--tk-spacing-paddingY-m)',
|
|
248
|
+
fontWeight: 'var(--tk-font-weight-600)',
|
|
249
|
+
fontSize: 'var(--tk-font-size-paragraph-m)',
|
|
250
|
+
},
|
|
251
|
+
toggleableHeader: {
|
|
252
|
+
padding: 'var(--tk-spacing-paddingY-s) var(--tk-spacing-paddingX-m)',
|
|
253
|
+
},
|
|
254
|
+
content: {
|
|
255
|
+
padding: 'var(--tk-spacing-paddingX-l)',
|
|
256
|
+
},
|
|
257
|
+
},
|
|
258
|
+
drawer: {
|
|
259
|
+
header: {
|
|
260
|
+
padding: 'var(--tk-spacing-paddingX-m)',
|
|
261
|
+
},
|
|
262
|
+
content: {
|
|
263
|
+
padding: 'var(--tk-spacing-paddingX-m)',
|
|
264
|
+
},
|
|
265
|
+
},
|
|
236
266
|
},
|
|
237
267
|
});
|
|
238
268
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-core-types.mjs","sources":["../../../projects/design-system/core/types/src/grids/grid.enum.ts","../../../projects/design-system/core/types/src/breakpoints/breakpoints.ts","../../../projects/design-system/core/types/src/theme/tk-preset.ts","../../../projects/design-system/core/types/src/theme/theme.provider.ts","../../../projects/design-system/core/types/tekus-design-system-core-types.ts"],"sourcesContent":["enum GapGutter {\n normal = '24px',\n small = '16px',\n large = '32px',\n extraLarge = '40px',\n}\n\nenum PaddingGridContainer {\n large = '32px',\n medium = '24px',\n small = '16px'\n}\n\nenum Gutter {\n normal = 'normal',\n small = 'small',\n large = 'large',\n extraLarge = 'extraLarge',\n\n}\n\nexport {\n Gutter,\n GapGutter,\n PaddingGridContainer\n}","export const Breakpoints = {\n // Covers all devices with a width less than or equal to 360px.\n mobileSmall: '(max-width: 360px)',\n\n // For small phones (e.g., most modern cell phones)\n mobile: '(min-width: 361px) and (max-width: 424px)',\n\n // For large phones (e.g., Google Pixel, iPhone Plus/Max)\n mobileLarge: '(min-width: 425px) and (max-width: 575px)',\n\n // Vertical tablets and medium-sized devices\n tabletVertical: '(min-width: 576px) and (max-width: 767px)',\n\n // Tablets in landscape mode\n tabletHorizontal: '(min-width: 768px) and (max-width: 991px)',\n\n // Laptops and small desktops\n desktopSmall: '(min-width: 992px) and (max-width: 1199px)',\n\n // Large desks\n desktop: '(min-width: 1200px) and (max-width: 1399px)',\n\n // Ultra-wide screens\n desktopLarge: '(min-width: 1400px)',\n}","import { definePreset } from '@primeng/themes';\nimport Aura from '@primeng/themes/aura';\n\nexport const TkPreset = definePreset(Aura, {\n semantic: {\n primary: {\n 50: 'var(--tk-color-base-primary-50)',\n 100: 'var(--tk-color-base-primary-100)',\n 200: 'var(--tk-color-base-primary-200)',\n 300: 'var(--tk-color-base-primary-300)',\n 400: 'var(--tk-color-base-primary-400)',\n 500: 'var(--tk-color-base-primary-500)',\n 600: 'var(--tk-color-base-primary-600)',\n 700: 'var(--tk-color-base-primary-700)',\n 800: 'var(--tk-color-base-primary-800)',\n 900: 'var(--tk-color-base-primary-900)',\n 950: 'var(--tk-color-base-primary-950)',\n },\n red: {\n 50: 'var(--tk-color-base-red-50)',\n 100: 'var(--tk-color-base-red-100)',\n 200: 'var(--tk-color-base-red-200)',\n 300: 'var(--tk-color-base-red-300)',\n 400: 'var(--tk-color-base-red-400)',\n 500: 'var(--tk-color-base-red-500)',\n 600: 'var(--tk-color-base-red-600)',\n 700: 'var(--tk-color-base-red-700)',\n 800: 'var(--tk-color-base-red-800)',\n 900: 'var(--tk-color-base-red-900)',\n 950: 'var(--tk-color-base-red-950)',\n },\n surface: {\n 0: 'var(--tk-color-base-surface-0)',\n 50: 'var(--tk-color-base-surface-50)',\n 100: 'var(--tk-color-base-surface-100)',\n 200: 'var(--tk-color-base-surface-200)',\n 300: 'var(--tk-color-base-surface-300)',\n 400: 'var(--tk-color-base-surface-400)',\n 500: 'var(--tk-color-base-surface-500)',\n 600: 'var(--tk-color-base-surface-600)',\n 700: 'var(--tk-color-base-surface-700)',\n 800: 'var(--tk-color-base-surface-800)',\n 900: 'var(--tk-color-base-surface-900)',\n 950: 'var(--tk-color-base-surface-950)',\n },\n sky:{\n 50: 'var(--tk-color-base-sky-50)',\n 100: 'var(--tk-color-base-sky-100)',\n 200: 'var(--tk-color-base-sky-200)',\n 300: 'var(--tk-color-base-sky-300)',\n 400: 'var(--tk-color-base-sky-400)',\n 500: 'var(--tk-color-base-sky-500)',\n 600: 'var(--tk-color-base-sky-600)',\n 700: 'var(--tk-color-base-sky-700)',\n 800: 'var(--tk-color-base-sky-800)',\n 900: 'var(--tk-color-base-sky-900)',\n 950: 'var(--tk-color-base-sky-950)', \n },\n orange:{\n 50: 'var(--tk-color-base-yellow-50)',\n 100: 'var(--tk-color-base-yellow-100)',\n 200: 'var(--tk-color-base-yellow-200)',\n 300: 'var(--tk-color-base-yellow-300)',\n 400: 'var(--tk-color-base-yellow-400)',\n 500: 'var(--tk-color-base-yellow-500)',\n 600: 'var(--tk-color-base-yellow-600)',\n 700: 'var(--tk-color-base-yellow-700)',\n 800: 'var(--tk-color-base-yellow-800)',\n 900: 'var(--tk-color-base-yellow-900)',\n 950: 'var(--tk-color-base-yellow-950)', \n },\n },\n font: {\n family: 'var(--tk-font-family)',\n },\n\n components: {\n button: {\n root: {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n focusBoxShadow: 'none',\n },\n label: {\n color: 'inherit',\n },\n colorScheme: {\n light: {\n root: {\n primary: {\n hoverBackground: 'var(--tk-color-base-primary-400)',\n activeBackground: 'var(--tk-color-base-primary-400)',\n hoverBorderColor: 'transparent',\n activeBorderColor: 'transparent',\n },\n secondary: {\n background: 'var(--tk-color-base-surface-100)',\n hoverBackground: 'var(--tk-color-base-surface-400)',\n },\n },\n text: {\n secondary: {\n hoverBackground: 'var(--tk-color-base-surface-200)',\n activeBackground: 'var(--tk-color-base-surface-200)',\n },\n },\n outlined: {\n secondary: {\n hoverBackground: 'var(--tk-color-base-surface-200)',\n activeBackground: 'var(--tk-color-base-surface-200)',\n borderColor: 'var(--tk-color-base-surface-200)',\n },\n },\n }\n },\n },\n tag: {\n root: {\n fontWeight: 'var(--tk-font-weight-400)',\n borderRadius: 'var(--tk-borderRadius-full)',\n },\n colorScheme: {\n light: {\n secondary:{\n color: 'var(--tk-color-base-surface-950)',\n }\n },\n },\n },\n message: {\n text: {\n fontWeight: '400',\n },\n colorScheme: {\n light: {\n error:{\n color: 'var(--tk-color-base-red-700)',\n simple: {\n color: 'var(--tk-color-base-red-700)',\n }\n },\n secondary:{\n color: 'var(--tk-color-base-surface-600)',\n simple: {\n color: 'var(--tk-color-base-surface-600)',\n }\n }\n },\n },\n },\n tooltip: {\n colorScheme: {\n light: {\n root: {\n background: 'var(--tk-color-base-surface-700)',\n }\n }\n }\n },\n checkbox: {\n colorScheme: {\n light: {\n root: {\n borderColor: 'var(--tk-color-base-surface-400)',\n checkedBackground: 'var(--tk-color-base-primary-500)',\n checkedBorderColor: 'var(--tk-color-base-primary-500)',\n checkedHoverBackground: 'var(--tk-color-base-primary-600)',\n checkedHoverBorderColor: 'var(--tk-color-base-primary-600)',\n disabledBackground: 'var(--tk-color-base-surface-100)',\n disabledBorderColor: 'var(--tk-color-base-surface-300)',\n checkedDisabledBorderColor: 'var(--tk-color-base-surface-300)',\n }\n }\n }\n },\n radiobutton: {\n colorScheme: {\n light: {\n root: {\n borderColor: 'var(--tk-color-base-surface-400)',\n checkedBackground: 'var(--tk-color-base-primary-500)',\n checkedBorderColor: 'var(--tk-color-base-primary-500)',\n checkedHoverBackground: 'var(--tk-color-base-primary-600)',\n checkedHoverBorderColor: 'var(--tk-color-base-primary-600)',\n disabledBackground: 'var(--tk-color-base-surface-100)',\n disabledBorderColor: 'var(--tk-color-base-surface-300)',\n checkedDisabledBackground: 'var(--tk-color-base-surface-100)',\n checkedDisabledBorderColor: 'var(--tk-color-base-surface-300)',\n }\n }\n }\n }\n },\n});","import { inject, provideAppInitializer } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { PrimeNG } from 'primeng/config';\nimport { TkPreset } from './tk-preset';\n\nfunction themeFactory(config: PrimeNG, document: Document): () => void {\n return () => {\n const fontLink = document.createElement('link');\n fontLink.rel = 'stylesheet';\n fontLink.href =\n 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap';\n document.head.appendChild(fontLink);\n\n const style = document.createElement('style');\n style.innerHTML = `\n body {\n font-family: 'Poppins', sans-serif;\n }\n `;\n document.head.appendChild(style);\n\n config.theme.set({\n preset: TkPreset,\n options: {\n prefix: 'tk',\n darkMode: false,\n darkModeSelector: false,\n },\n });\n };\n}\n\nexport function provideTkTheme() {\n return provideAppInitializer(() => {\n const config = inject(PrimeNG);\n const document = inject(DOCUMENT);\n return themeFactory(config, document)();\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tekus-design-system-core-types.mjs","sources":["../../../projects/design-system/core/types/src/grids/grid.enum.ts","../../../projects/design-system/core/types/src/breakpoints/breakpoints.ts","../../../projects/design-system/core/types/src/theme/tk-preset.ts","../../../projects/design-system/core/types/src/theme/theme.provider.ts","../../../projects/design-system/core/types/tekus-design-system-core-types.ts"],"sourcesContent":["enum GapGutter {\n normal = '24px',\n small = '16px',\n large = '32px',\n extraLarge = '40px',\n}\n\nenum PaddingGridContainer {\n large = '32px',\n medium = '24px',\n small = '16px'\n}\n\nenum Gutter {\n normal = 'normal',\n small = 'small',\n large = 'large',\n extraLarge = 'extraLarge',\n\n}\n\nexport {\n Gutter,\n GapGutter,\n PaddingGridContainer\n}","export const Breakpoints = {\n // Covers all devices with a width less than or equal to 360px.\n mobileSmall: '(max-width: 360px)',\n\n // For small phones (e.g., most modern cell phones)\n mobile: '(min-width: 361px) and (max-width: 424px)',\n\n // For large phones (e.g., Google Pixel, iPhone Plus/Max)\n mobileLarge: '(min-width: 425px) and (max-width: 575px)',\n\n // Vertical tablets and medium-sized devices\n tabletVertical: '(min-width: 576px) and (max-width: 767px)',\n\n // Tablets in landscape mode\n tabletHorizontal: '(min-width: 768px) and (max-width: 991px)',\n\n // Laptops and small desktops\n desktopSmall: '(min-width: 992px) and (max-width: 1199px)',\n\n // Large desks\n desktop: '(min-width: 1200px) and (max-width: 1399px)',\n\n // Ultra-wide screens\n desktopLarge: '(min-width: 1400px)',\n}","import { definePreset } from '@primeng/themes';\nimport Aura from '@primeng/themes/aura';\n\nexport const TkPreset = definePreset(Aura, {\n semantic: {\n primary: {\n 50: 'var(--tk-color-base-primary-50)',\n 100: 'var(--tk-color-base-primary-100)',\n 200: 'var(--tk-color-base-primary-200)',\n 300: 'var(--tk-color-base-primary-300)',\n 400: 'var(--tk-color-base-primary-400)',\n 500: 'var(--tk-color-base-primary-500)',\n 600: 'var(--tk-color-base-primary-600)',\n 700: 'var(--tk-color-base-primary-700)',\n 800: 'var(--tk-color-base-primary-800)',\n 900: 'var(--tk-color-base-primary-900)',\n 950: 'var(--tk-color-base-primary-950)',\n },\n red: {\n 50: 'var(--tk-color-base-red-50)',\n 100: 'var(--tk-color-base-red-100)',\n 200: 'var(--tk-color-base-red-200)',\n 300: 'var(--tk-color-base-red-300)',\n 400: 'var(--tk-color-base-red-400)',\n 500: 'var(--tk-color-base-red-500)',\n 600: 'var(--tk-color-base-red-600)',\n 700: 'var(--tk-color-base-red-700)',\n 800: 'var(--tk-color-base-red-800)',\n 900: 'var(--tk-color-base-red-900)',\n 950: 'var(--tk-color-base-red-950)',\n },\n surface: {\n 0: 'var(--tk-color-base-surface-0)',\n 50: 'var(--tk-color-base-surface-50)',\n 100: 'var(--tk-color-base-surface-100)',\n 200: 'var(--tk-color-base-surface-200)',\n 300: 'var(--tk-color-base-surface-300)',\n 400: 'var(--tk-color-base-surface-400)',\n 500: 'var(--tk-color-base-surface-500)',\n 600: 'var(--tk-color-base-surface-600)',\n 700: 'var(--tk-color-base-surface-700)',\n 800: 'var(--tk-color-base-surface-800)',\n 900: 'var(--tk-color-base-surface-900)',\n 950: 'var(--tk-color-base-surface-950)',\n },\n sky:{\n 50: 'var(--tk-color-base-sky-50)',\n 100: 'var(--tk-color-base-sky-100)',\n 200: 'var(--tk-color-base-sky-200)',\n 300: 'var(--tk-color-base-sky-300)',\n 400: 'var(--tk-color-base-sky-400)',\n 500: 'var(--tk-color-base-sky-500)',\n 600: 'var(--tk-color-base-sky-600)',\n 700: 'var(--tk-color-base-sky-700)',\n 800: 'var(--tk-color-base-sky-800)',\n 900: 'var(--tk-color-base-sky-900)',\n 950: 'var(--tk-color-base-sky-950)', \n },\n orange:{\n 50: 'var(--tk-color-base-yellow-50)',\n 100: 'var(--tk-color-base-yellow-100)',\n 200: 'var(--tk-color-base-yellow-200)',\n 300: 'var(--tk-color-base-yellow-300)',\n 400: 'var(--tk-color-base-yellow-400)',\n 500: 'var(--tk-color-base-yellow-500)',\n 600: 'var(--tk-color-base-yellow-600)',\n 700: 'var(--tk-color-base-yellow-700)',\n 800: 'var(--tk-color-base-yellow-800)',\n 900: 'var(--tk-color-base-yellow-900)',\n 950: 'var(--tk-color-base-yellow-950)', \n },\n },\n font: {\n family: 'var(--tk-font-family)',\n },\n\n components: {\n button: {\n root: {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n focusBoxShadow: 'none',\n },\n label: {\n color: 'inherit',\n },\n colorScheme: {\n light: {\n root: {\n primary: {\n hoverBackground: 'var(--tk-color-base-primary-400)',\n activeBackground: 'var(--tk-color-base-primary-400)',\n hoverBorderColor: 'transparent',\n activeBorderColor: 'transparent',\n },\n secondary: {\n background: 'var(--tk-color-base-surface-100)',\n hoverBackground: 'var(--tk-color-base-surface-400)',\n },\n },\n text: {\n secondary: {\n hoverBackground: 'var(--tk-color-base-surface-200)',\n activeBackground: 'var(--tk-color-base-surface-200)',\n },\n },\n outlined: {\n secondary: {\n hoverBackground: 'var(--tk-color-base-surface-200)',\n activeBackground: 'var(--tk-color-base-surface-200)',\n borderColor: 'var(--tk-color-base-surface-200)',\n },\n },\n }\n },\n },\n tag: {\n root: {\n fontWeight: 'var(--tk-font-weight-400)',\n borderRadius: 'var(--tk-borderRadius-full)',\n },\n colorScheme: {\n light: {\n secondary:{\n color: 'var(--tk-color-base-surface-950)',\n }\n },\n },\n },\n message: {\n text: {\n fontWeight: '400',\n },\n colorScheme: {\n light: {\n error:{\n color: 'var(--tk-color-base-red-700)',\n simple: {\n color: 'var(--tk-color-base-red-700)',\n }\n },\n secondary:{\n color: 'var(--tk-color-base-surface-600)',\n simple: {\n color: 'var(--tk-color-base-surface-600)',\n }\n }\n },\n },\n },\n tooltip: {\n colorScheme: {\n light: {\n root: {\n background: 'var(--tk-color-base-surface-700)',\n }\n }\n }\n },\n checkbox: {\n colorScheme: {\n light: {\n root: {\n borderColor: 'var(--tk-color-base-surface-400)',\n checkedBackground: 'var(--tk-color-base-primary-500)',\n checkedBorderColor: 'var(--tk-color-base-primary-500)',\n checkedHoverBackground: 'var(--tk-color-base-primary-600)',\n checkedHoverBorderColor: 'var(--tk-color-base-primary-600)',\n disabledBackground: 'var(--tk-color-base-surface-100)',\n disabledBorderColor: 'var(--tk-color-base-surface-300)',\n checkedDisabledBorderColor: 'var(--tk-color-base-surface-300)',\n }\n }\n }\n },\n radiobutton: {\n colorScheme: {\n light: {\n root: {\n borderColor: 'var(--tk-color-base-surface-400)',\n checkedBackground: 'var(--tk-color-base-primary-500)',\n checkedBorderColor: 'var(--tk-color-base-primary-500)',\n checkedHoverBackground: 'var(--tk-color-base-primary-600)',\n checkedHoverBorderColor: 'var(--tk-color-base-primary-600)',\n disabledBackground: 'var(--tk-color-base-surface-100)',\n disabledBorderColor: 'var(--tk-color-base-surface-300)',\n checkedDisabledBackground: 'var(--tk-color-base-surface-100)',\n checkedDisabledBorderColor: 'var(--tk-color-base-surface-300)',\n }\n }\n }\n },\n panel: {\n root: {\n background: 'var(--tk-color-background-soft)',\n borderRadius: 'var(--tk-borderRadius-s)',\n borderColor: 'var(--tk-color-transparent)',\n },\n header: {\n background: 'transparent',\n color: 'var(--tk-color-text-default)',\n borderColor: 'var(--tk-color-transparent)',\n borderWidth: '0',\n padding: 'var(--tk-spacing-paddingY-m)',\n fontWeight: 'var(--tk-font-weight-600)',\n fontSize: 'var(--tk-font-size-paragraph-m)',\n },\n toggleableHeader: {\n padding: 'var(--tk-spacing-paddingY-s) var(--tk-spacing-paddingX-m)',\n },\n content: {\n padding: 'var(--tk-spacing-paddingX-l)',\n },\n },\n drawer: {\n header: {\n padding: 'var(--tk-spacing-paddingX-m)',\n },\n content: {\n padding: 'var(--tk-spacing-paddingX-m)',\n },\n },\n },\n});","import { inject, provideAppInitializer } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { PrimeNG } from 'primeng/config';\nimport { TkPreset } from './tk-preset';\n\nfunction themeFactory(config: PrimeNG, document: Document): () => void {\n return () => {\n const fontLink = document.createElement('link');\n fontLink.rel = 'stylesheet';\n fontLink.href =\n 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap';\n document.head.appendChild(fontLink);\n\n const style = document.createElement('style');\n style.innerHTML = `\n body {\n font-family: 'Poppins', sans-serif;\n }\n `;\n document.head.appendChild(style);\n\n config.theme.set({\n preset: TkPreset,\n options: {\n prefix: 'tk',\n darkMode: false,\n darkModeSelector: false,\n },\n });\n };\n}\n\nexport function provideTkTheme() {\n return provideAppInitializer(() => {\n const config = inject(PrimeNG);\n const document = inject(DOCUMENT);\n return themeFactory(config, document)();\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -232,7 +232,37 @@ const TkPreset = definePreset(Aura, {
|
|
|
232
232
|
}
|
|
233
233
|
}
|
|
234
234
|
}
|
|
235
|
-
}
|
|
235
|
+
},
|
|
236
|
+
panel: {
|
|
237
|
+
root: {
|
|
238
|
+
background: 'var(--tk-color-background-soft)',
|
|
239
|
+
borderRadius: 'var(--tk-borderRadius-s)',
|
|
240
|
+
borderColor: 'var(--tk-color-transparent)',
|
|
241
|
+
},
|
|
242
|
+
header: {
|
|
243
|
+
background: 'transparent',
|
|
244
|
+
color: 'var(--tk-color-text-default)',
|
|
245
|
+
borderColor: 'var(--tk-color-transparent)',
|
|
246
|
+
borderWidth: '0',
|
|
247
|
+
padding: 'var(--tk-spacing-paddingY-m)',
|
|
248
|
+
fontWeight: 'var(--tk-font-weight-600)',
|
|
249
|
+
fontSize: 'var(--tk-font-size-paragraph-m)',
|
|
250
|
+
},
|
|
251
|
+
toggleableHeader: {
|
|
252
|
+
padding: 'var(--tk-spacing-paddingY-s) var(--tk-spacing-paddingX-m)',
|
|
253
|
+
},
|
|
254
|
+
content: {
|
|
255
|
+
padding: 'var(--tk-spacing-paddingX-l)',
|
|
256
|
+
},
|
|
257
|
+
},
|
|
258
|
+
drawer: {
|
|
259
|
+
header: {
|
|
260
|
+
padding: 'var(--tk-spacing-paddingX-m)',
|
|
261
|
+
},
|
|
262
|
+
content: {
|
|
263
|
+
padding: 'var(--tk-spacing-paddingX-m)',
|
|
264
|
+
},
|
|
265
|
+
},
|
|
236
266
|
},
|
|
237
267
|
});
|
|
238
268
|
|