\n @if (closeButton()) {\n \n }\n \n @let h1 = title();\n @if (h1) {\n
{{ h1 }}
\n }\n \n \n \n}\n","import { NgComponentOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n HostListener,\n inject,\n input,\n output,\n} from '@angular/core';\n\nimport { MagmaMessageInfo } from '../../services/messages';\n\ntype ContextMessageInputs = { context?: InfoMessageComponent } & Record;\n\n@Component({\n selector: 'info-message',\n templateUrl: './info-message.component.html',\n styleUrls: ['./info-message.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgComponentOutlet],\n})\nexport class InfoMessageComponent {\n // inject\n\n private 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 @HostBinding('class')\n get classes() {\n return [this.message()?.type, this._closeClass ? 'close' : null];\n }\n\n @HostBinding('style.--current-pos.px')\n get currentPos() {\n return this._pos ?? null;\n }\n\n @HostBinding('style.--current-height.px')\n get currentHeight() {\n return this._height ?? null;\n }\n\n @HostBinding('style.--info-message-progress-time')\n get progressTime() {\n return this.message()?.time;\n }\n\n private _closeClass = false;\n private _pos!: number;\n private _height!: number;\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 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 styleUrls: ['./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 { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnChanges,\n SimpleChanges,\n booleanAttribute,\n computed,\n contentChildren,\n inject,\n input,\n signal,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\n\nimport { MagmaInputCommon } from './input-common';\n\nlet counter = 0;\n\n@Component({\n selector: 'mg-input',\n templateUrl: './input.component.html',\n styleUrls: ['./input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule],\n host: {\n '[id]': '_id()',\n },\n})\nexport class MagmaInput implements OnChanges {\n readonly cd = inject(ChangeDetectorRef);\n\n readonly id = input();\n\n forId: string | undefined;\n\n /** for checkbox */\n readonly arrayValue = input(false, { transform: booleanAttribute });\n /** for checkbox & radio */\n readonly alignMode = input<'row' | 'column'>('row');\n\n protected counter = counter++;\n protected uid = computed(() => `mg-input-${this.counter}`);\n\n _id = computed(() => this.id() || this.uid());\n\n ngControl: NgControl | null = null;\n\n _errorMessage = signal(null);\n\n readonly inputs = contentChildren(MagmaInputCommon);\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['arrayValue'] && this.inputs()[0]?.componentName === 'input-checkbox') {\n this.inputs()[0].onChange(this.inputs()[0].getValue());\n }\n }\n}\n","\n @if (forId) {\n \n } @else {\n \n }\n
\n\n \n \n \n \n \n
\n\n @if (_errorMessage()) {\n
\n }\n
\n
\n
\n","import { CommonModule } from '@angular/common';\nimport { 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 styleUrls: ['./message.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule],\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 styleUrls: ['./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() ?? 0) / this.size()) : 0;\n\n if (currentPage < 1) {\n currentPage = 1;\n } else if (currentPage > nbPages) {\n currentPage = nbPages;\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\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 styleUrls: ['./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
\n
\n \n
\n\n
\n