@tekus/design-system 5.33.0 → 5.33.1
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-action-group.mjs +3 -3
- package/fesm2022/tekus-design-system-components-action-group.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-autocomplete.mjs +3 -3
- package/fesm2022/tekus-design-system-components-autocomplete.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-badge.mjs +3 -3
- package/fesm2022/tekus-design-system-components-badge.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-bread-crumps.mjs +3 -3
- package/fesm2022/tekus-design-system-components-bread-crumps.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-button.mjs +3 -3
- package/fesm2022/tekus-design-system-components-button.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-card-list.mjs +3 -3
- package/fesm2022/tekus-design-system-components-card-list.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-card.mjs +3 -3
- package/fesm2022/tekus-design-system-components-card.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-checkbox.mjs +3 -3
- package/fesm2022/tekus-design-system-components-checkbox.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-color-picker.mjs +9 -9
- package/fesm2022/tekus-design-system-components-color-picker.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-date-picker.mjs +3 -3
- package/fesm2022/tekus-design-system-components-date-picker.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-drawer.mjs +6 -6
- package/fesm2022/tekus-design-system-components-drawer.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-dropdown.mjs +3 -3
- package/fesm2022/tekus-design-system-components-dropdown.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-fallback-view.mjs +3 -3
- package/fesm2022/tekus-design-system-components-fallback-view.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-icon.mjs +3 -3
- package/fesm2022/tekus-design-system-components-icon.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-input-number.mjs +3 -3
- package/fesm2022/tekus-design-system-components-input-number.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-input-text.mjs +3 -3
- package/fesm2022/tekus-design-system-components-input-text.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-menu.mjs +3 -3
- package/fesm2022/tekus-design-system-components-menu.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-message.mjs +3 -3
- package/fesm2022/tekus-design-system-components-message.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-modal.mjs +6 -6
- package/fesm2022/tekus-design-system-components-modal.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-multiselect.mjs +6 -6
- package/fesm2022/tekus-design-system-components-multiselect.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-pagination.mjs +3 -3
- package/fesm2022/tekus-design-system-components-pagination.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-panel-menu.mjs +3 -3
- package/fesm2022/tekus-design-system-components-panel-menu.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-panel.mjs +3 -3
- package/fesm2022/tekus-design-system-components-panel.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-progress-bar.mjs +3 -3
- package/fesm2022/tekus-design-system-components-progress-bar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-radio-button.mjs +3 -3
- package/fesm2022/tekus-design-system-components-radio-button.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-select.mjs +9 -9
- package/fesm2022/tekus-design-system-components-select.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-sidebar-layout.mjs +6 -6
- package/fesm2022/tekus-design-system-components-sidebar-layout.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-status-bar.mjs +3 -3
- package/fesm2022/tekus-design-system-components-status-bar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-stepper.mjs +3 -3
- package/fesm2022/tekus-design-system-components-stepper.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-table.mjs +3 -3
- package/fesm2022/tekus-design-system-components-table.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-tabs.mjs +3 -3
- package/fesm2022/tekus-design-system-components-tabs.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-tag.mjs +3 -3
- package/fesm2022/tekus-design-system-components-tag.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-textarea.mjs +3 -3
- package/fesm2022/tekus-design-system-components-textarea.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-time-ago.mjs +3 -3
- package/fesm2022/tekus-design-system-components-time-ago.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-time-picker.mjs +3 -3
- package/fesm2022/tekus-design-system-components-time-picker.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toast.mjs +3 -3
- package/fesm2022/tekus-design-system-components-toast.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toggle.mjs +3 -3
- package/fesm2022/tekus-design-system-components-toggle.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toolbar.mjs +4 -4
- package/fesm2022/tekus-design-system-components-toolbar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-tooltip.mjs +3 -3
- package/fesm2022/tekus-design-system-components-tooltip.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-topbar.mjs +3 -3
- package/fesm2022/tekus-design-system-components-topbar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core-types.mjs +3 -3
- package/fesm2022/tekus-design-system-core-types.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core.mjs +3 -3
- package/fesm2022/tekus-design-system-core.mjs.map +1 -1
- package/fesm2022/tekus-design-system-directives-gird-item.mjs +3 -3
- package/fesm2022/tekus-design-system-directives-gird-item.mjs.map +1 -1
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
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) || this.control() || 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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"}
|
|
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) || this.control() || 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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"}
|
|
@@ -32,10 +32,10 @@ class SidebarService {
|
|
|
32
32
|
get isCollapsed() {
|
|
33
33
|
return this.collapsedSubject.value;
|
|
34
34
|
}
|
|
35
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
36
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
35
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
36
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
|
|
37
37
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarService, decorators: [{
|
|
39
39
|
type: Injectable,
|
|
40
40
|
args: [{
|
|
41
41
|
providedIn: 'root',
|
|
@@ -157,10 +157,10 @@ class SidebarLayoutComponent {
|
|
|
157
157
|
handleBackdropClick() {
|
|
158
158
|
this.closeSidebar();
|
|
159
159
|
}
|
|
160
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
161
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
160
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
161
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
|
|
164
164
|
type: Component,
|
|
165
165
|
args: [{ selector: 'tk-sidebar-layout', imports: [
|
|
166
166
|
CommonModule,
|
|
@@ -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":"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"}
|
|
@@ -36,10 +36,10 @@ class StatusBarComponent {
|
|
|
36
36
|
/** The message to display in the center of the visual bar. */
|
|
37
37
|
this.barLabel = input('', ...(ngDevMode ? [{ debugName: "barLabel" }] : /* istanbul ignore next */ []));
|
|
38
38
|
}
|
|
39
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
40
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
39
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
40
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StatusBarComponent, isStandalone: true, selector: "tk-status-bar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, barLabel: { classPropertyName: "barLabel", publicName: "barLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tk-status-bar-container\" [class]=\"'tk-status-bar-size-' + size()\">\n @if (label()) {\n <span class=\"tk-status-bar-label\">{{ label() }}</span>\n }\n <div class=\"tk-status-bar-track\">\n <div class=\"tk-status-bar-bar\" [class]=\"'tk-status-bar-' + severity()\">\n @if (barLabel()) {\n <span class=\"tk-status-bar-bar-label\">{{ barLabel() }}</span>\n }\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-status-bar-container{display:flex;align-items:center;gap:var(--tk-spacing-base-50)}.tk-status-bar-container.tk-status-bar-size-medium .tk-status-bar-track{height:1.125rem}.tk-status-bar-container.tk-status-bar-size-large .tk-status-bar-track{height:var(--tk-size-base-200);border-radius:var(--tk-borderRadius-s)}.tk-status-bar-container.tk-status-bar-size-large .tk-status-bar-track .tk-status-bar-bar{border-radius:var(--tk-borderRadius-s)}.tk-status-bar-label{font-family:var(--tk-font-family);font-size:var(--tk-font-size-paragraph-s);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);min-width:2.8125rem;text-align:right}.tk-status-bar-track{flex:1;background:var(--tk-color-base-surface-100);border-radius:var(--tk-borderRadius-full);overflow:hidden;position:relative}.tk-status-bar-bar{width:100%;height:100%;border-radius:var(--tk-borderRadius-full);display:flex;align-items:center;justify-content:center;font-family:var(--tk-font-family);font-size:var(--tk-font-size-base-63);font-weight:var(--tk-font-weight-600);padding:0 var(--tk-spacing-base-50)}.tk-status-bar-bar .tk-status-bar-bar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tk-status-bar-bar.tk-status-bar-primary{background:var(--tk-color-base-primary-500)}.tk-status-bar-bar.tk-status-bar-primary .tk-status-bar-bar-label{color:var(--tk-color-base-primary-100)}.tk-status-bar-bar.tk-status-bar-secondary{background:var(--tk-color-base-surface-300)}.tk-status-bar-bar.tk-status-bar-secondary .tk-status-bar-bar-label{color:var(--tk-color-base-surface-600)}.tk-status-bar-bar.tk-status-bar-success{background:var(--tk-color-base-green-500)}.tk-status-bar-bar.tk-status-bar-success .tk-status-bar-bar-label{color:var(--tk-color-base-green-100)}.tk-status-bar-bar.tk-status-bar-error{background:var(--tk-color-base-red-700)}.tk-status-bar-bar.tk-status-bar-error .tk-status-bar-bar-label{color:var(--tk-color-base-red-100)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
41
41
|
}
|
|
42
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
42
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
43
43
|
type: Component,
|
|
44
44
|
args: [{ selector: 'tk-status-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tk-status-bar-container\" [class]=\"'tk-status-bar-size-' + size()\">\n @if (label()) {\n <span class=\"tk-status-bar-label\">{{ label() }}</span>\n }\n <div class=\"tk-status-bar-track\">\n <div class=\"tk-status-bar-bar\" [class]=\"'tk-status-bar-' + severity()\">\n @if (barLabel()) {\n <span class=\"tk-status-bar-bar-label\">{{ barLabel() }}</span>\n }\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-status-bar-container{display:flex;align-items:center;gap:var(--tk-spacing-base-50)}.tk-status-bar-container.tk-status-bar-size-medium .tk-status-bar-track{height:1.125rem}.tk-status-bar-container.tk-status-bar-size-large .tk-status-bar-track{height:var(--tk-size-base-200);border-radius:var(--tk-borderRadius-s)}.tk-status-bar-container.tk-status-bar-size-large .tk-status-bar-track .tk-status-bar-bar{border-radius:var(--tk-borderRadius-s)}.tk-status-bar-label{font-family:var(--tk-font-family);font-size:var(--tk-font-size-paragraph-s);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);min-width:2.8125rem;text-align:right}.tk-status-bar-track{flex:1;background:var(--tk-color-base-surface-100);border-radius:var(--tk-borderRadius-full);overflow:hidden;position:relative}.tk-status-bar-bar{width:100%;height:100%;border-radius:var(--tk-borderRadius-full);display:flex;align-items:center;justify-content:center;font-family:var(--tk-font-family);font-size:var(--tk-font-size-base-63);font-weight:var(--tk-font-weight-600);padding:0 var(--tk-spacing-base-50)}.tk-status-bar-bar .tk-status-bar-bar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tk-status-bar-bar.tk-status-bar-primary{background:var(--tk-color-base-primary-500)}.tk-status-bar-bar.tk-status-bar-primary .tk-status-bar-bar-label{color:var(--tk-color-base-primary-100)}.tk-status-bar-bar.tk-status-bar-secondary{background:var(--tk-color-base-surface-300)}.tk-status-bar-bar.tk-status-bar-secondary .tk-status-bar-bar-label{color:var(--tk-color-base-surface-600)}.tk-status-bar-bar.tk-status-bar-success{background:var(--tk-color-base-green-500)}.tk-status-bar-bar.tk-status-bar-success .tk-status-bar-bar-label{color:var(--tk-color-base-green-100)}.tk-status-bar-bar.tk-status-bar-error{background:var(--tk-color-base-red-700)}.tk-status-bar-bar.tk-status-bar-error .tk-status-bar-bar-label{color:var(--tk-color-base-red-100)}\n"] }]
|
|
45
45
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], barLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "barLabel", required: false }] }] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-status-bar.mjs","sources":["../../../projects/design-system/components/status-bar/src/status-bar.component.ts","../../../projects/design-system/components/status-bar/src/status-bar.component.html","../../../projects/design-system/components/status-bar/tekus-design-system-components-status-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport type StatusBarSeverity = 'primary' | 'secondary' | 'success' | 'error';\nexport type StatusBarSize = 'medium' | 'large';\n\n/**\n * @component StatusBarComponent\n * @description\n * A component used to display a static status bar with a label.\n *\n * This component supports:\n * - `label`: The message to display on the left.\n * - `severity`: The color scheme of the status bar ('primary' | 'secondary' | 'success' | 'error').\n * - `size`: The size of the status bar ('medium' | 'large').\n *\n * @usage\n * ```html\n * <tk-status-bar label=\"1/99\" severity=\"success\" size=\"medium\"></tk-status-bar>\n * ```\n */\n@Component({\n selector: 'tk-status-bar',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './status-bar.component.html',\n styleUrl: './status-bar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StatusBarComponent {\n /** The message to display on the left. */\n label = input<string>('');\n\n /**\n * The severity level of the status bar, which determines its color.\n * @default 'primary'\n */\n severity = input<StatusBarSeverity>('primary');\n\n /**\n * The size of the status bar.\n * - 'medium': Height 18px.\n * - 'large': Height 32px.\n * @default 'medium'\n */\n size = input<StatusBarSize>('medium');\n\n /** The message to display in the center of the visual bar. */\n barLabel = input<string>('');\n}\n","<div class=\"tk-status-bar-container\" [class]=\"'tk-status-bar-size-' + size()\">\n @if (label()) {\n <span class=\"tk-status-bar-label\">{{ label() }}</span>\n }\n <div class=\"tk-status-bar-track\">\n <div class=\"tk-status-bar-bar\" [class]=\"'tk-status-bar-' + severity()\">\n @if (barLabel()) {\n <span class=\"tk-status-bar-bar-label\">{{ barLabel() }}</span>\n }\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAMA;;;;;;;;;;;;;;AAcG;MASU,kBAAkB,CAAA;AAR/B,IAAA,WAAA,GAAA;;AAUE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEzB;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAoB,SAAS,+EAAC;AAE9C;;;;;AAKG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAgB,QAAQ,2EAAC;;AAGrC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,EAAE,+EAAC;AAC7B,IAAA
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-status-bar.mjs","sources":["../../../projects/design-system/components/status-bar/src/status-bar.component.ts","../../../projects/design-system/components/status-bar/src/status-bar.component.html","../../../projects/design-system/components/status-bar/tekus-design-system-components-status-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport type StatusBarSeverity = 'primary' | 'secondary' | 'success' | 'error';\nexport type StatusBarSize = 'medium' | 'large';\n\n/**\n * @component StatusBarComponent\n * @description\n * A component used to display a static status bar with a label.\n *\n * This component supports:\n * - `label`: The message to display on the left.\n * - `severity`: The color scheme of the status bar ('primary' | 'secondary' | 'success' | 'error').\n * - `size`: The size of the status bar ('medium' | 'large').\n *\n * @usage\n * ```html\n * <tk-status-bar label=\"1/99\" severity=\"success\" size=\"medium\"></tk-status-bar>\n * ```\n */\n@Component({\n selector: 'tk-status-bar',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './status-bar.component.html',\n styleUrl: './status-bar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StatusBarComponent {\n /** The message to display on the left. */\n label = input<string>('');\n\n /**\n * The severity level of the status bar, which determines its color.\n * @default 'primary'\n */\n severity = input<StatusBarSeverity>('primary');\n\n /**\n * The size of the status bar.\n * - 'medium': Height 18px.\n * - 'large': Height 32px.\n * @default 'medium'\n */\n size = input<StatusBarSize>('medium');\n\n /** The message to display in the center of the visual bar. */\n barLabel = input<string>('');\n}\n","<div class=\"tk-status-bar-container\" [class]=\"'tk-status-bar-size-' + size()\">\n @if (label()) {\n <span class=\"tk-status-bar-label\">{{ label() }}</span>\n }\n <div class=\"tk-status-bar-track\">\n <div class=\"tk-status-bar-bar\" [class]=\"'tk-status-bar-' + severity()\">\n @if (barLabel()) {\n <span class=\"tk-status-bar-bar-label\">{{ barLabel() }}</span>\n }\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAMA;;;;;;;;;;;;;;AAcG;MASU,kBAAkB,CAAA;AAR/B,IAAA,WAAA,GAAA;;AAUE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEzB;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAoB,SAAS,+EAAC;AAE9C;;;;;AAKG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAgB,QAAQ,2EAAC;;AAGrC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,EAAE,+EAAC;AAC7B,IAAA;+GApBY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7B/B,+cAaA,EAAA,MAAA,EAAA,CAAA,k7DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDWY,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAKX,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+cAAA,EAAA,MAAA,EAAA,CAAA,k7DAAA,CAAA,EAAA;;;AE3BjD;;AAEG;;;;"}
|
|
@@ -99,10 +99,10 @@ class StepperComponent {
|
|
|
99
99
|
});
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
103
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: StepperComponent, isStandalone: true, selector: "tk-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n @if (steps().length > 0) {\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n <p-step-list class=\"tk-step-list-horizontal\">\n @for (step of steps(); track $index) {\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels class=\"tk-step-panels-horizontal\">\n @for (step of steps(); track $index) {\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n \n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer\">\n <div class=\"tk-step-actions-secondary\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n <div class=\"tk-step-actions-primary\">\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n </div>\n }\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n @for (step of steps(); track $index) {\n <p-step-item [value]=\"$index\">\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n\n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer vertical\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n }\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: StepperModule }, { kind: "component", type: i1.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepList, selector: "p-step-list" }, { kind: "component", type: i1.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i1.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StepperComponent, isStandalone: true, selector: "tk-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n @if (steps().length > 0) {\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n <p-step-list class=\"tk-step-list-horizontal\">\n @for (step of steps(); track $index) {\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels class=\"tk-step-panels-horizontal\">\n @for (step of steps(); track $index) {\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n \n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer\">\n <div class=\"tk-step-actions-secondary\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n <div class=\"tk-step-actions-primary\">\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n </div>\n }\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n @for (step of steps(); track $index) {\n <p-step-item [value]=\"$index\">\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n\n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer vertical\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n }\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: StepperModule }, { kind: "component", type: i1.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepList, selector: "p-step-list" }, { kind: "component", type: i1.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i1.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
104
104
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, decorators: [{
|
|
106
106
|
type: Component,
|
|
107
107
|
args: [{ selector: 'tk-stepper', imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n @if (steps().length > 0) {\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n <p-step-list class=\"tk-step-list-horizontal\">\n @for (step of steps(); track $index) {\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels class=\"tk-step-panels-horizontal\">\n @for (step of steps(); track $index) {\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n \n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer\">\n <div class=\"tk-step-actions-secondary\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n <div class=\"tk-step-actions-primary\">\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n </div>\n }\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n @for (step of steps(); track $index) {\n <p-step-item [value]=\"$index\">\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n\n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer vertical\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n }\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"] }]
|
|
108
108
|
}], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-stepper.mjs","sources":["../../../projects/design-system/components/stepper/src/stepper.component.ts","../../../projects/design-system/components/stepper/src/stepper.component.html","../../../projects/design-system/components/stepper/tekus-design-system-components-stepper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { StepperModule } from 'primeng/stepper';\nimport { SharedModule } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { StepData } from './stepper.types';\n\n/**\n * @component StepperComponent\n * @description\n * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.\n * Supports horizontal and vertical orientations, linear step completion rules,\n * and automated footer action buttons.\n *\n * @usage\n * ```html\n * <tk-stepper\n * [steps]=\"steps\"\n * [(activeStep)]=\"currentStep\"\n * [linear]=\"true\"\n * orientation=\"horizontal\">\n * </tk-stepper>\n * ```\n */\n@Component({\n selector: 'tk-stepper',\n imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule],\n templateUrl: './stepper.component.html',\n styleUrl: './stepper.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperComponent {\n /**\n * @property {InputSignal<StepData[]>} steps\n * @description Array of step configurations to display.\n */\n steps = input<StepData[]>([]);\n\n /**\n * @property {ModelSignal<number>} activeStep\n * @description The 0-based index of the currently active step. Supports two-way binding.\n * @default 0\n */\n activeStep = model<number>(0);\n\n /**\n * @property {InputSignal<boolean>} linear\n * @description If true, blocks navigation to steps ahead of the active step.\n * @default true\n */\n linear = input<boolean>(true);\n\n /**\n * @property {InputSignal<'horizontal' | 'vertical'>} orientation\n * @description Defines the layout orientation of the stepper.\n * @default 'horizontal'\n */\n orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n /**\n * @property {InputSignal<boolean>} showFooter\n * @description Whether to render the default footer action buttons for each step.\n * @default true\n */\n showFooter = input<boolean>(true);\n\n /**\n * @event stepChange\n * @description Emitted when the active step changes.\n */\n stepChange = output<{\n index: number;\n step: StepData;\n }>();\n\n /**\n * Checks if a step header should be disabled.\n * Steps ahead of the active index are disabled in linear mode.\n */\n isStepDisabled(index: number): boolean {\n const step = this.steps()[index];\n if (!step) return true;\n if (step.disabled) return true;\n if (this.linear() && index > this.activeStep()) return true;\n return false;\n }\n\n /**\n * Helper to evaluate button disabled states dynamically.\n */\n evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean {\n if (disabled === undefined) return false;\n if (typeof disabled === 'function') return disabled();\n return disabled;\n }\n\n /**\n * Handles step transition events.\n */\n onStepChange(index: number) {\n if (this.activeStep() === index) return;\n this.activeStep.set(index);\n if (this.steps()[index]) {\n this.stepChange.emit({\n index,\n step: this.steps()[index],\n });\n }\n }\n}\n\n","<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n @if (steps().length > 0) {\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n <p-step-list class=\"tk-step-list-horizontal\">\n @for (step of steps(); track $index) {\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels class=\"tk-step-panels-horizontal\">\n @for (step of steps(); track $index) {\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n \n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer\">\n <div class=\"tk-step-actions-secondary\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n <div class=\"tk-step-actions-primary\">\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n </div>\n }\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n @for (step of steps(); track $index) {\n <p-step-item [value]=\"$index\">\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n\n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer vertical\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n }\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n }\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-stepper.mjs","sources":["../../../projects/design-system/components/stepper/src/stepper.component.ts","../../../projects/design-system/components/stepper/src/stepper.component.html","../../../projects/design-system/components/stepper/tekus-design-system-components-stepper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { StepperModule } from 'primeng/stepper';\nimport { SharedModule } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { StepData } from './stepper.types';\n\n/**\n * @component StepperComponent\n * @description\n * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.\n * Supports horizontal and vertical orientations, linear step completion rules,\n * and automated footer action buttons.\n *\n * @usage\n * ```html\n * <tk-stepper\n * [steps]=\"steps\"\n * [(activeStep)]=\"currentStep\"\n * [linear]=\"true\"\n * orientation=\"horizontal\">\n * </tk-stepper>\n * ```\n */\n@Component({\n selector: 'tk-stepper',\n imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule],\n templateUrl: './stepper.component.html',\n styleUrl: './stepper.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperComponent {\n /**\n * @property {InputSignal<StepData[]>} steps\n * @description Array of step configurations to display.\n */\n steps = input<StepData[]>([]);\n\n /**\n * @property {ModelSignal<number>} activeStep\n * @description The 0-based index of the currently active step. Supports two-way binding.\n * @default 0\n */\n activeStep = model<number>(0);\n\n /**\n * @property {InputSignal<boolean>} linear\n * @description If true, blocks navigation to steps ahead of the active step.\n * @default true\n */\n linear = input<boolean>(true);\n\n /**\n * @property {InputSignal<'horizontal' | 'vertical'>} orientation\n * @description Defines the layout orientation of the stepper.\n * @default 'horizontal'\n */\n orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n /**\n * @property {InputSignal<boolean>} showFooter\n * @description Whether to render the default footer action buttons for each step.\n * @default true\n */\n showFooter = input<boolean>(true);\n\n /**\n * @event stepChange\n * @description Emitted when the active step changes.\n */\n stepChange = output<{\n index: number;\n step: StepData;\n }>();\n\n /**\n * Checks if a step header should be disabled.\n * Steps ahead of the active index are disabled in linear mode.\n */\n isStepDisabled(index: number): boolean {\n const step = this.steps()[index];\n if (!step) return true;\n if (step.disabled) return true;\n if (this.linear() && index > this.activeStep()) return true;\n return false;\n }\n\n /**\n * Helper to evaluate button disabled states dynamically.\n */\n evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean {\n if (disabled === undefined) return false;\n if (typeof disabled === 'function') return disabled();\n return disabled;\n }\n\n /**\n * Handles step transition events.\n */\n onStepChange(index: number) {\n if (this.activeStep() === index) return;\n this.activeStep.set(index);\n if (this.steps()[index]) {\n this.stepChange.emit({\n index,\n step: this.steps()[index],\n });\n }\n }\n}\n\n","<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n @if (steps().length > 0) {\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n <p-step-list class=\"tk-step-list-horizontal\">\n @for (step of steps(); track $index) {\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels class=\"tk-step-panels-horizontal\">\n @for (step of steps(); track $index) {\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n \n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer\">\n <div class=\"tk-step-actions-secondary\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n <div class=\"tk-step-actions-primary\">\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n </div>\n }\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n @for (step of steps(); track $index) {\n <p-step-item [value]=\"$index\">\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n\n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer vertical\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n }\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|