@tekus/design-system 5.28.0 → 5.29.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/tekus-design-system-components-bread-crumps.mjs +4 -4
- package/fesm2022/tekus-design-system-components-bread-crumps.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-button.mjs +11 -3
- package/fesm2022/tekus-design-system-components-button.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-card.mjs +1 -1
- package/fesm2022/tekus-design-system-components-card.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-drawer.mjs +17 -3
- package/fesm2022/tekus-design-system-components-drawer.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-dropdown.mjs +13 -3
- package/fesm2022/tekus-design-system-components-dropdown.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-fallback-view.mjs +1 -1
- package/fesm2022/tekus-design-system-components-fallback-view.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-icon.mjs +15 -1
- package/fesm2022/tekus-design-system-components-icon.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-menu.mjs +1 -0
- package/fesm2022/tekus-design-system-components-menu.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-message.mjs +2 -2
- package/fesm2022/tekus-design-system-components-message.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-modal.mjs +60 -27
- package/fesm2022/tekus-design-system-components-modal.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-panel-menu.mjs +1 -0
- package/fesm2022/tekus-design-system-components-panel-menu.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-select.mjs +335 -103
- package/fesm2022/tekus-design-system-components-select.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-sidebar-layout.mjs +1 -1
- package/fesm2022/tekus-design-system-components-sidebar-layout.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-table.mjs +1 -1
- package/fesm2022/tekus-design-system-components-table.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toast.mjs +1 -1
- package/fesm2022/tekus-design-system-components-toast.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toolbar.mjs +1 -1
- package/fesm2022/tekus-design-system-components-toolbar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-topbar.mjs +1 -1
- package/fesm2022/tekus-design-system-components-topbar.mjs.map +1 -1
- package/package.json +1 -1
- package/types/tekus-design-system-components-bread-crumps.d.ts +1 -1
- package/types/tekus-design-system-components-button.d.ts +9 -1
- package/types/tekus-design-system-components-drawer.d.ts +10 -1
- package/types/tekus-design-system-components-dropdown.d.ts +11 -1
- package/types/tekus-design-system-components-modal.d.ts +18 -11
- package/types/tekus-design-system-components-select.d.ts +216 -79
- package/types/tekus-design-system-core-types.d.ts +3 -4
- package/types/tekus-design-system-core.d.ts +3 -4
|
@@ -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 ChangeDetectionStrategy,\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 changeDetection: ChangeDetectionStrategy.OnPush,\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 private readonly init = (() => {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n })();\n\n /**\n * @effect disabled → internalDisabled\n * @description\n * Synchronizes the disabled input signal with the internal disabled state.\n */\n private readonly syncDisabled = 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 private readonly syncModel = 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 // 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(): FormControl | null {\n return (this.ngControl?.control as FormControl) || null;\n }\n}\n\n","<p-floatlabel class=\"w-full\">\n <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched)\n \" [class.ng-dirty]=\"effectiveControl?.dirty\" [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 * 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.manager.ts","../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/src/intersection.directive.ts","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\nimport { toObservable, toSignal } from '@angular/core/rxjs-interop';\nimport { auditTime, combineLatest, debounceTime, distinctUntilChanged, map, Observable, of, scan, switchMap, tap } from 'rxjs';\n\n/**\n * Standard request object for fetching data from an asynchronous source.\n * Aligned with PrimeNG LazyLoadEvent patterns.\n */\nexport interface TkSelectRequest {\n filter: string;\n page: number;\n pageSize: number;\n sortField?: string;\n sortOrder?: number;\n params?: Record<string, unknown>;\n}\n\n/**\n * Interface representing the data source for the Select manager.\n */\nexport interface SelectDataSource<T> {\n fetch(request: TkSelectRequest): Observable<T[]>;\n}\n\n@Injectable()\nexport class TkSelectManager<T> {\n /**\n * Reactive signal for the current search query.\n */\n searchQuery = signal<string>('');\n\n /**\n * Reactive signal for the current pagination page.\n */\n page = signal<number>(1);\n\n /**\n * Data source provider for fetching items.\n */\n public dataSource: SelectDataSource<T> | undefined;\n\n /**\n * Additional parameters to send to the data source.\n */\n fetchParams = signal<Record<string, unknown>>({});\n\n /**\n * Sorting field.\n */\n sortField = signal<string | undefined>(undefined);\n\n /**\n * Sorting order (1 for ASC, -1 for DESC).\n */\n sortOrder = signal<number | undefined>(undefined);\n\n /**\n * Reactive signal indicating if data is currently being fetched.\n */\n loading = signal<boolean>(false);\n\n /**\n * Reactive signal indicating if there are more items to fetch.\n */\n hasMore = signal<boolean>(true);\n\n /**\n * Number of items per page to detect the end of data.\n */\n pageSize = 20;\n\n /**\n * Final accumulated list of items exposed as a Signal.\n */\n items = toSignal(\n combineLatest({\n filter: toObservable(this.searchQuery).pipe(debounceTime(200)),\n page: toObservable(this.page),\n params: toObservable(this.fetchParams),\n sortField: toObservable(this.sortField),\n sortOrder: toObservable(this.sortOrder)\n }).pipe(\n auditTime(0),\n distinctUntilChanged((prev, curr) => \n JSON.stringify(prev) === JSON.stringify(curr)\n ),\n map(data => ({ ...data, pageSize: this.pageSize } as TkSelectRequest)),\n tap((request) => {\n if (request.page === 1) {\n this.hasMore.set(true);\n }\n this.loading.set(true);\n }),\n switchMap((request: TkSelectRequest): Observable<{ results: T[]; page: number }> => {\n const fetcher$ = this.dataSource \n ? this.dataSource.fetch(request) \n : of([] as T[]);\n\n return fetcher$.pipe(\n tap(results => {\n if (results.length < this.pageSize) {\n this.hasMore.set(false);\n }\n }),\n map(results => ({ results, page: request.page })),\n tap(() => this.loading.set(false))\n );\n }),\n scan((acc: T[], { results, page }: { results: T[]; page: number }) => {\n return page === 1 ? results : [...acc, ...results];\n }, [] as T[])\n ),\n { initialValue: [] as T[] }\n );\n\n /**\n * Updates the search query and resets pagination.\n * @param query - The new search string.\n */\n updateSearch(query: string): void {\n if (this.searchQuery() !== query) {\n this.searchQuery.set(query);\n this.page.set(1);\n this.hasMore.set(true);\n }\n }\n\n /**\n * Increments the page to trigger the next data chunk.\n */\n loadNextPage(): void {\n this.page.update(p => p + 1);\n }\n\n /**\n * Configures the data provider for the manager.\n * @param provider - Object implementing the SelectDataSource interface.\n */\n setDataSource(provider: SelectDataSource<T>): void {\n this.dataSource = provider;\n }\n\n /**\n * Updates additional fetch parameters and resets pagination.\n * @param params - The new parameters object.\n */\n updateParams(params: Record<string, unknown>): void {\n if (JSON.stringify(this.fetchParams()) !== JSON.stringify(params)) {\n this.fetchParams.set(params);\n this.page.set(1);\n this.hasMore.set(true);\n }\n }\n\n /**\n * Resets the manager state to its initial values.\n */\n reset(): void {\n this.searchQuery.set('');\n this.page.set(1);\n this.hasMore.set(true);\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n model,\n input,\n output,\n inject,\n viewChild,\n effect,\n signal,\n OnDestroy,\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';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { TkSelectManager, SelectDataSource } from './select.manager';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-select',\n providers: [TkSelectManager],\n imports: [\n FormsModule,\n Select,\n FloatLabelModule,\n MessageModule,\n ReactiveFormsModule,\n IconComponent,\n ],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor, OnDestroy {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n readonly manager = inject(TkSelectManager<T>);\n\n /** PrimeNG Select instance */\n readonly selectComponent = viewChild<Select>('pSelect');\n\n /** Final reactive list of items */\n\n /**\n * HTML id attribute for the select input.\n * @default 'select'\n */\n id = input<string>('select');\n\n /**\n * External FormControl used to read/set the input value.\n */\n control = input<FormControl>();\n\n /**\n * Static options for synchronous mode.\n * If provided, they take precedence over the manager's async stream.\n */\n options = input<T[]>([]);\n\n /**\n * Data source for asynchronous infinite scroll mode.\n */\n dataSource = model<SelectDataSource<T>>();\n\n /**\n * Name of the property used to display the text of each option.\n * @default 'label'\n */\n optionLabel = input<string>('label');\n\n /**\n * Floating label displayed above the select input.\n */\n label = input<string>('');\n\n /**\n * Enables the clear button to remove the current selection.\n * @default true\n */\n showClear = input<boolean>(true);\n\n /**\n * Determines whether the select field is disabled.\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * Message to display when the control is invalid and touched.\n */\n errorMessage = input<string>('');\n\n /**\n * Hint text to display below the input.\n */\n hint = input<string>('');\n\n /**\n * Enables filtering/search input.\n * @default false\n */\n filter = input<boolean>(false);\n\n /**\n * Placeholder text displayed when no value is selected.\n * @default 'Select an option'\n */\n placeholder = input<string>('Select an option');\n\n /**\n * Loading state for the dropdown.\n */\n loading = input<boolean>(false);\n\n /**\n * Additional parameters for the async data source.\n * Useful for sending context like categoryId, parentId, etc.\n */\n fetchParams = input<Record<string, unknown>>({});\n\n /**\n * Field name to sort by in the async data source.\n */\n sortField = input<string | undefined>(undefined);\n\n /**\n * Order to sort by (1 for ASC, -1 for DESC).\n */\n sortOrder = input<number | undefined>(undefined);\n\n /**\n * Internal writable signal for the disabled state.\n */\n internalDisabled = signal<boolean>(false);\n\n /**\n * Two-way binding model using Angular signals.\n * This is the single source of truth for the selected value.\n */\n model = model<T | null>(null);\n\n /**\n * Text to display when there are no options.\n */\n emptyMessage = input<string>('No data available');\n\n /**\n * Text to display when no results match the filter.\n */\n emptyFilterMessage = input<string>('No results found');\n\n /**\n * Emits whenever the value changes.\n */\n modelChange = output<T | null>();\n\n /**\n * Emits the filter search term.\n */\n filterChange = output<{ filter: string | null }>();\n\n // CVA callbacks\n private onChangeFn: (value: T | null) => void = () => {};\n private onTouchedFn = () => {};\n private scrollHandler = this.handleScroll.bind(this);\n private lastListContainer: HTMLElement | null = null;\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n\n // Synchronize parameters with the manager\n effect(() => {\n this.manager.updateParams(this.fetchParams());\n });\n\n effect(() => {\n this.manager.sortField.set(this.sortField());\n this.manager.sortOrder.set(this.sortOrder());\n });\n\n // Synchronize disabled state\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n // Synchronize data source (Strictly necessary effect to bridge with manager)\n effect(() => {\n const source = this.dataSource();\n if (source) {\n this.manager.setDataSource(source);\n }\n });\n }\n\n /**\n * Displays the items from the manager if provided, otherwise the static options.\n * Includes a \"Ghost Option\" logic to ensure the selected item is always visible\n * even if it's not in the current loaded chunk of data.\n */\n get items(): T[] {\n const baseItems = this.dataSource()\n ? (this.manager.items() as T[])\n : this.options();\n const selected = this.model();\n\n if (!selected) return baseItems;\n\n // Check if selected item is already in the list to avoid duplicates\n // We compare by stringifying or by a known 'id' field if possible\n const exists = baseItems.some(item => {\n if (item === selected) return true;\n const itemId = (item as Record<string, unknown> | null)?.['id'] || (item as Record<string, unknown> | null)?.['code'];\n const selectedId = (selected as Record<string, unknown> | null)?.['id'] || (selected as Record<string, unknown> | null)?.['code'];\n return itemId !== undefined && itemId === selectedId;\n });\n\n return exists ? baseItems : [selected, ...baseItems];\n }\n\n /**\n * Receives value updates from Angular Forms API.\n * @param value - New value from the forms API.\n */\n writeValue(value: T | null): void {\n this.model.set(value);\n }\n\n /**\n * Registers a callback that is invoked when the component's value changes.\n * @param fn - The callback function.\n */\n registerOnChange(fn: (value: T | null) => void): void {\n this.onChangeFn = fn;\n }\n\n /**\n * Registers a callback invoked when the component is touched.\n * @param fn - The callback function.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouchedFn = fn;\n }\n\n /**\n * Updates the disabled state of the control.\n * @param isDisabled - Whether the component should be disabled.\n */\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n /**\n * Handles UI changes from the PrimeNG Select.\n * @param event - Event containing the selected value.\n */\n handleChange(event: { value: T | null }): void {\n const value = event.value ?? null;\n this.model.set(value);\n this.onChangeFn(value);\n this.onTouchedFn();\n this.modelChange.emit(value);\n\n if (this.effectiveControl) {\n this.effectiveControl.setValue(value, { emitEvent: false });\n this.effectiveControl.markAsDirty();\n this.effectiveControl.markAsTouched();\n }\n }\n\n /**\n * Handles filter input changes and notifies the manager.\n * @param event - Filter event containing the search term.\n */\n handleFilter(event: { filter: string | null }): void {\n const query = event.filter || '';\n this.manager.updateSearch(query);\n this.filterChange.emit(event);\n }\n\n /**\n * Returns the underlying FormControl for validation state checking.\n */\n get effectiveControl(): FormControl | null {\n return (this.ngControl?.control as FormControl) || null;\n }\n\n /**\n * Adds a scroll listener to the PrimeNG select list container when the panel opens.\n */\n onPanelShow(): void {\n const listContainer = document.querySelector('.p-select-list-container') as HTMLElement;\n if (listContainer) {\n this.lastListContainer = listContainer;\n listContainer.addEventListener('scroll', this.scrollHandler);\n }\n }\n\n /**\n * Cleans up state, removes listeners and resets the manager when the panel closes.\n */\n onPanelHide(): void {\n this.removeScrollListener();\n this.manager.reset();\n }\n\n /**\n * Cleans up listeners on component destruction.\n */\n ngOnDestroy(): void {\n this.removeScrollListener();\n }\n\n /**\n * Safely removes the scroll event listener.\n */\n private removeScrollListener(): void {\n if (this.lastListContainer) {\n this.lastListContainer.removeEventListener('scroll', this.scrollHandler);\n this.lastListContainer = null;\n }\n }\n\n /**\n * Detects if the user has reached the bottom of the list.\n */\n private handleScroll(event: Event): void {\n const target = event.target as HTMLElement;\n if (!target) return;\n\n // Trigger near the bottom (1px threshold)\n const atBottom =\n target.scrollHeight - target.scrollTop <= target.clientHeight + 1;\n\n if (\n atBottom &&\n this.manager.dataSource &&\n !this.manager.loading() &&\n this.manager.hasMore()\n ) {\n this.manager.loadNextPage();\n }\n }\n}\n","<p-floatlabel class=\"w-full\">\n <p-select\n #pSelect\n [id]=\"id()\"\n class=\"w-full\"\n [options]=\"items\"\n [optionLabel]=\"optionLabel()\"\n [showClear]=\"showClear()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n [filter]=\"filter()\"\n [loading]=\"manager.loading()\"\n [emptyMessage]=\"emptyMessage()\"\n [emptyFilterMessage]=\"emptyFilterMessage()\"\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 (onFilter)=\"handleFilter($event)\"\n (onShow)=\"onPanelShow()\"\n (onHide)=\"onPanelHide()\"\n [resetFilterOnHide]=\"true\">\n \n <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n @if (model()) {\n <div>{{ $any(model())[optionLabel()] }}</div>\n } @else if (placeholder()) {\n <span class=\"text-secondary\">{{ placeholder() }}</span>\n }\n </ng-template>\n\n <ng-template pTemplate=\"empty\">\n <div class=\"tk-select-empty-container\">\n <tk-icon icon=\"info\" size=\"2xl\"></tk-icon>\n <span>{{ emptyMessage() }}</span>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"emptyfilter\">\n <div class=\"tk-select-empty-container\">\n <tk-icon icon=\"magnifying-glass\" size=\"2xl\"></tk-icon>\n <span>{{ emptyFilterMessage() }}</span>\n </div>\n </ng-template>\n </p-select>\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","import { Directive, ElementRef, output, OnDestroy, OnInit, inject } from '@angular/core';\n\n@Directive({\n selector: '[tkIntersection]',\n standalone: true\n})\nexport class IntersectionDirective implements OnInit, OnDestroy {\n /**\n * Emits when the element enters the viewport.\n */\n intersect = output<void>();\n\n private readonly element = inject(ElementRef);\n private observer?: IntersectionObserver;\n\n constructor() {}\n\n /**\n * Initializes the Intersection Observer on component mount.\n */\n ngOnInit(): void {\n this.observer = new IntersectionObserver(([entry]) => {\n if (entry.isIntersecting) {\n this.intersect.emit();\n }\n }, { threshold: 0.1 });\n\n this.observer.observe(this.element.nativeElement);\n }\n\n /**\n * Cleans up the observer to prevent memory leaks.\n */\n ngOnDestroy(): void {\n this.observer?.disconnect();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -158,7 +158,7 @@ class SidebarLayoutComponent {
|
|
|
158
158
|
this.closeSidebar();
|
|
159
159
|
}
|
|
160
160
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
161
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: SidebarLayoutComponent, isStandalone: true, selector: "tk-sidebar-layout", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "handleSidebarContentClick($event)" } }, ngImport: i0, template: "<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <header class=\"tk-nav-header\">\n <div class=\"tk-nav-left\">\n @if (displayCollapsed || isTablet) {\n <tk-button\n class=\"tk-sidebar-toggle\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"bars\"\n ></tk-button>\n <img\n src=\"assets/img/tk-logo-normal-dark.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-header\"\n />\n }\n </div>\n\n <div class=\"tk-nav-right\">\n <div class=\"tk-header-actions\">\n <ng-content select=\"[header-actions]\"></ng-content>\n </div>\n </div>\n </header>\n\n <main class=\"tk-content\">\n <ng-content></ng-content>\n </main>\n </div>\n</div>\n", styles: [":host{display:block;height:100vh;width:100%}.tk-sidebar-layout{display:flex;height:100%;width:100%;overflow:hidden;position:relative}.tk-sidebar-layout .tk-sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;cursor:pointer;animation:fadeIn .3s ease-in-out;display:block}.tk-sidebar-layout .tk-sidebar-backdrop::ng-deep .p-button{width:100%!important;height:100%!important;background-color:#00000080!important;border:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tk-sidebar-layout .tk-sidebar{background-color:var(--tk-color-background-inverse, #191a1b);color:var(--tk-color-text-inverse, #ffffff);width:var(--tk-sidebar-width, 17.5rem);height:100%;display:flex;flex-direction:column;transition:width .3s ease-in-out,transform .3s ease-in-out;flex-shrink:0;overflow-y:auto;overflow-x:hidden}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar{width:.25rem}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar-thumb{background:var(--tk-color-base-surface-700, #424243);border-radius:.125rem}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header{padding:0 var(--tk-spacing-padding-m, 1rem);display:flex;align-items:center;justify-content:space-between;height:3.5rem;flex-shrink:0}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-expanded{height:1.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-collapsed{height:2.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-menu{flex:1;padding:var(--tk-spacing-padding-m, 1rem)}.tk-sidebar-layout .tk-main-container{flex:1;display:flex;flex-direction:column;min-width:0;background-color:var(--tk-color-background-default, #ffffff)}.tk-sidebar-layout .tk-sidebar-toggle{appearance:none;background:none;border:none;box-shadow:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--tk-color-text-default, #191a1b);border-radius:var(--tk-borderRadius-s, .5rem);transition:all .2s;min-width:unset}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button{background:none!important;border:none!important;padding:var(--tk-spacing-padding-xs, .25rem)!important;min-width:unset!important;height:auto!important;color:inherit!important;box-shadow:none!important}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button:hover{background-color:var(--tk-color-background-soft, #f2f1f1)!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar{color:#fff!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button{color:#fff!important;background:transparent!important;padding:0!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button:hover{background-color:transparent!important;opacity:.7}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep svg,.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep path{fill:currentColor!important;stroke:currentColor!important}.tk-sidebar-layout .tk-nav-header{height:3.5rem;background-color:var(--tk-color-background-default, #ffffff);display:flex;align-items:center;justify-content:space-between;padding:0 var(--tk-spacing-padding-m, 1rem);border-bottom:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-sidebar-layout .tk-nav-header .tk-nav-left{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem)}.tk-sidebar-layout .tk-nav-header .tk-logo-header{height:1.75rem;width:auto;margin-left:var(--tk-spacing-padding-s, .5rem)}.tk-sidebar-layout .tk-nav-header .tk-nav-right{display:flex;align-items:center}.tk-sidebar-layout .tk-nav-header .tk-header-actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:var(--tk-spacing-padding-s, .5rem);color:var(--tk-color-primary-default, #16006f);border-radius:50%;transition:background-color .2s}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn:hover{background-color:var(--tk-color-background-soft, #f2f1f1)}.tk-sidebar-layout .tk-content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-l, 1.25rem)}.tk-sidebar-layout.collapsed:not(.is-tablet) .tk-sidebar{width:0;border-right:none}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-chevron,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-icon{display:none!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-link,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header{justify-content:center;padding-left:0!important;padding-right:0!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-content{justify-content:center}.tk-sidebar-layout.is-tablet .tk-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;width:var(--tk-sidebar-width, 17.5rem)!important;transform:translate(0);box-shadow:4px 0 10px #0000001a}.tk-sidebar-layout.is-tablet.collapsed .tk-sidebar{transform:translate(-100%)}.tk-sidebar-layout.is-tablet .tk-main-container{width:100%;flex:1}.tk-sidebar-layout.is-mobile .tk-sidebar{width:100%!important;max-width:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
161
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: SidebarLayoutComponent, isStandalone: true, selector: "tk-sidebar-layout", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "handleSidebarContentClick($event)" } }, ngImport: i0, template: "<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <header class=\"tk-nav-header\">\n <div class=\"tk-nav-left\">\n @if (displayCollapsed || isTablet) {\n <tk-button\n class=\"tk-sidebar-toggle\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"bars\"\n ></tk-button>\n <img\n src=\"assets/img/tk-logo-normal-dark.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-header\"\n />\n }\n </div>\n\n <div class=\"tk-nav-right\">\n <div class=\"tk-header-actions\">\n <ng-content select=\"[header-actions]\"></ng-content>\n </div>\n </div>\n </header>\n\n <main class=\"tk-content\">\n <ng-content></ng-content>\n </main>\n </div>\n</div>\n", styles: [":host{display:block;height:100vh;width:100%}.tk-sidebar-layout{display:flex;height:100%;width:100%;overflow:hidden;position:relative}.tk-sidebar-layout .tk-sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;cursor:pointer;animation:fadeIn .3s ease-in-out;display:block}.tk-sidebar-layout .tk-sidebar-backdrop::ng-deep .p-button{width:100%!important;height:100%!important;background-color:#00000080!important;border:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tk-sidebar-layout .tk-sidebar{background-color:var(--tk-color-background-inverse, #191a1b);color:var(--tk-color-text-inverse, #ffffff);width:var(--tk-sidebar-width, 17.5rem);height:100%;display:flex;flex-direction:column;transition:width .3s ease-in-out,transform .3s ease-in-out;flex-shrink:0;overflow-y:auto;overflow-x:hidden}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar{width:.25rem}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar-thumb{background:var(--tk-color-base-surface-700, #424243);border-radius:.125rem}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header{padding:0 var(--tk-spacing-padding-m, 1rem);display:flex;align-items:center;justify-content:space-between;height:3.5rem;flex-shrink:0}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-expanded{height:1.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-collapsed{height:2.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-menu{flex:1;padding:var(--tk-spacing-padding-m, 1rem)}.tk-sidebar-layout .tk-main-container{flex:1;display:flex;flex-direction:column;min-width:0;background-color:var(--tk-color-background-default, #ffffff)}.tk-sidebar-layout .tk-sidebar-toggle{appearance:none;background:none;border:none;box-shadow:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--tk-color-text-default, #191a1b);border-radius:var(--tk-borderRadius-s, .5rem);transition:all .2s;min-width:unset}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button{background:none!important;border:none!important;padding:var(--tk-spacing-padding-xs, .25rem)!important;min-width:unset!important;height:auto!important;color:inherit!important;box-shadow:none!important}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button:hover{background-color:var(--tk-color-background-soft, #f2f1f1)!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar{color:#fff!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button{color:#fff!important;background:transparent!important;padding:0!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button:hover{background-color:transparent!important;opacity:.7}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep svg,.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep path{fill:currentColor!important;stroke:currentColor!important}.tk-sidebar-layout .tk-nav-header{height:3.5rem;background-color:var(--tk-color-background-default, #ffffff);display:flex;align-items:center;justify-content:space-between;padding:0 var(--tk-spacing-padding-m, 1rem);border-bottom:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-sidebar-layout .tk-nav-header .tk-nav-left{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem)}.tk-sidebar-layout .tk-nav-header .tk-logo-header{height:1.75rem;width:auto;margin-left:var(--tk-spacing-padding-s, .5rem)}.tk-sidebar-layout .tk-nav-header .tk-nav-right{display:flex;align-items:center}.tk-sidebar-layout .tk-nav-header .tk-header-actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:var(--tk-spacing-padding-s, .5rem);color:var(--tk-color-primary-default, #16006f);border-radius:50%;transition:background-color .2s}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn:hover{background-color:var(--tk-color-background-soft, #f2f1f1)}.tk-sidebar-layout .tk-content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-l, 1.25rem)}.tk-sidebar-layout.collapsed:not(.is-tablet) .tk-sidebar{width:0;border-right:none}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-chevron,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-icon{display:none!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-link,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header{justify-content:center;padding-left:0!important;padding-right:0!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-content{justify-content:center}.tk-sidebar-layout.is-tablet .tk-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;width:var(--tk-sidebar-width, 17.5rem)!important;transform:translate(0);box-shadow:4px 0 10px #0000001a}.tk-sidebar-layout.is-tablet.collapsed .tk-sidebar{transform:translate(-100%)}.tk-sidebar-layout.is-tablet .tk-main-container{width:100%;flex:1}.tk-sidebar-layout.is-mobile .tk-sidebar{width:100%!important;max-width:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
162
162
|
}
|
|
163
163
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
|
|
164
164
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-sidebar-layout.mjs","sources":["../../../projects/design-system/components/sidebar-layout/src/sidebar.service.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.html","../../../projects/design-system/components/sidebar-layout/tekus-design-system-components-sidebar-layout.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class SidebarService {\n private readonly collapsedSubject = new BehaviorSubject<boolean>(false);\n \n /**\n * Observable to track the collapsed state of the sidebar.\n */\n isCollapsed$ = this.collapsedSubject.asObservable();\n\n /**\n * Toggles the collapsed state of the sidebar.\n */\n toggle(): void {\n this.collapsedSubject.next(!this.collapsedSubject.value);\n }\n\n /**\n * Explicitly sets the collapsed state of the sidebar.\n * @param value True to collapse, false to expand.\n */\n setCollapsed(value: boolean): void {\n this.collapsedSubject.next(value);\n }\n\n /**\n * Gets the current collapsed state.\n */\n get isCollapsed(): boolean {\n return this.collapsedSubject.value;\n }\n}\n","import { ChangeDetectionStrategy, Component, inject, input, output, OnInit, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { SidebarService } from './sidebar.service';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\n\n@Component({\n selector: 'tk-sidebar-layout',\n imports: [\n CommonModule,\n ButtonComponent\n ],\n templateUrl: './sidebar-layout.component.html',\n styleUrl: './sidebar-layout.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SidebarLayoutComponent implements OnInit, OnDestroy {\n private readonly sidebarService = inject(SidebarService);\n private readonly breakpointObserver = inject(BreakpointObserver);\n private readonly cdr = inject(ChangeDetectorRef);\n private readonly subscription = new Subscription();\n\n /**\n * Breakpoint constants\n */\n private readonly TABLET_BREAKPOINT = '(max-width: 1023px)';\n private readonly MOBILE_BREAKPOINT = '(max-width: 479px)';\n\n /**\n * Optional manual control of the collapsed state.\n * If provided, it overrides the service state.\n */\n isCollapsed = input<boolean | undefined>(undefined);\n\n\n /**\n * Emitted when the collapsed state changes.\n */\n collapsedChange = output<boolean>();\n\n /**\n * Internal state of the sidebar.\n */\n collapsed = false;\n\n /**\n * Responsive states\n */\n isTablet = false;\n isMobile = false;\n\n ngOnInit(): void {\n // Sync with service\n this.subscription.add(\n this.sidebarService.isCollapsed$.subscribe((state) => {\n if (this.isCollapsed() === undefined) {\n this.collapsed = state;\n this.collapsedChange.emit(state);\n this.cdr.markForCheck();\n }\n })\n );\n\n // Responsive breakpoints\n this.subscription.add(\n this.breakpointObserver\n .observe([this.TABLET_BREAKPOINT, this.MOBILE_BREAKPOINT])\n .subscribe((result) => {\n const wasTablet = this.isTablet;\n this.isTablet = result.breakpoints[this.TABLET_BREAKPOINT];\n this.isMobile = result.breakpoints[this.MOBILE_BREAKPOINT];\n\n // Auto-collapse when entering tablet/mobile mode (< 1024px)\n if (this.isTablet && !wasTablet) {\n this.sidebarService.setCollapsed(true);\n }\n\n // Auto-expand when returning to desktop mode (> 1024px)\n if (!this.isTablet && wasTablet) {\n this.sidebarService.setCollapsed(false);\n }\n\n this.cdr.markForCheck();\n })\n );\n }\n\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n /**\n * Determines if the sidebar is currently collapsed.\n */\n get displayCollapsed(): boolean {\n return this.isCollapsed() === undefined ? this.collapsed : this.isCollapsed()!;\n }\n\n /**\n * Toggles the sidebar state.\n */\n toggleSidebar(): void {\n if (this.isCollapsed() === undefined) {\n this.sidebarService.toggle();\n } else {\n this.collapsedChange.emit(!this.isCollapsed());\n }\n }\n\n /**\n * Closes the sidebar explicitly.\n */\n closeSidebar(): void {\n if (this.isCollapsed() === undefined) {\n this.sidebarService.setCollapsed(true);\n } else {\n this.collapsedChange.emit(true);\n }\n }\n\n /**\n * Handles clicks in the sidebar content to auto-close on mobile.\n * Using HostListener to avoid template accessibility linting on non-interactive aside.\n */\n @HostListener('click', ['$event'])\n handleSidebarContentClick(event: MouseEvent): void {\n if (!this.isMobile) return;\n\n // Check if the click is inside the sidebar\n const sidebar = (event.target as HTMLElement).closest('.tk-sidebar');\n if (!sidebar) return;\n\n const target = event.target as HTMLElement;\n const navItem = target.closest('.tk-menu-item-link, .tk-pm-item-link, a, button');\n\n if (navItem) {\n // Check if it's a toggle for a sub-menu (has children)\n const hasChildren = navItem.querySelector('.tk-menu-item-chevron, .tk-pm-item-chevron');\n if (!hasChildren) {\n this.closeSidebar();\n }\n }\n }\n\n /**\n * Handles backdrop clicks to close the drawer.\n */\n handleBackdropClick(): void {\n this.closeSidebar();\n }\n}\n","<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <header class=\"tk-nav-header\">\n <div class=\"tk-nav-left\">\n @if (displayCollapsed || isTablet) {\n <tk-button\n class=\"tk-sidebar-toggle\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"bars\"\n ></tk-button>\n <img\n src=\"assets/img/tk-logo-normal-dark.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-header\"\n />\n }\n </div>\n\n <div class=\"tk-nav-right\">\n <div class=\"tk-header-actions\">\n <ng-content select=\"[header-actions]\"></ng-content>\n </div>\n </div>\n </header>\n\n <main class=\"tk-content\">\n <ng-content></ng-content>\n </main>\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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"}
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-sidebar-layout.mjs","sources":["../../../projects/design-system/components/sidebar-layout/src/sidebar.service.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.html","../../../projects/design-system/components/sidebar-layout/tekus-design-system-components-sidebar-layout.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class SidebarService {\n private readonly collapsedSubject = new BehaviorSubject<boolean>(false);\n \n /**\n * Observable to track the collapsed state of the sidebar.\n */\n isCollapsed$ = this.collapsedSubject.asObservable();\n\n /**\n * Toggles the collapsed state of the sidebar.\n */\n toggle(): void {\n this.collapsedSubject.next(!this.collapsedSubject.value);\n }\n\n /**\n * Explicitly sets the collapsed state of the sidebar.\n * @param value True to collapse, false to expand.\n */\n setCollapsed(value: boolean): void {\n this.collapsedSubject.next(value);\n }\n\n /**\n * Gets the current collapsed state.\n */\n get isCollapsed(): boolean {\n return this.collapsedSubject.value;\n }\n}\n","import { ChangeDetectionStrategy, Component, inject, input, output, OnInit, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { SidebarService } from './sidebar.service';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\n\n@Component({\n selector: 'tk-sidebar-layout',\n imports: [\n CommonModule,\n ButtonComponent\n ],\n templateUrl: './sidebar-layout.component.html',\n styleUrl: './sidebar-layout.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SidebarLayoutComponent implements OnInit, OnDestroy {\n private readonly sidebarService = inject(SidebarService);\n private readonly breakpointObserver = inject(BreakpointObserver);\n private readonly cdr = inject(ChangeDetectorRef);\n private readonly subscription = new Subscription();\n\n /**\n * Breakpoint constants\n */\n private readonly TABLET_BREAKPOINT = '(max-width: 1023px)';\n private readonly MOBILE_BREAKPOINT = '(max-width: 479px)';\n\n /**\n * Optional manual control of the collapsed state.\n * If provided, it overrides the service state.\n */\n isCollapsed = input<boolean | undefined>(undefined);\n\n\n /**\n * Emitted when the collapsed state changes.\n */\n collapsedChange = output<boolean>();\n\n /**\n * Internal state of the sidebar.\n */\n collapsed = false;\n\n /**\n * Responsive states\n */\n isTablet = false;\n isMobile = false;\n\n ngOnInit(): void {\n // Sync with service\n this.subscription.add(\n this.sidebarService.isCollapsed$.subscribe((state) => {\n if (this.isCollapsed() === undefined) {\n this.collapsed = state;\n this.collapsedChange.emit(state);\n this.cdr.markForCheck();\n }\n })\n );\n\n // Responsive breakpoints\n this.subscription.add(\n this.breakpointObserver\n .observe([this.TABLET_BREAKPOINT, this.MOBILE_BREAKPOINT])\n .subscribe((result) => {\n const wasTablet = this.isTablet;\n this.isTablet = result.breakpoints[this.TABLET_BREAKPOINT];\n this.isMobile = result.breakpoints[this.MOBILE_BREAKPOINT];\n\n // Auto-collapse when entering tablet/mobile mode (< 1024px)\n if (this.isTablet && !wasTablet) {\n this.sidebarService.setCollapsed(true);\n }\n\n // Auto-expand when returning to desktop mode (> 1024px)\n if (!this.isTablet && wasTablet) {\n this.sidebarService.setCollapsed(false);\n }\n\n this.cdr.markForCheck();\n })\n );\n }\n\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n /**\n * Determines if the sidebar is currently collapsed.\n */\n get displayCollapsed(): boolean {\n return this.isCollapsed() === undefined ? this.collapsed : this.isCollapsed()!;\n }\n\n /**\n * Toggles the sidebar state.\n */\n toggleSidebar(): void {\n if (this.isCollapsed() === undefined) {\n this.sidebarService.toggle();\n } else {\n this.collapsedChange.emit(!this.isCollapsed());\n }\n }\n\n /**\n * Closes the sidebar explicitly.\n */\n closeSidebar(): void {\n if (this.isCollapsed() === undefined) {\n this.sidebarService.setCollapsed(true);\n } else {\n this.collapsedChange.emit(true);\n }\n }\n\n /**\n * Handles clicks in the sidebar content to auto-close on mobile.\n * Using HostListener to avoid template accessibility linting on non-interactive aside.\n */\n @HostListener('click', ['$event'])\n handleSidebarContentClick(event: MouseEvent): void {\n if (!this.isMobile) return;\n\n // Check if the click is inside the sidebar\n const sidebar = (event.target as HTMLElement).closest('.tk-sidebar');\n if (!sidebar) return;\n\n const target = event.target as HTMLElement;\n const navItem = target.closest('.tk-menu-item-link, .tk-pm-item-link, a, button');\n\n if (navItem) {\n // Check if it's a toggle for a sub-menu (has children)\n const hasChildren = navItem.querySelector('.tk-menu-item-chevron, .tk-pm-item-chevron');\n if (!hasChildren) {\n this.closeSidebar();\n }\n }\n }\n\n /**\n * Handles backdrop clicks to close the drawer.\n */\n handleBackdropClick(): void {\n this.closeSidebar();\n }\n}\n","<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <header class=\"tk-nav-header\">\n <div class=\"tk-nav-left\">\n @if (displayCollapsed || isTablet) {\n <tk-button\n class=\"tk-sidebar-toggle\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"bars\"\n ></tk-button>\n <img\n src=\"assets/img/tk-logo-normal-dark.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-header\"\n />\n }\n </div>\n\n <div class=\"tk-nav-right\">\n <div class=\"tk-header-actions\">\n <ng-content select=\"[header-actions]\"></ng-content>\n </div>\n </div>\n </header>\n\n <main class=\"tk-content\">\n <ng-content></ng-content>\n </main>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAMa,cAAc,CAAA;AAH3B,IAAA,WAAA,GAAA;AAImB,QAAA,IAAA,CAAA,gBAAgB,GAAG,IAAI,eAAe,CAAU,KAAK,CAAC;AAEvE;;AAEG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE;AAuBpD,IAAA;AArBC;;AAEG;IACH,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAC1D;AAEA;;;AAGG;AACH,IAAA,YAAY,CAAC,KAAc,EAAA;AACzB,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;IACnC;AAEA;;AAEG;AACH,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,KAAK;IACpC;8GA5BW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cAFb,MAAM,EAAA,CAAA,CAAA;;2FAEP,cAAc,EAAA,UAAA,EAAA,CAAA;kBAH1B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;MCYY,sBAAsB,CAAA;AAVnC,IAAA,WAAA,GAAA;AAWmB,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AACvC,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC;AAC/C,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC/B,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAE;AAElD;;AAEG;QACc,IAAA,CAAA,iBAAiB,GAAG,qBAAqB;QACzC,IAAA,CAAA,iBAAiB,GAAG,oBAAoB;AAEzD;;;AAGG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAsB,SAAS,kFAAC;AAGnD;;AAEG;QACH,IAAA,CAAA,eAAe,GAAG,MAAM,EAAW;AAEnC;;AAEG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK;AAEjB;;AAEG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK;QAChB,IAAA,CAAA,QAAQ,GAAG,KAAK;AAqGjB,IAAA;IAnGC,QAAQ,GAAA;;AAEN,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,KAAK,KAAI;AACnD,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE;AACpC,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,gBAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;YACzB;QACF,CAAC,CAAC,CACH;;AAGD,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,IAAI,CAAC;aACF,OAAO,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC;AACxD,aAAA,SAAS,CAAC,CAAC,MAAM,KAAI;AACpB,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;YAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC1D,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAG1D,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,EAAE;AAC/B,gBAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,CAAC;YACxC;;AAGA,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE;AAC/B,gBAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC;YACzC;AAEA,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;QACzB,CAAC,CAAC,CACL;IACH;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;IACjC;AAEA;;AAEG;AACH,IAAA,IAAI,gBAAgB,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,EAAG;IAChF;AAEA;;AAEG;IACH,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE;AACpC,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;QAC9B;aAAO;YACL,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QAChD;IACF;AAEA;;AAEG;IACH,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE;AACpC,YAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,CAAC;QACxC;aAAO;AACL,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;QACjC;IACF;AAEA;;;AAGG;AAEH,IAAA,yBAAyB,CAAC,KAAiB,EAAA;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;;QAGpB,MAAM,OAAO,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,aAAa,CAAC;AACpE,QAAA,IAAI,CAAC,OAAO;YAAE;AAEd,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;QAC1C,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,iDAAiD,CAAC;QAEjF,IAAI,OAAO,EAAE;;YAEX,MAAM,WAAW,GAAG,OAAO,CAAC,aAAa,CAAC,4CAA4C,CAAC;YACvF,IAAI,CAAC,WAAW,EAAE;gBAChB,IAAI,CAAC,YAAY,EAAE;YACrB;QACF;IACF;AAEA;;AAEG;IACH,mBAAmB,GAAA;QACjB,IAAI,CAAC,YAAY,EAAE;IACrB;8GArIW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,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,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,mCAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBnC,s0DAqEA,EAAA,MAAA,EAAA,CAAA,g9KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED3DI,YAAY,+BACZ,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,cAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMN,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAVlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,OAAA,EACpB;wBACP,YAAY;wBACZ;qBACD,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,s0DAAA,EAAA,MAAA,EAAA,CAAA,g9KAAA,CAAA,EAAA;;sBA8G9C,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC;;;AE7HnC;;AAEG;;;;"}
|
|
@@ -183,7 +183,7 @@ class TableComponent {
|
|
|
183
183
|
});
|
|
184
184
|
}
|
|
185
185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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, isSignal: true }], ngImport: i0, template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\" [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 [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (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 [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (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 [binary]=\"true\" [(model)]=\"row[col.field!]\" (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 [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 [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>", 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-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "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", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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, isSignal: true }], ngImport: i0, template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\" [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 [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (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 [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (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 [binary]=\"true\" [(model)]=\"row[col.field!]\" (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 [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 [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>", 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-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "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", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
187
187
|
}
|
|
188
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TableComponent, decorators: [{
|
|
189
189
|
type: Component,
|
|
@@ -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 { ChangeDetectionStrategy, Component, computed, effect, input, model, signal, 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 changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-table',\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 readonly tableRef = viewChild<Table>('tableRef');\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 readonly initialData = signal<T[]>([]);\n readonly internalData = signal<T[]>([]);\n readonly isSorted = signal<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.set([...this.data()]);\n this.initialData.set([...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.set(true);\n this.sortTableData(event);\n } else if (this.isSorted()) {\n this.isSorted.set(false);\n this.sortTableData(event);\n } else {\n this.isSorted.set(null);\n this.internalData.set([...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 #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\" [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 [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (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 [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (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 [binary]=\"true\" [(model)]=\"row[col.field!]\" (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 [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 [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>","/**\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 { ChangeDetectionStrategy, Component, computed, effect, input, model, signal, 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 changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-table',\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 readonly tableRef = viewChild<Table>('tableRef');\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 readonly initialData = signal<T[]>([]);\n readonly internalData = signal<T[]>([]);\n readonly isSorted = signal<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.set([...this.data()]);\n this.initialData.set([...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.set(true);\n this.sortTableData(event);\n } else if (this.isSorted()) {\n this.isSorted.set(false);\n this.sortTableData(event);\n } else {\n this.isSorted.set(null);\n this.internalData.set([...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 #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\" [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 [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (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 [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (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 [binary]=\"true\" [(model)]=\"row[col.field!]\" (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 [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 [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -32,7 +32,7 @@ class ToastComponent {
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ToastComponent, isStandalone: true, selector: "tk-toast", ngImport: i0, template: "<p-toast position=\"bottom-center\">\n <ng-template let-message pTemplate=\"message\">\n <div class=\"tk-toast-message tk-toast-{{message.severity || 'info'}}\">\n <!-- Header Row: Icon, Title -->\n <div class=\"tk-toast-header\">\n <div class=\"tk-toast-icon\">\n <tk-icon [icon]=\"getIconForSeverity(message.severity)\" styleIcon=\"solid\"></tk-icon>\n </div>\n\n @if (message.summary) {\n <div class=\"tk-toast-title\">{{message.summary}}</div>\n }\n </div>\n\n <!-- Detail Row -->\n @if (message.detail) {\n <div class=\"tk-toast-detail\">{{message.detail}}</div>\n }\n\n <!-- Action Button Row -->\n @if ((message.severity ?? 'info') === 'info' && message.data?.action) {\n <div class=\"tk-toast-action\">\n <tk-button \n [label]=\"message.data.action.label\" \n severity=\"primary\" \n (clicked)=\"message.data.action.handler()\">\n </tk-button>\n </div>\n }\n </div>\n </ng-template>\n</p-toast>\n", styles: [":host{display:block}::ng-deep .p-toast .p-toast-message{border-radius:var(--tk-borderRadius-s);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}::ng-deep .p-toast .p-toast-message .p-toast-message-content{padding:var(--tk-spacing-base-100)}::ng-deep .p-toast .p-toast-message .tk-toast-message{display:flex;flex-direction:column;align-items:flex-start;gap:var(--tk-spacing-base-50);width:100%}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-header{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-action{display:flex;align-items:center}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-icon{display:flex;align-items:center;font-size:var(--tk-font-size-base-150)}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-title{font-weight:500;font-size:var(--tk-font-size-paragraph-m)}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-detail{margin-bottom:var(--tk-spacing-base-50);font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-base-surface-900, #111827);line-height:1.4}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-info .tk-toast-icon{color:var(--tk-color-base-sky-500)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-info .tk-toast-title{color:var(--tk-color-base-sky-700)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-info .tk-toast-action tk-button ::ng-deep button{background-color:var(--tk-color-base-sky-500);color:var(--tk-color-text-inverted);border-color:var(--tk-color-base-sky-500)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-info .tk-toast-action tk-button ::ng-deep button:hover{background-color:var(--tk-color-base-sky-700);border-color:var(--tk-color-base-sky-700)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-success .tk-toast-icon{color:var(--tk-color-base-green-500)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-success .tk-toast-title{color:var(--tk-color-base-green-700)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-error .tk-toast-icon{color:var(--tk-color-base-red-500)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-error .tk-toast-title{color:var(--tk-color-base-red-700)}\n"], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
35
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ToastComponent, isStandalone: true, selector: "tk-toast", ngImport: i0, template: "<p-toast position=\"bottom-center\">\n <ng-template let-message pTemplate=\"message\">\n <div class=\"tk-toast-message tk-toast-{{message.severity || 'info'}}\">\n <!-- Header Row: Icon, Title -->\n <div class=\"tk-toast-header\">\n <div class=\"tk-toast-icon\">\n <tk-icon [icon]=\"getIconForSeverity(message.severity)\" styleIcon=\"solid\"></tk-icon>\n </div>\n\n @if (message.summary) {\n <div class=\"tk-toast-title\">{{message.summary}}</div>\n }\n </div>\n\n <!-- Detail Row -->\n @if (message.detail) {\n <div class=\"tk-toast-detail\">{{message.detail}}</div>\n }\n\n <!-- Action Button Row -->\n @if ((message.severity ?? 'info') === 'info' && message.data?.action) {\n <div class=\"tk-toast-action\">\n <tk-button \n [label]=\"message.data.action.label\" \n severity=\"primary\" \n (clicked)=\"message.data.action.handler()\">\n </tk-button>\n </div>\n }\n </div>\n </ng-template>\n</p-toast>\n", styles: [":host{display:block}::ng-deep .p-toast .p-toast-message{border-radius:var(--tk-borderRadius-s);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}::ng-deep .p-toast .p-toast-message .p-toast-message-content{padding:var(--tk-spacing-base-100)}::ng-deep .p-toast .p-toast-message .tk-toast-message{display:flex;flex-direction:column;align-items:flex-start;gap:var(--tk-spacing-base-50);width:100%}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-header{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-action{display:flex;align-items:center}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-icon{display:flex;align-items:center;font-size:var(--tk-font-size-base-150)}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-title{font-weight:500;font-size:var(--tk-font-size-paragraph-m)}::ng-deep .p-toast .p-toast-message .tk-toast-message .tk-toast-detail{margin-bottom:var(--tk-spacing-base-50);font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-base-surface-900, #111827);line-height:1.4}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-info .tk-toast-icon{color:var(--tk-color-base-sky-500)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-info .tk-toast-title{color:var(--tk-color-base-sky-700)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-info .tk-toast-action tk-button ::ng-deep button{background-color:var(--tk-color-base-sky-500);color:var(--tk-color-text-inverted);border-color:var(--tk-color-base-sky-500)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-info .tk-toast-action tk-button ::ng-deep button:hover{background-color:var(--tk-color-base-sky-700);border-color:var(--tk-color-base-sky-700)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-success .tk-toast-icon{color:var(--tk-color-base-green-500)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-success .tk-toast-title{color:var(--tk-color-base-green-700)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-error .tk-toast-icon{color:var(--tk-color-base-red-500)}::ng-deep .p-toast .p-toast-message .tk-toast-message.tk-toast-error .tk-toast-title{color:var(--tk-color-base-red-700)}\n"], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
36
36
|
}
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ToastComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-toast.mjs","sources":["../../../projects/design-system/components/toast/src/toast.component.ts","../../../projects/design-system/components/toast/src/toast.component.html","../../../projects/design-system/components/toast/tekus-design-system-components-toast.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { ToastModule } from 'primeng/toast';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\nexport interface TkToastAction {\n label: string;\n handler: () => void;\n}\n\n/**\n * @component ToastComponent\n * @description\n * Custom wrapper around PrimeNG's Toast component to adhere to our Design System.\n * Supports \\`info\\`, \\`success\\`, and \\`error\\` severities.\n * Includes support for a custom action button on the left for \\`info\\` severity.\n * \n * To use this, add \\`<tk-toast></tk-toast>\\` in the root of your application, and then\n * inject \\`MessageService\\` from \\`primeng/api\\` to trigger notifications.\n */\n@Component({\n selector: 'tk-toast',\n standalone: true,\n imports: [ToastModule, ButtonComponent, IconComponent],\n templateUrl: './toast.component.html',\n styleUrl: './toast.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToastComponent {\n /**\n * Helper function to get the appropriate icon for a given severity.\n */\n getIconForSeverity(severity: string | undefined): string {\n switch (severity) {\n case 'success':\n return 'circle-check';\n case 'error':\n return 'circle-xmark';\n case 'info':\n default:\n return 'circle-info';\n }\n }\n}\n","<p-toast position=\"bottom-center\">\n <ng-template let-message pTemplate=\"message\">\n <div class=\"tk-toast-message tk-toast-{{message.severity || 'info'}}\">\n <!-- Header Row: Icon, Title -->\n <div class=\"tk-toast-header\">\n <div class=\"tk-toast-icon\">\n <tk-icon [icon]=\"getIconForSeverity(message.severity)\" styleIcon=\"solid\"></tk-icon>\n </div>\n\n @if (message.summary) {\n <div class=\"tk-toast-title\">{{message.summary}}</div>\n }\n </div>\n\n <!-- Detail Row -->\n @if (message.detail) {\n <div class=\"tk-toast-detail\">{{message.detail}}</div>\n }\n\n <!-- Action Button Row -->\n @if ((message.severity ?? 'info') === 'info' && message.data?.action) {\n <div class=\"tk-toast-action\">\n <tk-button \n [label]=\"message.data.action.label\" \n severity=\"primary\" \n (clicked)=\"message.data.action.handler()\">\n </tk-button>\n </div>\n }\n </div>\n </ng-template>\n</p-toast>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAUA;;;;;;;;;AASG;MASU,cAAc,CAAA;AACzB;;AAEG;AACH,IAAA,kBAAkB,CAAC,QAA4B,EAAA;QAC7C,QAAQ,QAAQ;AACd,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,cAAc;AACvB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,cAAc;AACvB,YAAA,KAAK,MAAM;AACX,YAAA;AACE,gBAAA,OAAO,aAAa;;IAE1B;8GAdW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,oEC5B3B,qjCAgCA,EAAA,MAAA,EAAA,CAAA,uvEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDTY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,YAAA,EAAA,YAAA,EAAA,MAAA,EAAA,YAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,mBAAA,EAAA,sBAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-toast.mjs","sources":["../../../projects/design-system/components/toast/src/toast.component.ts","../../../projects/design-system/components/toast/src/toast.component.html","../../../projects/design-system/components/toast/tekus-design-system-components-toast.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { ToastModule } from 'primeng/toast';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\nexport interface TkToastAction {\n label: string;\n handler: () => void;\n}\n\n/**\n * @component ToastComponent\n * @description\n * Custom wrapper around PrimeNG's Toast component to adhere to our Design System.\n * Supports \\`info\\`, \\`success\\`, and \\`error\\` severities.\n * Includes support for a custom action button on the left for \\`info\\` severity.\n * \n * To use this, add \\`<tk-toast></tk-toast>\\` in the root of your application, and then\n * inject \\`MessageService\\` from \\`primeng/api\\` to trigger notifications.\n */\n@Component({\n selector: 'tk-toast',\n standalone: true,\n imports: [ToastModule, ButtonComponent, IconComponent],\n templateUrl: './toast.component.html',\n styleUrl: './toast.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToastComponent {\n /**\n * Helper function to get the appropriate icon for a given severity.\n */\n getIconForSeverity(severity: string | undefined): string {\n switch (severity) {\n case 'success':\n return 'circle-check';\n case 'error':\n return 'circle-xmark';\n case 'info':\n default:\n return 'circle-info';\n }\n }\n}\n","<p-toast position=\"bottom-center\">\n <ng-template let-message pTemplate=\"message\">\n <div class=\"tk-toast-message tk-toast-{{message.severity || 'info'}}\">\n <!-- Header Row: Icon, Title -->\n <div class=\"tk-toast-header\">\n <div class=\"tk-toast-icon\">\n <tk-icon [icon]=\"getIconForSeverity(message.severity)\" styleIcon=\"solid\"></tk-icon>\n </div>\n\n @if (message.summary) {\n <div class=\"tk-toast-title\">{{message.summary}}</div>\n }\n </div>\n\n <!-- Detail Row -->\n @if (message.detail) {\n <div class=\"tk-toast-detail\">{{message.detail}}</div>\n }\n\n <!-- Action Button Row -->\n @if ((message.severity ?? 'info') === 'info' && message.data?.action) {\n <div class=\"tk-toast-action\">\n <tk-button \n [label]=\"message.data.action.label\" \n severity=\"primary\" \n (clicked)=\"message.data.action.handler()\">\n </tk-button>\n </div>\n }\n </div>\n </ng-template>\n</p-toast>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAUA;;;;;;;;;AASG;MASU,cAAc,CAAA;AACzB;;AAEG;AACH,IAAA,kBAAkB,CAAC,QAA4B,EAAA;QAC7C,QAAQ,QAAQ;AACd,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,cAAc;AACvB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,cAAc;AACvB,YAAA,KAAK,MAAM;AACX,YAAA;AACE,gBAAA,OAAO,aAAa;;IAE1B;8GAdW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,oEC5B3B,qjCAgCA,EAAA,MAAA,EAAA,CAAA,uvEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDTY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,YAAA,EAAA,YAAA,EAAA,MAAA,EAAA,YAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,mBAAA,EAAA,sBAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,iMAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK1C,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,UAAA,EACR,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,eAAe,EAAE,aAAa,CAAC,EAAA,eAAA,EAGrC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qjCAAA,EAAA,MAAA,EAAA,CAAA,uvEAAA,CAAA,EAAA;;;AE1BjD;;AAEG;;;;"}
|
|
@@ -179,7 +179,7 @@ class ToolbarComponent {
|
|
|
179
179
|
this.reload.emit();
|
|
180
180
|
}
|
|
181
181
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
182
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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 }, searchVisible: { classPropertyName: "searchVisible", publicName: "searchVisible", isSignal: true, isRequired: false, transformFunction: null }, filterVisible: { classPropertyName: "filterVisible", publicName: "filterVisible", isSignal: true, isRequired: false, transformFunction: null }, reloadVisible: { classPropertyName: "reloadVisible", publicName: "reloadVisible", isSignal: true, isRequired: false, transformFunction: null }, reloadInterval: { classPropertyName: "reloadInterval", publicName: "reloadInterval", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", filterModel: "filterModelChange", reload: "reload" }, ngImport: i0, template: "<div class=\"toolbar\">\n @if (showSearchInput() && searchVisible()) {\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 }\n @if (showFilterSelect() && filterVisible()) {\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 (searchVisible()) {\n <tk-button\n [icon]=\"'magnifying-glass'\"\n severity=\"secondary\"\n [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n (clicked)=\"toggleSearchInput()\">\n </tk-button>\n }\n @if (filterVisible()) {\n <tk-button\n [icon]=\"'filter'\"\n severity=\"secondary\"\n [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n (clicked)=\"toggleFilterSelect()\">\n </tk-button>\n }\n @if (reloadVisible()) {\n <tk-button\n class=\"toolbar__reload-btn\"\n [class.toolbar__reload-btn--animating]=\"\n reloadInterval() && reloadInterval()! > 0 && !loading()\n \"\n [class.toolbar__reload-btn--spinning]=\"loading()\"\n [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n [icon]=\"'arrows-rotate'\"\n severity=\"secondary\"\n variant=\"outlined\"\n (clicked)=\"onReload()\">\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)}.toolbar__reload-btn{border-radius:var(--tk-borderRadius-s, 8px)!important;position:relative}.toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:-2px;background:conic-gradient(var(--tk-color-base-sky-300, #92bada) var(--progress, 0%),transparent var(--progress, 0%));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}@media(max-width:768px){.toolbar{justify-content:flex-start}}@property --progress{syntax: \"<percentage>\"; inherits: false; initial-value: 0%;}@keyframes draw-border{0%{--progress: 0%}to{--progress: 100%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}: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", "size"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
182
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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 }, searchVisible: { classPropertyName: "searchVisible", publicName: "searchVisible", isSignal: true, isRequired: false, transformFunction: null }, filterVisible: { classPropertyName: "filterVisible", publicName: "filterVisible", isSignal: true, isRequired: false, transformFunction: null }, reloadVisible: { classPropertyName: "reloadVisible", publicName: "reloadVisible", isSignal: true, isRequired: false, transformFunction: null }, reloadInterval: { classPropertyName: "reloadInterval", publicName: "reloadInterval", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", filterModel: "filterModelChange", reload: "reload" }, ngImport: i0, template: "<div class=\"toolbar\">\n @if (showSearchInput() && searchVisible()) {\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 }\n @if (showFilterSelect() && filterVisible()) {\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 (searchVisible()) {\n <tk-button\n [icon]=\"'magnifying-glass'\"\n severity=\"secondary\"\n [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n (clicked)=\"toggleSearchInput()\">\n </tk-button>\n }\n @if (filterVisible()) {\n <tk-button\n [icon]=\"'filter'\"\n severity=\"secondary\"\n [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n (clicked)=\"toggleFilterSelect()\">\n </tk-button>\n }\n @if (reloadVisible()) {\n <tk-button\n class=\"toolbar__reload-btn\"\n [class.toolbar__reload-btn--animating]=\"\n reloadInterval() && reloadInterval()! > 0 && !loading()\n \"\n [class.toolbar__reload-btn--spinning]=\"loading()\"\n [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n [icon]=\"'arrows-rotate'\"\n severity=\"secondary\"\n variant=\"outlined\"\n (clicked)=\"onReload()\">\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)}.toolbar__reload-btn{border-radius:var(--tk-borderRadius-s, 8px)!important;position:relative}.toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:-2px;background:conic-gradient(var(--tk-color-base-sky-300, #92bada) var(--progress, 0%),transparent var(--progress, 0%));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}@media(max-width:768px){.toolbar{justify-content:flex-start}}@property --progress{syntax: \"<percentage>\"; inherits: false; initial-value: 0%;}@keyframes draw-border{0%{--progress: 0%}to{--progress: 100%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}: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", "iconPosition", "tooltipText", "size"], 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", "dataSource", "optionLabel", "label", "showClear", "disabled", "errorMessage", "hint", "filter", "placeholder", "loading", "fetchParams", "sortField", "sortOrder", "model", "emptyMessage", "emptyFilterMessage"], outputs: ["dataSourceChange", "modelChange", "filterChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
183
183
|
}
|
|
184
184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
185
185
|
type: Component,
|
|
@@ -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 { ChangeDetectionStrategy, Component, model, signal, input, output } from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport {\n combineLatest,\n distinctUntilChanged,\n EMPTY,\n switchMap,\n timer,\n} from 'rxjs';\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 changeDetection: ChangeDetectionStrategy.OnPush,\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 * @property {InputSignal<boolean>} searchVisible\n * @description\n * Controls the visibility of the search button.\n * @default true\n */\n searchVisible = input<boolean>(true);\n\n /**\n * @property {InputSignal<boolean>} filterVisible\n * @description\n * Controls the visibility of the filter button.\n * @default true\n */\n filterVisible = input<boolean>(true);\n\n /**\n * @property {InputSignal<boolean>} reloadVisible\n * @description\n * Controls the visibility of the reload button.\n * @default false\n */\n reloadVisible = input<boolean>(false);\n\n /**\n * @property {InputSignal<number | null>} reloadInterval\n * @description\n * Sets the interval for automatic reload in milliseconds.\n * If null, automatic reload is disabled.\n * @default null\n */\n reloadInterval = input<number | null>(null);\n\n /**\n * @property {InputSignal<boolean>} loading\n * @description\n * Controls the loading state of the reload button, triggering a rotation animation.\n * @default false\n */\n loading = input<boolean>(false);\n\n /**\n * @property {OutputEmitter<void>} reload\n * @description\n * Emits an event when the reload button is clicked or the automatic interval is reached.\n */\n reload = output<void>();\n\n /**\n * @method constructor\n * @description\n * Initializes the automatic reload logic using a declarative RxJS approach.\n */\n constructor() {\n combineLatest([\n toObservable(this.reloadInterval).pipe(distinctUntilChanged()),\n toObservable(this.loading).pipe(distinctUntilChanged()),\n ])\n .pipe(\n switchMap(([interval, isLoading]) => {\n if (isLoading || !interval || interval <= 0) {\n return EMPTY;\n }\n return timer(interval, interval);\n }),\n takeUntilDestroyed()\n )\n .subscribe(() => this.onReload());\n }\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 /**\n * @method onReload\n * @description\n * Emits the reload event.\n */\n onReload(): void {\n this.reload.emit();\n }\n}\n","<div class=\"toolbar\">\n @if (showSearchInput() && searchVisible()) {\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 }\n @if (showFilterSelect() && filterVisible()) {\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 (searchVisible()) {\n <tk-button\n [icon]=\"'magnifying-glass'\"\n severity=\"secondary\"\n [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n (clicked)=\"toggleSearchInput()\">\n </tk-button>\n }\n @if (filterVisible()) {\n <tk-button\n [icon]=\"'filter'\"\n severity=\"secondary\"\n [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n (clicked)=\"toggleFilterSelect()\">\n </tk-button>\n }\n @if (reloadVisible()) {\n <tk-button\n class=\"toolbar__reload-btn\"\n [class.toolbar__reload-btn--animating]=\"\n reloadInterval() && reloadInterval()! > 0 && !loading()\n \"\n [class.toolbar__reload-btn--spinning]=\"loading()\"\n [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n [icon]=\"'arrows-rotate'\"\n severity=\"secondary\"\n variant=\"outlined\"\n (clicked)=\"onReload()\">\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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"}
|
|
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 { ChangeDetectionStrategy, Component, model, signal, input, output } from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport {\n combineLatest,\n distinctUntilChanged,\n EMPTY,\n switchMap,\n timer,\n} from 'rxjs';\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 changeDetection: ChangeDetectionStrategy.OnPush,\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 * @property {InputSignal<boolean>} searchVisible\n * @description\n * Controls the visibility of the search button.\n * @default true\n */\n searchVisible = input<boolean>(true);\n\n /**\n * @property {InputSignal<boolean>} filterVisible\n * @description\n * Controls the visibility of the filter button.\n * @default true\n */\n filterVisible = input<boolean>(true);\n\n /**\n * @property {InputSignal<boolean>} reloadVisible\n * @description\n * Controls the visibility of the reload button.\n * @default false\n */\n reloadVisible = input<boolean>(false);\n\n /**\n * @property {InputSignal<number | null>} reloadInterval\n * @description\n * Sets the interval for automatic reload in milliseconds.\n * If null, automatic reload is disabled.\n * @default null\n */\n reloadInterval = input<number | null>(null);\n\n /**\n * @property {InputSignal<boolean>} loading\n * @description\n * Controls the loading state of the reload button, triggering a rotation animation.\n * @default false\n */\n loading = input<boolean>(false);\n\n /**\n * @property {OutputEmitter<void>} reload\n * @description\n * Emits an event when the reload button is clicked or the automatic interval is reached.\n */\n reload = output<void>();\n\n /**\n * @method constructor\n * @description\n * Initializes the automatic reload logic using a declarative RxJS approach.\n */\n constructor() {\n combineLatest([\n toObservable(this.reloadInterval).pipe(distinctUntilChanged()),\n toObservable(this.loading).pipe(distinctUntilChanged()),\n ])\n .pipe(\n switchMap(([interval, isLoading]) => {\n if (isLoading || !interval || interval <= 0) {\n return EMPTY;\n }\n return timer(interval, interval);\n }),\n takeUntilDestroyed()\n )\n .subscribe(() => this.onReload());\n }\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 /**\n * @method onReload\n * @description\n * Emits the reload event.\n */\n onReload(): void {\n this.reload.emit();\n }\n}\n","<div class=\"toolbar\">\n @if (showSearchInput() && searchVisible()) {\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 }\n @if (showFilterSelect() && filterVisible()) {\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 (searchVisible()) {\n <tk-button\n [icon]=\"'magnifying-glass'\"\n severity=\"secondary\"\n [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n (clicked)=\"toggleSearchInput()\">\n </tk-button>\n }\n @if (filterVisible()) {\n <tk-button\n [icon]=\"'filter'\"\n severity=\"secondary\"\n [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n (clicked)=\"toggleFilterSelect()\">\n </tk-button>\n }\n @if (reloadVisible()) {\n <tk-button\n class=\"toolbar__reload-btn\"\n [class.toolbar__reload-btn--animating]=\"\n reloadInterval() && reloadInterval()! > 0 && !loading()\n \"\n [class.toolbar__reload-btn--spinning]=\"loading()\"\n [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n [icon]=\"'arrows-rotate'\"\n severity=\"secondary\"\n variant=\"outlined\"\n (clicked)=\"onReload()\">\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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"}
|
|
@@ -28,7 +28,7 @@ class TopbarComponent {
|
|
|
28
28
|
this.description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
29
29
|
}
|
|
30
30
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: TopbarComponent, isStandalone: true, selector: "tk-topbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItems: { classPropertyName: "breadcrumbItems", publicName: "breadcrumbItems", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbSize: { classPropertyName: "breadcrumbSize", publicName: "breadcrumbSize", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tk-topbar\">\n <div class=\"tk-topbar__header\">\n @if (showBreadcrumbs()) {\n <tk-bread-crumps [items]=\"breadcrumbItems()\" [size]=\"breadcrumbSize()\"></tk-bread-crumps>\n } @else {\n <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n }\n\n @if (actions()?.length) {\n <div class=\"tk-topbar__actions\">\n @for (action of actions(); track $index) {\n @if (action.type === 'primary') {\n <tk-button\n [label]=\"action.label\"\n severity=\"primary\"\n [tooltipText]=\"action.tooltipText\"\n (clicked)=\"action.onClick()\">\n </tk-button>\n } @else {\n <tk-button\n [icon]=\"action.icon\"\n severity=\"secondary\"\n [tooltipText]=\"action.tooltipText\"\n (clicked)=\"action.onClick()\">\n </tk-button>\n }\n }\n </div>\n }\n </div>\n\n @if (tags()?.length || description()) {\n <div class=\"tk-topbar__meta\">\n @if (tags()?.length) {\n <div class=\"tk-topbar__tags\">\n @for (tag of tags(); track $index) {\n <tk-tag\n [value]=\"tag.label\"\n [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n }\n </div>\n }\n @if (description()) {\n <p class=\"tk-topbar__description\">{{ description() }}</p>\n }\n </div>\n }\n</div>\n", styles: [".tk-topbar{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);padding:var(--tk-spacing-padding-m, 1rem) var(--tk-spacing-padding-m, 1rem);background:var(--tk-color-background-soft, #f2f1f1);border-radius:var(--tk-borderRadius-s, .5rem)}.tk-topbar__header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__title{margin:0;flex:1 1 auto;min-width:12.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #191a1b)}.tk-topbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);margin-left:auto}@media(max-width:768px){.tk-topbar__header{flex-wrap:wrap}.tk-topbar__actions{width:100%;margin-left:0}}.tk-topbar__meta{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__tags{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-topbar__description{margin:0;font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-text-default, #191a1b)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: BreadCrumpsComponent, selector: "tk-bread-crumps", inputs: ["items", "size", "onlyCurrent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
31
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: TopbarComponent, isStandalone: true, selector: "tk-topbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItems: { classPropertyName: "breadcrumbItems", publicName: "breadcrumbItems", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbSize: { classPropertyName: "breadcrumbSize", publicName: "breadcrumbSize", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tk-topbar\">\n <div class=\"tk-topbar__header\">\n @if (showBreadcrumbs()) {\n <tk-bread-crumps [items]=\"breadcrumbItems()\" [size]=\"breadcrumbSize()\"></tk-bread-crumps>\n } @else {\n <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n }\n\n @if (actions()?.length) {\n <div class=\"tk-topbar__actions\">\n @for (action of actions(); track $index) {\n @if (action.type === 'primary') {\n <tk-button\n [label]=\"action.label\"\n severity=\"primary\"\n [tooltipText]=\"action.tooltipText\"\n (clicked)=\"action.onClick()\">\n </tk-button>\n } @else {\n <tk-button\n [icon]=\"action.icon\"\n severity=\"secondary\"\n [tooltipText]=\"action.tooltipText\"\n (clicked)=\"action.onClick()\">\n </tk-button>\n }\n }\n </div>\n }\n </div>\n\n @if (tags()?.length || description()) {\n <div class=\"tk-topbar__meta\">\n @if (tags()?.length) {\n <div class=\"tk-topbar__tags\">\n @for (tag of tags(); track $index) {\n <tk-tag\n [value]=\"tag.label\"\n [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n }\n </div>\n }\n @if (description()) {\n <p class=\"tk-topbar__description\">{{ description() }}</p>\n }\n </div>\n }\n</div>\n", styles: [".tk-topbar{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);padding:var(--tk-spacing-padding-m, 1rem) var(--tk-spacing-padding-m, 1rem);background:var(--tk-color-background-soft, #f2f1f1);border-radius:var(--tk-borderRadius-s, .5rem)}.tk-topbar__header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__title{margin:0;flex:1 1 auto;min-width:12.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #191a1b)}.tk-topbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);margin-left:auto}@media(max-width:768px){.tk-topbar__header{flex-wrap:wrap}.tk-topbar__actions{width:100%;margin-left:0}}.tk-topbar__meta{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__tags{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-topbar__description{margin:0;font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-text-default, #191a1b)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: BreadCrumpsComponent, selector: "tk-bread-crumps", inputs: ["items", "size", "onlyCurrent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
32
32
|
}
|
|
33
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
34
34
|
type: Component,
|