\n @if (closeButton()) {\n \n }\n \n @let h1 = title();\n @if (h1) {\n
{{ h1 }}
\n }\n \n \n \n}\n","import { ChangeDetectionStrategy, Component, OnDestroy, inject, output } from '@angular/core';\n\nimport { MagmaEllipsisButton } from './ellipsis-button.component';\n\nimport { MagmaClickEnterDirective } from '../../directives/click-enter.directive';\n\n@Component({\n selector: 'mg-ellipsis-item',\n templateUrl: './ellipsis-item.component.html',\n styleUrl: './ellipsis-item.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [MagmaClickEnterDirective],\n})\nexport class MagmaEllipsisItemComponent implements OnDestroy {\n host?: MagmaEllipsisButton;\n\n protected readonly clickEnter = inject(MagmaClickEnterDirective);\n\n protected readonly action = output();\n\n protected readonly sub = this.clickEnter.clickEnter.subscribe(() => {\n this.action.emit();\n this.host?.close();\n });\n\n ngOnDestroy(): void {\n this.sub?.unsubscribe();\n }\n}\n","\n","import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n AfterContentChecked,\n Component,\n ElementRef,\n OnDestroy,\n contentChildren,\n signal,\n viewChild,\n} from '@angular/core';\nimport { toObservable } from '@angular/core/rxjs-interop';\n\nimport { MagmaEllipsisItemComponent } from './ellipsis-item.component';\n\nimport { MagmaLimitFocusDirective } from '../../directives/limit-focus.directive';\n\n@Component({\n selector: 'mg-ellipsis-button, [mgEllipsisButton]',\n templateUrl: './ellipsis-button.component.html',\n styleUrl: './ellipsis-button.component.scss',\n host: {},\n imports: [CdkOverlayOrigin, CdkConnectedOverlay, MagmaLimitFocusDirective],\n})\nexport class MagmaEllipsisButton implements AfterContentChecked, OnDestroy {\n protected readonly element = viewChild>('element');\n protected readonly button = viewChild.required>('button');\n\n readonly inputs = contentChildren(MagmaEllipsisItemComponent);\n\n protected readonly isOpen = signal(false);\n protected readonly sub = toObservable(this.element).subscribe(() => {\n (this.element()?.nativeElement.querySelector('mg-ellipsis-item:not(.disabled)') as HTMLElement)?.focus();\n });\n\n open() {\n this.isOpen.set(true);\n }\n\n close() {\n this.isOpen.set(false);\n setTimeout(() => {\n this.button().nativeElement.focus();\n });\n }\n\n ngAfterContentChecked(): void {\n if (this.inputs()?.length) {\n this.inputs().forEach(e => {\n e.host ??= this;\n });\n }\n }\n\n ngOnDestroy(): void {\n this.sub.unsubscribe();\n }\n}\n","\n\n\n \n \n
\n\n","import { Directive, NgModule } from '@angular/core';\n\nimport { MagmaEllipsisButton } from './ellipsis-button.component';\nimport { MagmaEllipsisItemComponent } from './ellipsis-item.component';\n\n@Directive({ selector: 'mg-ellipsis-content' })\nexport class MagmaEllipsisContentDirective {}\n\nconst MagmaEllipsisButtonComponent = [MagmaEllipsisButton, MagmaEllipsisContentDirective, MagmaEllipsisItemComponent];\n\n@NgModule({\n imports: [MagmaEllipsisButtonComponent],\n exports: [MagmaEllipsisButtonComponent],\n})\nexport class MagmaEllipsisButtonModule {}\n","import { ChangeDetectionStrategy, Component, booleanAttribute, input, output } from '@angular/core';\n\nexport interface MagmaExpansionPanelUpdateEvent {\n open: boolean;\n component: MagmaExpansionPanel;\n}\n\n@Component({\n selector: 'mg-expansion-panel',\n templateUrl: './expansion-panel.component.html',\n styleUrl: './expansion-panel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MagmaExpansionPanel {\n open = input(false, { transform: booleanAttribute });\n disabled = input(false, { transform: booleanAttribute });\n\n update = output();\n\n updateOpen(detail: HTMLDetailsElement) {\n this.update.emit({\n open: !detail.open,\n component: this,\n });\n }\n}\n","\n \n \n \n
\n \n \n \n
\n \n","import { Directive, NgModule } from '@angular/core';\n\nimport { MagmaExpansionPanel } from './expansion-panel.component';\n\n@Directive({ selector: 'mg-expansion-header' })\nexport class MagmaExpansionHeader {}\n\n@Directive({ selector: 'mg-expansion-content' })\nexport class MagmaExpansionContent {}\n\nconst MagmaExpansionComponent = [MagmaExpansionPanel, MagmaExpansionContent, MagmaExpansionHeader];\n\n@NgModule({\n imports: [MagmaExpansionComponent],\n exports: [MagmaExpansionComponent],\n})\nexport class MagmaExpansionPanelModule {}\n","import { NgComponentOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, HostListener, inject, input, output } from '@angular/core';\n\nimport { MagmaMessageInfo } from '../../services/messages';\n\nexport type ContextMessageInputs = { context?: InfoMessageComponent } & Record;\n\n@Component({\n selector: 'info-message',\n templateUrl: './info-message.component.html',\n styleUrl: './info-message.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgComponentOutlet],\n host: {\n '[class]': 'classes()',\n '[style.--current-pos.px]': 'this._pos ?? null',\n '[style.--current-height.px]': 'this._height ?? null',\n '[style.--info-message-progress-time]': 'this.message()?.time',\n },\n})\nexport class InfoMessageComponent {\n // inject\n\n protected readonly element = inject(ElementRef);\n\n // input\n\n readonly message = input();\n\n // output\n\n readonly destruct = output();\n\n /// host\n\n protected _closeClass = false;\n protected _pos!: number;\n protected _height!: number;\n\n protected classes() {\n return [this.message()?.type, this._closeClass ? 'close' : null].filter(e => e);\n }\n\n @HostListener('click')\n click() {\n this._pos = this.element?.nativeElement.offsetTop;\n this._height = this.element?.nativeElement.height;\n this._closeClass = true;\n\n setTimeout(() => {\n this.close();\n }, 700);\n }\n\n animationend() {\n this.click();\n }\n\n close() {\n this.destruct.emit(this.message()!);\n }\n\n withContext(inputs?: ContextMessageInputs) {\n return { ...inputs, ...{ context: this as any } };\n }\n}\n","\n @let msg = message()?.message;\n @if (typeof msg === 'string') {\n {{ msg }}\n } @else if (msg) {\n \n }\n
\n\n","import { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { Injectable, Type, inject } from '@angular/core';\n\nimport { Subject } from 'rxjs';\n\nimport { InfoMessagesComponent } from '../components/info-messages/info-messages.component';\n\nexport enum MagmaMessageType {\n info = 'info',\n success = 'success',\n warn = 'warn',\n error = 'error',\n tip = 'tip',\n}\n\nexport type MagmaMessageContent = string | { component: Type; input?: Record };\n\nexport interface MagmaMessageInfo {\n message: MagmaMessageContent;\n type: MagmaMessageType;\n time: string;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class MagmaMessages {\n private readonly overlay = inject(Overlay);\n\n private _overlayRef?: OverlayRef;\n\n readonly messages: MagmaMessageInfo[] = [];\n\n readonly onAddMessage = new Subject();\n\n addMessage(message: MagmaMessageContent, options: { type?: MagmaMessageType; time?: string } = {}) {\n if (!this.messages.length) {\n this.init();\n }\n\n this.messages.push({ message, type: options.type || MagmaMessageType.info, time: options.time || '3s' });\n this.onAddMessage.next();\n }\n\n removeMessage(message: MagmaMessageInfo) {\n this.messages.splice(this.messages.indexOf(message), 1);\n }\n\n clearMessages() {\n if (this.messages.length) {\n this.messages.splice(0, this.messages.length);\n }\n }\n\n testDispose() {\n if (!this.messages.length) {\n this._overlayRef!.dispose();\n this._overlayRef = undefined;\n }\n }\n\n private init() {\n const overlayRef = this.overlay.create({\n hasBackdrop: false,\n panelClass: 'overlay-message',\n scrollStrategy: this.overlay.scrollStrategies.block(),\n positionStrategy: this.overlay.position().global().right(),\n });\n const userProfilePortal = new ComponentPortal(InfoMessagesComponent);\n const component = overlayRef.attach(userProfilePortal);\n // component.setInput('context', this);\n this._overlayRef = overlayRef;\n }\n}\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject } from '@angular/core';\n\nimport { InfoMessageComponent } from './info-message.component';\n\nimport { MagmaMessageInfo, MagmaMessages } from '../../services/messages';\n\n@Component({\n selector: 'info-messages',\n templateUrl: './info-messages.component.html',\n styleUrl: './info-messages.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [InfoMessageComponent],\n})\nexport class InfoMessagesComponent {\n // inject\n\n protected readonly messages = inject(MagmaMessages);\n private readonly cd = inject(ChangeDetectorRef);\n\n // template\n\n constructor() {\n this.messages.onAddMessage.subscribe(() => {\n this.cd.detectChanges();\n });\n }\n\n destruct(message: MagmaMessageInfo) {\n this.messages.removeMessage(message);\n this.cd.detectChanges();\n this.messages.testDispose();\n }\n}\n","@for (message of messages.messages; track message) {\n \n}\n","import {\n AfterContentChecked,\n ChangeDetectionStrategy,\n Component,\n DoCheck,\n ElementRef,\n SimpleChanges,\n booleanAttribute,\n input,\n output,\n viewChildren,\n} from '@angular/core';\nimport { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\n\nlet counter = 0;\n\n@Component({\n selector: 'mg-input-checkbox',\n templateUrl: './input-checkbox.component.html',\n styleUrl: './input-checkbox.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n { provide: MagmaInputCommon, useExisting: MagmaInputCheckbox },\n { provide: NG_VALUE_ACCESSOR, useExisting: MagmaInputCheckbox, multi: true },\n { provide: NG_VALIDATORS, useExisting: MagmaInputCheckbox, multi: true },\n ],\n host: {\n '[id]': '_id()',\n '[class.toggle-switch]': \"mode() === 'toggle'\",\n },\n})\nexport class MagmaInputCheckbox extends MagmaInputCommon implements DoCheck, AfterContentChecked {\n override readonly componentName = 'input-checkbox';\n protected override counter = counter++;\n protected override _baseValue = 'checked';\n\n override readonly value = input();\n readonly checked = input(false, { transform: booleanAttribute });\n readonly mode = input<'checkbox' | 'toggle'>();\n\n testChecked: boolean | undefined = undefined;\n override readonly placeholder: any = undefined; // not for checkbox\n override readonly datalist: any = undefined; // not for checkbox>(() => this.formControlName() || this.name() || this.host?._id() || this.uid());\n\n readonly label = viewChildren>('ref');\n\n readonly itemUpdate = output();\n\n override ngOnChanges(changes: SimpleChanges): void {\n if (changes['checked']) {\n this.testChecked = changes['checked'].currentValue;\n }\n }\n\n ngDoCheck() {\n if (this.host) {\n if (\n this.host.forId() !== `${this._id()}-input` &&\n this.host.inputs().filter(item => item.componentName === this.componentName).length === 1 &&\n this.label() &&\n !this.label()[0]?.nativeElement.innerHTML.trim()\n ) {\n // For single checkboxes without label\n this.setHostLabelId();\n } else if (\n (this.host.inputs().filter(item => item.componentName === this.componentName).length > 1 ||\n this.label()?.[0]?.nativeElement.innerHTML.trim()) &&\n this.host.forId()\n ) {\n this.host.forId.set(undefined);\n this.host.cd.detectChanges();\n }\n }\n }\n\n ngAfterContentChecked(): void {\n this.cd.detectChanges();\n }\n\n override writeValue(value: any): void {\n // required for host\n setTimeout(() => {\n this.testChecke(value);\n super.writeValue(this.getValue());\n });\n }\n\n testChecke(value: any) {\n if (this.host) {\n this.testChecked =\n (this.host.typeValue() === 'array' || this.host.inputs().length > 1) && Array.isArray(value)\n ? // array value\n this.host.returnValue() === 'boolean'\n ? value[this.index] === true\n : value.includes(this.value())\n : // mono value\n this.host.returnValue() !== 'value' && typeof value === 'boolean'\n ? value === true\n : value === this.value();\n\n // update all other checkboxes in the group\n if (this.host.typeValue() === 'array' || this.host.inputs().length > 1) {\n this.host\n .inputs()\n .filter(item => item.componentName === this.componentName && item !== this)\n .forEach(item => {\n if (item instanceof MagmaInputCheckbox) {\n item['_value'] = this._value;\n if (this.host?.returnValue() === 'boolean') {\n if (item.testChecked && !value[item.index]) {\n item.testChecked = false;\n } else if (!item.testChecked && value[item.index]) {\n item.testChecked = true;\n }\n } else {\n if (item.testChecked && Array.isArray(value) && !value?.includes(item.value())) {\n item.testChecked = false;\n } else if (!item.testChecked && Array.isArray(value) && value?.includes(item.value())) {\n item.testChecked = true;\n }\n }\n }\n });\n }\n }\n }\n\n _change(event?: Event) {\n event?.stopPropagation();\n this.testChecked = !this.testChecked;\n const value = this.getValue();\n this.onChange(value);\n this.update.emit(value);\n this.change.emit(value);\n this.itemUpdate.emit(this.testChecked!);\n\n this.onTouched();\n if (this.ngControl?.control) {\n this.validate(this.ngControl.control);\n }\n }\n\n override getValue(): any {\n if (this.host && (this.host.typeValue() === 'array' || this.host.inputs().length > 1)) {\n if (this.host?.returnValue() === 'boolean') {\n this._value = this.host.inputs().map(item => (item as MagmaInputCheckbox).testChecked ?? false);\n } else {\n this._value = this.host\n .inputs()\n .filter(\n item => item.componentName === this.componentName && (item as MagmaInputCheckbox).testChecked,\n )\n .map(item => item.value());\n }\n } else {\n this._value =\n this.host && this.host.returnValue() === 'value'\n ? this.testChecked\n ? this.value()\n : null\n : (this.testChecked ?? false);\n }\n return super.getValue();\n }\n}\n","@if (!onError()) {\n \n} @else {\n Error\n}\n","import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, input, viewChildren } from '@angular/core';\nimport { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\n\nimport { MagmaColorPickerTexts } from '../color-picker/color-picker.component';\nimport { MagmaColorPicker } from '../color-picker/color-picker.directive';\n\nlet counter = 0;\n\n@Component({\n selector: 'mg-input-color',\n templateUrl: './input-color.component.html',\n styleUrl: './input-color.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MagmaColorPicker],\n providers: [\n { provide: MagmaInputCommon, useExisting: MagmaInputColor },\n { provide: NG_VALUE_ACCESSOR, useExisting: MagmaInputColor, multi: true },\n { provide: NG_VALIDATORS, useExisting: MagmaInputColor, multi: true },\n ],\n host: {\n '[id]': '_id()',\n },\n})\nexport class MagmaInputColor extends MagmaInputCommon {\n override readonly componentName = 'input-color';\n protected override counter = counter++;\n\n readonly input = viewChildren>('input');\n readonly colorPicker = viewChildren(MagmaColorPicker);\n\n readonly alpha = input(false, { transform: booleanAttribute });\n readonly clearButton = input(false, { transform: booleanAttribute });\n readonly texts = input();\n readonly palette = input();\n\n override readonly placeholder: any = undefined; // not for color\n\n override get inputElement(): HTMLInputElement | undefined {\n return this.input()?.[0]?.nativeElement;\n }\n\n get inputDirective(): MagmaColorPicker | undefined {\n return this.colorPicker()?.[0];\n }\n\n colorClose(color: string) {\n this.onChange(color);\n this.writeValue(color);\n this.onTouched();\n if (this.ngControl?.control) {\n this.validate(this.ngControl.control);\n }\n this.change.emit(color);\n }\n}\n","@if (!onError()) {\n \n \n} @else {\n Error\n}\n","import { Directive, HostListener, booleanAttribute, input } from '@angular/core';\n\n@Directive({\n selector: '[stop-propagation]',\n})\nexport class MagmaStopPropagationDirective {\n /** stopPropagation for keyboard */\n readonly stopKeydown = input(false, { transform: booleanAttribute });\n /** stopPropagation for click */\n readonly stopClick = input(false, { transform: booleanAttribute });\n\n @HostListener('keydown', ['$event'])\n @HostListener('click', ['$event'])\n block(event: KeyboardEvent | MouseEvent): void {\n if (this.stopKeydown() && event instanceof KeyboardEvent) {\n event.stopPropagation();\n } else if (this.stopClick() && event instanceof MouseEvent) {\n event.stopPropagation();\n }\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n OnChanges,\n SimpleChanges,\n booleanAttribute,\n computed,\n input,\n viewChildren,\n} from '@angular/core';\nimport { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\n\nimport { MagmaStopPropagationDirective } from '../../directives/stop-propagation.directive';\nimport { toISODate } from '../../utils/date';\nimport { MagmaDatetimeType } from '../datetime-picker/datetime-picker.component';\nimport { MagmaDatetimePicker } from '../datetime-picker/datetime-picker.directive';\n\ntype PlaceholderInfos = {\n dd: string;\n h1: string;\n h2: string;\n h3: string;\n hh: string;\n min: string;\n mm: string;\n mmm: string;\n s1: string;\n s2: string;\n s3: string;\n sec: string;\n yyyy: string;\n};\n\ntype TypeData = 'day' | 'month' | 'year' | 'hours' | 'minutes' | 'seconds' | 'milli';\n\nlet counter = 0;\n\nconst languages: Record = {\n // --- language without country (more one country) ---\n fr: 'jj/mm/aaaa hh:mm:ss:sss', // French\n en: { format: 'mm/dd/yyyy hh:mm:ss:sss', type: 'mdy' }, // English\n es: 'dd/mm/aaaa hh:mm:ss:sss', // Spanish\n de: 'tt.mm.jjjj hh:mm:ss:sss', // German\n pt: 'dd/mm/aaaa hh:mm:ss:sss', // Portuguese\n zh: { format: 'yyyy/mm/dd hh:mm:ss:sss', type: 'ymd' }, // Chinese\n\n // --- EUROPE (Nordic & Western) ---\n 'fr-FR': 'jj/mm/aaaa hh:mm:ss:sss', // France\n 'fr-BE': 'jj/mm/aaaa hh:mm:ss:sss', // Belgium\n 'fr-CH': 'jj.mm.aaaa hh:mm:ss:sss', // Switzerland\n 'en-GB': 'dd/mm/yyyy hh:mm:ss:sss', // United Kingdom\n 'en-IE': 'dd/mm/yyyy hh:mm:ss:sss', // Ireland\n 'de-DE': 'tt.mm.jjjj hh:mm:ss:sss', // Germany\n 'de-AT': 'tt.mm.jjjj hh:mm:ss:sss', // Austria\n 'it-IT': 'gg/mm/aaaa oo:mm:ss:sss', // Italy\n 'es-ES': 'dd/mm/aaaa hh:mm:ss:sss', // Spain\n 'pt-PT': 'dd/mm/aaaa hh:mm:ss:sss', // Portugal\n 'nl-NL': 'dd-mm-jjjj uu:mm:ss:sss', // Netherlands\n 'da-DK': 'dd.mm.åååå tt:mm:ss:sss', // Denmark\n 'nb-NO': 'dd.mm.åååå tt:mm:ss:sss', // Norway\n 'sv-SE': 'åååå-mm-dd tt:mm:ss:sss', // Sweden\n 'fi-FI': 'pp.kk.vvvv tt:mm:ss:sss', // Finland\n 'is-IS': 'dd.mm.áááá kk:mm:ss:sss', // Iceland\n\n // --- EUROPE (Central & Eastern) ---\n 'pl-PL': 'dd.mm.rrrr gg:mm:ss:sss', // Poland\n 'cs-CZ': 'dd.mm.rrrr hh:mm:ss:sss', // Czech Republic\n 'sk-SK': 'dd.mm.rrrr hh:mm:ss:sss', // Slovakia\n 'hu-HU': { format: 'éééé.mm.dd. óó:pp:mm:mmm', type: 'ymd' }, // Hungary\n 'ro-RO': 'zz.ll.aaaa oo:mm:ss:sss', // Romania\n 'bg-BG': 'дд.мм.гггг чч:мм:сс:ссс', // Bulgaria\n 'el-GR': 'ηη/μμ/εεεε ωω:λλ:δδ:χχχ', // Greece\n 'ru-RU': 'дд.мм.гггг чч:мм:сс:ссс', // Russia\n 'uk-UA': 'дд.мм.рррр гг:хх:сс:ммм', // Ukraine\n 'be-BY': 'дд.мм.гггг гг:хх:сс:ммм', // Belarus\n 'et-EE': 'pp.kk.aaaa tt:mm:ss:sss', // Estonia\n 'lv-LV': 'dd.mm.gggg. pp:mm:ss:sss', // Latvia\n 'lt-LT': { format: 'mmmm-mm-dd vv:mm:ss:sss', type: 'ymd' }, // Lithuania\n 'sl-SI': 'dd.mm.llll uu:mm:ss:sss', // Slovenia\n 'hr-HR': 'dd.mm.gggg. ss:mm:ss:sss', // Croatia\n 'sr-RS': 'dd.mm.gggg. čč:mm:ss:sss', // Serbia\n 'tr-TR': 'gg.aa.yyyy ss:dd:ss:mmm', // Turkey\n\n // --- AMERICAS ---\n 'en-US': { format: 'mm/dd/yyyy hh:mm:ss:sss', type: 'mdy' }, // United States\n 'en-CA': { format: 'yyyy-mm-dd hh:mm:ss:sss', type: 'ymd' }, // Canada (English)\n 'fr-CA': { format: 'aaaa-mm-jj hh:mm:ss:sss', type: 'ymd' }, // Canada (French)\n 'es-MX': 'dd/mm/aaaa hh:mm:ss:sss', // Mexico\n 'es-AR': 'dd/mm/aaaa hh:mm:ss:sss', // Argentina\n 'es-CO': 'dd/mm/aaaa hh:mm:ss:sss', // Colombia\n 'es-CL': 'dd-mm-aaaa hh:mm:ss:sss', // Chile\n 'pt-BR': 'dd/mm/aaaa hh:mm:ss:sss', // Brazil\n\n // --- ASIA & PACIFIC ---\n 'zh-CN': { format: 'yyyy/mm/dd hh:mm:ss:sss', type: 'ymd' }, // China\n 'zh-TW': { format: 'yyyy/mm/dd hh:mm:ss:sss', type: 'ymd' }, // Taiwan\n 'ja-JP': { format: 'yyyy/mm/dd hh:mm:ss:sss', type: 'ymd' }, // Japan\n 'ko-KR': { format: 'yyyy. mm. dd. hh:mm:ss:sss', type: 'ymd' }, // South Korea\n 'vi-VN': 'dd/mm/aaaa hh:mm:ss:sss', // Vietnam\n 'th-TH': 'วว/ดด/ปปปป ชช:นน:วว:พพพ', // Thailand\n 'id-ID': 'hh/bb/tttt jj:mm:dd:mmm', // Indonesia\n 'hi-IN': 'dd/mm/yyyy hh:mm:ss:sss', // India\n 'en-AU': 'dd/mm/yyyy hh:mm:ss:sss', // Australia\n 'en-NZ': 'dd/mm/yyyy hh:mm:ss:sss', // New Zealand\n\n // --- AFRICA & MIDDLE EAST ---\n 'ar-SA': { format: 'yyyy/mm/dd hh:mm:ss:sss', type: 'ymd' }, // Saudi Arabia\n 'he-IL': 'dd.mm.yyyy hh:mm:ss:sss', // Israel\n 'af-ZA': { format: 'jjjj-mm-dd hh:mm:ss:sss', type: 'ymd' }, // South Africa\n 'sw-KE': 'dd/mm/aaaa hh:mm:ss:sss', // Kenya\n};\n\nconst types: (MagmaDatetimeType | 'datetime-seconds' | 'datetime-milli' | 'month' | 'week')[] = [\n 'date',\n 'datetime-local',\n 'time',\n 'datetime-seconds',\n 'datetime-milli',\n 'month',\n 'week',\n];\n\nconst dateRegex = {\n dmy: /(?\\S{2})(?[\\/\\-. ]+)(?\\S{2})(?[\\/\\-. ]+)(?\\S{4})(?[\\/\\-. ]+)(?\\S{2})(?:)(?\\S{2})(?:)(?\\S{2})(?.)(?\\S{3})/,\n ymd: /(?\\S{4})(?[\\/\\-. ]+)(?\\S{2})(?[\\/\\-. ]+)(?\\S{2})(?[\\/\\-. ]+)(?\\S{2})(?:)(?\\S{2})(?:)(?\\S{2})(?.)(?\\S{3})/,\n mdy: /(?\\S{2})(?[\\/\\-. ]+)(?\\S{2})(?[\\/\\-. ]+)(?\\S{4})(?[\\/\\-. ]+)(?\\S{2})(?:)(?\\S{2})(?:)(?\\S{2})(?.)(?\\S{3})/,\n};\n\nconst dateFields = ['day', 'month', 'year'];\n\ntype fieldName = 'day' | 'month' | 'year' | 'hours' | 'minutes' | 'seconds' | 'milli';\n\n@Component({\n selector: 'mg-input-date',\n templateUrl: './input-date.component.html',\n styleUrl: './input-date.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ReactiveFormsModule, FormsModule, MagmaDatetimePicker, MagmaStopPropagationDirective],\n providers: [\n { provide: MagmaInputCommon, useExisting: MagmaInputDate },\n { provide: NG_VALUE_ACCESSOR, useExisting: MagmaInputDate, multi: true },\n { provide: NG_VALIDATORS, useExisting: MagmaInputDate, multi: true },\n ],\n host: {\n '[id]': '_id()',\n },\n})\nexport class MagmaInputDate\n extends MagmaInputCommon<(string | { label?: string; value: string })[]>\n implements OnChanges\n{\n override readonly componentName: string = 'input-date';\n protected override counter = counter++;\n\n readonly type = input();\n protected readonly _type = computed(() => (types.includes(this.type()) ? this.type() : 'date')!);\n readonly hideDatePicker = input(false, { transform: booleanAttribute });\n readonly lang = input();\n\n readonly input = viewChildren>('input');\n\n readonly datePicker = viewChildren(MagmaDatetimePicker);\n\n override get inputElement(): HTMLElement | undefined {\n return this.input()?.[0]?.nativeElement;\n }\n\n protected readonly _year = computed(\n () => this.refreshTrigger() || (this._value ? this._value.substring(0, 4) : ''),\n );\n protected readonly _month = computed(\n () => this.refreshTrigger() || (this._value ? this._value.substring(5, 7) : ''),\n );\n protected readonly _day = computed(\n () => this.refreshTrigger() || (this._value ? this._value.substring(8, 10) : ''),\n );\n protected readonly _hours = computed(\n () => this.refreshTrigger() || (this._value ? this._value.substring(11, 13) : ''),\n );\n protected readonly _minutes = computed(\n () => this.refreshTrigger() || (this._value ? this._value.substring(14, 16) : ''),\n );\n protected readonly _seconds = computed(\n () => this.refreshTrigger() || (this._value ? this._value.substring(17, 19) : ''),\n );\n protected readonly _milli = computed(\n () => this.refreshTrigger() || (this._value ? this._value.substring(20, 23) : ''),\n );\n\n orderType: 'dmy' | 'ymd' | 'mdy' = 'dmy';\n\n protected placeholderInfos: PlaceholderInfos | undefined = undefined;\n\n protected valueCache: Record = {\n year: 0,\n month: 0,\n day: 0,\n hours: 0,\n minutes: 0,\n seconds: 0,\n milli: 0,\n };\n\n protected lockFocus = false;\n\n constructor() {\n super();\n this.placeholderCompute(this.lang());\n }\n\n override ngOnChanges(changes: SimpleChanges): void {\n super.ngOnChanges(changes);\n\n if (changes['lang']) {\n this.placeholderCompute(changes['lang'].currentValue);\n }\n if (changes['value']) {\n this.updateValueCache(changes['value'].currentValue);\n }\n }\n\n private updateValueCache(value: string) {\n this.valueCache = {\n year: this.valueCacheSubstring(value, 0, 4),\n month: this.valueCacheSubstring(value, 5, 7),\n day: this.valueCacheSubstring(value, 8, 10),\n hours: this.valueCacheSubstring(value, 11, 13),\n minutes: this.valueCacheSubstring(value, 14, 16),\n seconds: this.valueCacheSubstring(value, 17, 19),\n milli: this.valueCacheSubstring(value, 20, 23),\n };\n\n this.updateValueWithCache(false);\n }\n\n private valueCacheSubstring(value: string, a: number, b: number): number {\n return value ? +value?.substring(a, b) || 0 : 0;\n }\n\n override writeValue(value: any): void {\n this.updateValueCache(value);\n super.writeValue(value);\n // force refresh input\n this.refreshTrigger.set(null);\n this.refreshTrigger.set(false);\n }\n\n placeholderCompute(lang?: string) {\n const lg = lang || this.lang() || navigator.language || 'en';\n\n let format = languages[lg];\n if (!format) {\n const key = Object.keys(languages).find(e => e.startsWith(lg));\n if (key) {\n format = languages[key];\n }\n }\n\n if (typeof format === 'string') {\n format = { format, type: 'dmy' };\n } else if (!format) {\n format = languages['en'] as { format: string; type: 'dmy' | 'ymd' | 'mdy' };\n }\n\n this.orderType = format.type;\n\n // format placeholder texts: default d/m/y\n let match = dateRegex.dmy;\n switch (this.orderType) {\n case 'ymd':\n match = dateRegex.ymd;\n break;\n case 'mdy':\n match = dateRegex.mdy; // USA only ?\n break;\n }\n this.placeholderInfos = format.format.match(match)!.groups as PlaceholderInfos;\n }\n\n focus(event: FocusEvent, focus: boolean, type: fieldName) {\n if (!focus) {\n this.onTouched();\n if (this.ngControl?.control) {\n this.validate(this.ngControl.control);\n }\n const element = event.target as HTMLInputElement;\n let size = 2;\n if (type === 'milli') {\n size = 3;\n } else if (type === 'year') {\n size = 4;\n }\n\n if (element.value) {\n if (element?.value.length < size) {\n element.value = `${+element.value}`.padStart(size, '0');\n } else if (element?.value.length > size) {\n element.value = `${+element.value}`;\n }\n }\n }\n }\n\n datePickerClose(date: string) {\n this.onChange(date);\n this.writeValue(date);\n this.onTouched();\n if (this.ngControl?.control) {\n this.validate(this.ngControl.control);\n }\n }\n\n keydown(event: KeyboardEvent) {\n if (event.key.startsWith('Arrow')) {\n this.lockFocus = true;\n }\n if (event.key === 'ArrowLeft') {\n this.focusPrev((event.target as HTMLInputElement).id);\n event.preventDefault();\n } else if (event.key === 'ArrowRight') {\n this.focusNext((event.target as HTMLInputElement).id);\n event.preventDefault();\n }\n }\n\n keyup(event: KeyboardEvent) {\n if (event.key.includes('Arrow')) {\n this.lockFocus = false;\n }\n }\n\n changeDate(event: Event, type: fieldName) {\n this.updateDate(event, type);\n this.update.emit(this._value);\n }\n\n updateDate(event: Event, type: fieldName) {\n const input = event.target as HTMLInputElement;\n const value = input?.valueAsNumber;\n let padStart = 2;\n const dateType = dateFields.includes(type);\n if ((dateType && value) || (!dateType && input?.value.match(/\\d+/))) {\n let next = false;\n switch (type) {\n case 'day':\n if (value > 3) {\n if (value > 31) {\n input.valueAsNumber = 31;\n }\n if (!this.lockFocus) {\n next = true;\n }\n }\n padStart = 2;\n break;\n case 'month':\n if (value > 1) {\n if (value > 12) {\n input.valueAsNumber = 12;\n }\n if (!this.lockFocus) {\n next = true;\n }\n }\n\n break;\n case 'year':\n if (value > 9999) {\n input.valueAsNumber = 9999;\n if (!this.lockFocus) {\n next = true;\n }\n }\n padStart = 4;\n\n break;\n case 'hours':\n if (value > 3) {\n if (value > 23) {\n input.valueAsNumber = 23;\n }\n if (!this.lockFocus) {\n next = true;\n }\n }\n\n break;\n case 'minutes':\n case 'seconds':\n if (value > 5) {\n if (value > 59) {\n input.valueAsNumber = 59;\n }\n if (!this.lockFocus) {\n next = true;\n }\n }\n\n break;\n case 'milli':\n if (value > 999) {\n input.valueAsNumber = 999;\n }\n padStart = 3;\n break;\n }\n if (this.lockFocus && input.value) {\n input.value = input.value.padStart(padStart, '0');\n }\n if (next) {\n this.focusNext(input.id);\n }\n\n this.valueCache[type] = input.valueAsNumber;\n\n this.updateValueWithCache();\n } else {\n this.valueCache[type] = 0;\n }\n }\n\n private updateValueWithCache(change = true) {\n let valueDate =\n this.valueCache.day || this.valueCache.month || this.valueCache.day\n ? toISODate(\n new Date(\n Date.UTC(\n this.valueCache.year,\n this.valueCache.month - 1,\n this.valueCache.day,\n this.valueCache.hours,\n this.valueCache.minutes,\n this.valueCache.seconds,\n this.valueCache.milli,\n ),\n ),\n )\n : undefined;\n\n switch (this.type()) {\n case 'datetime-local':\n valueDate = valueDate?.substring(0, 16);\n break;\n case 'time':\n valueDate = valueDate?.substring(11, 16);\n break;\n case 'datetime-seconds':\n valueDate = valueDate?.substring(0, 19);\n break;\n case 'datetime-milli':\n valueDate = valueDate?.substring(0, 23);\n break;\n case 'date':\n default:\n valueDate =\n this.valueCache.year && this.valueCache.month && this.valueCache.year\n ? valueDate?.substring(0, 10)\n : undefined;\n break;\n }\n\n super.writeValue(valueDate);\n if (change) {\n this.onChange(valueDate);\n this.update.emit(valueDate);\n this.change.emit(valueDate);\n }\n }\n\n private focusNext(id: string) {\n this.selectInput(`#${id} + * + input`);\n }\n\n private focusPrev(id: string) {\n this.selectInput(`input:has(+ * + #${id})`);\n }\n\n private selectInput(rule: string) {\n const element = document.querySelector(rule);\n if (element) {\n element.focus();\n element.select();\n }\n }\n}\n","@if (!onError()) {\n \n @if (_type().startsWith('date')) {\n @let typeDay = 'day';\n \n {{ placeholderInfos?.s1 }}\n @let typeMonth = 'month';\n \n {{ placeholderInfos?.s2 }}\n @let typeYear = 'year';\n \n }\n {{ placeholderInfos?.s3 }}\n @if (_type().includes('time')) {\n @let typeHours = 'hours';\n \n {{ placeholderInfos?.h1 }}\n @let typeMinutes = 'minutes';\n \n }\n @if (_type().includes('seconds') || _type().includes('milli')) {\n {{ placeholderInfos?.h2 }}\n @let typeSeconds = 'seconds';\n \n }\n @if (_type().includes('milli')) {\n {{ placeholderInfos?.h3 }}\n @let typeMilli = 'milli';\n \n }\n
\n\n @if (!hideDatePicker()) {\n 📅\n } @else {\n \n }\n} @else {\n Error\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector:\n 'mg-input-label, mg-input-desc, mg-input-error, mg-input-prefix, mg-input-suffix, mg-input-before, ' +\n 'mg-input-after, mg-input-textarea-desc',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: '',\n styleUrl: 'input-element.component.scss',\n})\nexport class MagmaInputElement {}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { NumFormatter } from '@ikilote/num-formatter';\n\n/**\n * Format number to string\n *\n * Usage:\n * - `{{ 1000 | numFormat }}` → ` 1,000 `\n * - `Intl.NumberFormatOptions`\n * - `{{ 1000 | numFormat:{style: \"currency\", currency: \"USD\"} }}` → ` $1,000.00 `\n * - `@ikilote/num-formatter`\n * - `{{ 1000 | numFormat:'#,##0.00' }}` → ` 1,000.00 `\n * - `{{ 1000 | numFormat:'#,##0.00':'fr' }}` → ` 1 000,00 `\n * - `{{ 1000.555 | numFormat:'#,##0.00:'fr':'default' }}` → ` 1 000,56`\n * - `{{ 1000.555 | numFormat:'#,##0.00:'fr':'trunc' }}` → ` 1 000,55`\n */\n@Pipe({\n name: 'numFormat',\n})\nexport class NumFormatPipe implements PipeTransform {\n private static cache: Record = {};\n static lang = 'en';\n\n /**\n * format number to string\n * @param value\n * @param params 2 cases:\n * * params is `string`: use `@ikilote/num-formatter` pattern\n * * params is `Intl.NumberFormatOptions`: use `Intl.NumberFormat`\n * @param lang language (default: 'en')\n * @returns string of the number\n * @see https://git.ikilote.net/typescript/number-formatter/\n * @see https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat\n */\n transform(\n value: number,\n params?: Intl.NumberFormatOptions | string | undefined,\n lang?: string,\n round?: 'default' | 'trunc',\n ): string {\n const empty = `${value}`;\n const lg = lang || NumFormatPipe.lang || 'en';\n if (empty === '' || empty === 'undefined' || empty === 'null' || empty === 'NaN') {\n return '';\n } else if (typeof params === 'string') {\n if (!NumFormatPipe.cache[lg]) {\n const [, group, , decimal] = new Intl.NumberFormat(lg).formatToParts(1000.1);\n NumFormatPipe.cache[lg] = { dot: decimal.value, separator: group.value };\n }\n return new NumFormatter(value).formatByPattern(params, { ...NumFormatPipe.cache[lg], round });\n } else {\n return new Intl.NumberFormat(lg, typeof params === 'object' ? params : {}).format(value);\n }\n }\n}\n","import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, input, viewChildren } from '@angular/core';\nimport { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\n\nimport { NumFormatPipe } from '../../pipes/num-format.pipe';\nimport { numberAttributeOrUndefined } from '../../utils/coercion';\n\nlet counter = 0;\n\n@Component({\n selector: 'mg-input-number',\n templateUrl: './input-number.component.html',\n styleUrl: './input-number.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n { provide: MagmaInputCommon, useExisting: MagmaInputNumber },\n { provide: NG_VALUE_ACCESSOR, useExisting: MagmaInputNumber, multi: true },\n { provide: NG_VALIDATORS, useExisting: MagmaInputNumber, multi: true },\n ],\n host: {\n '[id]': '_id()',\n '[class.show-arrows]': 'showArrows()',\n '[attr.data-number]': 'numberFormat.transform(_value, formater())',\n },\n})\nexport class MagmaInputNumber extends MagmaInputCommon<(number | { label?: string; value: number })[]> {\n override readonly componentName = 'input-number';\n protected override counter = counter++;\n protected numberFormat = new NumFormatPipe();\n\n static readonly acceptKeys = [\n '0',\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '-',\n '.',\n ',',\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowDown',\n 'ArrowUp',\n 'Backspace',\n 'Delete',\n 'Tab',\n ];\n\n readonly step = input(1, { transform: numberAttributeOrUndefined });\n readonly min = input(undefined, { transform: numberAttributeOrUndefined });\n readonly max = input(undefined, { transform: numberAttributeOrUndefined });\n readonly forceMinMax = input(false, { transform: booleanAttribute });\n readonly showArrows = input(false, { transform: booleanAttribute });\n readonly formater = input();\n readonly noDecimal = input(false, { transform: booleanAttribute });\n readonly noNegative = input(false, { transform: booleanAttribute });\n\n readonly input = viewChildren>('input');\n\n override get inputElement(): HTMLInputElement {\n return this.input()?.[0]?.nativeElement;\n }\n\n override writeValue(value: any): void {\n super.writeValue(value);\n this.inputElement!.value = value ?? '';\n }\n\n changeValue(event: Event) {\n event.stopPropagation();\n const value = this.parseValue(event);\n this.onChange(value);\n this.update.emit(value);\n }\n\n inputValue(event: Event) {\n const value = this.parseValue(event);\n this.onChange(value);\n this.change.emit(value);\n }\n\n private parseValue(event: Event): number | undefined {\n const input = this.getInput(event);\n const value = this.forceValue(\n input.value !== '' && input.value !== null && input.value !== undefined ? +input.value : undefined,\n );\n this._value = value;\n return value;\n }\n\n focus(event: Event, focus: boolean) {\n if (!focus) {\n const input = this.getInput(event);\n if (input.value !== this._value) {\n input.value = this._value;\n }\n this.onTouched();\n if (!focus) {\n this.onTouched();\n if (this.ngControl?.control) {\n this.validate(this.ngControl.control);\n }\n }\n }\n }\n\n keydown(event: KeyboardEvent) {\n if (MagmaInputNumber.acceptKeys.includes(event.key)) {\n if (\n (this.noDecimal() && (event.key === '.' || event.key === ',')) ||\n (this.noNegative() && event.key === '-')\n ) {\n event.preventDefault();\n return;\n }\n\n if (this.inputElement.value.includes('.') && (event.key === '.' || event.key === ',')) {\n event.preventDefault();\n } else if (event.key === '-') {\n if (`${this.inputElement.value}`.includes('-')) {\n event.preventDefault();\n } else {\n this.inputElement.value = `-${this.inputElement.value}`;\n this.changeValue(event);\n event.preventDefault();\n }\n }\n } else {\n event.preventDefault();\n }\n }\n\n private forceValue(value: number | undefined) {\n if (this.forceMinMax()) {\n const min = this.min();\n if (min !== undefined && !Number.isNaN(min) && (value || 0) < min) {\n value = min;\n }\n const max = this.max();\n if (max !== undefined && !Number.isNaN(max) && (value || 0) > max) {\n value = max;\n }\n }\n return value;\n }\n\n private getInput(event: Event): HTMLInputElement {\n return (event as InputEvent).target as HTMLInputElement;\n }\n}\n","@if (!onError()) {\n \n @if (datalist()?.length) {\n \n }\n} @else {\n Error\n}\n","import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, input, viewChildren } from '@angular/core';\nimport { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\n\nimport { numberAttributeOrUndefined } from '../../utils/coercion';\n\nlet counter = 0;\n\n@Component({\n selector: 'mg-input-text',\n templateUrl: './input-text.component.html',\n styleUrl: './input-text.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ReactiveFormsModule, FormsModule],\n providers: [\n { provide: MagmaInputCommon, useExisting: MagmaInputText },\n { provide: NG_VALUE_ACCESSOR, useExisting: MagmaInputText, multi: true },\n { provide: NG_VALIDATORS, useExisting: MagmaInputText, multi: true },\n ],\n host: {\n '[id]': '_id()',\n },\n})\nexport class MagmaInputText extends MagmaInputCommon<(string | { label?: string; value: string })[]> {\n override readonly componentName: string = 'input-text';\n protected override counter = counter++;\n\n readonly maxlength = input(undefined, { transform: numberAttributeOrUndefined });\n readonly clearCross = input(null, { transform: booleanAttribute });\n readonly type = input<'text' | 'email' | 'url' | 'tel'>('text');\n\n readonly input = viewChildren>('input');\n\n override get inputElement(): HTMLInputElement | undefined {\n return this.input()?.[0]?.nativeElement;\n }\n\n override writeValue(value: any): void {\n super.writeValue(value);\n this.inputElement!.value = value ?? '';\n }\n\n changeValue(event: Event) {\n event?.stopPropagation();\n const value = ((event as InputEvent).target as HTMLInputElement).value;\n super.writeValue(value);\n this.onChange(value);\n this.update.emit(value);\n }\n\n inputValue(event: Event) {\n const value = ((event as InputEvent).target as HTMLInputElement).value;\n super.writeValue(value);\n this.onChange(value);\n this.change.emit(value);\n }\n\n focus(focus: boolean) {\n if (!focus) {\n this.onTouched();\n if (this.ngControl?.control) {\n this.validate(this.ngControl.control);\n }\n }\n }\n\n clearField() {\n this.inputElement!.value = '';\n super.writeValue('');\n this.onChange('');\n this.update.emit('');\n this.change.emit('');\n }\n}\n","@if (!onError()) {\n \n @if (clearCross() && input.value) {\n \n }\n @if (datalist()?.length) {\n \n }\n} @else {\n Error\n}\n","import { ChangeDetectionStrategy, Component, booleanAttribute, input } from '@angular/core';\nimport { NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\nimport { MagmaInputText } from './input-text.component';\n\nlet counter = 0;\n\n@Component({\n selector: 'mg-input-password',\n templateUrl: './input-password.component.html',\n styleUrl: './input-password.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ReactiveFormsModule],\n providers: [\n { provide: MagmaInputCommon, useExisting: MagmaInputPassword },\n { provide: NG_VALUE_ACCESSOR, useExisting: MagmaInputPassword, multi: true },\n { provide: NG_VALIDATORS, useExisting: MagmaInputPassword, multi: true },\n ],\n host: {\n '[id]': '_id()',\n },\n})\nexport class MagmaInputPassword extends MagmaInputText {\n override readonly componentName = 'input-password';\n protected override counter = counter++;\n\n override readonly clearCross: any = undefined; // not for password\n override readonly datalist: any = undefined; // not for password\n\n readonly eye = input(null, { transform: booleanAttribute });\n\n protected show = false;\n\n toggleShowPassword() {\n this.show = !this.show;\n }\n}\n","@if (!onError()) {\n \n @if (eye()) {\n \n }\n} @else {\n Error\n}\n","import {\n AfterContentChecked,\n ChangeDetectionStrategy,\n Component,\n SimpleChanges,\n booleanAttribute,\n computed,\n input,\n} from '@angular/core';\nimport { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\n\nlet counter = 0;\n\n@Component({\n selector: 'mg-input-radio',\n templateUrl: './input-radio.component.html',\n styleUrl: './input-radio.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n { provide: MagmaInputCommon, useExisting: MagmaInputRadio },\n { provide: NG_VALUE_ACCESSOR, useExisting: MagmaInputRadio, multi: true },\n { provide: NG_VALIDATORS, useExisting: MagmaInputRadio, multi: true },\n ],\n host: {\n '[id]': '_id()',\n },\n})\nexport class MagmaInputRadio extends MagmaInputCommon implements AfterContentChecked {\n override readonly componentName = 'input-radio';\n protected override counter = counter++;\n\n override readonly value = input.required();\n\n readonly checked = input(false, { transform: booleanAttribute });\n override readonly placeholder: any = undefined; // not for radio\n override readonly datalist: any = undefined; // not for radio\n\n protected testChecked: boolean | undefined;\n\n protected override _baseValue = 'checked';\n\n override _name = computed(\n () => this.refreshTrigger() || this.formControlName() || this.name() || this.host?._id() || this.uid(),\n );\n\n override ngOnChanges(changes: SimpleChanges): void {\n if (changes['checked']) {\n this.testChecked = changes['checked'].currentValue;\n }\n }\n\n override writeValue(value: any): void {\n super.writeValue(value);\n this.testChecked = value === this.value();\n this.cd.detectChanges();\n }\n\n ngAfterContentChecked(): void {\n this.cd.detectChanges();\n }\n\n _change(event?: Event) {\n event?.stopPropagation();\n const value = this.value();\n this.onChange(value);\n this.onTouched();\n this.update.emit(value);\n this.change.emit(value);\n }\n}\n","@if (!onError()) {\n \n} @else {\n Error\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\n\nimport { numberAttributeOrUndefined } from '../../utils/coercion';\n\nlet counter = 0;\n\n@Component({\n selector: 'mg-input-range',\n templateUrl: './input-range.component.html',\n styleUrl: './input-range.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ReactiveFormsModule],\n providers: [\n { provide: MagmaInputCommon, useExisting: MagmaInputRange },\n { provide: NG_VALUE_ACCESSOR, useExisting: MagmaInputRange, multi: true },\n { provide: NG_VALIDATORS, useExisting: MagmaInputRange, multi: true },\n ],\n host: {\n '[id]': '_id()',\n },\n})\nexport class MagmaInputRange extends MagmaInputCommon {\n override readonly componentName = 'input-range';\n protected override counter = counter++;\n\n readonly step = input(undefined, { transform: numberAttributeOrUndefined });\n readonly min = input(undefined, { transform: numberAttributeOrUndefined });\n readonly max = input(undefined, { transform: numberAttributeOrUndefined });\n\n changeValue(event: Event) {\n event.stopPropagation();\n this.update.emit(this.inputValue(event));\n }\n\n inputValue(event: Event) {\n const value = +this.getInput(event).value;\n this._value = value;\n this.onChange(value);\n this.change.emit(value);\n return value;\n }\n\n private getInput(event: Event): HTMLInputElement {\n return (event as InputEvent).target as HTMLInputElement;\n }\n}\n","@if (!onError()) {\n \n @if (datalist()?.length) {\n \n }\n} @else {\n Error\n}\n","import {\n Directive,\n ElementRef,\n OnChanges,\n OnDestroy,\n OnInit,\n SimpleChanges,\n booleanAttribute,\n inject,\n input,\n} from '@angular/core';\n\nimport autosize from 'autosize';\n\n@Directive({\n selector: 'textarea[autosize]',\n})\nexport class MagmaTextareaAutosizeDirective implements OnInit, OnChanges, OnDestroy {\n private readonly elementRef = inject>(ElementRef);\n\n readonly autosizeDisabled = input(false, { transform: booleanAttribute });\n\n private destroyed = false;\n private initTimer?: ReturnType;\n\n ngOnInit() {\n if (!this.autosizeDisabled()) {\n this.initTimer = setTimeout(() => {\n if (!this.destroyed && this.elementRef.nativeElement.nodeName === 'TEXTAREA') {\n autosize(this.elementRef.nativeElement);\n }\n });\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['autosizeDisabled']) {\n if (\n changes['autosizeDisabled'].previousValue === true &&\n changes['autosizeDisabled'].currentValue === false\n ) {\n this.ngOnInit();\n } else if (\n changes['autosizeDisabled'].previousValue === false &&\n changes['autosizeDisabled'].currentValue === true\n ) {\n this.ngOnDestroy();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.destroyed = true;\n if (this.initTimer) {\n clearTimeout(this.initTimer);\n this.initTimer = undefined;\n }\n autosize.destroy(this.elementRef.nativeElement);\n }\n}\n","import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, input, viewChildren } from '@angular/core';\nimport { NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\n\nimport { MagmaTextareaAutosizeDirective } from '../../directives/textarea-autosize.directive';\nimport { numberAttributeOrUndefined } from '../../utils/coercion';\n\nlet counter = 0;\n\n@Component({\n selector: 'mg-input-textarea',\n templateUrl: './input-textarea.component.html',\n styleUrl: './input-textarea.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ReactiveFormsModule, MagmaTextareaAutosizeDirective],\n providers: [\n { provide: MagmaInputCommon, useExisting: MagmaInputTextarea },\n { provide: NG_VALUE_ACCESSOR, useExisting: MagmaInputTextarea, multi: true },\n { provide: NG_VALIDATORS, useExisting: MagmaInputTextarea, multi: true },\n ],\n host: {\n '[id]': '_id()',\n '[style.--min]': 'minHeight()',\n '[style.--max]': 'maxHeight()',\n '[style.--default]': 'height()',\n '[class.monospace]': 'monospace()',\n },\n})\nexport class MagmaInputTextarea extends MagmaInputCommon {\n override readonly componentName = 'input-textarea';\n protected override counter = counter++;\n\n readonly input = viewChildren>('input');\n\n readonly autosize = input(false, { transform: booleanAttribute });\n readonly monospace = input(false, { transform: booleanAttribute });\n readonly maxlength = input(undefined, { transform: numberAttributeOrUndefined });\n readonly displayLimit = input(undefined, { transform: numberAttributeOrUndefined });\n readonly height = input();\n readonly maxHeight = input();\n readonly minHeight = input();\n\n override readonly datalist: any = undefined; // not for textarea\n\n override get inputElement(): HTMLTextAreaElement {\n return this.input()?.[0]?.nativeElement;\n }\n\n override writeValue(value: any): void {\n super.writeValue(value);\n this.inputElement!.value = value ?? '';\n }\n\n changeValue(event: Event) {\n event.stopPropagation();\n const value = ((event as InputEvent).target as HTMLTextAreaElement).value;\n this.onChange(value);\n this.update.emit(value);\n }\n\n inputValue(event: Event) {\n const value = ((event as InputEvent).target as HTMLTextAreaElement).value;\n this.onChange(value);\n this.change.emit(value);\n }\n\n focus(focus: boolean) {\n if (!focus) {\n this.onTouched();\n if (this.ngControl?.control) {\n this.validate(this.ngControl.control);\n }\n }\n }\n}\n","@if (!onError()) {\n \n \n
\n @let limit = displayLimit();\n @if (maxlength() && limit !== undefined && input.value.length >= limit) {\n
\n }\n
\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\nimport { MagmaMessageType } from '../../services/messages';\n\n@Component({\n selector: 'mg-message',\n templateUrl: './message.component.html',\n styleUrl: './message.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n host: {\n '[class.info]': 'type() === \"info\"',\n '[class.success]': 'type() === \"success\"',\n '[class.warn]': 'type() === \"warn\"',\n '[class.error]': 'type() === \"error\"',\n '[class.tip]': 'type() === \"tip\"',\n },\n})\nexport class MagmaMessage {\n type = input();\n}\n","
\n\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DoCheck,\n OnChanges,\n OnDestroy,\n OnInit,\n SimpleChanges,\n booleanAttribute,\n computed,\n inject,\n input,\n numberAttribute,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\nimport { Subject } from 'rxjs';\n\nimport { Subscriptions } from '../../utils/subscriptions';\n\ninterface Page {\n page?: number;\n view?: string;\n current?: boolean;\n separator?: boolean;\n}\nlet counter = 0;\n\n@Component({\n selector: 'mg-paginate',\n templateUrl: './paginate.component.html',\n styleUrl: './paginate.component.scss',\n imports: [RouterLink],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n role: 'navigation',\n },\n})\nexport class MagmaPagination implements OnInit, DoCheck, OnChanges, OnDestroy {\n private static readonly onPageUpdate = new Subject<{\n id: string;\n page: number;\n component: MagmaPagination;\n }>();\n\n readonly cd = inject(ChangeDetectorRef);\n\n // input\n\n readonly linkId = input();\n readonly showTotal = input(false, { transform: booleanAttribute });\n readonly textTotal = input('Total %');\n readonly textPage = input('Page %p / %t');\n\n readonly page = input(1, { transform: numberAttribute });\n readonly total = input(0, { transform: numberAttribute });\n readonly base = input();\n readonly size = input(25, { transform: numberAttribute });\n readonly queryParams = input<{}>({});\n\n readonly start = input(3, { transform: numberAttribute });\n readonly middleStart = input(3, { transform: numberAttribute });\n readonly middleEnd = input(3, { transform: numberAttribute });\n readonly end = input(3, { transform: numberAttribute });\n\n // template\n\n pages: Page[] = [];\n currentPage = 1;\n\n private _test = 0;\n\n protected counter = counter++;\n protected readonly uid = computed(() => `page-${this.counter}`);\n\n private readonly subs = Subscriptions.instance();\n\n constructor() {\n this.subs.push(\n MagmaPagination.onPageUpdate.subscribe(page => {\n if (this.linkId() === page.id && page.component !== this) {\n this.update(page.page, false);\n this.ngDoCheck();\n this.cd.detectChanges();\n }\n }),\n );\n }\n\n ngOnInit(): void {\n this.currentPage = this.page();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['page']) {\n this.currentPage = changes['page'].currentValue;\n }\n }\n\n ngDoCheck(): void {\n const pages = [];\n let currentPage = +this.currentPage;\n let test = 0;\n\n const nbPages = this.size() ? Math.ceil(this.total() / this.size()) : 0;\n\n if (currentPage < 1) {\n currentPage = 1;\n this.currentPage = currentPage;\n } else if (currentPage > nbPages) {\n currentPage = nbPages;\n this.currentPage = currentPage;\n }\n\n const addPage = (pageNbr: number) => {\n const link: Page = {};\n link.current = currentPage === pageNbr;\n link.view = `${pageNbr}`;\n link.page = pageNbr;\n test += pageNbr;\n pages.push(link);\n };\n\n let i: number;\n const startPos = this.start();\n const middleStartPos = currentPage - this.middleStart();\n const middleEndPos = currentPage + this.middleEnd();\n const endPos = nbPages - this.end() + 1;\n\n for (i = 1; i <= Math.min(startPos, nbPages); i++) {\n addPage(i);\n }\n if (startPos + 1 < middleStartPos) {\n pages.push({ separator: true });\n }\n for (i = Math.max(startPos + 1, middleStartPos); i <= Math.min(middleEndPos, nbPages); i++) {\n addPage(i);\n }\n if (middleEndPos + 1 < endPos) {\n pages.push({ separator: true });\n }\n for (let i = Math.max(middleEndPos + 1, endPos); i <= nbPages; i++) {\n addPage(i);\n }\n\n if (this._test != test) {\n this._test = test;\n this.pages = pages;\n }\n }\n\n ngOnDestroy(): void {\n this.subs.clear();\n }\n\n update(page: number, event: boolean): void {\n if (this.currentPage !== page) {\n this.currentPage = page;\n this.pages.forEach(e => (e.current = e.page === page));\n if (event && this.linkId()) {\n MagmaPagination.onPageUpdate.next({ page, id: this.linkId()!, component: this });\n }\n }\n }\n\n pageQueryParams(page: number): {} {\n return { page, ...this.queryParams() };\n }\n}\n","@if (showTotal()) {\n \n {{ textTotal().replace('%', '' + total()) }}\n
\n}\n@for (item of pages; track item.page) {\n @if (!item.separator) {\n \n {{ item.view }}\n \n } @else {\n …
\n }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nexport interface FileSizePipeParams {\n format?: 'decimal' | 'binary';\n language?: string;\n options?: Intl.NumberFormatOptions | undefined;\n translate?: {\n unitTableBinary?: [string, string, string, string, string];\n unitTableDecimal?: [string, string, string, string, string];\n };\n}\n\n/**\n * Format file size\n *\n * Examples of usage:\n * - `{{ 566155566400 | fileSize }}` → `527.3 GiB`\n * - `{{ 566155566400 | fileSize: { format: 'decimal' }}` → `566.2 GB`\n * - `{{ 566155566400 | fileSize: { language: 'fr', translate: { unitTableBinary: [' o', ' Kio', ' Mio',\n * ' Gio', ' Tio'] } } }}` → `527,3 Gio`\n */\n@Pipe({\n name: 'fileSize',\n})\nexport class FileSizePipe implements PipeTransform {\n static unitTableBinary = [' B', ' KiB', ' MiB', ' GiB', ' TiB'];\n static unitTableDecimal = [' B', ' kB', ' MB', ' GB', ' TB'];\n\n /**\n * @param value\n * @param params\n * * format:\n * * decimal (SI): by 1000)\n * * binary: by 1024 - default\n * * language - default 'en'\n * * options : NumberFormatOptions\n * @returns\n */\n transform(value: number, params?: FileSizePipeParams): string {\n params ??= {};\n let unit = 0;\n const format = params?.format === 'decimal' ? 1000 : 1024;\n while (value / format > 9) {\n value /= format;\n unit++;\n }\n params.options ??= {};\n params.options.maximumSignificantDigits ??= 4;\n\n return (\n new Intl.NumberFormat(params.language || 'en', params.options).format(value) +\n (params?.format === 'decimal'\n ? (params?.translate?.unitTableDecimal ?? FileSizePipe.unitTableDecimal)\n : (params?.translate?.unitTableBinary ?? FileSizePipe.unitTableBinary))[unit]\n );\n }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\nimport { FileSizePipe, FileSizePipeParams } from '../../pipes/file-size.pipe';\nimport { numberAttributeOrUndefined } from '../../utils/coercion';\n\n/**\n * Loader with message and/or progress bar\n */\n@Component({\n selector: 'mg-progress',\n templateUrl: './progress.component.html',\n styleUrl: './progress.component.scss',\n imports: [FileSizePipe],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MagmaProgress {\n // input\n\n readonly loaded = input(undefined, { transform: numberAttributeOrUndefined });\n readonly total = input(undefined, { transform: numberAttributeOrUndefined });\n readonly sizeFormat = input();\n}\n","@let _loaded = loaded();\n@let _total = total();\n\n @if (_loaded !== undefined && _total && _total > 0) {\n
\n } @else {\n
\n }\n
\n @if (_loaded !== undefined) {\n {{ _loaded | fileSize: sizeFormat() }}\n }\n @if (_loaded !== undefined && _total && _total > 0) {\n /\n }\n @if (_total && _total > 0) {\n {{ _total | fileSize: sizeFormat() }}\n }\n
\n