\n @for (error of errors(); track error.kind) {\n \n }\n
\n }\n `,\n styleUrl: './atl-select.css',\n host: {\n role: 'combobox',\n '[class]': 'hostClasses()',\n '(keydown)': 'onKeydown($event)',\n },\n providers: [{ provide: ATL_SELECT, useExisting: AtlSelect }],\n})\nexport class AtlSelect implements FormValueControl\n
\n\n \n @for (error of errors(); track error.kind) {\n \n }\n
\n }\n `,\n styleUrl: './atl-combobox.css',\n host: {\n '[class]': 'hostClasses()',\n },\n})\nexport class AtlCombobox implements FormValueControl\n @for (tab of tabs(); track tab.id; let i = $index) {\n \n {{ tab.label }}\n \n }\n
\n \n \n \n
\n ` so screen\n * readers treat it as a real heading at that level.\n */\n readonly headingLevel = input<1 | 2 | 3 | 4 | 5 | 6>(3);\n\n /** @internal — satisfies AccordionItem / FocusableOption interface */\n get disabled(): boolean {\n return this.disabledInput();\n }\n\n /** @internal */\n readonly id = `atl-accordion-item-${nextId++}`;\n\n /** @internal */\n readonly triggerId = `${this.id}-trigger`;\n\n /** @internal */\n readonly panelId = `${this.id}-panel`;\n\n /** @internal */\n private readonly group = inject(AtlAccordionGroup);\n\n /** @internal */\n private readonly cdkItem = inject(CdkAccordionItem);\n\n /** @internal */\n private readonly el = inject>(ElementRef);\n\n /** @internal */\n protected readonly isExpanded = signal(false);\n\n /** @internal */\n get isExpandedValue(): boolean {\n return this.isExpanded();\n }\n\n /** @internal */\n get isDisabled(): boolean {\n return this.disabledInput();\n }\n\n /** @internal */\n get ariaDisabled(): boolean | null {\n return this.disabledInput() || null;\n }\n\n constructor() {\n this.cdkItem.expandedChange.subscribe((expanded: boolean) => {\n this.isExpanded.set(expanded);\n this.expanded.set(expanded);\n });\n }\n\n ngOnInit(): void {\n this.group.register(this);\n // Sync initial expanded model\n if (this.expanded()) {\n this.cdkItem.open();\n }\n }\n\n ngOnDestroy(): void {\n this.group.unregister(this);\n }\n\n /** @internal — for FocusKeyManager */\n focus(): void {\n this.el.nativeElement.querySelector('.accordion-trigger')?.focus();\n }\n\n /** @internal */\n protected onToggle(): void {\n if (this.disabledInput()) return;\n this.cdkItem.toggle();\n }\n\n /** @internal */\n protected onKeydown(event: KeyboardEvent): void {\n this.group.handleKeydown(event, this);\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n Directive,\n inject,\n input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';\n\n/**\n * Trigger directive that opens an `` dropdown.\n * Apply to any element (typically ``) to wire up click + keyboard open/close.\n *\n * Usage:\n * ```html\n * Open \n * \n * \n * Action \n * \n * \n * ```\n */\n@Directive({\n selector: '[atlMenuTriggerFor]',\n standalone: true,\n hostDirectives: [\n {\n directive: CdkMenuTrigger,\n inputs: ['cdkMenuTriggerFor: atlMenuTriggerFor'],\n },\n ],\n})\nexport class AtlMenuTrigger {}\n\n/**\n * Accessible dropdown menu panel.\n * Uses `@angular/cdk/menu` for keyboard navigation, focus management, and ARIA.\n *\n * Usage:\n * ```html\n * Actions \n * \n * \n * Copy \n * Paste \n * \n * \n * ```\n */\n@Component({\n selector: 'atl-menu',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n // eslint-disable-next-line @angular-eslint/use-component-view-encapsulation\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [CdkMenu],\n template: ``.\n * Supports keyboard navigation, disabled state, and nested submenus via `[atlMenuTriggerFor]`.\n *\n * Usage:\n * ```html\n * Label \n * Disabled \n * ```\n */\n@Component({\n selector: 'atl-menu-item',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: CdkMenuItem,\n inputs: ['cdkMenuItemDisabled: disabled'],\n outputs: ['cdkMenuItemTriggered: triggered'],\n },\n ],\n template: `\n Copy \n * Delete \n * ```\n */\n@Component({\n selector: 'atl-menu-separator',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: ``,\n host: {\n class: 'atl-menu-separator',\n role: 'separator',\n },\n})\nexport class AtlMenuSeparator {}\n","import {\n ChangeDetectionStrategy,\n Component,\n Directive,\n ElementRef,\n Injector,\n input,\n OnDestroy,\n signal,\n ViewEncapsulation,\n inject,\n} from '@angular/core';\nimport {\n createFlexibleConnectedPositionStrategy,\n createOverlayRef,\n createRepositionScrollStrategy,\n type ConnectedPosition,\n type OverlayRef,\n} from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\n\nlet nextTooltipId = 0;\n\n/** @internal — Rendered inside the CDK overlay when the tooltip is visible. */\n@Component({\n selector: 'atl-tooltip-content',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n // eslint-disable-next-line @angular-eslint/use-component-view-encapsulation\n encapsulation: ViewEncapsulation.None,\n template: `{{ text() }}`,\n styleUrl: './atl-tooltip.css',\n host: {\n class: 'atl-tooltip',\n role: 'tooltip',\n '[id]': 'tooltipId()',\n },\n})\nexport class AtlTooltipContent {\n /** @internal */\n readonly text = input('');\n /** @internal */\n readonly tooltipId = input('');\n}\n\nconst POSITIONS: Record = {\n above: [\n { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },\n { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },\n ],\n below: [\n { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },\n { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },\n ],\n left: [\n { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },\n { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },\n ],\n right: [\n { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },\n { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },\n ],\n};\n\n/**\n * Attribute directive that displays a text tooltip on hover or focus.\n * Uses `@angular/cdk/overlay` for viewport-aware positioning.\n *\n * Usage:\n * ```html\n * Save \n * Copy \n * ```\n */\n@Directive({\n selector: '[atlTooltip]',\n standalone: true,\n host: {\n '(mouseenter)': 'show()',\n '(mouseleave)': 'hide()',\n '(focusin)': 'show()',\n '(focusout)': 'hide()',\n '(keydown.escape)': 'hide()',\n '[attr.aria-describedby]': 'activeTooltipId()',\n },\n})\nexport class AtlTooltip implements OnDestroy {\n /** The tooltip text. */\n readonly atlTooltip = input.required();\n\n /** Preferred tooltip placement. Falls back to the opposite side if clipped. */\n readonly atlTooltipPosition = input<'above' | 'below' | 'left' | 'right'>('above');\n\n /** Disable the tooltip without removing the directive. */\n readonly atlTooltipDisabled = input(false);\n\n /** Delay in ms before the tooltip appears. */\n readonly atlTooltipShowDelay = input(300);\n\n /** Delay in ms before the tooltip hides. */\n readonly atlTooltipHideDelay = input(0);\n\n private readonly injector = inject(Injector);\n private readonly elementRef = inject>(ElementRef);\n private overlayRef: OverlayRef | null = null;\n private showTimer: ReturnType | null = null;\n private hideTimer: ReturnType | null = null;\n\n /** @internal — links host aria-describedby to the tooltip element */\n protected readonly activeTooltipId = signal(null);\n\n /** @internal */\n protected show(): void {\n if (this.atlTooltipDisabled() || !this.atlTooltip()) return;\n this.clearHideTimer();\n\n if (this.overlayRef?.hasAttached()) return;\n\n this.showTimer = setTimeout(() => {\n this.showTimer = null;\n this.attach();\n }, this.atlTooltipShowDelay());\n }\n\n /** @internal */\n protected hide(): void {\n this.clearShowTimer();\n\n if (!this.overlayRef?.hasAttached()) return;\n\n this.hideTimer = setTimeout(() => {\n this.hideTimer = null;\n this.overlayRef?.detach();\n this.activeTooltipId.set(null);\n }, this.atlTooltipHideDelay());\n }\n\n ngOnDestroy(): void {\n this.clearShowTimer();\n this.clearHideTimer();\n this.overlayRef?.dispose();\n this.overlayRef = null;\n }\n\n private attach(): void {\n if (!this.overlayRef) {\n this.overlayRef = this.createOverlay();\n }\n\n if (this.overlayRef.hasAttached()) return;\n\n const id = `atl-tooltip-${nextTooltipId++}`;\n const portal = new ComponentPortal(AtlTooltipContent);\n const ref = this.overlayRef.attach(portal);\n ref.setInput('text', this.atlTooltip());\n ref.setInput('tooltipId', id);\n this.activeTooltipId.set(id);\n }\n\n private createOverlay(): OverlayRef {\n const positions = POSITIONS[this.atlTooltipPosition()] ?? POSITIONS['above'];\n\n const positionStrategy = createFlexibleConnectedPositionStrategy(\n this.injector,\n this.elementRef,\n )\n .withPositions(positions)\n .withFlexibleDimensions(false)\n .withPush(true);\n\n const scrollStrategy = createRepositionScrollStrategy(this.injector);\n\n return createOverlayRef(this.injector, {\n positionStrategy,\n scrollStrategy,\n panelClass: 'atl-tooltip-panel',\n });\n }\n\n private clearShowTimer(): void {\n if (this.showTimer !== null) {\n clearTimeout(this.showTimer);\n this.showTimer = null;\n }\n }\n\n private clearHideTimer(): void {\n if (this.hideTimer !== null) {\n clearTimeout(this.hideTimer);\n this.hideTimer = null;\n }\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n} from '@angular/core';\n\n/**\n * Loading placeholder that mimics the shape of content while it loads.\n *\n * Usage:\n * ```html\n * ([]);\n\n private readonly timers = new Map>();\n\n /**\n * Show a toast notification.\n * @returns The unique id of the toast, which can be used with `dismiss()`.\n */\n show(message: string, options?: ToastOptions): string {\n const id = `atl-toast-${toastId++}`;\n const toast: ToastData = {\n id,\n message,\n variant: options?.variant ?? 'default',\n duration: options?.duration ?? 5000,\n dismissible: options?.dismissible ?? true,\n };\n\n this.toasts.update((list) => [...list, toast]);\n\n if (toast.duration > 0) {\n const timer = setTimeout(() => this.dismiss(id), toast.duration);\n this.timers.set(id, timer);\n }\n\n return id;\n }\n\n /** Dismiss a single toast by id. */\n dismiss(id: string): void {\n const timer = this.timers.get(id);\n if (timer !== undefined) {\n clearTimeout(timer);\n this.timers.delete(id);\n }\n this.toasts.update((list) => list.filter((t) => t.id !== id));\n }\n\n /** Clear all active toasts. */\n clear(): void {\n for (const timer of this.timers.values()) {\n clearTimeout(timer);\n }\n this.timers.clear();\n this.toasts.set([]);\n }\n}\n\n/**\n * Individual toast notification.\n *\n * Typically rendered by `atl-toast-container`, but can also be used standalone.\n */\n@Component({\n selector: 'atl-toast',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n @if (dismissible()) {\n \n }\n `,\n styleUrl: './atl-toast.css',\n host: {\n '[class]': 'hostClasses()',\n role: 'status',\n },\n})\nexport class AtlToast {\n /** Semantic color variant. */\n readonly variant = input('default');\n\n /** Whether to show a dismiss button. */\n readonly dismissible = input(true);\n\n /** The message to display. */\n readonly message = input('');\n\n /** Unique identifier for this toast. */\n readonly toastId = input('');\n\n /** Emitted when the toast is dismissed by the user. */\n readonly dismissed = output();\n\n protected readonly hostClasses = computed(() => `variant-${this.variant()}`);\n\n protected onDismiss(): void {\n this.dismissed.emit(this.toastId());\n }\n}\n\n/**\n * Container that renders the toast stack at a fixed viewport position.\n * Place once in your app root or layout component.\n *\n * Usage:\n * ```html\n * ![]()
\n } @else if (initials()) {\n {{ initials() }}\n } @else {\n \n }\n @if (status()) {\n \n }\n `,\n styleUrl: './atl-avatar.css',\n host: {\n '[class]': 'hostClasses()',\n role: 'img',\n '[attr.aria-label]': 'ariaLabel()',\n },\n})\nexport class AtlAvatar {\n /** Image URL. Falls back to initials or icon if empty or fails to load. */\n readonly src = input('');\n\n /** Alt text for the image (also used as aria-label). */\n readonly alt = input('');\n\n /** Full name used to generate initials fallback and default aria-label. */\n readonly name = input('');\n\n /** Size of the avatar. */\n readonly size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n /** Shape of the avatar. */\n readonly shape = input<'circle' | 'square'>('circle');\n\n /** Presence status indicator dot. Empty string hides the dot. */\n readonly status = input<'online' | 'offline' | 'away' | 'busy' | ''>('');\n\n /** @internal — reset to true whenever src changes */\n protected readonly showImage = signal(true);\n\n /** @internal */\n protected readonly initials = computed(() => {\n const name = this.name();\n if (!name) return '';\n return name\n .split(' ')\n .filter(Boolean)\n .slice(0, 2)\n .map((w) => w[0].toUpperCase())\n .join('');\n });\n\n /** @internal */\n protected readonly ariaLabel = computed(\n () => this.alt() || this.name() || 'Avatar'\n );\n\n /** @internal */\n protected readonly hostClasses = computed(\n () => `size-${this.size()} shape-${this.shape()}`\n );\n\n constructor() {\n effect(() => {\n this.src(); // track src changes\n untracked(() => this.showImage.set(true));\n });\n }\n}\n\n/**\n * Groups multiple avatars with overlap and an overflow count badge.\n *\n * Usage:\n * ```html\n * \n * \n * ```\n */\n@Component({\n selector: 'atl-avatar-group',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n (0);\n\n /** Maximum value. */\n readonly max = input(100);\n\n /** Semantic color variant. */\n readonly variant = input<'default' | 'success' | 'warning' | 'danger'>('default');\n\n /** Height size of the track. */\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n /** Shows an animated indeterminate state (loading). */\n readonly indeterminate = input(false);\n\n /**\n * Accessible name — rendered as `aria-label` on the host.\n * Required by ARIA when there is no visible label nearby.\n */\n readonly label = input(undefined);\n\n protected readonly clampedValue = computed(() =>\n Math.min(Math.max(this.value(), 0), this.max())\n );\n\n protected readonly fillWidth = computed(() =>\n this.indeterminate()\n ? '100%'\n : `${(this.clampedValue() / this.max()) * 100}%`\n );\n\n protected readonly hostClasses = computed(\n () =>\n `variant-${this.variant()} size-${this.size()}${this.indeterminate() ? ' is-indeterminate' : ''}`\n );\n}\n","import { InjectionToken, Signal } from '@angular/core';\n\nexport interface AtlBreadcrumbsContext {\n registerItem(): number;\n unregisterItem(id: number): void;\n readonly lastItemId: Signal;\n}\n\nexport const ATL_BREADCRUMBS = new InjectionToken('ATL_BREADCRUMBS');\n","import {\n ChangeDetectionStrategy,\n Component,\n OnDestroy,\n OnInit,\n computed,\n inject,\n input,\n signal,\n} from '@angular/core';\nimport type { AtlBreadcrumbsSpec } from '../spec';\nimport { ATL_BREADCRUMBS } from './atl-breadcrumbs.token';\n\n/**\n * Accessible breadcrumb navigation. Wrap `atl-breadcrumb-item` elements inside.\n * The last item is automatically marked as the current page.\n *\n * Usage:\n * ```html\n * \n * Home \n * Products \n * Widget X \n * \n * ```\n */\n@Component({\n selector: 'atl-breadcrumbs',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: ATL_BREADCRUMBS,\n useFactory: (bc: AtlBreadcrumbs) => ({\n registerItem: () => bc.registerItem(),\n unregisterItem: (id: number) => bc.unregisterItem(id),\n lastItemId: bc.lastItemId,\n }),\n deps: [AtlBreadcrumbs],\n },\n ],\n template: `\n \n `,\n styleUrl: './atl-breadcrumbs.css',\n host: {\n class: 'atl-breadcrumbs',\n '[style.--atl-separator]': 'separatorCssVar()',\n },\n})\nexport class AtlBreadcrumbs {\n readonly separator = input('/');\n\n protected readonly separatorCssVar = computed(() => `'${this.separator()}'`);\n\n private readonly _itemIds = signal([]);\n private _nextId = 0;\n\n /** @internal — used by AtlBreadcrumbItem via ATL_BREADCRUMBS token */\n readonly lastItemId = computed(() => {\n const ids = this._itemIds();\n return ids.length > 0 ? ids[ids.length - 1] : -1;\n });\n\n /** @internal */\n registerItem(): number {\n const id = this._nextId++;\n this._itemIds.update((ids) => [...ids, id]);\n return id;\n }\n\n /** @internal */\n unregisterItem(id: number): void {\n this._itemIds.update((ids) => ids.filter((i) => i !== id));\n }\n}\n\n/**\n * A single breadcrumb step. The last item is automatically treated as\n * `aria-current=\"page\"` and rendered as plain text (no link).\n */\n@Component({\n selector: 'atl-breadcrumb-item',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n \n `,\n styleUrl: './atl-breadcrumbs.css',\n host: {\n class: 'atl-breadcrumb-item',\n '[class.is-current]': 'isCurrent()',\n },\n})\nexport class AtlBreadcrumbItem implements OnInit, OnDestroy {\n /** Optional href for navigation. Ignored on the last (current) item. */\n readonly href = input('');\n\n private readonly context = inject(ATL_BREADCRUMBS);\n private readonly myIndex = signal(-1);\n\n protected readonly isCurrent = computed(\n () => this.myIndex() >= 0 && this.myIndex() === this.context.lastItemId()\n );\n\n ngOnInit(): void {\n this.myIndex.set(this.context.registerItem());\n }\n\n ngOnDestroy(): void {\n if (this.myIndex() >= 0) {\n this.context.unregisterItem(this.myIndex());\n }\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n model,\n} from '@angular/core';\n\nexport type PageItem =\n | { type: 'page'; page: number }\n | { type: 'ellipsis'; key: string };\n\n/**\n * Pagination control for navigating multi-page content.\n *\n * Usage:\n * ```html\n * ('ATL_DRAWER');\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n computed,\n effect,\n inject,\n input,\n model,\n signal,\n viewChild,\n} from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { ATL_DRAWER } from './atl-drawer.token';\n\nlet nextId = 0;\n\n/**\n * Slide-in drawer panel using the native `\n `,\n styleUrl: './atl-drawer.css',\n host: {\n '[class]': 'hostClasses()',\n },\n})\nexport class AtlDrawer {\n /** Whether the drawer is open. Supports two-way binding: [(open)]=\"isOpen\". */\n readonly open = model(false);\n\n /** Which edge the drawer slides in from. */\n readonly position = input<'left' | 'right' | 'top' | 'bottom'>('right');\n\n /** Width (for left/right) or height (for top/bottom) of the panel. */\n readonly size = input<'sm' | 'md' | 'lg' | 'full'>('md');\n\n /** Whether clicking the backdrop closes the drawer. */\n readonly closeOnBackdrop = input(true);\n\n /** @internal — referenced by AtlDrawerHeader via ATL_DRAWER token */\n readonly headerId = `atl-drawer-header-${nextId}`;\n\n protected readonly drawerId = `atl-drawer-${nextId++}`;\n protected readonly dialogRef = viewChild>('dialogEl');\n private readonly triggerEl = signal(null);\n\n protected readonly hostClasses = computed(\n () =>\n `atl-drawer position-${this.position()} size-${this.size()}${this.open() ? ' is-open' : ''}`\n );\n\n constructor() {\n effect(() => {\n const dialog = this.dialogRef()?.nativeElement;\n if (!dialog) return;\n if (this.open()) {\n this.triggerEl.set(document.activeElement as HTMLElement);\n dialog.showModal();\n } else {\n if (dialog.open) dialog.close();\n this.triggerEl()?.focus();\n this.triggerEl.set(null);\n }\n });\n }\n\n protected onCancel(event: Event): void {\n event.preventDefault();\n this.open.set(false);\n }\n\n protected onBackdropClick(event: MouseEvent): void {\n if (this.closeOnBackdrop() && event.target === this.dialogRef()?.nativeElement) {\n this.open.set(false);\n }\n }\n}\n\n/**\n * Header slot for `atl-drawer`. Contains the title and a close button.\n * Automatically receives the correct `id` for `aria-labelledby` association.\n */\n@Component({\n selector: 'atl-drawer-header',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n \n ('ATL_TABLE');\n\n// ---------------------------------------------------------------------------\n// AtlTable\n// ---------------------------------------------------------------------------\n\n/**\n * Accessible data table with sorting, row selection, sticky header, and empty state.\n * Compose with `atl-thead`, `atl-tbody`, `atl-tr`, `atl-th`, and `atl-td`.\n *\n * Usage:\n * ```html\n * \n * \n * \n * Name \n * Status \n * \n * \n * \n * @for (row of rows; track row.id) {\n * \n * {{ row.name }} \n * {{ row.status }} \n * \n * }\n * \n * \n * ```\n */\n@Component({\n selector: 'atl-table',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n \n \n
\n
\n `,\n styleUrl: './atl-table.css',\n host: {\n '[class]': 'hostClasses()',\n },\n providers: [{ provide: ATL_TABLE, useExisting: AtlTable }],\n // eslint-disable-next-line @angular-eslint/use-component-view-encapsulation\n encapsulation: ViewEncapsulation.None\n})\nexport class AtlTable implements AtlTableContext {\n /** Visual style of the table rows. */\n readonly variant = input<'default' | 'striped' | 'bordered'>('default');\n\n /** Row density. */\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n /** Whether the header row sticks to the top when the table scrolls. */\n readonly stickyHeader = input(false);\n\n /**\n * Accessible name for the scrollable table region. Surfaces to\n * screen readers as the region's label so keyboard users who\n * scroll the wrapper know what they're scrolling. Defaults to\n * `\"Table\"` if unset.\n */\n readonly ariaLabel = input\n \n
\n `,\n styleUrl: './atl-progress.css',\n host: {\n role: 'progressbar',\n 'aria-valuemin': '0',\n '[attr.aria-valuenow]': 'indeterminate() ? null : clampedValue()',\n '[attr.aria-valuemax]': 'indeterminate() ? null : max()',\n '[attr.aria-label]': 'label() || null',\n '[class]': 'hostClasses()',\n },\n})\nexport class AtlProgress {\n /** Current value of the progress bar. */\n readonly value = inputNo results found.
\n * No results found.
\n * \n @for (step of steps(); track step.id; let i = $index; let last = $last) {\n \n \n @if (step.completed && !step.error) {\n \n } @else if (step.error) {\n \n } @else {\n {{ i + 1 }}\n }\n \n
\n @if (!last) {\n \n {{ step.label }}\n @if (step.description) {\n {{ step.description }}\n }\n @if (step.optional && !step.completed) {\n Optional\n }\n
\n \n
\n `,\n styleUrl: './atl-stepper.css',\n host: {\n '[class]': 'hostClasses()',\n },\n providers: [{ provide: ATL_STEPPER, useExisting: AtlStepper }],\n})\nexport class AtlStepper implements AtlStepperContext {\n /** Index of the currently active step. Supports two-way binding. */\n readonly activeStep = model(0);\n\n /** Layout orientation. */\n readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n /**\n * When true, users can only navigate to completed steps or the next pending step.\n * Use `goTo()` / `next()` in your step content to advance programmatically.\n */\n readonly linear = input(false);\n\n /** @internal */\n readonly steps = signal\n {{ displayLabel() }}\n @if (copyable()) {\n \n @if (copied()) {\n \n Copied\n } @else {\n \n Copy\n }\n \n }\n
\n \n
\n `,\n styleUrl: './atl-code-block.css',\n host: {\n '[class]': '\"atl-code-block\"',\n },\n})\nexport class AtlCodeBlock {\n /** The code string to display. */\n readonly code = input@if (showLineNumbers()) {\n @for (line of lines(); track $index) {\n \n {{ $index + 1 }}\n {{ line }}\n \n }\n } @else {\n {{ code() }}\n }\n
\n \n }\n @case ('popup') {\n @if (open()) {\n \n
\n }\n