{"version":3,"file":"ngx-tw.mjs","sources":["../../../projects/ngx-tw/src/lib/utlis.ts","../../../projects/ngx-tw/src/lib/notification/notification-config.ts","../../../projects/ngx-tw/src/lib/notification/notification-ref.ts","../../../projects/ngx-tw/src/lib/notification/notification.animation.ts","../../../projects/ngx-tw/src/lib/notification/notification.component.ts","../../../projects/ngx-tw/src/lib/notification/notification.component.html","../../../projects/ngx-tw/src/lib/notification/notification.service.ts","../../../projects/ngx-tw/src/lib/alerts/alert.service.ts","../../../projects/ngx-tw/src/lib/icon/icon.component.ts","../../../projects/ngx-tw/src/lib/input-field/input-field.component.ts","../../../projects/ngx-tw/src/lib/input-field/input-field.component.html","../../../projects/ngx-tw/src/lib/spinner/spinner.component.ts","../../../projects/ngx-tw/src/lib/html-events.ts","../../../projects/ngx-tw/src/lib/TwElement.ts","../../../projects/ngx-tw/src/lib/autocomplete/autocomplete-manager.ts","../../../projects/ngx-tw/src/lib/autocomplete/autocomplete.component.ts","../../../projects/ngx-tw/src/lib/autocomplete/autocomplete.component.html","../../../projects/ngx-tw/src/lib/button-group/button-group-Item.component.ts","../../../projects/ngx-tw/src/lib/button-group/button-group.component.ts","../../../projects/ngx-tw/src/lib/button/button-icon.component.ts","../../../projects/ngx-tw/src/lib/button/button.component.ts","../../../projects/ngx-tw/src/lib/calendar/calendar.component.ts","../../../projects/ngx-tw/src/lib/calendar/calendar.component.html","../../../projects/ngx-tw/src/lib/chip/chip-item-maker.component.ts","../../../projects/ngx-tw/src/lib/chip/chip.component.ts","../../../projects/ngx-tw/src/lib/chip/chip-list.component.ts","../../../projects/ngx-tw/src/lib/chip/chip-list.component.html","../../../projects/ngx-tw/src/lib/input-field/masked-input.component.ts","../../../projects/ngx-tw/src/lib/input-field/masked-input.component.html","../../../projects/ngx-tw/src/lib/date-picker/date-range-picker.component.ts","../../../projects/ngx-tw/src/lib/date-picker/date-range-picker.component.html","../../../projects/ngx-tw/src/lib/dialog/dialog.ts","../../../projects/ngx-tw/src/lib/expander/expander-content.component.ts","../../../projects/ngx-tw/src/lib/expander/expander-header.component.ts","../../../projects/ngx-tw/src/lib/expander/expander-item.component.ts","../../../projects/ngx-tw/src/lib/expander/expander-group.component.ts","../../../projects/ngx-tw/src/lib/expander/index.ts","../../../projects/ngx-tw/src/lib/menu/menu-item.directive.ts","../../../projects/ngx-tw/src/lib/menu/menu-trigger.directive.ts","../../../projects/ngx-tw/src/lib/menu/menu.component.ts","../../../projects/ngx-tw/src/lib/menu/index.ts","../../../projects/ngx-tw/src/lib/notification/notification-provider.ts","../../../projects/ngx-tw/src/lib/select/option/option.component.ts","../../../projects/ngx-tw/src/lib/select/option/option.component.html","../../../projects/ngx-tw/src/lib/select/select.component.ts","../../../projects/ngx-tw/src/lib/select/select.component.html","../../../projects/ngx-tw/src/lib/skeleton/skeleton.component.ts","../../../projects/ngx-tw/src/lib/skeleton/skeleton.directive.ts","../../../projects/ngx-tw/src/lib/sticky-content-header/sticky-content-header.component.ts","../../../projects/ngx-tw/src/lib/switch/switch.component.ts","../../../projects/ngx-tw/src/lib/tab/tab-item-maker.component.ts","../../../projects/ngx-tw/src/lib/tab/tab.component.ts","../../../projects/ngx-tw/src/lib/tab/tab-group/tab-group.component.ts","../../../projects/ngx-tw/src/lib/tab/tab-group/tab-group.component.html","../../../projects/ngx-tw/src/lib/table/column-definitions.directive.ts","../../../projects/ngx-tw/src/lib/table/table.component.ts","../../../projects/ngx-tw/src/lib/table/table.component.html","../../../projects/ngx-tw/src/lib/table/index.ts","../../../projects/ngx-tw/src/lib/toolbar/toolbar.component.ts","../../../projects/ngx-tw/src/lib/toolbar/toolbar.component.html","../../../projects/ngx-tw/src/lib/ngx-tw.module.ts","../../../projects/ngx-tw/src/public-api.ts","../../../projects/ngx-tw/src/ngx-tw.ts"],"sourcesContent":["export const tw = (\n template: TemplateStringsArray,\n ...values: (string | undefined)[]\n) => {\n return template.raw[0]\n .split(/\\s+/)\n .filter((c) => c.trim())\n .join(' ');\n};\n","import { InjectionToken, TemplateRef } from '@angular/core';\nimport { tw } from '../utlis';\n\nexport class TwNotificationData {\n type?: TwNotificationType;\n title?: string;\n text?: string;\n template?: TemplateRef;\n templateContext?: any;\n autoClose?: boolean;\n autoCloseTimeout?: number;\n position?: {\n top: number;\n right: number;\n };\n animation?: {\n fadeOut: number;\n fadeIn: number;\n };\n classes?: {\n [key in TwNotificationClasses]: string;\n } = defaultTwNotificationConfig.classes;\n}\n\nexport type TwNotificationType = 'warning' | 'info' | 'success' | 'danger';\nexport type TwNotificationClasses =\n | 'container'\n | 'card'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'svg'\n | 'button';\n\nexport interface TwNotificationConfig {\n type?: TwNotificationType;\n position?: {\n top: number;\n right: number;\n };\n animation?: {\n fadeOut: number;\n fadeIn: number;\n };\n autoClose?: boolean;\n autoCloseTimeout?: number;\n classes: {\n [key in TwNotificationClasses]: string;\n };\n}\n\nexport const defaultTwNotificationConfig: TwNotificationConfig = {\n type: 'success',\n position: {\n top: 20,\n right: 20,\n },\n animation: {\n fadeOut: 800,\n fadeIn: 300,\n },\n autoClose: true,\n autoCloseTimeout: 2500,\n classes: {\n container: tw`relative flex justify-around mb-5 w-[382px] max-w-full`,\n card: tw`max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`,\n success: tw`text-green-400`,\n info: tw`text-primary-400`,\n warning: tw`text-yellow-400`,\n danger: tw`text-danger-400`,\n svg: tw`w-6 h-6`,\n button: tw`bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500`,\n },\n};\n\nexport const TW_NOTIFICATION_CONFIG_TOKEN = new InjectionToken(\n 'tw-notification-config'\n);\n","import { OverlayRef } from '@angular/cdk/overlay';\n\nexport class TwNotificationRef {\n constructor(private readonly overlay: OverlayRef) {}\n\n close() {\n this.overlay.dispose();\n }\n\n isVisible() {\n return this.overlay && this.overlay.overlayElement;\n }\n\n getPosition() {\n return this.overlay.overlayElement.getBoundingClientRect();\n }\n}\n","import { AnimationTriggerMetadata, trigger, state, transition, style, animate } from '@angular/animations';\n\nexport const twNotificationAnimations: {\n readonly fadeNotification: AnimationTriggerMetadata;\n} = {\n fadeNotification: trigger('fadeAnimation', [\n state('default', style({ opacity: 1 })),\n transition('void => *', [style({ opacity: 0 }), animate('{{ fadeIn }}ms')]),\n transition('default => closing', animate('{{ fadeOut }}ms', style({ opacity: 0 }))),\n ]),\n};\n\nexport type TwNotificationAnimationState = 'default' | 'closing';\n","import { AnimationEvent } from '@angular/animations';\nimport { CommonModule, NgTemplateOutlet } from '@angular/common';\nimport { Component, Inject, OnDestroy, OnInit } from '@angular/core';\nimport {\n TW_NOTIFICATION_CONFIG_TOKEN,\n TwNotificationConfig,\n TwNotificationData,\n} from './notification-config';\nimport { TwNotificationRef } from './notification-ref';\nimport {\n twNotificationAnimations,\n TwNotificationAnimationState,\n} from './notification.animation';\n\n@Component({\n selector: 'tw-notification',\n templateUrl: './notification.component.html',\n imports: [NgTemplateOutlet, CommonModule],\n animations: [twNotificationAnimations.fadeNotification],\n})\nexport class NotificationComponent implements OnInit, OnDestroy {\n animationState: TwNotificationAnimationState = 'default';\n\n private intervalId!: number | any;\n\n constructor(\n readonly data: TwNotificationData,\n readonly ref: TwNotificationRef,\n @Inject(TW_NOTIFICATION_CONFIG_TOKEN)\n public notificationConfig: TwNotificationConfig\n ) {\n //\n // Extend data with defalt notification config\n this.data = { ...this.notificationConfig, ...this.data };\n }\n\n ngOnInit() {\n //\n // Set autoclose\n if (this.data.autoClose === true)\n this.intervalId = setTimeout(\n () => (this.animationState = 'closing'),\n this.data.autoCloseTimeout\n );\n }\n\n ngOnDestroy() {\n //\n // Clear autoclose\n if (this.data.autoClose === true) clearTimeout(this.intervalId);\n }\n\n close() {\n this.ref.close();\n }\n\n onFadeFinished(event: AnimationEvent) {\n const { toState } = event;\n const isFadeOut = (toState as TwNotificationAnimationState) === 'closing';\n const itFinished = this.animationState === 'closing';\n\n if (isFadeOut && itFinished) {\n this.close();\n }\n }\n}\n","\n
\n
\n @if(data.template){\n \n }@else {\n\n
\n
\n
\n \n \n \n
\n\n
\n \n \n \n
\n\n
\n \n \n \n
\n\n
\n \n \n \n
\n
\n
\n

\n {{data.title}}\n

\n \n {{data.text}}\n

\n
\n
\n \n Close\n \n \n \n \n \n
\n
\n\n }\n
\n
\n","import { Overlay } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { Inject, Injectable, Injector, Optional } from '@angular/core';\nimport { provideAnimations } from '@angular/platform-browser/animations';\nimport {\n defaultTwNotificationConfig,\n TW_NOTIFICATION_CONFIG_TOKEN,\n TwNotificationConfig,\n TwNotificationData,\n} from './notification-config';\nimport { TwNotificationRef } from './notification-ref';\nimport { NotificationComponent } from './notification.component';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TwNotification {\n private lastNotification!: TwNotificationRef;\n\n constructor(\n private overlay: Overlay,\n private parentInjector: Injector,\n @Optional()\n @Inject(TW_NOTIFICATION_CONFIG_TOKEN)\n private notificationConfig: TwNotificationConfig = defaultTwNotificationConfig\n ) {\n this.notificationConfig = notificationConfig || defaultTwNotificationConfig;\n }\n\n show(data: TwNotificationData) {\n const positionStrategy = this.getPositionStrategy();\n const overlayRef = this.overlay.create({ positionStrategy });\n\n const notificationRef = new TwNotificationRef(overlayRef);\n this.lastNotification = notificationRef;\n\n const injector = this.getInjector(\n data,\n notificationRef,\n this.parentInjector\n );\n const notificationPortal = new ComponentPortal(\n NotificationComponent,\n null,\n injector\n );\n\n overlayRef.attach(notificationPortal);\n\n return notificationRef;\n }\n\n getPositionStrategy() {\n return this.overlay\n .position()\n .global()\n .top(this.getPosition())\n .right(this.notificationConfig.position?.right + 'px');\n }\n\n getPosition() {\n const lastNotificationIsVisible =\n this.lastNotification && this.lastNotification.isVisible();\n const position = lastNotificationIsVisible\n ? this.lastNotification.getPosition().bottom\n : this.notificationConfig.position?.top;\n\n return position + 'px';\n }\n\n getInjector(\n data: TwNotificationData,\n notificationRef: TwNotificationRef,\n parentInjector: Injector\n ) {\n const tokens = new WeakMap();\n\n tokens.set(TwNotificationData, data);\n tokens.set(TwNotificationRef, notificationRef);\n\n return Injector.create({\n providers: [\n provideAnimations(),\n {\n provide: TW_NOTIFICATION_CONFIG_TOKEN,\n useValue: this.notificationConfig,\n },\n { provide: TwNotificationData, useValue: data },\n { provide: TwNotificationRef, useValue: notificationRef },\n ],\n parent: parentInjector,\n });\n }\n}\n","import { OverlayRef } from '@angular/cdk/overlay';\nimport { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { TwNotification } from '../notification/notification.service';\nimport { AlertType, IAlert } from './alert';\n\n@Injectable({\n providedIn: 'root',\n})\n/** @deprecated This service is deprecated use TwNotification */\nexport class TwAlertService {\n private _alert$ = new BehaviorSubject(null);\n private _alertsContainerOverlay?: OverlayRef;\n\n constructor(private readonly _twNotification: TwNotification) {}\n\n /**\n *\n * @deprecated This method is deprecated use TwNotification.show() instead\n */\n info({\n title,\n description = void 0,\n icon = null,\n iconColor = null,\n duration = 3000,\n showActions = false,\n primaryActionText = null,\n secondaryActionText = null,\n }: {\n title: string;\n description?: string;\n icon?: string | null;\n iconColor?: string | null;\n duration?: number;\n showActions?: boolean;\n secondaryActionText?: string | null;\n primaryActionText?: string | null;\n }) {\n this.notify({\n title,\n type: 'info',\n description,\n icon,\n iconColor,\n duration: duration,\n primaryActionText,\n secondaryActionText,\n showActions,\n });\n }\n\n /**\n *\n * @deprecated This method is deprecated use TwNotification.show() instead\n */\n warning({\n title,\n description = void 0,\n icon = null,\n iconColor = null,\n duration = 3000,\n showActions = false,\n primaryActionText = null,\n secondaryActionText = null,\n }: {\n title: string;\n description?: string;\n icon?: string | null;\n iconColor?: string | null;\n duration?: number;\n showActions?: boolean;\n secondaryActionText?: string | null;\n primaryActionText?: string | null;\n }) {\n this.notify({\n title,\n type: 'warning',\n description,\n icon,\n iconColor,\n duration: duration,\n primaryActionText,\n secondaryActionText,\n showActions,\n });\n }\n\n /**\n *\n * @deprecated This method is deprecated use TwNotification.show() instead\n */\n error({\n title,\n description = void 0,\n icon = null,\n iconColor = null,\n duration = 3000,\n showActions = false,\n primaryActionText = null,\n secondaryActionText = null,\n }: {\n title: string;\n description?: string;\n icon?: string | null;\n iconColor?: string | null;\n duration?: number;\n showActions?: boolean;\n secondaryActionText?: string | null;\n primaryActionText?: string | null;\n }) {\n this.notify({\n title,\n type: 'danger',\n description,\n icon,\n iconColor,\n duration: duration,\n primaryActionText,\n secondaryActionText,\n showActions,\n });\n }\n private notify({\n title,\n type,\n description = void 0,\n icon = null,\n iconColor = null,\n duration = 3000,\n showActions = false,\n primaryActionText = null,\n secondaryActionText = null,\n }: {\n title: string;\n type: AlertType;\n description?: string;\n icon?: string | null;\n iconColor?: string | null;\n duration?: number;\n showActions?: boolean;\n secondaryActionText?: string | null;\n primaryActionText?: string | null;\n }) {\n this._twNotification.show({\n title,\n type,\n text: description,\n autoCloseTimeout: duration,\n });\n }\n}\n","import { HttpClient } from '@angular/common/http';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n OnDestroy,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\n\n@Component({\n selector: 'tw-icon',\n template: ``,\n styles: [\n `\n :host {\n display: block;\n width: var(--c-icon-width) !important;\n height: var(--c-icon-height) !important;\n min-width: var(--c-icon-width) !important;\n min-height: var(--c-icon-height) !important;\n }\n :host svg {\n width: var(--c-icon-width) !important;\n height: var(--c-icon-height) !important;\n min-width: var(--c-icon-width) !important;\n min-height: var(--c-icon-height) !important;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TwIcon implements AfterViewInit, OnDestroy {\n private static ICON_REGISTRY = new Map();\n private _retrievalSubscription$?: Subscription;\n private _svgIcon?: string;\n private _size = 20;\n\n @Input() set size(value: number) {\n this._size = value;\n this._setStyles();\n }\n get size() {\n return this._size;\n }\n\n @Input() set svgIcon(value: string | undefined) {\n this._svgIcon = value;\n this._setIcon();\n }\n get svgIcon() {\n return this._svgIcon!;\n }\n\n constructor(\n private readonly _host: ElementRef,\n private readonly _httpClient: HttpClient\n ) {}\n\n ngAfterViewInit(): void {\n const nativeElement = this._host.nativeElement;\n\n if (!nativeElement) return;\n\n this._setStyles();\n\n if (!this.svgIcon) this.svgIcon = nativeElement.innerHTML;\n\n this._setIcon();\n }\n\n private _setStyles() {\n const nativeElement = this._host.nativeElement;\n\n if (!nativeElement) return;\n\n nativeElement.style.setProperty('--c-icon-width', this.size + 'px');\n nativeElement.style.setProperty('--c-icon-height', this.size + 'px');\n }\n\n private _setIcon() {\n const iconName = this.svgIcon;\n\n const nativeElement = this._host.nativeElement;\n\n if (!nativeElement) return;\n\n if (!iconName) throw new Error('tw-icon: invalid icon-name ' + iconName);\n\n const [namespace, name] = iconName.split(':');\n\n if (!namespace || !name)\n throw new Error(\n 'tw-icon: Could not determine icon namespace and name from ' + iconName\n );\n\n if (!TwIcon.ICON_REGISTRY.has(iconName)) {\n this._retriveIcon(nativeElement, iconName, namespace, name);\n } else {\n const icon = TwIcon.ICON_REGISTRY.get(iconName)!;\n nativeElement.innerHTML = icon;\n }\n }\n\n ngOnDestroy(): void {\n this._retrievalSubscription$?.unsubscribe();\n }\n\n private _retriveIcon(\n elt: Element,\n iconName: string,\n namespace: string,\n name: string\n ) {\n this._retrievalSubscription$ = this._httpClient\n .get(`/assets/icons/${namespace}/${name}.svg`, {\n responseType: 'text' as any,\n })\n .subscribe((v) => {\n TwIcon.ICON_REGISTRY.set(iconName, v);\n elt.innerHTML = v;\n const svg = elt.firstElementChild as SVGElement;\n svg.classList.value = '';\n svg.style.cssText = `width: ${this.size}px!important; height: ${this.size}px!important;`;\n });\n }\n}\n","import { TextFieldModule } from '@angular/cdk/text-field';\nimport { NgClass } from '@angular/common';\nimport { Component, Input, Optional, Self } from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';\nimport { ColorTypes } from '../color-types';\nimport { TwIcon } from '../icon/icon.component';\nimport { InputField, InputTypes } from './input-field-interface';\n\n@Component({\n imports: [TwIcon, NgClass, FormsModule, TextFieldModule],\n selector: 'tw-input-field',\n host: {\n class: 'tw-input-wrapper',\n },\n templateUrl: './input-field.component.html',\n providers: [],\n})\nexport class TwInputField implements ControlValueAccessor, InputField {\n @Input() iconSuffix?: string;\n @Input() iconSuffixClass?: string;\n @Input() iconPrefix?: string;\n @Input() iconPrefixClass?: string;\n @Input() twClass?: string;\n @Input() name: string = '';\n @Input() label: string = '';\n\n @Input() value?: string = '';\n @Input() maxLength?: number;\n @Input() minLength?: number;\n @Input() required: string | boolean = false;\n @Input() pattern: string | RegExp = '';\n @Input() placeholder: string = '';\n @Input() disabled = false;\n @Input() inputType: InputTypes = 'text';\n @Input() color?: ColorTypes;\n @Input() showLabel: boolean = true;\n @Input() multiline: boolean = false;\n\n private _onChangeFns: any[] = [];\n private _onTouchedFns: any[] = [];\n\n get errors() {\n return this._ngControl?.dirty && this._ngControl?.errors\n ? Object.keys(this._ngControl.errors)\n .filter((e) => e !== 'required')\n .join('.\\n')\n : null;\n }\n\n constructor(@Self() @Optional() private readonly _ngControl?: NgControl) {\n if (this._ngControl) {\n this._ngControl.valueAccessor = this;\n }\n }\n writeValue(obj: any): void {\n this.value = obj || '';\n }\n registerOnChange(fn: any): void {\n if (fn) this._onChangeFns.push(fn);\n }\n registerOnTouched(fn: any): void {\n if (fn) this._onTouchedFns.push(fn);\n }\n setDisabledState?(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n ngOnInit(): void {}\n\n onChange(event: Event) {\n const value = (event as any).target.value;\n this._onChangeFns?.forEach((fn) => fn(value));\n this._onTouchedFns?.forEach((fn) => fn(value));\n }\n}\n","
\n @if (showLabel) {\n {{label || placeholder}}\n }\n
\n @if (iconPrefix) {\n \n \n \n }\n\n @if (multiline) {\n \n }@else {\n \n\n }\n\n\n @if (iconSuffix) {\n \n \n \n }\n
\n @if (errors) {\n {{errors}}\n }\n
","import { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'tw-spinner',\n standalone: true,\n template: `\n \n \n \n \n `,\n})\nexport class TwSpinner {\n @Input() color?: string = '';\n}\n","export const HTML_EVENTS = [\n 'abort',\n 'afterprint',\n 'animationend',\n 'animationiteration',\n 'animationstart',\n 'beforeprint',\n 'beforeunload',\n 'blur',\n 'canplay',\n 'canplaythrough',\n 'change',\n 'click',\n 'contextmenu',\n 'copy',\n 'cut',\n 'dblclick',\n 'DOMContentLoaded',\n 'drag',\n 'dragend',\n 'dragenter',\n 'dragleave',\n 'dragover',\n 'dragstart',\n 'drop',\n 'durationchange',\n 'ended',\n 'error',\n 'focus',\n 'focusin',\n 'focusout',\n 'fullscreenchange',\n 'fullscreenerror',\n 'hashchange',\n 'input',\n 'invalid',\n 'keydown',\n 'keypress',\n 'keyup',\n 'load',\n 'loadeddata',\n 'loadedmetadata',\n 'loadstart',\n 'message',\n 'mousedown',\n 'mouseenter',\n 'mouseleave',\n 'mousemove',\n 'mouseover',\n 'mouseout',\n 'mouseup',\n 'offline',\n 'online',\n 'open',\n 'pagehide',\n 'pageshow',\n 'paste',\n 'pause',\n 'play',\n 'playing',\n 'popstate',\n 'progress',\n 'ratechange',\n 'resize',\n 'reset',\n 'scroll',\n 'search',\n 'seeked',\n 'seeking',\n 'select',\n 'show',\n 'stalled',\n 'storage',\n 'submit',\n 'suspend',\n 'timeupdate',\n 'toggle',\n 'touchcancel',\n 'touchend',\n 'touchmove',\n 'touchstart',\n 'transitionend',\n 'unload',\n 'volumechange',\n 'waiting',\n 'wheel',\n];\n","import { ConnectedPosition } from '@angular/cdk/overlay';\nimport { EventEmitter } from '@angular/core';\nimport { HTML_EVENTS } from './html-events';\n\nexport class TwElement {\n bindEvents(element: HTMLElement, component: any) {\n HTML_EVENTS.forEach((ev) => {\n if (component[ev] && component[ev] instanceof EventEmitter) {\n element.addEventListener(ev, (event) => component[ev].emit(event));\n }\n });\n }\n}\n\nexport const OverlayPositions: ConnectedPosition[] = [\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: 8,\n },\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 8,\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetY: -8,\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -8,\n },\n];\n","import {\n debounceTime,\n filter,\n isObservable,\n map,\n Observable,\n of,\n switchMap,\n tap,\n} from 'rxjs';\n\nexport type SuggestionsType =\n | T[]\n | Observable\n | ((searchTerm: string, item?: T) => Observable)\n | ((searchTerm: string, item?: T) => T[]);\n\nfunction isFunction(value: any): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n\nexport class AutoCompleteManager {\n filteredSuggestions: T[] = [];\n filterFn: (value: string, item: T) => boolean = (value: string, item: T) =>\n this.getDisplayText(item).toLowerCase().includes(value.toLowerCase());\n\n displayFactory: ((item: T) => { key: string; text: string }) | undefined =\n void 0;\n\n isOpen = false;\n\n disabled = false;\n\n suggestionsLoading = false;\n\n private _suggestions: SuggestionsType = [];\n\n set suggestions(value: SuggestionsType) {\n this._suggestions = value;\n }\n\n get suggestions() {\n return this._suggestions;\n }\n\n constructor(private valueChangeObservable: Observable) {}\n\n init(): void {\n this.valueChangeObservable\n .pipe(\n debounceTime(300),\n tap((v) => (v?.length === 0 ? this.closeDropdown() : void 0)),\n filter((value) => !!value && value.length >= 1),\n tap(() => ((this.suggestionsLoading = true), this.openDropdown())),\n switchMap((value) => this.filterSuggestions(value!))\n )\n .subscribe((filtered) => {\n this.suggestionsLoading = false;\n this.filteredSuggestions = filtered;\n });\n }\n\n filterSuggestions(value: string): Observable {\n const filterObs = (obs: Observable) =>\n obs.pipe(\n map((suggestions) => suggestions.filter((s) => this.filterFn(value, s)))\n );\n\n const resolveObs = (fn: (searchTerm: string) => Observable | T[]) => {\n const result = fn(value);\n return isObservable(result) ? result : of(result);\n };\n\n const suggestionsArray$ = isObservable(this._suggestions)\n ? filterObs(this._suggestions)\n : isFunction(this._suggestions)\n ? resolveObs(this._suggestions)\n : of(this._suggestions.filter((s) => this.filterFn(value, s)));\n\n return suggestionsArray$;\n }\n\n getDisplayText(item: any): string {\n if (this.displayFactory) {\n return this.displayFactory(item).text;\n }\n return typeof item === 'string' ? item : JSON.stringify(item);\n }\n\n openDropdown() {\n if (this.disabled === true) return;\n\n this.isOpen = true;\n }\n\n closeDropdown() {\n this.isOpen = false;\n }\n\n selectSuggestion(suggestion: any) {\n if (!this.filteredSuggestions.find((item) => item === suggestion)) {\n return false;\n }\n this.closeDropdown();\n return true;\n }\n}\n","import {\n BlockScrollStrategy,\n CdkConnectedOverlay,\n ConnectedPosition,\n Overlay,\n} from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n Input,\n OnDestroy,\n OnInit,\n Output,\n TemplateRef,\n} from '@angular/core';\nimport {\n AbstractControl,\n ControlValueAccessor,\n FormControl,\n NG_VALUE_ACCESSOR,\n ReactiveFormsModule,\n ValidationErrors,\n Validator,\n Validators,\n} from '@angular/forms';\nimport { ColorTypes } from '../color-types';\nimport { InputField, InputTypes } from '../input-field/input-field-interface';\nimport { TwInputField } from '../input-field/input-field.component';\nimport { TwSpinner } from '../spinner/spinner.component';\nimport { OverlayPositions } from '../TwElement';\nimport { AutoCompleteManager, SuggestionsType } from './autocomplete-manager';\n\n@Component({\n selector: 'tw-autocomplete',\n imports: [\n ReactiveFormsModule,\n CommonModule,\n CdkConnectedOverlay,\n TwInputField,\n TwSpinner,\n ],\n templateUrl: './autocomplete.component.html',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TwAutocomplete),\n multi: true,\n },\n ],\n})\nexport class TwAutocomplete\n implements\n OnInit,\n AfterViewInit,\n OnDestroy,\n ControlValueAccessor,\n Validator,\n InputField\n{\n @Input() iconSuffix?: string;\n @Input() iconSuffixClass?: string;\n @Input() iconPrefix?: string;\n @Input() iconPrefixClass?: string;\n @Input() twClass?: string;\n @Input() name: string = '';\n @Input() label: string = '';\n\n @Input() set maxLength(value: number | undefined) {\n this._maxLength = value;\n if (this.searchControl) {\n this.updateValidators();\n }\n }\n get maxLength() {\n return this._maxLength;\n }\n private _maxLength?: number;\n\n @Input() set minLength(value: number | undefined) {\n this._minLength = value;\n if (this.searchControl) {\n this.updateValidators();\n }\n }\n get minLength() {\n return this._minLength;\n }\n private _minLength?: number;\n @Input() set required(value: string | boolean) {\n this._required = value;\n if (this.searchControl) {\n this.updateValidators();\n }\n }\n get required() {\n return this._required;\n }\n private _required: string | boolean = false;\n\n @Input() set pattern(value: string | RegExp) {\n this._pattern = value;\n if (this.searchControl) {\n this.updateValidators();\n }\n }\n get pattern() {\n return this._pattern;\n }\n private _pattern: string | RegExp = '';\n @Input() placeholder: string = '';\n @Input() set disabled(value: boolean) {\n if (value) this.searchControl.disable();\n else this.searchControl.enable();\n }\n get disabled() {\n return this.searchControl.disabled;\n }\n @Input() inputType: InputTypes = 'text';\n @Input() color?: ColorTypes;\n @Input() showLabel: boolean = true;\n multiline = false;\n\n _value?: T;\n @Input() get value() {\n return this._value;\n }\n\n set value(val: T | undefined) {\n this._value = val;\n this.searchControl.setValue(this.autoCompleteManager.getDisplayText(val), {\n emitEvent: false,\n });\n }\n\n private _minFieldSize: number = 0;\n private resizeObserver?: ResizeObserver;\n\n @Input() set suggestions(value: SuggestionsType) {\n this.autoCompleteManager.suggestions = value;\n }\n get suggestions() {\n return this.autoCompleteManager.suggestions;\n }\n\n get suggestionsLoading() {\n return this.autoCompleteManager.suggestionsLoading;\n }\n\n @Input() set displayFactory(\n value: ((item: any) => { key: string; text: string }) | undefined\n ) {\n this.autoCompleteManager.displayFactory = value;\n }\n\n get displayFactory() {\n return this.autoCompleteManager.displayFactory;\n }\n\n @Input() optionTemplate: TemplateRef | null = null;\n\n @Input() set filterFn(fn: (value: string, item: any) => boolean) {\n this.autoCompleteManager.filterFn = fn;\n }\n\n get filterFn() {\n return this.autoCompleteManager.filterFn;\n }\n\n get minFieldSize() {\n return this._minFieldSize;\n }\n\n @Output() selectionChanged: EventEmitter = new EventEmitter();\n\n searchControl = new FormControl('');\n get filteredSuggestions() {\n return this.autoCompleteManager.filteredSuggestions;\n }\n\n blockScrollStrategy: BlockScrollStrategy;\n\n positions: ConnectedPosition[] = OverlayPositions;\n\n onChange: ((value: any) => void)[] = [];\n onTouched: (() => void)[] = [];\n\n autoCompleteManager = new AutoCompleteManager(\n this.searchControl.valueChanges\n );\n\n constructor(\n public elementRef: ElementRef,\n private overlay: Overlay,\n private cdr: ChangeDetectorRef\n ) {\n this.blockScrollStrategy = this.overlay.scrollStrategies.block();\n }\n\n ngOnInit(): void {\n this.updateValidators();\n }\n\n ngAfterViewInit(): void {\n // Initialize the offset width\n this._minFieldSize = this.elementRef.nativeElement.offsetWidth;\n\n // Set up ResizeObserver to watch for size changes\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this._minFieldSize = entry.contentRect.width;\n this.cdr.detectChanges();\n }\n });\n this.resizeObserver.observe(this.elementRef.nativeElement);\n }\n\n this.autoCompleteManager.init();\n }\n\n ngOnDestroy(): void {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n updateValidators(): void {\n const validators = [];\n\n if (this.required) {\n validators.push(Validators.required);\n }\n\n if (this.minLength !== undefined) {\n validators.push(Validators.minLength(this.minLength));\n }\n\n if (this.maxLength !== undefined) {\n validators.push(Validators.maxLength(this.maxLength));\n }\n\n if (this.pattern) {\n validators.push(Validators.pattern(this.pattern));\n }\n\n this.searchControl.setValidators(validators);\n this.searchControl.updateValueAndValidity({\n emitEvent: false,\n });\n }\n\n validate(control: AbstractControl): ValidationErrors | null {\n if (!this.searchControl) {\n return null;\n }\n\n // If the component is disabled, it's valid\n if (this.disabled) {\n return null;\n }\n\n // Return the validation errors from the internal search control\n return this.searchControl.errors;\n }\n\n selectSuggestion(suggestion: any) {\n const value = this.autoCompleteManager.getDisplayText(suggestion);\n this.searchControl.setValue(value, {\n emitEvent: false,\n });\n this.propagateOnchange(suggestion);\n this.autoCompleteManager.closeDropdown();\n }\n\n writeValue(value: any): void {\n this._value = value;\n this.searchControl.setValue(\n this.autoCompleteManager.getDisplayText(value),\n {\n emitEvent: false,\n }\n );\n }\n\n propagateOnchange(value: any) {\n this.onChange.forEach((fn) => fn(value));\n this.selectionChanged.emit(value);\n }\n\n registerOnChange(fn: any): void {\n this.onChange.push(fn);\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched.push(fn);\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n}\n","
\n 0\"\n [iconSuffix]=\"iconSuffix\"\n [iconSuffixClass]=\"iconSuffixClass\"\n [iconPrefix]=\"iconPrefix\"\n [iconPrefixClass]=\"iconPrefixClass\"\n [twClass]=\"twClass\"\n [name]=\"name\"\n [label]=\"label\"\n [maxLength]=\"maxLength\"\n [minLength]=\"minLength\"\n [required]=\"required\"\n [pattern]=\"pattern\"\n [placeholder]=\"placeholder\"\n [inputType]=\"inputType\"\n [color]=\"color\"\n [showLabel]=\"showLabel\"\n [multiline]=\"multiline\"\n />\n \n \n
\n @if(!suggestionsLoading){\n @if (filteredSuggestions.length > 0) {\n
    \n @for (suggestion of filteredSuggestions; track $index) {\n \n @if (optionTemplate) {\n \n\n }@else {\n {{ autoCompleteManager.getDisplayText(suggestion) }}\n }\n \n }\n
\n }\n @else{\n
\n No suggestions found.\n
\n }\n }@else {\n
\n \n
\n }\n
\n \n
","import { Component, Input, TemplateRef, ViewChild } from '@angular/core';\n\n@Component({\n selector: 'tw-btn-group-item',\n standalone: true,\n template: `\n \n `,\n})\nexport class TwButtonGroupItem {\n @Input() value: any;\n @Input() disabled: boolean = false;\n @ViewChild(TemplateRef, { static: true }) content: TemplateRef | null =\n null;\n constructor() {}\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n AfterViewInit,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n Output,\n QueryList,\n} from '@angular/core';\nimport { TwButtonGroupItem } from './button-group-Item.component';\n\n@Component({\n imports: [NgTemplateOutlet],\n selector: 'tw-btn-group',\n template: `
\n @for (item of children; track item; let i = $index) {\n \n \n \n }\n
`\n})\nexport class TwButtonGroup implements AfterViewInit {\n @ContentChildren(TwButtonGroupItem)\n children?: QueryList;\n\n @Output() selectedIndexChange = new EventEmitter();\n\n @Output() itemSelected = new EventEmitter<{\n selectedIndex: number;\n selectedValue: any;\n }>();\n @Input() selectedIndex: number = -1;\n\n @Input() orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n constructor() {}\n\n ngAfterViewInit(): void {\n }\n\n changeSelection(index: number, value: any): void {\n this.itemSelected.emit({\n selectedIndex: index,\n selectedValue: value,\n });\n this.selectedIndexChange.emit(index);\n this.selectedIndex = index;\n }\n}\n","import { NgClass } from '@angular/common';\nimport { Component, Input, OnInit } from '@angular/core';\nimport { ColorTypes } from '../color-types';\nimport { TwIcon } from '../icon/icon.component';\nimport { ButtonType, TwButtonInterface } from './button-interface';\n\n@Component({\n imports: [NgClass, TwIcon],\n selector: 'tw-button-icon',\n template: `\n @if(href){\n \n \n \n\n }@else {\n \n \n \n\n }\n `\n})\nexport class TwButtonIcon implements OnInit, TwButtonInterface {\n @Input() type?: ButtonType = 'basic';\n @Input() color?: ColorTypes;\n @Input() isSubmit?: boolean;\n @Input({ alias: 'class' }) twClass?: string;\n @Input() disabled?: boolean;\n @Input() title?: string = '';\n @Input() svgIcon?: string;\n @Input() svgIconSize = 20;\n @Input() href?: string;\n @Input() target?: string;\n constructor() {}\n\n ngOnInit(): void {}\n}\n","import { Component, Input } from '@angular/core';\nimport { ColorTypes } from '../color-types';\nimport {\n ButtonType,\n RoundedTypes,\n TwButtonInterface,\n} from './button-interface';\n\n@Component({\n selector: 'tw-button',\n host: {\n role: 'button',\n '[attr.type]': 'isSubmit ? \"submit\" : \"button\"',\n class: 'inline-block w-auto',\n },\n template: `\n \n \n \n `,\n})\nexport class TwButton implements TwButtonInterface {\n @Input() type?: ButtonType = 'basic';\n @Input() isSubmit?: boolean;\n @Input() rounded?: RoundedTypes = 'md';\n @Input() disabled?: boolean;\n @Input() color?: ColorTypes;\n @Input() twClass?: string;\n @Input() title?: string;\n}\n","import { CommonModule } from '@angular/common';\nimport {\n Component,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n Output,\n SimpleChanges,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TwButtonIcon } from '../button/button-icon.component';\n\nexport interface CalendarDate {\n date: Date;\n isCurrentMonth: boolean;\n isToday: boolean;\n isSelected: boolean;\n isInRange: boolean;\n isRangeStart: boolean;\n isRangeEnd: boolean;\n isDisabled: boolean;\n}\n\n@Component({\n selector: 'tw-calendar',\n templateUrl: './calendar.component.html',\n imports: [CommonModule, FormsModule, TwButtonIcon]\n})\nexport class TwCalendar implements OnInit, OnChanges {\n @Input() selectedDate: Date | null = null;\n @Input() rangeStart: Date | null = null;\n @Input() rangeEnd: Date | null = null;\n @Input() minDate: Date | null = null;\n @Input() maxDate: Date | null = null;\n @Input() isRange = false;\n @Input() displayDate: Date = new Date();\n\n @Output() dateSelected = new EventEmitter();\n @Output() rangeSelected = new EventEmitter<{\n start: Date;\n end: Date | null;\n }>();\n\n currentDate = new Date();\n calendarDates: CalendarDate[] = [];\n\n viewMode: 'days' | 'months' | 'years' = 'days';\n years: number[] = [];\n yearRangeStart = 0;\n\n weekdays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n months = [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ];\n\n get currentMonthName(): string {\n return this.months[this.displayDate.getMonth()];\n }\n\n get currentYear(): number {\n return this.displayDate.getFullYear();\n }\n\n ngOnInit(): void {\n if (this.selectedDate && !this.displayDate) {\n this.displayDate = new Date(this.selectedDate);\n }\n this.generateCalendarDates();\n this.generateYearRange();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['displayDate'] && !changes['displayDate'].firstChange) {\n this.generateCalendarDates();\n }\n\n if (\n (changes['rangeStart'] || changes['rangeEnd']) &&\n (!changes['rangeStart']?.firstChange || !changes['rangeEnd']?.firstChange)\n ) {\n this.generateCalendarDates();\n }\n }\n\n generateCalendarDates(): void {\n this.calendarDates = [];\n\n const year = this.displayDate.getFullYear();\n const month = this.displayDate.getMonth();\n\n // First day of the month\n const firstDay = new Date(year, month, 1);\n // Last day of the month\n const lastDay = new Date(year, month + 1, 0);\n\n // Get day of week for first day (0 is Sunday in JS)\n let firstDayOfWeek = firstDay.getDay();\n // Convert to Monday-based (0 is Monday)\n firstDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;\n\n // Fill in days from previous month\n const prevMonthLastDay = new Date(year, month, 0).getDate();\n for (let i = firstDayOfWeek - 1; i >= 0; i--) {\n const date = new Date(year, month - 1, prevMonthLastDay - i);\n this.calendarDates.push(this.createCalendarDate(date, false));\n }\n\n // Fill in days of current month\n for (let i = 1; i <= lastDay.getDate(); i++) {\n const date = new Date(year, month, i);\n this.calendarDates.push(this.createCalendarDate(date, true));\n }\n\n // Fill in days from next month\n const remainingDays = 42 - this.calendarDates.length; // 6 rows * 7 days\n for (let i = 1; i <= remainingDays; i++) {\n const date = new Date(year, month + 1, i);\n this.calendarDates.push(this.createCalendarDate(date, false));\n }\n }\n\n createCalendarDate(date: Date, isCurrentMonth: boolean): CalendarDate {\n const today = new Date();\n const isToday =\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear();\n\n let isInRange = false;\n let isRangeStart = false;\n let isRangeEnd = false;\n\n // Handle range selection - even when end date is not selected yet\n if (this.isRange && this.rangeStart) {\n if (this.rangeEnd) {\n // Complete range\n isInRange = date >= this.rangeStart && date <= this.rangeEnd;\n isRangeStart =\n date.getTime() === this.getStartOfDay(this.rangeStart).getTime();\n isRangeEnd =\n date.getTime() === this.getStartOfDay(this.rangeEnd).getTime();\n } else {\n // Only start date selected - highlight it\n isRangeStart =\n date.getTime() === this.getStartOfDay(this.rangeStart).getTime();\n isInRange = isRangeStart; // Make sure it's highlighted\n }\n }\n\n const isSelected = this.selectedDate\n ? date.getTime() === this.getStartOfDay(this.selectedDate).getTime()\n : false;\n\n const isDisabled = this.isDateDisabled(date);\n\n return {\n date,\n isCurrentMonth,\n isToday,\n isSelected,\n isInRange,\n isRangeStart,\n isRangeEnd,\n isDisabled,\n };\n }\n\n isDateDisabled(date: Date): boolean {\n if (this.minDate && date < this.getStartOfDay(this.minDate)) {\n return true;\n }\n if (this.maxDate && date > this.getEndOfDay(this.maxDate)) {\n return true;\n }\n return false;\n }\n\n getStartOfDay(date: Date): Date {\n const newDate = new Date(date);\n newDate.setHours(0, 0, 0, 0);\n return newDate;\n }\n\n getEndOfDay(date: Date): Date {\n const newDate = new Date(date);\n newDate.setHours(23, 59, 59, 999);\n return newDate;\n }\n\n selectDate(date: CalendarDate): void {\n if (date.isDisabled) {\n return;\n }\n\n if (!this.isRange) {\n this.selectedDate = new Date(date.date);\n this.dateSelected.emit(this.selectedDate);\n date.isSelected = true;\n this.unSelectAllOtherDates(date);\n return;\n }\n\n // Range selection logic\n if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {\n // Start new range\n this.rangeStart = new Date(date.date);\n this.rangeEnd = null;\n // Emit the event for the start date\n this.rangeSelected.emit({\n start: this.rangeStart,\n end: this.rangeEnd,\n });\n } else {\n // Complete the range\n if (date.date < this.rangeStart) {\n this.rangeEnd = new Date(this.rangeStart);\n this.rangeStart = new Date(date.date);\n } else {\n this.rangeEnd = new Date(date.date);\n }\n\n if (this.rangeStart && this.rangeEnd) {\n this.rangeSelected.emit({\n start: this.rangeStart,\n end: this.rangeEnd,\n });\n }\n }\n\n // Always emit the selected date (for calendar month navigation)\n this.dateSelected.emit(date.date);\n\n this.generateCalendarDates();\n }\n\n unSelectAllOtherDates(date: CalendarDate) {\n this.calendarDates.forEach((d) => {\n if (d !== date) {\n d.isSelected = false;\n d.isInRange = false;\n d.isRangeStart = false;\n d.isRangeEnd = false;\n }\n });\n }\n\n changeMonth(delta: number): void {\n this.displayDate.setMonth(this.displayDate.getMonth() + delta);\n this.generateCalendarDates();\n this.dateSelected.emit(new Date(this.displayDate));\n }\n\n changeYear(delta: number): void {\n this.displayDate.setFullYear(this.displayDate.getFullYear() + delta);\n this.generateCalendarDates();\n this.generateYearRange();\n this.dateSelected.emit(new Date(this.displayDate));\n }\n\n switchView(mode: 'days' | 'months' | 'years'): void {\n this.viewMode = mode;\n if (mode === 'years') {\n this.generateYearRange();\n }\n }\n\n generateYearRange(): void {\n const currentYear = this.displayDate.getFullYear();\n this.yearRangeStart = Math.floor(currentYear / 10) * 10;\n\n this.years = [];\n for (let i = 0; i < 12; i++) {\n this.years.push(this.yearRangeStart + i);\n }\n }\n\n isYearDisabled(year: number): boolean {\n if (!this.minDate && !this.maxDate) {\n return false;\n }\n\n // Check if the entire year is before minDate\n if (this.minDate && year < this.minDate.getFullYear()) {\n return true;\n }\n\n // Check if the entire year is after maxDate\n if (this.maxDate && year > this.maxDate.getFullYear()) {\n return true;\n }\n\n return false;\n }\n\n isMonthDisabled(monthIndex: number): boolean {\n if (!this.minDate && !this.maxDate) {\n return false;\n }\n\n const year = this.displayDate.getFullYear();\n\n // Create date for first day of the month\n const firstDayOfMonth = new Date(year, monthIndex, 1);\n // Create date for last day of the month\n const lastDayOfMonth = new Date(year, monthIndex + 1, 0);\n\n // Check if the entire month is before minDate\n if (this.minDate && lastDayOfMonth < this.getStartOfDay(this.minDate)) {\n return true;\n }\n\n // Check if the entire month is after maxDate\n if (this.maxDate && firstDayOfMonth > this.getEndOfDay(this.maxDate)) {\n return true;\n }\n\n return false;\n }\n\n selectMonth(monthIndex: number): void {\n this.displayDate.setMonth(monthIndex);\n this.viewMode = 'days';\n this.generateCalendarDates();\n this.dateSelected.emit(new Date(this.displayDate));\n }\n\n selectYear(year: number): void {\n this.displayDate.setFullYear(year);\n this.viewMode = 'months';\n this.generateCalendarDates();\n this.dateSelected.emit(new Date(this.displayDate));\n }\n\n changeYearRange(delta: number): void {\n this.yearRangeStart += delta * 10;\n this.generateYearRange();\n }\n\n // Check if previous month button should be disabled\n isPrevMonthDisabled(): boolean {\n if (!this.minDate) {\n return false;\n }\n\n // Create a copy of current display date set to first day of month\n const firstDayOfCurrentMonth = new Date(\n this.displayDate.getFullYear(),\n this.displayDate.getMonth(),\n 1\n );\n\n // Previous month would be last day of previous month\n const lastDayOfPrevMonth = new Date(\n this.displayDate.getFullYear(),\n this.displayDate.getMonth(),\n 0\n );\n\n // If the last day of previous month is before minDate, disable button\n return lastDayOfPrevMonth < this.getStartOfDay(this.minDate);\n }\n\n // Check if next month button should be disabled\n isNextMonthDisabled(): boolean {\n if (!this.maxDate) {\n return false;\n }\n\n // First day of next month\n const firstDayOfNextMonth = new Date(\n this.displayDate.getFullYear(),\n this.displayDate.getMonth() + 1,\n 1\n );\n\n // If the first day of next month is after maxDate, disable button\n return firstDayOfNextMonth > this.getEndOfDay(this.maxDate);\n }\n\n // Check if previous year button should be disabled\n isPrevYearDisabled(): boolean {\n if (!this.minDate) {\n return false;\n }\n\n // First day of current year\n const firstDayOfCurrentYear = new Date(\n this.displayDate.getFullYear(),\n 0,\n 1\n );\n\n // Last day of previous year\n const lastDayOfPrevYear = new Date(\n this.displayDate.getFullYear() - 1,\n 11,\n 31\n );\n\n // If the last day of previous year is before minDate, disable button\n return lastDayOfPrevYear < this.getStartOfDay(this.minDate);\n }\n\n // Check if next year button should be disabled\n isNextYearDisabled(): boolean {\n if (!this.maxDate) {\n return false;\n }\n\n // First day of next year\n const firstDayOfNextYear = new Date(\n this.displayDate.getFullYear() + 1,\n 0,\n 1\n );\n\n // If the first day of next year is after maxDate, disable button\n return firstDayOfNextYear > this.getEndOfDay(this.maxDate);\n }\n\n // Check if previous year range button should be disabled\n isPrevYearRangeDisabled(): boolean {\n if (!this.minDate) {\n return false;\n }\n\n // Last year of previous decade\n const lastYearOfPrevDecade = this.yearRangeStart - 1;\n const lastDayOfLastYearPrevDecade = new Date(lastYearOfPrevDecade, 11, 31);\n\n return lastDayOfLastYearPrevDecade < this.getStartOfDay(this.minDate);\n }\n\n // Check if next year range button should be disabled\n isNextYearRangeDisabled(): boolean {\n if (!this.maxDate) {\n return false;\n }\n\n // First year of next decade\n const firstYearOfNextDecade = this.yearRangeStart + 12;\n const firstDayOfFirstYearNextDecade = new Date(firstYearOfNextDecade, 0, 1);\n\n return firstDayOfFirstYearNextDecade > this.getEndOfDay(this.maxDate);\n }\n}\n","
\n \n
\n @if(viewMode === 'days') {\n \n
\n \n {{ currentMonthName }}\n \n \n {{ currentYear }}\n \n
\n \n }\n @if(viewMode === 'months') {\n \n \n \n {{ currentYear }}\n \n \n }\n @if(viewMode === 'years') {\n \n \n {{ yearRangeStart }} - {{ yearRangeStart + 11 }}\n \n }\n
\n\n \n @if(viewMode === 'days') {\n
\n \n @for(day of weekdays; track $index) {\n
{{ day }}
\n }\n\n \n @for(date of calendarDates; track $index) {\n \n {{ date.date.getDate() }}\n \n }\n
\n }\n\n \n @if(viewMode === 'months') {\n
\n @for(month of months; track $index) {\n \n {{ month }}\n \n }\n
\n }\n\n \n @if(viewMode === 'years') {\n
\n @for(year of years; track $index) {\n \n {{ year }}\n \n }\n
\n }\n
\n","import { Component, Input } from '@angular/core';\nimport { TwChipInterface } from './chip-interface';\n\n@Component({\n selector: 'tw-chip-item',\n standalone: true,\n template: ``,\n})\nexport class TwChipItem implements TwChipInterface {\n @Input({ required: true }) label!: string;\n @Input() image?: string | undefined;\n @Input() isDeletable?: boolean | undefined;\n}\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { TwIcon } from '../icon/icon.component';\nimport { TwChipInterface } from './chip-interface';\n\n@Component({\n selector: 'tw-chip',\n imports: [TwIcon],\n template: `\n
\n @if(image){\n \"Image\n }\n
\n {{ label }}\n
\n @if(isDeletable){\n
\n \n
\n }\n
\n `,\n})\nexport class TwChip implements TwChipInterface {\n @Input({ required: true }) label!: string;\n @Input() image?: string | undefined;\n @Input() isDeletable?: boolean | undefined;\n @Input() twClass?: string;\n @Output() deleteItem = new EventEmitter();\n}\n","import {\n BlockScrollStrategy,\n CdkConnectedOverlay,\n Overlay,\n} from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n forwardRef,\n Input,\n Output,\n QueryList,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { fromEvent, map } from 'rxjs';\nimport {\n AutoCompleteManager,\n SuggestionsType,\n} from '../autocomplete/autocomplete-manager';\nimport { ColorTypes } from '../color-types';\nimport { TwIcon } from '../icon/icon.component';\nimport { OverlayPositions } from '../TwElement';\nimport { TwChipInterface } from './chip-interface';\nimport { TwChipItem } from './chip-item-maker.component';\nimport { TwChip } from './chip.component';\n\n@Component({\n selector: 'tw-chip-list',\n imports: [TwChip, TwIcon, NgTemplateOutlet, CdkConnectedOverlay],\n templateUrl: './chip-list.component.html',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TwChipList),\n multi: true,\n },\n ],\n})\nexport class TwChipList implements AfterViewInit, ControlValueAccessor {\n @ContentChildren(TwChipItem) children?: QueryList;\n\n @Input() iconSuffix?: string;\n @Input() iconSuffixClass?: string;\n @Input() iconPrefix?: string;\n @Input() iconPrefixClass?: string;\n @Input() color?: ColorTypes;\n @Input() keyCodeSeperator?: string = 'Enter';\n @Input() isEditable: boolean = false;\n @Input() allowUnknownItemInsertion: boolean = true;\n @Input() placeholder = 'Type item';\n\n @Input() newContentTransformer: (text: string) => TwChipInterface = (\n txt\n ) => ({\n label: txt,\n isDeletable: this.isEditable,\n });\n @Output() itemRemoved = new EventEmitter<{\n chip: TwChipInterface;\n index: number;\n }>();\n\n @ViewChild('newItemContent') newItemContent?: ElementRef;\n\n @Input() autoCompleteDisplayFactory:\n | ((item: any) => { key: string; text: string })\n | undefined;\n\n @Input() autoCompleteOptionTemplate: TemplateRef | null = null;\n\n @Input() autoCompleteFilterFn:\n | ((value: string, item: any) => boolean)\n | undefined;\n\n @Input() set autoCompleteSuggestions(value: SuggestionsType) {\n this._autoCompleteSuggestions = value;\n\n if (!this.autoCompleteManager) return;\n this.autoCompleteManager.suggestions = value;\n }\n\n get autoCompleteSuggestions() {\n return this._autoCompleteSuggestions!;\n }\n\n positions = OverlayPositions;\n\n @Input() chipItems: TwChipItem[] = [];\n\n _onChange: ((value: any) => void)[] = [];\n _onTouched: (() => void)[] = [];\n\n blockScrollStrategy: BlockScrollStrategy;\n\n get filteredSuggestions() {\n return this.autoCompleteManager?.filteredSuggestions;\n }\n\n autoCompleteManager?: AutoCompleteManager;\n private _autoCompleteSuggestions?: SuggestionsType;\n\n constructor(\n public elementRef: ElementRef,\n private _cd: ChangeDetectorRef,\n overlay: Overlay\n ) {\n this.blockScrollStrategy = overlay.scrollStrategies.block();\n }\n\n ngAfterViewInit(): void {\n if (this.autoCompleteSuggestions) {\n this.autoCompleteManager = new AutoCompleteManager(\n fromEvent(this.newItemContent!.nativeElement, 'keyup').pipe(\n map((ev) => (ev.target as HTMLDivElement).innerHTML)\n )\n );\n\n this.autoCompleteManager.suggestions = this.autoCompleteSuggestions;\n\n if (this.autoCompleteDisplayFactory)\n this.autoCompleteManager.displayFactory =\n this.autoCompleteDisplayFactory;\n\n if (this.autoCompleteFilterFn)\n this.autoCompleteManager.filterFn = this.autoCompleteFilterFn;\n\n this.autoCompleteManager.init();\n }\n\n if (this.children?.length) {\n this.writeValue(this.children.toArray());\n }\n\n this._cd.detectChanges();\n this.children?.changes.subscribe((newValue) => {\n this.writeValue(newValue);\n });\n }\n\n contentKeydown(event: KeyboardEvent) {\n if (event.key === 'Enter') event.preventDefault();\n\n if (\n event.key === 'Backspace' &&\n !this.newItemContent?.nativeElement.innerHTML\n ) {\n if (this.chipItems.length > 0 && this.isEditable) {\n this.removeItem(this.chipItems.length - 1);\n }\n return;\n }\n\n if (event.key === 'Escape') {\n this.newItemContent?.nativeElement.blur();\n return;\n }\n\n if (\n event.key !== this.keyCodeSeperator ||\n !this.newItemContent ||\n !this.allowUnknownItemInsertion\n )\n return;\n\n const newContent = this.newItemContent.nativeElement.innerHTML;\n this.newItemContent.nativeElement.innerHTML = '';\n const chip = this.newContentTransformer(newContent);\n this.chipItems.push({\n label: chip.label,\n isDeletable: chip.isDeletable,\n });\n this.onChange(this.chipItems);\n this.newItemContent.nativeElement.focus();\n }\n\n removeItem(index: number) {\n if (!this.isEditable) return;\n\n const [chip] = this.chipItems.splice(index, 1);\n this.itemRemoved.emit({ index, chip });\n this.onChange(this.chipItems);\n }\n\n selectSuggestion(suggestion: any) {\n if (!this.autoCompleteManager?.selectSuggestion(suggestion)) {\n return;\n }\n const value = this.autoCompleteManager.getDisplayText(suggestion);\n this.chipItems.push({\n label: value,\n isDeletable: true,\n });\n\n if (this.newItemContent) {\n this.newItemContent.nativeElement.innerHTML = '';\n this.newItemContent.nativeElement.focus();\n }\n this.onChange(this.chipItems);\n }\n\n writeValue(value: any): void {\n if (value === undefined || value === null) {\n this.chipItems = [];\n return;\n }\n\n value = Array.isArray(value) ? value : [value];\n\n this.chipItems = value.map((v: any) => ({\n label: v.label,\n image: v.image,\n isDeletable: v.isDeletable,\n }));\n\n this._cd.detectChanges();\n }\n\n registerOnChange(fn: any): void {\n this._onChange.push(fn);\n }\n\n registerOnTouched(fn: any): void {\n this._onTouched.push(fn);\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.isEditable = !isDisabled;\n }\n\n onChange(value: any) {\n this._onChange.forEach((fn) => fn(value));\n this.onTouched();\n this._cd.markForCheck();\n }\n\n onTouched() {\n this._onTouched.forEach((fn) => fn());\n }\n}\n","
\n @if(iconPrefix){\n \n \n \n }\n 0\"\n [class.mr-6]=\"iconSuffix\"\n [class.ml-7]=\"iconPrefix && chipItems.length ===0\"\n class=\"flex flex-row gap-2 flex-wrap flex-grow\"\n >\n @for(chip of chipItems; track $index){\n \n }\n\n
\n {{ placeholder }}\n \n\n @if(isEditable){\n
\n }\n
\n \n\n @if(iconSuffix){\n \n \n \n }\n\n\n\n
\n @if (filteredSuggestions && filteredSuggestions .length > 0) {\n
    \n @for (suggestion of filteredSuggestions; track $index) {\n \n @if (autoCompleteOptionTemplate) {\n \n\n }@else {\n {{ autoCompleteManager?.getDisplayText(suggestion) }}\n }\n \n }\n
\n }\n @else{\n
\n No suggestions found.\n
\n }\n
\n\n","import { NgClass } from '@angular/common';\nimport {\n Component,\n ElementRef,\n Input,\n OnInit,\n Optional,\n Self,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';\nimport { ColorTypes } from '../color-types';\nimport { TwIcon } from '../icon/icon.component';\nimport { InputTypes } from './input-field-interface';\nimport { MaskConfig, MaskedInputField } from './masked-input-field-interface';\n\n@Component({\n imports: [TwIcon, NgClass, FormsModule],\n selector: 'tw-masked-input',\n host: {\n class: 'tw-masked-input-wrapper',\n },\n templateUrl: './masked-input.component.html',\n providers: []\n})\nexport class TwMaskedInput\n implements ControlValueAccessor, MaskedInputField, OnInit\n{\n @Input() multiline: boolean = false;\n @Input() iconSuffix?: string;\n @Input() iconSuffixClass?: string;\n @Input() iconPrefix?: string;\n @Input() iconPrefixClass?: string;\n @Input() twClass?: string;\n @Input() name: string = '';\n @Input() label: string = '';\n\n @Input() value?: string = '';\n @Input() maxLength?: number;\n @Input() minLength?: number;\n @Input() required: string | boolean = false;\n @Input() pattern: string | RegExp = '';\n @Input() placeholder: string = '';\n @Input() disabled = false;\n @Input() inputType: InputTypes = 'text';\n @Input() color?: ColorTypes;\n @Input() showLabel: boolean = true;\n\n // Mask specific inputs\n @Input() maskConfig!: MaskConfig;\n @Input() allowAlphanumeric = false;\n @Input() validator?: (rawValue: string) => boolean | string;\n\n @ViewChild('inputElement') inputElement!: ElementRef;\n\n private _onChangeFns: any[] = [];\n private _onTouchedFns: any[] = [];\n private _maskedValue: string = '';\n private _validationError: string | null = null;\n\n get errors() {\n if (this._validationError) {\n return this._validationError;\n }\n\n return this._ngControl?.dirty && this._ngControl?.errors\n ? Object.keys(this._ngControl.errors)\n .filter((e) => e !== 'required')\n .join('.\\n')\n : null;\n }\n\n constructor(@Self() @Optional() private readonly _ngControl?: NgControl) {\n if (this._ngControl) {\n this._ngControl.valueAccessor = this;\n }\n }\n\n ngOnInit(): void {\n if (\n !this.maskConfig ||\n (!this.maskConfig.mask && !Array.isArray(this.maskConfig.mask))\n ) {\n console.warn('Masked input requires a mask configuration');\n }\n }\n\n writeValue(obj: any): void {\n this.value = obj || '';\n if (this.value) {\n this._maskedValue = this.applyMask(this.value);\n }\n }\n\n registerOnChange(fn: any): void {\n if (fn) this._onChangeFns.push(fn);\n }\n\n registerOnTouched(fn: any): void {\n if (fn) this._onTouchedFns.push(fn);\n }\n\n setDisabledState?(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n onChange(event: Event) {\n const inputValue = (event.target as HTMLInputElement).value;\n const rawValue = this.extractRawValue(inputValue);\n const maskedValue = this.applyMask(rawValue);\n\n // Apply custom validator if provided\n if (this.validator && rawValue) {\n const validationResult = this.validator(maskedValue);\n\n if (typeof validationResult === 'string') {\n this._validationError = validationResult;\n } else if (validationResult === false) {\n this._validationError = 'Invalid input format';\n } else {\n this._validationError = null;\n }\n } else {\n this._validationError = null;\n }\n\n this._maskedValue = maskedValue;\n\n // Update the input field with masked value if it's different\n if ((event.target as HTMLInputElement).value !== maskedValue) {\n (event.target as HTMLInputElement).value = maskedValue;\n }\n\n this._onChangeFns?.forEach((fn) => fn(maskedValue));\n this._onTouchedFns?.forEach((fn) => fn());\n }\n\n /**\n * Extracts the raw value from the masked input\n */\n private extractRawValue(maskedValue: string): string {\n if (!maskedValue) return '';\n\n // If mask is a regular expression array, extract only valid characters\n if (Array.isArray(this.maskConfig.mask)) {\n return maskedValue\n .split('')\n .filter((char, index) => {\n const maskChar = this.maskConfig.mask[index];\n if (!maskChar) return false;\n\n if (typeof maskChar === 'object' && maskChar instanceof RegExp) {\n return maskChar.test(char);\n }\n return char !== this.maskConfig.placeholderChar;\n })\n .join('');\n }\n\n // If mask is a string pattern and allowAlphanumeric is false, remove non-numeric characters\n if (!this.allowAlphanumeric) {\n return maskedValue.replace(/[^0-9]/g, '');\n }\n\n // If allowAlphanumeric is true, preserve both letters and numbers but remove special chars\n if (this.allowAlphanumeric) {\n return maskedValue.replace(/[^A-Za-z0-9]/g, '');\n }\n\n return maskedValue;\n }\n\n /**\n * Applies the mask to the input value\n */\n private applyMask(value: string): string {\n if (!value) return '';\n\n // Simple implementation for common mask patterns\n if (typeof this.maskConfig.mask === 'string') {\n let result = '';\n let valueIndex = 0;\n\n // Process each character in the mask pattern\n for (\n let i = 0;\n i < this.maskConfig.mask.length && valueIndex < value.length;\n i++\n ) {\n const maskChar = this.maskConfig.mask[i];\n\n if (maskChar === '9') {\n // Only allow digits\n while (valueIndex < value.length) {\n const char = value[valueIndex++];\n if (/[0-9]/.test(char)) {\n result += char;\n break;\n }\n }\n } else if (maskChar === 'A') {\n // Only allow letters\n while (valueIndex < value.length) {\n const char = value[valueIndex++];\n if (/[A-Za-z]/.test(char)) {\n result += char;\n break;\n }\n }\n } else if (maskChar === 'A') {\n // Only allow letters\n while (valueIndex < value.length) {\n const char = value[valueIndex++];\n if (/[A-Za-z]/.test(char)) {\n result += char;\n break;\n }\n }\n } else if (maskChar === '*') {\n // Allow any character\n if (valueIndex < value.length) {\n result += value[valueIndex++];\n }\n } else {\n // Add the mask character as is\n result += maskChar;\n\n // Skip the corresponding value character if it matches the mask character\n if (valueIndex < value.length && value[valueIndex] === maskChar) {\n valueIndex++;\n }\n }\n }\n\n return result;\n }\n\n // Implementation for RegExp array masks\n if (Array.isArray(this.maskConfig.mask)) {\n let result = '';\n let valueIndex = 0;\n\n for (\n let i = 0;\n i < this.maskConfig.mask.length && valueIndex < value.length;\n i++\n ) {\n const maskElement = this.maskConfig.mask[i];\n\n if (maskElement instanceof RegExp) {\n // Find the next character that matches the RegExp\n while (valueIndex < value.length) {\n const char = value[valueIndex++];\n if (maskElement.test(char)) {\n result += char;\n break;\n }\n }\n } else if (typeof maskElement === 'string') {\n // Add the static mask character\n result += maskElement;\n\n // Skip the corresponding value character if it matches\n if (valueIndex < value.length && value[valueIndex] === maskElement) {\n valueIndex++;\n }\n }\n }\n\n return result;\n }\n\n return value;\n }\n}\n","
\n @if (showLabel) {\n {{label || placeholder}}\n }\n
\n @if (iconPrefix) {\n \n \n \n }\n\n \n\n @if (iconSuffix) {\n \n \n \n }\n
\n @if (errors) {\n {{errors}}\n }\n
\n","import {\n BlockScrollStrategy,\n CdkConnectedOverlay,\n Overlay,\n} from '@angular/cdk/overlay';\nimport { CommonModule, NgClass } from '@angular/common';\nimport {\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n Input,\n OnInit,\n Output,\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormsModule,\n NG_VALUE_ACCESSOR,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { TwButton } from '../button/button.component';\nimport { TwCalendar } from '../calendar/calendar.component';\nimport { TwIcon } from '../icon/icon.component';\nimport { MaskConfig } from '../input-field/masked-input-field-interface';\nimport { TwMaskedInput } from '../input-field/masked-input.component';\nimport { OverlayPositions } from '../TwElement';\n\nexport interface DateRange {\n start: Date;\n end: Date | null;\n preset?: string; // Optional preset ID\n}\n\n@Component({\n selector: 'tw-date-range-picker',\n templateUrl: 'date-range-picker.component.html',\n imports: [\n TwButton,\n CommonModule,\n TwCalendar,\n FormsModule,\n ReactiveFormsModule,\n CdkConnectedOverlay,\n NgClass,\n TwIcon,\n TwMaskedInput,\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TwDateRangePicker),\n multi: true,\n },\n ],\n})\nexport class TwDateRangePicker implements OnInit, ControlValueAccessor {\n @Input() isOpen = false;\n @Input() startDate: Date | null = null;\n @Input() endDate: Date | null = null;\n @Input() minDate: Date | null = null;\n @Input() maxDate: Date | null = (() => {\n const today = new Date();\n today.setHours(23, 59, 59, 999);\n return today;\n })(); // Default max date to today at 11:59 PM\n\n @Input() disabled = false;\n\n // Flag to check if in mobile view\n isMobileView = false;\n\n @Output() dateRangeChange = new EventEmitter();\n @Output() openChanged = new EventEmitter();\n\n @Input() dateRange: DateRange = {\n start: new Date(),\n end: new Date(),\n };\n\n // For FormControl tracking\n private originalRange: DateRange = {\n start: new Date(),\n end: new Date(),\n };\n\n // For two-way binding with the masked inputs\n startDateModel: string = '';\n endDateModel: string = '';\n\n selectedPreset: string = 'custom';\n\n // Calendar display dates (for the two calendars)\n leftCalendarDate = new Date();\n rightCalendarDate = new Date();\n\n // Mask configuration for date inputs\n dateMaskConfig: MaskConfig = {\n mask: '99 / 99 / 9999',\n guide: true,\n placeholderChar: '_',\n showMask: false,\n };\n\n presets = [\n { id: 'today', label: 'Today' },\n { id: 'last7days', label: 'Last 7 days' },\n { id: 'last4weeks', label: 'Last 4 weeks' },\n { id: 'last3months', label: 'Last 3 months' },\n { id: 'last12months', label: 'Last 12 months' },\n { id: 'monthToDate', label: 'Month to date' },\n { id: 'quarterToDate', label: 'Quarter to date' },\n { id: 'yearToDate', label: 'Year to date' },\n { id: 'allTime', label: 'All time' },\n ];\n\n positions = OverlayPositions;\n blockScrollStrategy: BlockScrollStrategy;\n\n get isValid() {\n return (\n this.checkDateInterval(this.dateRange.start) === true &&\n this.dateRange.end &&\n this.checkDateInterval(this.dateRange.end) === true &&\n this.dateRange.end >= this.dateRange.start\n );\n }\n\n // ControlValueAccessor methods\n onChange: (value: DateRange) => void = () => {};\n onTouched: () => void = () => {};\n\n constructor(public elementRef: ElementRef, overlay: Overlay) {\n this.blockScrollStrategy = overlay.scrollStrategies.block();\n }\n\n ngOnInit() {\n // Set default values\n if (this.startDate) {\n this.dateRange.start = new Date(this.startDate);\n this.originalRange.start = new Date(this.startDate);\n }\n\n if (this.endDate) {\n this.dateRange.end = new Date(this.endDate);\n this.originalRange.end = new Date(this.endDate);\n } else if (this.startDate) {\n this.dateRange.end = new Date(this.startDate);\n this.originalRange.end = new Date(this.startDate);\n }\n\n // Setup calendar months - current month on the right\n const today = new Date();\n\n // Right calendar shows current month\n this.rightCalendarDate = new Date(today);\n\n // Left calendar shows previous month\n this.leftCalendarDate = new Date(today);\n this.leftCalendarDate.setMonth(this.leftCalendarDate.getMonth() - 1);\n\n // Check if we're on mobile\n this.checkMobileView();\n\n // Initialize the model values for the masked inputs\n this.startDateModel = this.formatDateForInput(this.dateRange.start);\n this.endDateModel = this.formatDateForInput(this.dateRange.end);\n\n // Add resize event listener to detect mobile/desktop changes\n window.addEventListener('resize', () => {\n this.checkMobileView();\n });\n }\n\n // Determine if we're in mobile view based on screen width\n checkMobileView(): void {\n this.isMobileView = window.innerWidth < 768; // 768px is standard md breakpoint in Tailwind\n } // ControlValueAccessor methods implementation\n writeValue(value: DateRange | null): void {\n if (value) {\n this.dateRange = {\n start: value.start ? new Date(value.start) : new Date(),\n end: value.end ? new Date(value.end) : new Date(),\n preset: value.preset,\n };\n this.originalRange = {\n start: value.start ? new Date(value.start) : new Date(),\n end: value.end ? new Date(value.end) : new Date(),\n preset: value.preset,\n };\n\n // If a preset was provided, update the selectedPreset\n if (value.preset) {\n this.selectedPreset = value.preset;\n }\n\n // Update calendar dates based on the selected range\n if (value.start) {\n this.leftCalendarDate = new Date(value.start);\n this.leftCalendarDate.setMonth(this.leftCalendarDate.getMonth() - 1);\n }\n\n if (value.end) {\n this.rightCalendarDate = new Date(value.end);\n }\n }\n }\n\n registerOnChange(fn: (value: DateRange) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n toggleOpen(): void {\n if (this.disabled) return;\n\n this.isOpen = !this.isOpen;\n this.openChanged.emit(this.isOpen);\n\n if (this.isOpen) {\n this.onTouched();\n }\n }\n\n closeDropdown(): void {\n this.cancelSelection();\n this.isOpen = false;\n this.openChanged.emit(this.isOpen);\n }\n\n onRangeSelected(range: { start: Date; end: Date | null }): void {\n this.dateRange = { ...range, preset: 'custom' };\n this.selectedPreset = 'custom';\n\n // Update model values\n this.startDateModel = this.formatDateForInput(this.dateRange.start);\n this.endDateModel = this.formatDateForInput(this.dateRange.end);\n }\n\n // Update left calendar when right calendar changes\n onRightCalendarChange(date: Date): void {\n this.rightCalendarDate = date;\n }\n\n // Update right calendar when left calendar changes\n onLeftCalendarChange(date: Date): void {\n this.leftCalendarDate = date;\n }\n\n selectPreset(presetId: string): void {\n this.selectedPreset = presetId;\n\n const today = new Date();\n const start = new Date();\n const end = new Date();\n\n switch (presetId) {\n case 'today':\n this.dateRange = { start: today, end: today, preset: presetId };\n break;\n case 'last7days':\n start.setDate(today.getDate() - 6);\n this.dateRange = { start, end: today, preset: presetId };\n break;\n case 'last4weeks':\n start.setDate(today.getDate() - 27);\n this.dateRange = { start, end: today, preset: presetId };\n break;\n case 'last3months':\n start.setMonth(today.getMonth() - 3);\n this.dateRange = { start, end: today, preset: presetId };\n break;\n case 'last12months':\n start.setFullYear(today.getFullYear() - 1);\n this.dateRange = { start, end: today, preset: presetId };\n break;\n case 'monthToDate':\n start.setDate(1);\n this.dateRange = { start, end: today, preset: presetId };\n break;\n case 'quarterToDate':\n const quarterMonth = Math.floor(today.getMonth() / 3) * 3;\n start.setMonth(quarterMonth);\n start.setDate(1);\n this.dateRange = { start, end: today, preset: presetId };\n break;\n case 'yearToDate':\n start.setMonth(0);\n start.setDate(1);\n this.dateRange = { start, end: today, preset: presetId };\n break;\n case 'allTime':\n start.setFullYear(2000); // Example for \"all time\"\n this.dateRange = { start, end: today, preset: presetId };\n break;\n }\n\n // Update calendars based on the selected range\n this.leftCalendarDate = new Date(this.dateRange.start);\n this.rightCalendarDate = new Date(\n this.dateRange.end || this.dateRange.start\n );\n\n // Update model values for inputs\n this.startDateModel = this.formatDateForInput(this.dateRange.start);\n this.endDateModel = this.formatDateForInput(this.dateRange.end);\n }\n\n applySelection(): void {\n if (this.dateRange.start && this.dateRange.end) {\n // Save the original range for potential reset\n this.originalRange = {\n start: new Date(this.dateRange.start),\n end: this.dateRange.end ? new Date(this.dateRange.end) : null,\n preset: this.selectedPreset,\n };\n\n // Emit event for the parent component\n this.dateRangeChange.emit(this.dateRange);\n\n // Update form control value\n this.onChange(this.dateRange);\n this.onTouched();\n\n this.isOpen = false;\n this.openChanged.emit(this.isOpen);\n }\n }\n\n cancelSelection(): void {\n // Reset to original values without applying changes\n this.dateRange = {\n start: new Date(this.originalRange.start),\n end: this.originalRange.end ? new Date(this.originalRange.end) : null,\n };\n this.startDateModel = this.formatDateForInput(this.dateRange.start);\n this.endDateModel = this.formatDateForInput(this.dateRange.end);\n\n // Reset preset to original value\n this.selectedPreset = this.originalRange.preset || 'custom';\n }\n\n formatDate(date: Date | null): string {\n if (!date) return '';\n\n const months = [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ];\n\n return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;\n }\n\n formatDateRangeDisplay(): string {\n // If a preset is selected (and not custom), show the preset label instead\n if (this.selectedPreset !== 'custom') {\n const preset = this.presets.find((p) => p.id === this.selectedPreset);\n if (preset) {\n return preset.label;\n }\n }\n\n // Otherwise, format and show the date range\n if (!this.dateRange.start) return '';\n\n const start = this.formatDate(this.dateRange.start);\n const end = this.dateRange.end ? this.formatDate(this.dateRange.end) : '';\n\n return end ? `${start} → ${end}` : start;\n }\n\n // Parse input date string to Date object\n parseInputDate(dateStr: string): Date | null {\n if (!dateStr) return null;\n\n // Clean the input - remove any non-numeric characters except for slashes\n const cleanInput = dateStr.replace(/[^\\d\\/]/g, '');\n\n // Try to parse DD / MM / YYYY format\n const parts = cleanInput.split('/');\n\n if (parts.length === 3) {\n const day = parseInt(parts[0].trim(), 10);\n const month = parseInt(parts[1].trim(), 10) - 1; // Month is 0-indexed\n const year = parseInt(parts[2].trim(), 10);\n\n if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {\n const date = new Date(year, month, day);\n\n // Check if the date is valid\n if (\n date.getFullYear() === year &&\n date.getMonth() === month &&\n date.getDate() === day\n ) {\n return date;\n }\n }\n }\n\n return null;\n }\n\n // Validator for the date input mask\n validateDate =\n (dateType: 'start' | 'end') =>\n (value: string): boolean | string => {\n if (!value || value.length < 10) return true; // Allow incomplete input\n\n const date = this.parseInputDate(value);\n\n if (!date) return 'Invalid date format';\n\n const dateIntervalCheckResult = this.checkDateInterval(date);\n\n if (typeof dateIntervalCheckResult === 'string') {\n return dateIntervalCheckResult;\n }\n\n // Make sure end date is not before start date\n if (\n dateType === 'end' &&\n this.dateRange.start &&\n date < this.dateRange.start\n ) {\n return 'End date cannot be before start date';\n }\n\n return true;\n };\n\n checkDateInterval(date: Date) {\n // Check min date\n if (this.minDate && date < this.minDate) {\n return `Date cannot be before ${this.formatDateForInput(this.minDate)}`;\n }\n\n // Check max date\n if (this.maxDate && date > this.maxDate) {\n return `Date cannot be after ${this.formatDateForInput(this.maxDate)}`;\n }\n\n return true;\n }\n\n // Handle manual input of start date\n onStartDateInput(value: string): void {\n const date = this.parseInputDate(value);\n\n if (date) {\n // Update the start date\n this.dateRange.start = date;\n\n // If end date is before start date, adjust it\n if (this.dateRange.end && this.dateRange.end < date) {\n this.dateRange.end = new Date(date);\n }\n\n // Set to custom preset\n this.selectedPreset = 'custom';\n }\n }\n\n // Handle manual input of end date\n onEndDateInput(value: string): void {\n const date = this.parseInputDate(value);\n\n if (date) {\n // Update the end date\n this.dateRange.end = date;\n\n // Set to custom preset\n this.selectedPreset = 'custom';\n }\n }\n\n // Format date for input fields\n formatDateForInput(date: Date | null): string {\n if (!date) return '';\n\n const day = date.getDate().toString().padStart(2, '0');\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const year = date.getFullYear();\n\n return `${day} / ${month} / ${year}`;\n }\n}\n","
\n \n \n {{ formatDateRangeDisplay() }}\n \n \n\n \n \n \n \n @if(isMobileView) {\n
\n \n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n\n \n
\n \n
\n @for(preset of presets; track preset.id) {\n \n {{ preset.label }}\n \n }\n
\n
\n\n \n
\n \n Clear\n \n \n Apply\n \n
\n
\n }\n\n \n @if(!isMobileView) {\n
\n \n
\n
    \n @for(preset of presets; track preset.id) {\n {{ preset.label }}\n }\n
\n
\n\n \n
\n \n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n
\n
\n\n \n
\n \n Clear\n \n \n Apply\n \n
\n
\n
\n }\n
\n \n","import {\n Dialog as CdkDialog,\n DIALOG_DATA,\n DialogConfig,\n DialogRef,\n} from '@angular/cdk/dialog';\nimport { ComponentType } from '@angular/cdk/portal';\nimport { Injectable } from '@angular/core';\n\nexport { DIALOG_DATA, DialogRef };\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TwDialog {\n constructor(private readonly _dialog: CdkDialog) {}\n\n open(\n component: ComponentType,\n dialogConfig: DialogConfig> = {}\n ) {\n return this.openWithRef(component, dialogConfig).closed;\n }\n\n openWithRef(\n component: ComponentType,\n dialogConfig: DialogConfig> = {}\n ) {\n const config = {\n minWidth: '250px',\n backdropClass: 'acrylic-backdrop',\n panelClass: ['shadow-2xl', 'rounded-2xl'],\n ...dialogConfig,\n };\n return this._dialog.open(component, config);\n }\n}\n","import { Component, TemplateRef, ViewChild } from '@angular/core';\n\n@Component({\n selector: 'tw-expander-content',\n standalone: true,\n template: `\n \n `,\n})\nexport class TwExpanderContent {\n @ViewChild(TemplateRef, { static: true }) content?: TemplateRef;\n}\n","import { Component, Input, TemplateRef, ViewChild } from '@angular/core';\n\n@Component({\n selector: 'tw-expander-header',\n standalone: true,\n template: `\n \n `,\n})\nexport class TwExpanderHeader {\n @Input() showIcon = true;\n @Input() hideDivider = false;\n @ViewChild(TemplateRef, { static: true }) content?: TemplateRef;\n}\n","import { CdkAccordionItem } from '@angular/cdk/accordion';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n AfterContentInit,\n Component,\n ContentChild,\n EventEmitter,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { TwButtonIcon } from '../button/button-icon.component';\nimport { TwExpanderContent } from './expander-content.component';\nimport { TwExpanderGroup } from './expander-group.component';\nimport { TwExpanderHeader } from './expander-header.component';\n\n@Component({\n selector: 'tw-expander',\n imports: [CdkAccordionItem, TwButtonIcon, NgTemplateOutlet, NgClass],\n template: `\n \n \n @if(header.showIcon){\n \n } @if(header){\n
\n \n
\n }\n \n \n
\n \n
\n \n \n `\n})\nexport class TwExpanderItem implements AfterContentInit {\n @Input() expanded = false;\n @Output('expanded') expandedChange = new EventEmitter();\n @Output() opened = new EventEmitter();\n @Output() closed = new EventEmitter();\n\n @ContentChild(TwExpanderHeader) header!: TwExpanderHeader;\n @ContentChild(TwExpanderContent)\n content!: TwExpanderContent;\n @ViewChild(CdkAccordionItem, { static: true })\n expanderItem?: CdkAccordionItem;\n private _parent?: TwExpanderGroup;\n\n ngAfterContentInit(): void {}\n\n set parent(value: TwExpanderGroup | undefined) {\n if (this.expanderItem && value?.expanderGroup)\n this.expanderItem.accordion = value.expanderGroup!;\n\n this._parent = value;\n }\n get parent() {\n return this._parent;\n }\n\n calculateHeight(elt: HTMLElement) {\n return elt.offsetHeight + 16 + 'px';\n }\n}\n","import { CdkAccordion } from '@angular/cdk/accordion';\nimport {\n AfterContentInit,\n Component,\n ContentChildren,\n Input,\n QueryList,\n ViewChild,\n} from '@angular/core';\nimport { TwExpanderItem } from './expander-item.component';\n\n@Component({\n selector: 'tw-expander-group',\n imports: [CdkAccordion],\n template: `\n
\n \n
\n `\n})\nexport class TwExpanderGroup implements AfterContentInit {\n @Input() multi = false;\n\n @ViewChild(CdkAccordion, { static: true }) expanderGroup?: CdkAccordion;\n\n @ContentChildren(TwExpanderItem)\n expanderItems?: QueryList;\n\n ngAfterContentInit(): void {\n this.expanderItems?.forEach((i) => (i.parent = this));\n }\n closeAll() {\n this.expanderGroup?.closeAll();\n }\n\n openAll() {\n this.expanderGroup?.openAll();\n }\n}\n","import { TwExpanderContent } from './expander-content.component';\nimport { TwExpanderGroup } from './expander-group.component';\nimport { TwExpanderHeader } from './expander-header.component';\nimport { TwExpanderItem } from './expander-item.component';\n\nimport { NgModule } from '@angular/core';\n\n@NgModule({\n declarations: [],\n imports: [\n TwExpanderItem,\n TwExpanderContent,\n TwExpanderHeader,\n TwExpanderGroup,\n ],\n exports: [\n TwExpanderItem,\n TwExpanderContent,\n TwExpanderHeader,\n TwExpanderGroup,\n ],\n providers: [],\n})\nexport class TwExpanderModule {}\n\nexport { TwExpanderContent, TwExpanderGroup, TwExpanderHeader, TwExpanderItem };\n","import { Directive, Input, TemplateRef } from '@angular/core';\nimport { TwMenu } from './menu.component';\n\n@Directive({\n selector: '[twMenuItem]',\n standalone: true,\n // imports: [],\n})\nexport class TwMenuItemDirective {\n @Input({ required: false, alias: 'twMenuItem' })\n menu?: TwMenu | string;\n\n @Input({ required: false, alias: 'twMenuItemDisabled' })\n disabled: boolean = false;\n type: 'check' | 'radio' | 'classic' = 'classic';\n\n get triggerMenu() {\n return (this.menu as TwMenu)?.menuTemplate;\n }\n\n constructor(public template: TemplateRef) {}\n}\n","import { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { ConnectedPosition } from '@angular/cdk/overlay';\nimport {\n ChangeDetectorRef,\n Directive,\n HostListener,\n Input,\n} from '@angular/core';\nimport { TwMenu } from './menu.component';\n\ntype TwMenuTriggerPositions =\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'center';\n@Directive({\n selector: '[twMenuTriggerFor]',\n standalone: true,\n providers: [],\n})\nexport class TwMenuTriggerDirective extends CdkMenuTrigger {\n constructor(private readonly _cd: ChangeDetectorRef) {\n super();\n }\n @Input('twMenuTriggerFor') menu!: TwMenu;\n\n @Input() set position(value: TwMenuTriggerPositions) {\n this.menuPosition = this._getPosition(value);\n }\n\n @HostListener('click', ['$event'])\n onClick(event: Event) {\n event.stopPropagation();\n }\n\n ngAfterContentInit(): void {\n if (this.menu?.menuTemplate && !this.menuTemplateRef)\n this.menuTemplateRef = this.menu.menuTemplate;\n this._cd.detectChanges();\n }\n private _getPosition(value: TwMenuTriggerPositions): ConnectedPosition[] {\n switch (value) {\n case 'top-left':\n return [\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n },\n ];\n case 'top-right':\n return [\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n },\n ];\n case 'bottom-left':\n return [\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n },\n ];\n case 'bottom-right':\n return [\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n },\n ];\n case 'center':\n return [\n {\n originX: 'center',\n originY: 'center',\n overlayX: 'center',\n overlayY: 'center',\n },\n ];\n default:\n return [];\n }\n }\n}\n","import {\n CdkMenu,\n CdkMenuItem,\n CdkMenuItemCheckbox,\n CdkMenuItemRadio,\n CdkMenuTrigger,\n} from '@angular/cdk/menu';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n Component,\n ContentChildren,\n Input,\n QueryList,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\nimport { TwMenuItemDirective } from './menu-item.directive';\n\n@Component({\n selector: 'tw-menu',\n imports: [\n CdkMenu,\n CdkMenuTrigger,\n NgTemplateOutlet,\n CdkMenuItem,\n CdkMenuItemCheckbox,\n CdkMenuItemRadio,\n ],\n template: `\n \n \n @for(item of menuItems; track $index){ @switch(item.type) { @case\n ('check') {\n \n \n \n\n } @case ('radio') {\n \n \n \n } @default {\n \n \n \n } } }\n \n \n `\n})\nexport class TwMenu {\n @ViewChild(TemplateRef, { static: true }) menuTemplate?: TemplateRef;\n @ContentChildren(TwMenuItemDirective)\n menuItems?: QueryList;\n\n @Input()\n panelWidth?: string;\n}\n","import { PARENT_OR_NEW_MENU_STACK_PROVIDER } from '@angular/cdk/menu';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { TwMenuItemDirective } from './menu-item.directive';\nimport { TwMenuTriggerDirective } from './menu-trigger.directive';\nimport { TwMenu } from './menu.component';\n\n@NgModule({\n declarations: [],\n imports: [CommonModule, TwMenuTriggerDirective, TwMenu, TwMenuItemDirective],\n exports: [TwMenuTriggerDirective, TwMenu, TwMenuItemDirective],\n providers: [PARENT_OR_NEW_MENU_STACK_PROVIDER],\n})\nexport class TwMenuModule {}\n","import { ModuleWithProviders, NgModule, Provider } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { NotificationComponent } from './notification.component';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { defaultTwNotificationConfig, TW_NOTIFICATION_CONFIG_TOKEN } from './notification-config';\n\nexport function provideTwNotification(config = defaultTwNotificationConfig): Provider[] {\n return [\n {\n provide: TW_NOTIFICATION_CONFIG_TOKEN,\n useValue: { ...defaultTwNotificationConfig, ...config },\n }\n ];\n}\n","import { NgClass } from '@angular/common';\nimport {\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { TwIcon } from '../../icon/icon.component';\n\n/**\n * Option IDs need to be unique across components, so this counter exists outside of\n * the component definition.\n */\nlet _uniqueIdCounter = 0;\n\n/** Event object emitted by MatOption when selected or deselected. */\nexport class OptionSelectionChange {\n constructor(\n /** Reference to the option that emitted the event. */\n public source: TwOption,\n /** Whether the change in the option's value was a result of a user action. */\n public isUserInput: boolean = false,\n /** Content element */\n public innerHTML: string | null = null\n ) {}\n}\n\n@Component({\n selector: 'tw-option',\n imports: [NgClass, TwIcon],\n templateUrl: './option.component.html',\n host: {\n '[attr.id]': 'id',\n '[attr.role]': 'option',\n '(click)': 'select(true)',\n class: 'tw-option',\n }\n})\nexport class TwOption implements OnInit {\n public selected: boolean = false;\n public active: boolean = false;\n\n @Input() public value: any;\n @Input() public disabled: boolean = false;\n @Input() public id: string = `tw-option-${_uniqueIdCounter++}`;\n @Input() public textOnly: boolean | string = true;\n\n @Input() public useSelectedIndicator: boolean = true;\n @Input() public indicator: 'left' | 'right' | null = 'right';\n\n @Output() readonly onSelectionChange = new EventEmitter<\n OptionSelectionChange\n >();\n\n @ViewChild('content') public contentElement!: ElementRef;\n\n constructor(private readonly element: ElementRef) {}\n\n ngOnInit(): void {}\n\n /** Emits the selection change event. */\n private _emitSelectionChangeEvent(isUserInput = false): void {\n this.onSelectionChange.emit(\n new OptionSelectionChange(this, isUserInput, this.getInnerHTML())\n );\n }\n\n /** Selects the option. */\n select(isUserInput: boolean = false): void {\n //\n // Validate disabled and alredy selected\n if (this.disabled) return;\n\n //\n // Select and emit event\n this._emitSelectionChangeEvent(isUserInput);\n // set select if we have a value\n if (this.value) this.selected = true;\n }\n\n deselect(isUserInput: boolean = false): void {\n //\n // Deselect and emit event\n this.selected = false;\n }\n\n /**\n * This method sets display styles on the option to make it appear\n * active. This is used by the ActiveDescendantKeyManager so key\n * events will display the proper options as active on arrow key events.\n */\n setActiveStyles(): void {\n if (!this.active) {\n this.active = true;\n this.scrollIntoView();\n }\n }\n\n /**\n * This method removes display styles on the option that made it appear\n * active. This is used by the ActiveDescendantKeyManager so key\n * events will display the proper options as active on arrow key events.\n */\n setInactiveStyles(): void {\n if (this.active) {\n this.active = false;\n }\n }\n\n /** Gets the label to be used when determining whether the option should be focused. */\n getLabel(): string {\n //\n // Hold element\n let element: HTMLElement = this.contentElement.nativeElement;\n\n //\n // When textOnly is a string it means we have a selector to use\n if (typeof this.textOnly === 'string') {\n const elementForTextonly: HTMLElement | null = element.querySelector(\n this.textOnly\n );\n if (elementForTextonly) element = elementForTextonly;\n }\n\n return element.textContent ? element.textContent : '';\n }\n\n getInnerHTML(forceHTML: boolean = false): string | null {\n return this.textOnly !== false && forceHTML === false\n ? this.getLabel()\n : this.contentElement?.nativeElement?.innerHTML || null;\n }\n\n /**\n * `Selects the option while indicating the selection came from the user. Used to\n * determine if the select's view -> model callback should be invoked.`\n */\n selectViaInteraction(): void {\n if (!this.disabled) {\n this.selected = true;\n this._emitSelectionChangeEvent(true);\n }\n }\n\n scrollIntoView() {\n // @TODO: center scrolling is not supported widely, check for alternative solution or polyfill\n if (typeof this.element.nativeElement.scrollIntoView !== 'undefined')\n this.element.nativeElement.scrollIntoView({\n block: 'center',\n });\n }\n\n setActiveStylesWithDelay(): void {\n setTimeout(() => {\n if (!this.active) {\n this.active = true;\n }\n\n this.scrollIntoView();\n });\n }\n}\n","\n \n\n\n@if (useSelectedIndicator) {\n \n \n \n \n}\n","import { ActiveDescendantKeyManager, LiveAnnouncer } from '@angular/cdk/a11y';\nimport {\n DOWN_ARROW,\n ENTER,\n SPACE,\n UP_ARROW,\n hasModifierKey,\n} from '@angular/cdk/keycodes';\nimport {\n BlockScrollStrategy,\n CdkConnectedOverlay,\n ConnectedPosition,\n Overlay,\n} from '@angular/cdk/overlay';\nimport { NgClass } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n Input,\n NgZone,\n OnInit,\n QueryList,\n ViewChild,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Observable, defer, merge, startWith, switchMap, take } from 'rxjs';\nimport { ColorTypes } from '../color-types';\nimport { OptionSelectionChange, TwOption } from './option/option.component';\n\n/**\n * IDs need to be unique across components, so this counter exists outside of\n * the component definition.\n */\nlet _uniqueIdCounter = 0;\n\n@Component({\n selector: 'tw-select',\n imports: [NgClass, CdkConnectedOverlay],\n templateUrl: './select.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.tabindex]': '0',\n '[attr.role]': 'combobox',\n '[attr.aria-autocomplete]': 'none',\n '[attr.id]': 'id',\n '[attr.aria-controls]': 'isOpen ? id + \"-panel\" : null',\n '[attr.aria-expanded]': 'isOpen',\n '[attr.aria-disabled]': 'disabled.toString()',\n '[attr.aria-haspopup]': '\"listbox\"',\n '[attr.aria-labelledby]': '\"listbox-label\"',\n '(keydown)': 'handleKeydown($event)',\n '(click)': 'openPanel()',\n '[class]': '\"tw-select \" + (color || \"\") + (twClass ? \" \" + twClass : \"\")',\n },\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TwSelect),\n multi: true,\n },\n ]\n})\nexport class TwSelect\n implements ControlValueAccessor, OnInit, AfterContentInit\n{\n @Input() public placeholder: string = 'Select an option';\n @Input() public disabled: boolean = false;\n @Input() public id: string = `tw-select-${_uniqueIdCounter++}`;\n @Input() public compareWith: (o1: any, o2: any) => boolean = (\n o1: any,\n o2: any\n ) => o1 === o2;\n @Input()\n get value(): any {\n return this.innerValue;\n }\n set value(newValue: any) {\n this.selectOption(newValue, null, false);\n }\n\n @ViewChild('arrowContainer', { static: true })\n public arrowContainer!: ElementRef;\n @ViewChild('inputContainer', { static: true })\n public inputContainer!: ElementRef;\n @ViewChild('trigger', { static: true }) public trigger!: ElementRef;\n @ContentChildren(TwOption, { descendants: true })\n public options!: QueryList;\n\n @Input() color?: ColorTypes;\n @Input() twClass?: string;\n\n @Input() inputSticky = true;\n\n public get htmlValue(): string | null {\n //\n // Validate inner value\n if (!this.innerValue && !this._keyManager.activeItem) return null;\n else return this._keyManager.activeItem?.getInnerHTML() || null;\n }\n\n public onChange = (value: any) => {};\n public onTouched = () => {};\n\n public innerValue: any = null;\n\n public wasTouched: boolean = false;\n public isOpen: boolean = false;\n public overlayWidth!: string;\n\n private _keyManager!: ActiveDescendantKeyManager;\n public _scrollStrategy: BlockScrollStrategy;\n\n public positions: ConnectedPosition[] = [\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: 8,\n },\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 8,\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetY: -8,\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -8,\n },\n ];\n\n /** Combined stream of all of the child options' change events. */\n readonly optionSelectionChanges: Observable = defer(\n () => {\n const options = this.options;\n\n if (options) {\n return options.changes.pipe(\n startWith(options),\n switchMap(() =>\n merge(...options.map((option) => option.onSelectionChange))\n )\n );\n }\n\n return this.zone.onStable.pipe(\n take(1),\n switchMap(() => this.optionSelectionChanges)\n );\n }\n ) as Observable;\n\n constructor(\n public cdr: ChangeDetectorRef,\n public elementRef: ElementRef,\n public overlay: Overlay,\n private readonly zone: NgZone,\n private readonly liveAnnouncer: LiveAnnouncer\n ) {\n this._scrollStrategy = this.overlay.scrollStrategies.block();\n }\n\n ngOnInit(): void {}\n\n ngAfterContentInit(): void {\n this._initKeyManager();\n\n this.optionSelectionChanges.subscribe((event) => {\n this.onSelect(event.source, event.isUserInput, event.innerHTML);\n this.cdr.markForCheck();\n });\n\n this.options.changes.pipe(startWith(null)).subscribe(() => {\n // Defer setting the value in order to avoid the \"Expression\n // has changed after it was checked\" errors from Angular.\n Promise.resolve().then(() => {\n this.selectOption(this.innerValue, null, false, true);\n });\n });\n }\n\n writeValue(value: any) {\n this.selectOption(value, null, false);\n this.cdr.markForCheck();\n }\n\n registerOnChange(onChange: any) {\n this.onChange = onChange;\n }\n\n registerOnTouched(onTouched: any) {\n this.onTouched = onTouched;\n }\n\n markAsTouched() {\n if (!this.wasTouched) {\n this.onTouched();\n this.wasTouched = true;\n }\n }\n\n setDisabledState(isDisabled: boolean) {\n //\n // Set disabled\n this.disabled = isDisabled;\n\n //\n // Set aria-disabled\n this.trigger?.nativeElement.setAttribute(\n 'aria-disabled',\n isDisabled.toString()\n );\n }\n\n openPanel() {\n //\n // Validate disabled\n if (this.disabled === true) return;\n\n //\n // open panel\n this.isOpen = true;\n\n //\n // Scroll if we have an active item\n if (this._keyManager.activeItem)\n this._keyManager.activeItem.setActiveStylesWithDelay();\n }\n\n closePanel() {\n //\n // Update manager active item\n if (this.innerValue) this._updateKeyManagerActiveItem(this.innerValue);\n\n // close\n this.isOpen = false;\n }\n\n backdropClick() {\n this.closePanel();\n }\n\n selectOption(\n newValue: any,\n innerHTML: string | null,\n touched: boolean,\n forceUpdate = false\n ) {\n //\n // Do nothing if selected is the same as the current value\n if (this.compareWith(this.innerValue, newValue) && forceUpdate === false) {\n return;\n }\n\n //\n // Set new value\n this.innerValue = newValue;\n\n //\n // On change event\n this.onChange(newValue);\n // mark as touched if this was made by a user interaction\n if (touched === true) this.markAsTouched();\n\n //\n // Skip if we don't have options\n if (!this.options) return;\n\n //\n // Update manager active item\n this._updateKeyManagerActiveItem(newValue);\n }\n\n onSelect(source: TwOption, isUserInput: boolean, innerHTML: string | null) {\n //\n // Validate value is different\n if (this.innerValue === source.value) return this.closePanel();\n\n //\n // Loop options and deselect all except the selected one\n this.options.forEach((option) => {\n if (option.selected === true && option.id !== source.id) {\n option.deselect();\n }\n });\n\n //\n // Select option\n this.selectOption(source.value, innerHTML, true);\n\n //\n // Close\n this.closePanel();\n }\n\n handleKeydown(event: KeyboardEvent) {\n if (!this.disabled) {\n this.isOpen === true\n ? this._handleOpenKeydown(event)\n : this._handleClosedKeydown(event);\n }\n }\n\n private _handleClosedKeydown(event: KeyboardEvent): void {\n const manager = this._keyManager;\n\n manager.onKeydown(event);\n }\n\n /** Handles keyboard events when the selected is open. */\n private _handleOpenKeydown(event: KeyboardEvent): void {\n const manager = this._keyManager;\n const keyCode = event.keyCode;\n const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;\n const isTyping = manager.isTyping();\n\n if (isArrowKey && event.altKey) {\n // Close the select on ALT + arrow key to match the native