{"version":3,"file":"fibo-ui-components.mjs","sources":["../../../../projects/fibo-ui/components/src/lib/loading-spin/loading-spin.ts","../../../../projects/fibo-ui/components/src/lib/dialog/modal-state.ts","../../../../projects/fibo-ui/components/src/lib/dialog/dialog-service.ts","../../../../projects/fibo-ui/components/src/lib/dialog/dialog-trigger.ts","../../../../projects/fibo-ui/components/src/lib/dialog/dialog.ts","../../../../projects/fibo-ui/components/src/lib/dialog/dialog.html","../../../../projects/fibo-ui/components/src/lib/form/form-field/form-field.ts","../../../../projects/fibo-ui/components/src/lib/form/form-field/form-field.html","../../../../projects/fibo-ui/components/src/lib/select/select.ts","../../../../projects/fibo-ui/components/src/lib/select/select.html","../../../../projects/fibo-ui/components/src/lib/checkbox/checkbox.ts","../../../../projects/fibo-ui/components/src/lib/checkbox/checkbox.html","../../../../projects/fibo-ui/components/src/lib/data-list/listbox/listbox.ts","../../../../projects/fibo-ui/components/src/lib/data-list/listbox/listbox.html","../../../../projects/fibo-ui/components/src/lib/select/multiple-select.ts","../../../../projects/fibo-ui/components/src/lib/select/multiple-select.html","../../../../projects/fibo-ui/components/src/lib/select/multiple-select-input.ts","../../../../projects/fibo-ui/components/src/lib/tooltip/tooltip-service.ts","../../../../projects/fibo-ui/components/src/lib/tooltip/tooltip-container.ts","../../../../projects/fibo-ui/components/src/lib/tooltip/tooltip-container.html","../../../../projects/fibo-ui/components/src/lib/tooltip/tooltip.ts","../../../../projects/fibo-ui/components/src/lib/menu/menu-panel.ts","../../../../projects/fibo-ui/components/src/lib/menu/popover-submenu-trigger.ts","../../../../projects/fibo-ui/components/src/lib/menu/popover-menu.ts","../../../../projects/fibo-ui/components/src/lib/menu/popover-menu.html","../../../../projects/fibo-ui/components/src/lib/menu/menu-item.ts","../../../../projects/fibo-ui/components/src/lib/menu/collapse-submenu-item.ts","../../../../projects/fibo-ui/components/src/lib/menu/side-menu-chain.ts","../../../../projects/fibo-ui/components/src/lib/menu/side-menu.ts","../../../../projects/fibo-ui/components/src/lib/menu/side-menu.html","../../../../projects/fibo-ui/components/src/lib/confirmation/confirmation-service.ts","../../../../projects/fibo-ui/components/src/lib/confirmation/confirmation.ts","../../../../projects/fibo-ui/components/src/lib/confirmation/confirmation.html","../../../../projects/fibo-ui/components/src/lib/confirmation/confirmation-trigger.ts","../../../../projects/fibo-ui/components/src/lib/notification/notifier.ts","../../../../projects/fibo-ui/components/src/lib/notification/notification.ts","../../../../projects/fibo-ui/components/src/lib/notification/notification.html","../../../../projects/fibo-ui/components/src/lib/datepicker/calendar/active-date.state.ts","../../../../projects/fibo-ui/components/src/lib/datepicker/calendar/calendar.ts","../../../../projects/fibo-ui/components/src/lib/datepicker/calendar/calendar-date-selection-model.ts","../../../../projects/fibo-ui/components/src/lib/datepicker/calendar/calendar-date-range-selection-model.ts","../../../../projects/fibo-ui/components/src/lib/datepicker/datepicker.ts","../../../../projects/fibo-ui/components/src/lib/datepicker/datepicker.html","../../../../projects/fibo-ui/components/src/lib/form/reset-control.ts","../../../../projects/fibo-ui/components/src/lib/form/reset-control.html","../../../../projects/fibo-ui/components/src/lib/datepicker/date-range-picker.ts","../../../../projects/fibo-ui/components/src/lib/datepicker/date-range-picker.html","../../../../projects/fibo-ui/components/src/lib/input/input.ts","../../../../projects/fibo-ui/components/src/lib/input/input.html","../../../../projects/fibo-ui/components/src/lib/switch/switch.ts","../../../../projects/fibo-ui/components/src/lib/switch/switch.html","../../../../projects/fibo-ui/components/src/lib/table/column.ts","../../../../projects/fibo-ui/components/src/lib/table/table.ts","../../../../projects/fibo-ui/components/src/lib/table/column-header.ts","../../../../projects/fibo-ui/components/src/lib/table/table-row.ts","../../../../projects/fibo-ui/components/src/public-api.ts","../../../../projects/fibo-ui/components/src/fibo-ui-components.ts"],"sourcesContent":["import {Component, input} from '@angular/core';\nimport {CommonModule} from '@angular/common';\n\n@Component({\n selector: 'fibo-loading-spin',\n standalone: true,\n imports: [CommonModule],\n host: {\n class: 'min-w-4 min-h-4',\n },\n styles: `\n\n .spinner {\n animation: rotate 2s linear infinite;\n\n & .path {\n stroke-linecap: round;\n animation: dash 1.5s ease-in-out infinite;\n }\n\n }\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n }\n\n `,\n template: `\n \n \n \n `\n})\nexport class LoadingSpin {\n strokeWidth = input(4)\n}\n","import {computed, linkedSignal, signal, TemplateRef} from '@angular/core';\n\nexport type DialogConfig = {\n mode?: 'dialog'|'drawer'\n}\n\nexport default class ModalState {\n\n content = signal|null>(null);\n\n isOpen = computed(()=> !!this.content());\n isVisible = linkedSignal({\n source: this.isOpen,\n computation: (isOpen) => isOpen\n })\n\n config = signal< DialogConfig | null >(null);\n\n open(content: TemplateRef, config: DialogConfig|null = null) {\n this.content.set(content);\n if(config) {\n this.config.set(config);\n }\n }\n\n close () {\n this.isVisible.set(false);\n setTimeout(\n () => {\n this.content.set(null);\n this.config.set(null);\n },300)\n };\n\n}\n","import {Injectable, TemplateRef} from '@angular/core';\nimport ModalState from './modal-state';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DialogService extends ModalState {\n\n\n}\n","import {Directive, ElementRef, inject, input, model, signal, TemplateRef} from '@angular/core';\nimport {DialogService} from './dialog-service';\nimport {DialogConfig} from './modal-state';\n\n\n@Directive({\n selector: '[fiboDialogTrigger]',\n exportAs: 'FiboDialogTrigger',\n standalone: true,\n host: {\n '(click)': 'open()'\n }\n})\nexport class DialogTrigger {\n dialog = inject(DialogService);\n content = input.required>({alias: 'fiboDialogTrigger'});\n config = input(null,{alias:'fiboDialogConfig'});\n\n open() {\n this.dialog.open(this.content(),this.config())\n }\n\n}\n","import {\n Component, computed,\n effect,\n inject,\n input,\n model,\n OnDestroy,\n output,\n signal,\n TemplateRef,\n ViewContainerRef\n} from '@angular/core';\nimport {NgClass, NgTemplateOutlet} from '@angular/common';\nimport { CommonModule } from '@angular/common';\nimport {DialogService} from './dialog-service';\n@Component({\n selector: 'fibo-dialog',\n standalone: true,\n imports: [NgTemplateOutlet, CommonModule],\n templateUrl: './dialog.html',\n\n})\nexport class FiboDialog {\n state = inject(DialogService)\n\n isDrawerMode = computed(()=> !!this.state.config() && this.state.config()?.mode === 'drawer' );\n\n}\n","@if (state.isOpen()) {\n
\n @if (state.isVisible()) {\n
\n }\n\n @if (isDrawerMode()) {\n
\n @if (state.isVisible()) {\n
\n
\n \n
\n
\n }\n
\n\n } @else {\n
\n\n @if (state.isVisible()) {\n
\n \n
\n }\n\n
\n }\n
\n}\n\n","import {Component, computed, contentChildren, inject, input, ViewEncapsulation} from '@angular/core';\nimport {IsEmptyPipe} from '@fibo-ui/cdk';\nimport {PopoverTrigger} from '@fibo-ui/cdk';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {FormFieldControl, FirstFormErrorPipe} from '@fibo-ui/cdk';\nimport {FormFieldContent} from '@fibo-ui/cdk';\nimport {LucideAngularModule} from 'lucide-angular';\n\n\n@Component({\n selector: 'fibo-form-field',\n imports: [\n IsEmptyPipe,\n NgTemplateOutlet,\n LucideAngularModule,\n ],\n templateUrl: './form-field.html',\n encapsulation: ViewEncapsulation.None,\n host: {\n '(click)': 'handleClick()',\n '(focusout)': 'onFocusOut($event)',\n '[attr.aria-disabled]': 'cva()?.disabled()',\n '[attr.aria-required]': 'cva()?.isRequired() || null',\n '[attr.data-appearance]': 'control().appearance()',\n '[attr.data-error]': 'cva()?.hasError() || null',\n '[style.pointer-events]': \"cva()?.disabled() ? 'none' : 'auto'\",\n '[tabindex]': \"control().cva.disabled()?'-1':'0'\",\n '[class]': \"'content-center fibo-form-field' + (control().controlClass() ? ' ' + control().controlClass() : '')\",\n '[class.min-h-14]': \"!!control().label()\",\n },\n})\n\nexport class FormField {\n control = input.required>()\n prependIcon = input()\n appendIcon = input()\n cva = computed(() => this.control()?.cva)\n inputs = contentChildren(FormFieldContent)\n popover = inject(PopoverTrigger, {optional: true, self: true})\n showErrors = true;\n\n handleClick() {\n if (this.control().cva.disabled()) return;\n setTimeout(() => {\n if (this.inputs().length) {\n this.inputs()[0].element.nativeElement.focus();\n } else if (this.control()?.inputs().length) {\n // @ts-ignore\n this.control()?.inputs()[0].element.nativeElement.focus();\n }\n }, 0);\n }\n\n onFocusOut(event: FocusEvent) {\n const relatedTarget = event.relatedTarget as Node;\n const controlElement = this.control().element.nativeElement;\n \n if (!relatedTarget) {\n this.control()?.cva.onTouched();\n return;\n }\n\n // Check if focus is moving to the popover container (rendered in portal outlet)\n const popoverElement = this.popover?.popover()?.element.nativeElement;\n const isMovingToPopover = popoverElement?.contains(relatedTarget);\n \n // Don't close if focus is moving within the control element or to the popover\n if (controlElement.contains(relatedTarget) || isMovingToPopover) {\n return;\n }\n\n this.popover?.close();\n this.control()?.cva.onTouched();\n }\n\n}\n","@let formFieldControl = control();\n@let empty = formFieldControl.cva.value() | isEmpty;\n@let disabled = formFieldControl.cva.disabled();\n@let label = formFieldControl.label();\n@let hasInnerContent = !!inputs().length || !!formFieldControl.inputs().length;\n@let hasFixedLabel = !!control()?.fixedLabel();\n\n @if (cva()?.hasError()) {\n
\n }\n\n \n @if (formFieldControl.prependTemplate(); as prep) {\n \n }\n\n
\n\n @if (label) {\n
\n {{ label }}@if (formFieldControl.cva.isRequired()) {\n *\n }\n
\n }\n @if (formFieldControl.placeholder() && empty && !hasInnerContent) {\n\n @if (label && !hasFixedLabel) {\n\n } @else {\n
{{ formFieldControl.placeholder() }}
\n }\n\n }\n
\n \n
\n\n\n
\n @let displayReset = empty || disabled;\n @let resetCallback = formFieldControl.resetCallback();\n @let hasResetAction = formFieldControl.cva.ngControl || resetCallback;\n @if (!displayReset && hasResetAction) {\n
\n
\n\n } @else {\n \n }\n\n \n @if (appendIcon(); as appendIcon) {\n \n }\n \n \n\n\n","import {Component, computed, inject, input, TemplateRef, viewChild, ViewEncapsulation} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FormsModule} from \"@angular/forms\";\nimport {DataList, ListItem, PopoverTriggerClick, Popover, SingleSelectionModel, PortalTemplateDirective,} from '@fibo-ui/cdk';\n\nimport {FormField} from '../form/form-field/form-field';\nimport {FormFieldControl, FormFieldErrors} from '@fibo-ui/cdk';\nimport {safeProp} from '@fibo-ui/cdk';\nimport {LucideAngularModule} from 'lucide-angular';\n\n@Component({\n selector: 'fibo-select',\n standalone: true,\n imports: [\n CommonModule,\n FormsModule,\n Popover,\n SingleSelectionModel,\n FormField,\n PopoverTriggerClick,\n DataList,\n ListItem,\n FormFieldErrors,\n LucideAngularModule,\n PortalTemplateDirective,\n ],\n templateUrl: './select.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [\n {\n directive: FormFieldControl,\n inputs: ['label', 'placeholder','fixedLabel', 'appearance', 'controlClass', 'resetCallback'],\n }\n ],\n})\nexport class Select {\n formFieldControl = inject>(FormFieldControl)\n value = this.formFieldControl.cva.value;\n disabled = this.formFieldControl.cva.disabled\n items = input([]);\n itemTemplate = input | undefined>(undefined);\n\n popoverFullWidth = input(true);\n popoverClass = input('');\n\n valueProp = input('value' as keyof T);\n labelProp = input('label' as keyof T);\n\n currentSelectedItem = computed(() => {\n const currentValue = this.value();\n return this.items().find(item => this.getValue(item) === currentValue);\n });\n\n getValue(item: T): string | number {\n return safeProp(item, this.valueProp());\n }\n\n getLabel(item: T): string {\n return String(safeProp(item, this.labelProp()));\n }\n}\n","\n\n @if(currentSelectedItem()) {\n @if (itemTemplate(); as template) {\n \n } @else {\n \n {{ getLabel(currentSelectedItem()!) }}\n \n }\n }\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n
\n @for (item of items(); track getValue(item)) {\n \n @if (itemTemplate(); as template) {\n \n } @else {\n {{ getLabel(item) }}\n }\n \n }\n
\n\n
\n\n","import {ChangeDetectionStrategy, Component, inject, input, ViewEncapsulation} from '@angular/core';\nimport {PrimitiveValueAccessor} from '@fibo-ui/cdk';\n\n@Component({\n selector: 'fibo-checkbox',\n templateUrl: './checkbox.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [\n {\n directive: PrimitiveValueAccessor,\n inputs: ['value: checked', 'disabled'],\n outputs: ['valueChange: checkedChange'],\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.aria-selected]': 'checked()',\n 'class': 'group flex items-center'\n }\n})\nexport class Checkbox {\n\n indeterminate = input(false);\n readonly = input(false);\n\n protected cva = inject>(PrimitiveValueAccessor);\n\n checked = this.cva.value;\n\n onInputChange(event: Event) {\n if (this.cva.disabled()) return;\n const inputEl = event.target as HTMLInputElement;\n this.checked.set(!!inputEl.checked);\n }\n\n}\n","\n","import {Component, inject, input, TemplateRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {DataList, MultipleSelectionModel, ListItem, SELECTION_MODEL, SelectionModel, safeProp} from '@fibo-ui/cdk';\nimport {Checkbox} from '../../checkbox/checkbox';\n\n@Component({\n selector: 'fibo-listbox',\n imports: [\n CommonModule,\n Checkbox,\n ListItem\n ],\n hostDirectives: [{\n directive: DataList,\n inputs: ['disabled','popoverTrigger'],\n outputs: ['optionTriggered'],\n }],\n templateUrl: './listbox.html',\n host: {\n 'class': 'max-h-70 overflow-y-auto py-1 px-1',\n 'role': 'listbox',\n 'tabindex': '-1'\n },\n})\nexport class Listbox {\n selectionModel = inject(SELECTION_MODEL) as SelectionModel;\n disabled = input(false);\n items = input([]);\n itemTemplate = input | undefined>(undefined);\n\n valueProp = input('value' as keyof T);\n labelProp = input('label' as keyof T);\n\n get isMultiple() {\n return this.selectionModel instanceof MultipleSelectionModel;\n }\n\n getValue(item: T): string | number {\n return safeProp(item, this.valueProp());\n }\n\n getLabel(item: T): string {\n return String(safeProp(item, this.labelProp()));\n }\n\n isSelected(item: T): boolean {\n return this.selectionModel.isSelected(item as any);\n }\n}\n"," @if (items().length === 0) {\n
No items found
\n }\n @for (item of items(); track getValue(item)) {\n \n @if (isMultiple) {\n \n \n }\n @if (itemTemplate(); as template) {\n \n } @else {\n {{ getLabel(item) }}\n }\n \n }\n","import {Component, inject, input, TemplateRef, viewChild,} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FormsModule} from \"@angular/forms\";\nimport {IsEmptyPipe, MultipleSelectionModel, Popover,PopoverTriggerClick, PortalTemplateDirective} from '@fibo-ui/cdk';\nimport {FormFieldPopoverTrigger} from '@fibo-ui/cdk';\nimport {Listbox} from '../data-list/listbox/listbox';\nimport {FormField} from '../form/form-field/form-field';\nimport {FormFieldControl} from '@fibo-ui/cdk';\nimport {safeProp} from '@fibo-ui/cdk';\nimport {LucideAngularModule} from 'lucide-angular';\nimport {FormFieldErrors} from '@fibo-ui/cdk';\n\n@Component({\n selector: 'fibo-multiple-select',\n standalone: true,\n imports: [\n CommonModule,\n FormsModule,\n IsEmptyPipe,\n Listbox,\n FormField,\n PopoverTriggerClick,\n LucideAngularModule,\n FormFieldErrors,\n Popover,\n MultipleSelectionModel,\n PortalTemplateDirective,\n ],\n templateUrl: './multiple-select.html',\n hostDirectives: [\n {\n directive: FormFieldControl,\n inputs: ['label', 'placeholder','fixedLabel', 'appearance', 'controlClass', 'resetCallback'],\n }\n ],\n})\nexport class MultipleSelect {\n formFieldControl = inject>(FormFieldControl)\n value = this.formFieldControl.cva.value;\n disabled = this.formFieldControl.cva.disabled;\n items = input([]);\n itemTemplate = input | undefined>(undefined);\n selectedItemTemplate = input | undefined>(undefined);\n\n popoverFullWidth = input(true);\n popoverClass = input('');\n\n valueProp = input('value' as keyof T);\n labelProp = input('label' as keyof T);\n\n removeValue(value: unknown) {\n const currentValue = this.value();\n if(! currentValue) return;\n this.value.set( currentValue.filter((v: unknown) => v !== value));\n }\n trigger = viewChild('trigger')\n\n selectedItem(value: string | number): T | undefined {\n return this.items().find(item => this.getValue(item) === value);\n }\n\n getValue(item: T): string | number {\n return safeProp(item, this.valueProp());\n }\n\n getLabel(item: T): string {\n return String(safeProp(item, this.labelProp()));\n }\n}\n","@let values = value() || [];\n@let disabled = formFieldControl.cva.disabled();\n@let empty = (values | isEmpty);\n\n\n \n @for (value of values; track value) {\n \n }\n \n }\n \n \n\n\n\n\n @if (items().length) {\n \n }\n\n","import { Directive, ElementRef, effect, inject, input, output, signal } from '@angular/core';\nimport {FormFieldContent} from '@fibo-ui/cdk';\nimport {MultipleSelect} from './multiple-select';\n\n@Directive({\n selector: 'input[fiboMultipleSelectInput]',\n standalone: true,\n hostDirectives: [FormFieldContent],\n host: {\n class: 'fibo-input flex-1 w-full min-w-30 outline-0 appearance-none text-sm',\n '[placeholder]': 'placeholder()',\n '(focusin)': 'select.trigger()?.open()',\n '(keydown.backspace)': 'removeLastValue()',\n '(input)': 'onInput($event)',\n '[disabled]': 'select.disabled()'\n }\n})\nexport class MultipleSelectInput {\n\n select = inject(MultipleSelect);\n\n private readonly elementRef = inject(ElementRef);\n\n placeholder = input('');\n\n valueChange = output();\n\n constructor() {\n\n // this.select.control.valueChanges.subscribe(() => {\n // const inputElement = this.elementRef.nativeElement as HTMLInputElement;\n // inputElement.value = '';\n // this.valueChange.emit('');\n // });\n\n // effect(() => {\n // const dataList = this.select.dataList()\n // if(dataList) {\n // dataList.optionTriggered.subscribe(() => this.elementRef.nativeElement.focus())\n // }\n // });\n }\n\n onInput(event: Event) {\n const inputElement = event.target as HTMLInputElement;\n this.valueChange.emit(inputElement.value);\n }\n\n removeLastValue() {\n const inputElement = this.elementRef.nativeElement as HTMLInputElement;\n // Only remove last value if input is empty\n if (!inputElement.value) {\n const value = this.select.value();\n if (Array.isArray(value) && value.length > 0) {\n this.select.value.set(value.slice(0, -1));\n }\n }\n }\n}\n","import {ElementRef, Injectable, signal, TemplateRef} from '@angular/core';\nimport {Subject, takeUntil, timer} from 'rxjs';\nimport {Placement} from '@floating-ui/dom';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class TooltipService {\n\n tooltipRef = signal<{\n content:string | TemplateRef,\n referenceElement:HTMLElement,\n placement:Placement\n }|null>(null)\n\n\n openDelay = signal(100);\n closeDelay = signal(100);\n\n private _interactionRequest = new Subject<'open' | 'close'>();\n\n open(content: string | TemplateRef, referenceElement: HTMLElement, placement:Placement) {\n this._interactionRequest.next('open');\n timer(this.openDelay())\n .pipe(takeUntil(this._interactionRequest))\n .subscribe(() => {\n this.tooltipRef.set({\n content,\n referenceElement,\n placement\n })\n });\n }\n\n keepOpen() {\n this._interactionRequest.next('open');\n }\n\n close() {\n this._interactionRequest.next('close');\n timer(this.closeDelay())\n .pipe(takeUntil(this._interactionRequest))\n .subscribe(() => {\n this.tooltipRef.set(null);\n });\n }\n\n}\n","import { Component, computed, effect, ElementRef, inject, input, TemplateRef, viewChild } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {PopoverArrow, PopoverPosition} from '@fibo-ui/cdk';\nimport {TooltipService} from './tooltip-service';\nimport { CommonModule } from '@angular/common';\n@Component({\n selector: 'fibo-tooltip-container',\n standalone: true,\n imports: [\n NgTemplateOutlet,\n PopoverPosition,\n PopoverArrow,\n CommonModule\n ],\n templateUrl: './tooltip-container.html',\n})\nexport class TooltipContainer {\n tooltipService = inject(TooltipService);\n\n content = computed(() =>\n typeof this.tooltipService.tooltipRef()?.content === 'string'\n ? (this.tooltipService.tooltipRef()?.content as string)\n : null\n );\n templateRef = computed(() =>\n this.tooltipService.tooltipRef()?.content instanceof TemplateRef\n ? (this.tooltipService.tooltipRef()?.content as TemplateRef)\n : null\n );\n\n}\n","@let tooltipRef = tooltipService.tooltipRef();\n@if (tooltipRef ) {\n
\n\n
\n
\n @if ( content() ) {\n {{ tooltipRef.content }}\n } @else if (templateRef()) {\n \n }\n\n
\n\n}\n","import {Directive, ElementRef, inject, input, TemplateRef} from '@angular/core';\nimport {TooltipService} from './tooltip-service';\nimport {Placement} from '@floating-ui/dom';\n\n\n@Directive({\n selector: '[fiboTooltip]',\n standalone: true,\n host: {\n '(mouseenter)': 'open()',\n '(mouseleave)': 'close()',\n },\n})\nexport class Tooltip {\n\n element = inject(ElementRef).nativeElement;\n\n tooltipService = inject(TooltipService)\n\n content = input.required>({ alias: 'fiboTooltip' });\n\n placement = input('top');\n\n open() {\n this.tooltipService.open(this.content(), this.element,this.placement())\n }\n\n close() {\n this.tooltipService.close()\n }\n}\n","import {Directive, inject, signal} from '@angular/core';\nimport {DataList} from '@fibo-ui/cdk';\nimport {PopoverSubmenuTrigger} from './popover-submenu-trigger';\nimport {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';\nimport {debounceTime, filter} from 'rxjs';\n\n@Directive({\n selector: '[fiboMenuPanel]',\n hostDirectives: [\n {\n directive: DataList,\n inputs: ['popoverTrigger']\n }\n ]\n})\nexport class MenuPanel {\n dataList = inject(DataList);\n popoverSubmenuItems = signal([]);\n\n constructor() {\n // close popup submenus if active menu item changed\n toObservable(this.dataList.activeOption)\n .pipe(\n filter(activeItem => !!activeItem),\n takeUntilDestroyed()\n ).subscribe((activeItem) => {\n this.popoverSubmenuItems()\n .filter(submenuItem => submenuItem.dataListItem !== activeItem)\n .forEach(item => {\n item.popoverTrigger.close()\n });\n })\n\n // on activate option - open submenu if it is the same list-item\n toObservable(this.dataList.activeOption)\n .pipe(\n filter(activeItem => !!activeItem),\n debounceTime(300),\n takeUntilDestroyed()\n ).subscribe((activeItem) => {\n this.popoverSubmenuItems()\n .filter(submenuItem => submenuItem.dataListItem !== activeItem)\n .forEach(item => {\n item.popoverTrigger.close()\n });\n this.popoverSubmenuItems()\n .find(submenuItem => submenuItem.dataListItem === activeItem)?.popoverTrigger.open()\n })\n }\n\n}\n","import {Directive, inject, OnDestroy, OnInit} from '@angular/core';\nimport {ListItem, PopoverTrigger} from '@fibo-ui/cdk';\nimport {MenuPanel} from './menu-panel';\n\n// @ts-ignore\n@Directive({\n selector: '[fiboSubmenuTrigger]',\n hostDirectives: [\n {\n directive: ListItem,\n inputs: ['disabled']\n },\n PopoverTrigger,\n ],\n host: {\n '(keydown.enter)': 'popoverTrigger.open()',\n '(keydown.escape)': 'popoverTrigger.close()',\n\n '(keydown.arrowright)': 'popoverTrigger.popover()?.dataList?.navigateNext($event)',\n '(click)': 'popoverTrigger.open()'\n }\n})\nexport class PopoverSubmenuTrigger implements OnInit, OnDestroy {\n\n popoverTrigger = inject(PopoverTrigger);\n dataListItem = inject(ListItem);\n menuPanel = inject(MenuPanel);\n\n ngOnDestroy(): void {\n const currentItems = this.menuPanel.popoverSubmenuItems();\n this.menuPanel.popoverSubmenuItems.set(currentItems.filter(item => item !== this));\n }\n\n ngOnInit(): void {\n const currentItems = this.menuPanel.popoverSubmenuItems();\n if (!currentItems.includes(this)) {\n this.menuPanel.popoverSubmenuItems.set([...currentItems, this]);\n }\n }\n\n}\n","import {Component, computed, inject, input, output, TemplateRef, viewChildren} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {Popover, DataList, ListItem} from '@fibo-ui/cdk';\nimport {RouterLink} from '@angular/router';\nimport {PopoverSubmenuTrigger} from './popover-submenu-trigger';\nimport {MenuPanel} from './menu-panel';\nimport {MenuItemType} from './menu-item.type';\nimport {LucideAngularModule} from 'lucide-angular';\n\n\n@Component({\n selector: 'fibo-menu',\n standalone: true,\n hostDirectives: [\n MenuPanel,\n {\n directive: Popover,\n inputs: ['popoverTrigger']\n }\n ],\n host: {\n 'class': 'p-1 min-w-[180px] group rounded-md fibo-popover',\n '(keydown.arrowleft)': 'focusToTrigger($event)'\n },\n imports: [CommonModule, ListItem, PopoverSubmenuTrigger, RouterLink, LucideAngularModule],\n templateUrl: './popover-menu.html',\n})\nexport class PopoverMenu {\n items = input();\n menuContent = input>()\n dataList = inject(DataList);\n popover = inject(Popover);\n\n itemsHaveIcons = computed(() => this.items()?.some((item) => !!item.icon));\n\n submenuItems = viewChildren(PopoverSubmenuTrigger);\n\n closeParent = output()\n\n closeMenuWithParent() {\n this.popover.close();\n this.closeParent.emit()\n }\n\n\n focusToTrigger(event: Event) {\n if (this.popover.popoverTrigger().isListItem) {\n this.popover.popoverTrigger().element.focus();\n this.dataList.resetActiveOption();\n event.stopPropagation();\n this.submenuItems()\n .forEach(item => {\n item.popoverTrigger.close()\n });\n\n }\n }\n}\n","@for (item of items(); track idx ; let idx = $index) {\n @if (item.children || item.content) {\n \n @if (menuItemTrigger.isOpen()) {\n \n }\n } @else {\n @if(item.url) {\n \n {{ item.label }}\n \n } @else if(item.callback) {\n \n {{ item.label }}\n \n }\n }\n}\n\n@if(menuContent()) {\n \n}\n","import {Directive, inject, input} from '@angular/core';\nimport {PopoverMenu} from './popover-menu';\nimport {ListItem} from '@fibo-ui/cdk';\n\n\n@Directive({\n selector: '[fiboMenuItem]',\n standalone: true,\n hostDirectives: [{\n directive: ListItem,\n inputs: ['disabled'],\n outputs: ['itemTrigger']\n }],\n host: {\n 'class': 'menu-item',\n '(itemTrigger)': 'menu.closeMenuWithParent()'\n }\n})\nexport class MenuItem {\n menu = inject(PopoverMenu)\n}\n","import {DestroyRef, Directive, inject, input, model, OnInit} from '@angular/core';\nimport {NavigationEnd, Router} from '@angular/router';\nimport {ListItem} from '@fibo-ui/cdk';\nimport {MenuItemType} from './menu-item.type';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\n\n@Directive({\n selector: '[fiboCollapseSubmenuItem]',\n exportAs: 'fiboCollapseSubmenuItem',\n hostDirectives: [\n {\n directive: ListItem,\n inputs: ['disabled'],\n },\n ],\n host: {\n '[attr.aria-expanded]': 'expanded() || null',\n }\n})\nexport class CollapseSubmenuItem implements OnInit {\n router = inject(Router);\n items = input([]);\n expanded = model(false);\n toggle = () => this.expanded.set(!this.expanded());\n destroyRef = inject(DestroyRef)\n\n\n ngOnInit(): void {\n this.router.events\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(event => {\n if (event instanceof NavigationEnd) {\n this.updateActiveStates()\n }\n });\n this.updateActiveStates()\n }\n\n\n private updateActiveStates() {\n if (this.items().some(item => this.hasActiveUrl(item))) {\n this.expanded.set(true);\n }\n }\n\n private hasActiveUrl(item: MenuItemType): boolean {\n if (item.url && this.router.isActive(item.url, {\n paths: 'exact', // Use 'subset' for partial matches\n queryParams: 'ignored',\n fragment: 'ignored',\n matrixParams: 'ignored'\n })) {\n return true;\n }\n if (item.children) {\n return item.children.some(child => this.hasActiveUrl(child));\n }\n return false;\n };\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'fibo-side-menu-chain',\n standalone: true,\n imports: [CommonModule],\n template: `\n
\n
\n
\n
\n @let showCollapseButton = collapsable() && isGroup();\n @if (showCollapseButton) {\n
\n @if (collapsed()) {\n –\n } @else {\n +\n }\n
\n }\n\n
\n
\n
\n `,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SideMenuChain {\n\n index = input(0);\n isGroup = input(false);\n\n isActive = input(false);\n\n collapsable = input(false);\n collapsed = input(false);\n totalItems = input(0);\n}\n","import {ChangeDetectionStrategy, Component, computed, DestroyRef, inject, input, OnInit, TemplateRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {NavigationEnd, Router, RouterLink} from '@angular/router';\nimport {MenuItemType} from './menu-item.type';\nimport {ListItem, SELECTION_MODEL, SelectionModel} from '@fibo-ui/cdk';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {LucideAngularModule} from 'lucide-angular';\nimport {CollapseSubmenuItem} from './collapse-submenu-item';\nimport {SideMenuChain} from './side-menu-chain';\n\n@Component({\n selector: 'fibo-side-menu',\n standalone: true,\n host: {\n 'class': 'flex flex-col',\n },\n imports: [CommonModule, RouterLink, ListItem, LucideAngularModule, CollapseSubmenuItem, SideMenuChain],\n templateUrl: './side-menu.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SideMenu implements OnInit {\n router = inject(Router);\n destroyRef = inject(DestroyRef)\n items = input([]);\n menuContent = input>()\n level = input(0);\n collapsable = input(true);\n removeChainFromLevel = input(null);\n selectionModel = inject>(SELECTION_MODEL, {optional: true})\n\n ngOnInit(): void {\n this.router.events\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(event => {\n if (event instanceof NavigationEnd) {\n this.updateActiveStates()\n }\n });\n this.updateActiveStates()\n }\n\n\n private updateActiveStates() {\n this.items().forEach(item => {\n const activeUrlItem = this.findActiveUrlItem(item);\n if (activeUrlItem && this.selectionModel) {\n console.log(activeUrlItem)\n this.selectionModel.select(activeUrlItem);\n }\n });\n }\n\n private findActiveUrlItem(item: MenuItemType): MenuItemType | undefined {\n if (item.url && this.router.isActive(item.url, {\n paths: 'exact', // Use 'subset' for partial matches\n queryParams: 'ignored',\n fragment: 'ignored',\n matrixParams: 'ignored'\n })) {\n return item;\n }\n if (item.children) {\n // @ts-ignore\n item.children.forEach(item => {\n const activeUrlItem = this.findActiveUrlItem(item);\n if (activeUrlItem) {\n return activeUrlItem;\n }\n });\n }\n return undefined;\n };\n\n}\n","
    \n @let showChain= removeChainFromLevel() === null || removeChainFromLevel() !== level();\n @let totalItems= items().length;\n @let canCollapse = collapsable();\n @for (item of items(); track idx; let idx = $index) {\n\n @if(item.disabled) {\n
  • \n\n @if (showChain) {\n \n }\n
    \n {{ item.label }}\n
    \n
    • \n } @else if (item.children) {\n\n @if(canCollapse) {\n
  • \n @if (showChain) {\n \n }\n\n
    \n \n @if(collapseSubmenuItem.expanded()) {\n
    \n \n
    \n }\n
    \n
    • \n\n } @else {\n \n
  • \n @if (showChain) {\n \n }\n
    \n {{ item.label }} \n
    \n \n
    \n
    \n
    • \n\n }\n\n } @else {\n @if (item.url) {\n
  • \n \n @if (showChain) {\n \n }\n
    \n {{ item.label }}\n
    \n     \n
    • \n\n } @else if (item.callback) {\n
  • \n \n
    • \n\n } @else if (item.value !== undefined) {\n
  • \n \n
    • \n }\n }\n }\n
\n\n@if (menuContent()) {\n \n}\n\n","import {computed, Injectable, linkedSignal, signal, TemplateRef} from '@angular/core';\n\n\nexport type ConfirmationContent = {\n title: string;\n message: string;\n confirmLabel?: string;\n cancelLabel?: string;\n} | TemplateRef\n\nexport interface ConfirmationConfig {\n content?: ConfirmationContent | null;\n onConfirm: () => void;\n}\n\n@Injectable({\n providedIn: 'root'\n})\nexport class ConfirmationService {\n\n config = signal(null);\n isOpen = computed(() => !!this.config());\n\n isVisible = linkedSignal({\n source: this.isOpen,\n computation: (isOpen) => isOpen\n })\n\n open(config: ConfirmationConfig | null = null) {\n this.config.set(config);\n if(config) {\n this.config.set(config);\n }\n }\n\n confirm() {\n this.config()?.onConfirm();\n this.close();\n }\n\n cancel() {\n this.close();\n }\n\n close() {\n this.isVisible.set(false);\n setTimeout(\n () => {\n this.config.set(null);\n }, 300);\n }\n}\n","import {Component, computed, inject, TemplateRef, viewChild} from '@angular/core';\nimport {CommonModule, NgTemplateOutlet} from '@angular/common';\nimport {ConfirmationService} from './confirmation-service';\nimport {LucideAngularModule} from 'lucide-angular';\n\n\nconst DEFAULT_CONFIG = {\n title: 'Confirmation',\n message: 'Do you really want to perform action?',\n cancelLabel: 'Cancel',\n confirmLabel: 'Confirm'\n} as const;\n\n@Component({\n selector: 'fibo-confirmation',\n standalone: true,\n imports: [NgTemplateOutlet, CommonModule, LucideAngularModule],\n templateUrl: './confirmation.html',\n})\nexport class FiboConfirmation {\n confirmation = inject(ConfirmationService);\n defaultContent = viewChild.required>('defaultContent');\n\n content = computed(() => {\n const config = this.confirmation.config();\n if (!config) return DEFAULT_CONFIG;\n\n return config.content instanceof TemplateRef\n ? DEFAULT_CONFIG\n : {...DEFAULT_CONFIG, ...config};\n });\n\n template = computed(() => {\n const config = this.confirmation.config();\n return config?.content instanceof TemplateRef\n ? config.content\n : this.defaultContent();\n });\n}\n\n","@if (confirmation.isOpen()) {\n
\n @if (confirmation.isVisible()) {\n
\n }\n\n
\n
\n @if (confirmation.isVisible()) {\n
\n \n
\n }\n
\n
\n
\n}\n\n\n @let data = content();\n \n
\n
\n \n \n \n
\n
\n

{{ data.title }}

\n
\n

{{ data.message }}

\n
\n
\n
\n
\n \n \n
\n\n","import {Directive, ElementRef, inject, input, model, output, signal, TemplateRef} from '@angular/core';\nimport {ConfirmationConfig, ConfirmationContent, ConfirmationService} from './confirmation-service';\nimport {DialogConfig} from '../dialog/modal-state';\n\n@Directive({\n selector: '[confirm]',\n exportAs: 'FiboConfirmationTrigger',\n standalone: true,\n host: {\n '(click)': 'open()'\n }\n})\nexport class ConfirmationTrigger {\n confirmation = inject(ConfirmationService);\n content = input(null,{alias: 'fiboConfirmationContent'});\n confirm = output()\n\n open() {\n this.confirmation.open({\n content: this.content(),\n onConfirm: ()=> {this.confirm.emit()}\n });\n }\n}\n","import {Injectable, signal, TemplateRef} from '@angular/core';\n\nexport type NotificationType = 'info' | 'success' | 'warning' | 'danger';\nexport interface NotificationConfig {\n type?: NotificationType;\n message?: string;\n title?: string;\n template?: TemplateRef;\n duration?: number; // Duration in seconds\n id?: symbol; // Internal ID for tracking timers\n}\n\n@Injectable({\n providedIn: 'root'\n})\nexport class Notifier {\n private readonly DEFAULT_DURATION = 5; // 5 seconds\n notifications = signal([]);\n private readonly timers = new Map>();\n\n push(config: NotificationConfig) {\n const id = Symbol('notification-id');\n const duration = config.duration ?? this.DEFAULT_DURATION;\n const notification: NotificationConfig = {\n ...config,\n duration,\n id\n };\n\n this.notifications.update(value => [...value, notification]);\n\n if (duration > 0) {\n const timerId = setTimeout(() => {\n this.removeNotification(notification);\n }, duration * 1000); // Convert seconds to milliseconds\n \n this.timers.set(id, timerId);\n }\n }\n\n removeNotification(notification: NotificationConfig) {\n // Clear timer if exists to prevent memory leaks\n if (notification.id && this.timers.has(notification.id)) {\n clearTimeout(this.timers.get(notification.id)!);\n this.timers.delete(notification.id);\n }\n\n this.notifications.update(notifications =>\n notifications.filter(n => n !== notification)\n );\n }\n\n success(message: string, duration?: number) {\n this.push({\n type: 'success',\n title: 'Success',\n message,\n duration: duration ?? this.DEFAULT_DURATION\n });\n }\n\n error(message: string, duration?: number) {\n this.push({\n type: 'danger',\n title: 'Error',\n message,\n duration\n });\n }\n\n warning(message: string, duration?: number) {\n this.push({\n type: 'warning',\n title: 'Warning',\n message,\n duration\n });\n }\n\n info(message: string, duration?: number) {\n this.push({\n type: 'info',\n title: 'Information',\n message,\n duration\n });\n }\n}\n","import {Component, inject, ChangeDetectionStrategy} from '@angular/core';\nimport {Notifier} from './notifier';\nimport {CommonModule, NgTemplateOutlet} from '@angular/common';\nimport {NotificationConfig} from './notifier';\nimport {LucideAngularModule} from 'lucide-angular';\n@Component({\n selector: 'fibo-notification',\n standalone: true,\n imports: [CommonModule, NgTemplateOutlet, LucideAngularModule],\n templateUrl: './notification.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'aria-live': 'assertive',\n 'class': 'pointer-events-none fixed inset-0 flex items-end sm:items-start '\n }\n})\nexport class Notification {\n\n notifications = inject(Notifier).notifications;\n\n removeNotification(notification: NotificationConfig) {\n this.notifications.update(notifications =>\n notifications.filter(n => n !== notification)\n );\n }\n\n}\n","
\n\n @for (notification of notifications(); track notification) {\n
\n @if (notification.template) {\n \n } @else {\n
\n
\n
\n @switch (notification.type) {\n @case ('success') {\n \n \n \n }\n @case ('warning') {\n \n \n \n }\n @case ('danger') {\n \n \n \n }\n @default {\n \n \n \n }\n }\n
\n
\n @if (notification.title) {\n

{{ notification.title }}

\n }\n @if (notification.message) {\n

{{ notification.message }}

\n }\n
\n
\n \n
\n
\n
\n }\n
\n }\n
\n","import { computed, Signal, signal, WritableSignal, effect, linkedSignal } from \"@angular/core\";\nimport { parse, isValid, isEqual, format, addMonths, subMonths, addYears, subYears, getYear, getMonth, startOfMonth, endOfMonth, startOfWeek, addDays } from \"date-fns\";\n\nexport class ActiveMonth {\n private readonly dateFormat = 'yyyy-MM-dd';\n\n constructor(private _changes: Signal) {}\n\n year = linkedSignal(() => {\n const changes = this._changes();\n if (!changes) return getYear(new Date());\n\n const parsedDate = parse(changes, this.dateFormat, new Date());\n return isValid(parsedDate) ? getYear(parsedDate) : getYear(new Date());\n });\n\n month = linkedSignal(() => {\n const changes = this._changes();\n if (!changes) return getMonth(new Date()) + 1;\n\n const parsedDate = parse(changes, this.dateFormat, new Date());\n return isValid(parsedDate) ? getMonth(parsedDate) + 1 : getMonth(new Date()) + 1;\n });\n\n monthName = computed(() => {\n const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n const monthIndex = this.month() - 1;\n return monthNames[monthIndex];\n });\n\n weeks: Signal = computed(() => {\n const year = this.year();\n const month = this.month();\n const firstDayOfMonth = new Date(year, month - 1, 1);\n const lastDayOfMonth = endOfMonth(firstDayOfMonth);\n\n const weeks: string[][] = [];\n let currentWeek: string[] = [];\n\n const currentDate = startOfWeek(firstDayOfMonth);\n\n while (currentDate <= lastDayOfMonth || currentDate.getDay() !== 0) {\n if (currentWeek.length === 7) {\n weeks.push(currentWeek);\n currentWeek = [];\n }\n\n currentWeek.push(format(currentDate, this.dateFormat));\n currentDate.setDate(currentDate.getDate() + 1);\n }\n\n if (currentWeek.length > 0) {\n weeks.push(currentWeek);\n }\n\n return weeks;\n });\n\n setFromDate(date: string): void {\n if (typeof date === 'string' && isValid(parse(date, this.dateFormat, new Date()))) {\n const parsedDate = parse(date, this.dateFormat, new Date());\n this.year.set(getYear(parsedDate));\n this.month.set(getMonth(parsedDate) + 1);\n }\n }\n\n setMonth(month: number): void {\n this.month.set(month);\n }\n\n setNextMonth(): void {\n const currentMonth = this.month();\n const currentYear = this.year();\n const newDate = addMonths(new Date(currentYear, currentMonth - 1, 1), 1);\n this.year.set(getYear(newDate));\n this.month.set(getMonth(newDate) + 1);\n }\n\n setPreviousMonth(): void {\n const currentMonth = this.month();\n const currentYear = this.year();\n const newDate = subMonths(new Date(currentYear, currentMonth - 1, 1), 1);\n this.year.set(getYear(newDate));\n this.month.set(getMonth(newDate) + 1);\n }\n\n setYear(fullYear: number): void {\n this.year.set(fullYear);\n }\n\n setNextYear(): void {\n const currentMonth = this.month();\n const currentYear = this.year();\n const newDate = addYears(new Date(currentYear, currentMonth - 1, 1), 1);\n this.year.set(getYear(newDate));\n this.month.set(getMonth(newDate) + 1);\n }\n\n setPreviousYear(): void {\n const currentMonth = this.month();\n const currentYear = this.year();\n const newDate = subYears(new Date(currentYear, currentMonth - 1, 1), 1);\n this.year.set(getYear(newDate));\n this.month.set(getMonth(newDate) + 1);\n }\n\n hasTheSameMonthAs(date: string): boolean {\n const compareDate = parse(date, this.dateFormat, new Date());\n return this.month() === getMonth(compareDate) + 1 && this.year() === getYear(compareDate);\n }\n}\n\n","import { Component, computed, inject, input, model, output, signal } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {DataList, ListItem, SELECTION_MODEL} from '@fibo-ui/cdk';\nimport {ActiveMonth} from './active-date.state';\nimport {parse} from 'date-fns';\nimport { LucideAngularModule } from 'lucide-angular';\n\n@Component({\n selector: 'fibo-calendar',\n standalone: true,\n imports: [CommonModule, ListItem, LucideAngularModule],\n hostDirectives: [\n {\n directive: DataList,\n outputs: ['optionTriggered']\n }\n ],\n styles: `\n button[aria-selected=\"true\"] {\n border-top-left-radius: 0.375rem;\n border-bottom-left-radius: 0.375rem;\n }\n button[aria-selected=\"true\"] ~ button[aria-selected=\"true\"] {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n button[aria-selected=\"true\"]:not(:has(~ button[aria-selected=\"true\"])) {\n border-top-right-radius: 0.375rem;\n border-bottom-right-radius: 0.375rem;\n }\n\n `,\n template: `\n
\n
\n
\n \n \n\n
\n {{ state.monthName() }} {{ state.year() }}\n
\n\n \n \n
\n
\n
S
\n
M
\n
T
\n
W
\n
T
\n
F
\n
S
\n
\n
\n\n
\n @for (week of state.weeks(); track $index) {\n @for (date of week; track date + $index) {\n \n }\n }\n
\n
\n `\n})\nexport class Calendar {\n private readonly dateFormat = 'yyyy-MM-dd'\n minDate = input(null)\n maxDate = input(null)\n\n selectionModel = inject(SELECTION_MODEL,{self:true});\n\n state = new ActiveMonth(this.selectionModel.lastSelection);\n\n dayLabel(date: string) {\n return parse(date, this.dateFormat, new Date()).getDate();\n }\n}\n","import {\n Directive,\n Signal,\n signal,\n WritableSignal,\n InjectionToken,\n effect, model, linkedSignal\n} from '@angular/core';\nimport {parse, isValid, isEqual} from \"date-fns\";\nimport {SELECTION_MODEL, SelectionModel} from '@fibo-ui/cdk';\n\n@Directive({\n selector: '[fiboCalendarDateSelectionModel]',\n standalone: true,\n providers: [\n {provide: SELECTION_MODEL, useExisting: CalendarDateSelectionModel}\n ]\n})\nexport class CalendarDateSelectionModel implements SelectionModel {\n private readonly dateFormat = 'yyyy-MM-dd';\n readonly valueSignal = model(null, {alias: 'fiboCalendarDateSelectionModel'});\n\n get value(): Signal {\n return this.valueSignal.asReadonly();\n }\n\n select(value: string) {\n this.valueSignal.set(value);\n this.lastSelection.set(value);\n }\n\n isSelected(value: string): boolean {\n const current = this.valueSignal();\n if (!current) return false;\n\n const date = parse(value, this.dateFormat, new Date());\n const selectedDate = parse(current, this.dateFormat, new Date());\n\n return isEqual(date, selectedDate);\n }\n\n lastSelection = linkedSignal(() => this.value())\n}\n","import {\n Directive,\n Signal,\n signal,\n WritableSignal,\n InjectionToken,\n effect, model, linkedSignal\n} from '@angular/core';\nimport {parse, isValid, isEqual, isAfter, isBefore, format} from \"date-fns\";\nimport {SELECTION_MODEL, SelectionModel} from '@fibo-ui/cdk';\n\nexport interface DateRange {\n startDate: string | null;\n endDate: string | null;\n}\n\n@Directive({\n selector: '[fiboCalendarDateRangeSelectionModel]',\n standalone: true,\n providers: [\n {provide: SELECTION_MODEL, useExisting: CalendarDateRangeSelectionModel}\n ]\n})\nexport class CalendarDateRangeSelectionModel implements SelectionModel {\n private readonly dateFormat = 'yyyy-MM-dd';\n readonly valueSignal = model({\n startDate: null,\n endDate: null\n }, {alias: 'fiboCalendarDateRangeSelectionModel'});\n\n get value(): Signal {\n return this.valueSignal.asReadonly();\n }\n\n select(value: string) {\n const currentValue = this.valueSignal();\n const startDate = currentValue.startDate;\n const endDate = currentValue.endDate;\n\n if (startDate && (endDate === null || endDate === undefined) && this.firstIsMoreOrEqualThenSecond(value, startDate)) {\n this.valueSignal.set({startDate, endDate: value});\n } else if (startDate && (endDate === null || endDate === undefined) && this.firstIsMoreOrEqualThenSecond(startDate, value)) {\n this.valueSignal.set({startDate: value, endDate});\n } else {\n this.valueSignal.set({startDate: value, endDate: null});\n }\n }\n\n isSelected(value: string): boolean {\n const current = this.valueSignal();\n if (!current.startDate) return false;\n\n const date = parse(value, this.dateFormat, new Date());\n const startDate = parse(current.startDate, this.dateFormat, new Date());\n\n if (isEqual(date, startDate)) return true;\n\n if (current.endDate) {\n const endDate = parse(current.endDate, this.dateFormat, new Date());\n return isEqual(date, endDate) || (isAfter(date, startDate) && isBefore(date, endDate));\n }\n\n return false;\n }\n\n lastSelection = linkedSignal(() => {\n const selectionState = this.value();\n return selectionState.endDate || selectionState.startDate || format(new Date(), this.dateFormat);\n })\n\n private firstIsMoreOrEqualThenSecond(first: string, second: string): boolean {\n const firstDate = parse(first, this.dateFormat, new Date());\n const secondDate = parse(second, this.dateFormat, new Date());\n return isAfter(firstDate, secondDate) || isEqual(firstDate, secondDate);\n }\n}\n","import {Component, computed, ElementRef, inject, Input, input, model, output, signal, viewChild} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {FormControl, FormsModule, NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule} from '@angular/forms';\nimport { Calendar } from './calendar/calendar';\nimport {DataList, PopoverTriggerClick, Popover, PortalTemplateDirective} from '@fibo-ui/cdk';\nimport {PrimitiveValueAccessor} from '@fibo-ui/cdk';\nimport {CalendarDateSelectionModel} from './calendar/calendar-date-selection-model';\nimport {FormField} from '../form/form-field/form-field';\nimport {FormFieldControl} from '@fibo-ui/cdk';\nimport {FormFieldContent} from '@fibo-ui/cdk';\n\n@Component({\n selector: 'fibo-datepicker',\n standalone: true,\n imports: [\n CommonModule,\n FormsModule,\n Popover,\n Calendar,\n CalendarDateSelectionModel,\n ReactiveFormsModule,\n FormField,\n PopoverTriggerClick,\n FormFieldContent,\n PortalTemplateDirective\n ],\n hostDirectives: [\n {\n directive: FormFieldControl,\n inputs: ['label', ' placeholder','fixedLabel', 'appearance', 'controlClass', 'resetCallback' ],\n }\n ],\n templateUrl: './datepicker.html',\n})\nexport class Datepicker {\n formFieldControl = inject(FormFieldControl)\n value = this.formFieldControl.cva.value;\n minDate = input(null);\n maxDate = input(null);\n dateChange = output();\n placeholder = computed(() => this.formFieldControl.placeholder()?? 'YYYY-MM-DD');\n\n}\n","\n \n\n\n\n \n\n","import {Component, Input, output} from '@angular/core';\nimport {AbstractControl, FormControl, NgControl} from '@angular/forms';\nimport {IsEmptyPipe} from '@fibo-ui/cdk';\nimport {AsyncPipe, NgTemplateOutlet} from '@angular/common';\n\n@Component({\n selector: 'fibo-reset-control',\n imports: [\n IsEmptyPipe,\n AsyncPipe,\n NgTemplateOutlet\n ],\n templateUrl: './reset-control.html',\n host: {\n class: ''\n }\n})\nexport class ResetControl {\n @Input({ required: true }) control!: NgControl|null;\n\n reset = output()\n\n onReset() {\n this.control?.reset();\n this.reset.emit();\n this.control?.control?.markAsTouched();\n }\n}\n","@let value = control?.value;\n@let status = control?.statusChanges | async;\n@if ((value | isEmpty) || status === 'DISABLED' ) {\n \n} @else {\n