\n * \n * \n * ```\n */\n@Directive({\n selector: '[duiAdaptiveHiddenContainer]',\n standalone: true,\n})\nexport class AdaptiveHiddenContainer implements OnDestroy {\n constructor(private host: ElementRef, private container: AdaptiveContainerComponent) {\n container.registerHiddenContainer(host.nativeElement);\n }\n\n ngOnDestroy() {\n this.container.unregisterHiddenContainer(this.host.nativeElement);\n }\n}\n\nexport function getPadding(rect: DOMRect, direction: 'row' | 'column' | 'row-reverse' | 'column-reverse'): string {\n switch (direction) {\n case 'row':\n return `0 ${rect.width}px 0 0`;\n case 'column':\n return `0 0 ${rect.height}px 0`;\n case 'row-reverse':\n return `0 0 0 ${rect.width}px`;\n case 'column-reverse':\n return `${rect.height}px 0 0 0`;\n }\n}\n\nfunction isOverflowing(element: HTMLElement, vertical: boolean): boolean {\n return vertical ? element.scrollHeight > element.clientHeight : element.scrollWidth > element.clientWidth;\n}\n\nfunction isHidden(\n elementOrPlaceholder: DuiAdaptiveElement | DuiAdaptivePlaceholder,\n hiddenContainer: HTMLElement | undefined,\n): boolean {\n const element = elementOrPlaceholder instanceof Comment ? elementOrPlaceholder.duiElement : elementOrPlaceholder;\n if (element.parentElement === hiddenContainer) return true;\n return element.style.display === 'none';\n}\n\nfunction hideElement(\n elementOrPlaceholder: DuiAdaptiveElement | DuiAdaptivePlaceholder,\n hiddenContainer: HTMLElement | undefined,\n) {\n const element = elementOrPlaceholder instanceof Comment ? elementOrPlaceholder.duiElement : elementOrPlaceholder;\n element.style.display = 'none';\n if (!element.parentElement) return;\n\n if (!element.duiPlaceholder) {\n const comment = Object.assign(document.createComment('dui-adaptive-placeholder'), {\n duiElement: element,\n }) as DuiAdaptivePlaceholder;\n element.duiPlaceholder = comment;\n element.parentElement.insertBefore(comment, element);\n }\n if (hiddenContainer && element.parentElement !== hiddenContainer) {\n hiddenContainer.insertBefore(element, hiddenContainer.firstChild);\n element.style.display = '';\n }\n}\n\nfunction showElement(\n elementOrPlaceholder: DuiAdaptiveElement | DuiAdaptivePlaceholder,\n visibleContainer: HTMLElement,\n) {\n const element = elementOrPlaceholder instanceof Comment ? elementOrPlaceholder.duiElement : elementOrPlaceholder;\n element.style.display = '';\n if (!element.parentElement) return;\n\n if (element.duiPlaceholder) {\n // Move the element back to the visible container, keep the comment for later\n visibleContainer.insertBefore(element, element.duiPlaceholder);\n }\n}\n\nfunction getState(visibleContainer: HTMLElement) {\n const nodes: (DuiAdaptiveElement | DuiAdaptivePlaceholder)[] = [];\n const fallbacks: HTMLElement[] = [];\n for (let i = 0; i < visibleContainer.childNodes.length; i++) {\n const node = visibleContainer.childNodes[i];\n if (node instanceof HTMLElement) {\n if (node.classList.contains('dui-adaptive-fallback')) {\n fallbacks.push(node);\n } else {\n nodes.push(node);\n }\n } else if (isAdaptivePlaceholder(node)) {\n\n // Referenced element is already part of visibleContainer, so skip it\n // so that we don't have it twice.\n if (node.duiElement.parentElement === visibleContainer) continue;\n\n // TODO: Check of node.duiElement is still attached to the DOM, if not\n // remove the comment as well and ignore it\n nodes.push(node as DuiAdaptivePlaceholder);\n }\n }\n return { nodes, fallbacks };\n}\n","import { inject, Injectable, PendingTasks } from '@angular/core';\n\n\n@Injectable({ providedIn: 'root' })\nexport class BetterPendingTasks {\n constructor(private pendingTasks: PendingTasks) {\n }\n\n async run
(task: () => Promise): Promise {\n const done = this.pendingTasks.add();\n try {\n return await task();\n } finally {\n done();\n }\n }\n\n callback(task: () => Promise): () => Promise {\n return async () => {\n const done = this.pendingTasks.add();\n try {\n return await task();\n } finally {\n done();\n }\n };\n }\n\n patchPrototype(prototype: T, methods: (keyof T)[]) {\n for (const method of methods) {\n const original = prototype[method];\n if (typeof original !== 'function') continue;\n\n (prototype as any)[method] = (...args: any[]) => {\n return this.run(() => original.apply(prototype, args));\n };\n }\n }\n}\n\nexport function injectPatchedPendingTasks(prototype: T, methods: (keyof T)[]) {\n const pendingTasks = inject(BetterPendingTasks);\n pendingTasks.patchPrototype(prototype, methods);\n}\n\n/**\n * Signals Angular that SSR should wait for this task to complete before rendering.\n */\nexport function pendingTask(task: () => Promise): () => Promise {\n const pendingTasks = inject(BetterPendingTasks);\n return pendingTasks.callback(task);\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport { Directive, HostListener, input, OnInit } from '@angular/core';\nimport { nextTick } from '@deepkit/core';\nimport { injectElementRef } from './utils';\n\n@Directive({\n selector: '[duiClassMin]',\n})\nexport class DuiResponsiveDirective implements OnInit {\n clazz: { [className: string]: boolean } = {};\n protected lastRequest: any;\n\n duiClassMin = input<{\n [className: string]: number;\n }>({});\n\n element = injectElementRef();\n\n ngOnInit() {\n this.onResize();\n }\n\n @HostListener('window:resize')\n onResize() {\n if (this.lastRequest) {\n cancelAnimationFrame(this.lastRequest);\n }\n\n this.lastRequest = nextTick(() => {\n const element: HTMLElement = this.element.nativeElement;\n for (const [name, number] of Object.entries(this.duiClassMin())) {\n const valid = element.offsetWidth > number;\n if (this.clazz[name] !== valid) {\n this.clazz[name] = valid;\n if (valid) {\n element.classList.add(name);\n } else {\n element.classList.remove(name);\n }\n }\n }\n });\n }\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport { booleanAttribute, Component, contentChildren, Directive, effect, EmbeddedViewRef, forwardRef, inject, input, OnDestroy, output, Renderer2, signal, TemplateRef, viewChild, ViewContainerRef } from '@angular/core';\nimport { WindowMenuState } from '../window/window-menu';\nimport { Electron } from '../../core/utils';\nimport { injectElementRef, OnDomCreationDirective } from './utils';\nimport { DropdownComponent, DropdownContainerDirective, DropdownItemComponent, DropdownSplitterComponent, OpenDropdownDirective } from '../button/dropdown.component';\nimport { AdaptiveContainerComponent, AdaptiveHiddenContainer } from '../adaptive-container/adaptive-container.component';\nimport { ConnectedPosition } from '@angular/cdk/overlay';\nimport { OverlayStack } from './app';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ActiveComponent, ButtonHotkeyComponent, HotkeyRegistry } from '../button/button.component';\nimport { IconComponent } from '../icon/icon.component';\nimport type { BuiltTemplateItem } from './menu-electron';\n\n@Directive()\nexport abstract class MenuBase implements ActiveComponent, OnDestroy {\n destroy = output();\n label = input();\n sublabel = input();\n icon = input();\n disabled = input(false);\n accelerator = input();\n role = input();\n hotkey = input('');\n\n visible = input(true);\n\n onlyMacOs = input(false, { transform: booleanAttribute });\n noMacOs = input(false, { transform: booleanAttribute });\n\n id = input();\n before = input();\n after = input();\n beforeGroupContaining = input();\n afterGroupContaining = input();\n template = viewChild('template', { read: TemplateRef });\n\n registeredHotkey = signal('');\n click = output();\n\n checkboxStyle = false;\n\n public type = '';\n level = signal(0);\n\n children = contentChildren(MenuBase, { descendants: false });\n\n active = signal(false);\n\n ngOnDestroy() {\n this.destroy.emit();\n }\n\n buildTemplate(item: BuiltTemplateItem) {\n\n }\n\n activate() {\n this.click.emit();\n }\n\n constructor() {\n effect(() => {\n for (const child of this.children()) {\n child.level.set(this.level() + 1);\n }\n });\n }\n\n public validOs(): boolean {\n if (Electron.isAvailable()) {\n if (this.onlyMacOs() && Electron.getProcess().platform !== 'darwin') {\n return false;\n }\n\n if (this.noMacOs() && Electron.getProcess().platform === 'darwin') {\n return false;\n }\n }\n\n return true;\n }\n}\n\n@Component({\n selector: 'dui-menu-item',\n providers: [{ provide: MenuBase, useExisting: forwardRef(() => MenuItemComponent) }],\n template: `\n \n \n \n `,\n styles: `\n :host {\n display: none;\n }\n `,\n})\nexport class MenuItemComponent extends MenuBase {\n type = 'input';\n}\n\n@Component({\n selector: 'dui-menu-div',\n providers: [{ provide: MenuBase, useExisting: forwardRef(() => MenuDivComponent) }],\n template: `\n \n \n \n `,\n styles: `\n :host {\n display: none;\n }\n `,\n})\nexport class MenuDivComponent extends MenuBase {\n type = 'div';\n}\n\n@Directive({\n selector: 'dui-menu-checkbox',\n providers: [{ provide: MenuBase, useExisting: forwardRef(() => MenuCheckboxDirective) }],\n})\nexport class MenuCheckboxDirective extends MenuBase {\n checked = input(false);\n\n type = 'checkbox';\n\n buildTemplate(item: BuiltTemplateItem) {\n item.checked = this.checked();\n }\n}\n\n@Directive({\n selector: 'dui-menu-radio',\n providers: [{ provide: MenuBase, useExisting: forwardRef(() => MenuRadioComponent) }],\n})\nexport class MenuRadioComponent extends MenuBase {\n checked = input(false);\n\n type = 'radio';\n\n buildTemplate(item: BuiltTemplateItem) {\n item.checked = this.checked();\n }\n}\n\n@Directive({\n selector: 'dui-menu-separator',\n providers: [{ provide: MenuBase, useExisting: forwardRef(() => MenuSeparatorComponent) }],\n})\nexport class MenuSeparatorComponent extends MenuBase {\n type = 'separator';\n}\n\n@Directive({\n selector: '[duiMenuRender]',\n})\nexport class MenuRenderDirective implements OnDestroy {\n duiMenuRender = input.required();\n template = input.required>();\n\n rootAsButton = input(false, { transform: booleanAttribute });\n\n protected elementRef = injectElementRef();\n protected viewContainerRef = inject(ViewContainerRef);\n protected createdViews: EmbeddedViewRef[] = [];\n protected renderer = inject(Renderer2);\n\n constructor() {\n effect(() => {\n const items = this.duiMenuRender();\n for (const comp of this.createdViews) {\n comp.destroy();\n }\n this.createdViews = [];\n\n const needsCheckboxStyle = items.some(item => item.visible() && item instanceof MenuCheckboxDirective || item instanceof MenuRadioComponent);\n\n for (const item of items) {\n if (!item.visible()) continue;\n item.checkboxStyle = needsCheckboxStyle;\n\n const view = this.viewContainerRef.createEmbeddedView(this.template(), { $implicit: item });\n this.createdViews.push(view);\n }\n });\n }\n\n ngOnDestroy() {\n for (const comp of this.createdViews) {\n comp.destroy();\n }\n this.createdViews = [];\n }\n}\n\nexport interface TemplateContext {\n $implicit: MenuBase;\n}\n\n@Directive({\n selector: '[menuItemTemplate]',\n})\nexport class MenuItemTemplate {\n static ngTemplateContextGuard(directive: unknown, context: unknown): context is TemplateContext {\n return true;\n }\n}\n\n@Component({\n selector: 'dui-menu',\n host: {\n 'ngSkipHydration': 'true',\n },\n template: `\n \n @if (item.type === 'separator') {\n \n } @else if (item.type === 'radio') {\n } @else if (item.type === 'spacer') {\n @if (item.template(); as itemTemplate) {\n \n }\n } @else {\n @if (item.children().length) {\n \n \n \n \n @if (!item.label() && item.template(); as itemTemplate) {\n \n } @else {\n {{ item.label() }}\n }\n @if (item.hotkey(); as hotkey) {\n \n }\n @if (item.level() > 0) {\n \n \n }\n \n } @else {\n \n @if (!item.label() && item.template(); as itemTemplate) {\n \n } @else {\n {{ item.label() }}\n }\n @if (item.hotkey(); as hotkey) {\n \n \n }\n \n }\n }\n \n\n \n \n \n {{ moreLabel() }}\n \n \n \n \n \n `,\n styles: `\n dui-button-hotkey {\n justify-self: flex-end;\n margin-left: auto;\n }\n\n .space {\n width: 8px;\n }\n\n dui-icon.more {\n justify-self: flex-end;\n margin-left: auto;\n margin-right: -4px;\n }\n\n dui-dropdown-item {\n flex: 0 0 auto;\n }\n `,\n imports: [\n forwardRef(() => AdaptiveContainerComponent),\n forwardRef(() => AdaptiveHiddenContainer),\n forwardRef(() => DropdownItemComponent),\n MenuRenderDirective,\n MenuItemTemplate,\n DropdownComponent,\n DropdownContainerDirective,\n OpenDropdownDirective,\n DropdownSplitterComponent,\n NgTemplateOutlet,\n ButtonHotkeyComponent,\n IconComponent,\n OnDomCreationDirective,\n ],\n})\nexport class MenuComponent implements OnDestroy {\n /**\n * If true, this menu is used for the application menu bar (only works in Electron).\n */\n forApp = input(false, { transform: booleanAttribute });\n\n moreLabel = input('More');\n\n children = contentChildren(MenuBase, { descendants: false });\n adaptiveContainer = viewChild.required(AdaptiveContainerComponent);\n\n dropdownPositionsRoot: ConnectedPosition[] = [\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n ];\n\n dropdownPositions: ConnectedPosition[] = [\n { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },\n ];\n\n protected overlayStack = inject(OverlayStack);\n protected windowMenuState = inject(WindowMenuState, { optional: true });\n protected dropdowns = new Map();\n protected hotkeyRegistry = inject(HotkeyRegistry);\n protected active = signal(false);\n\n protected dropdownItemsMap = new WeakMap();\n\n registerDropdownItem(item: Element, menu: MenuBase) {\n this.dropdownItemsMap.set(item, menu);\n }\n\n selected(item: MenuBase): boolean {\n if (item instanceof MenuCheckboxDirective) return item.checked();\n if (item instanceof MenuRadioComponent) return item.checked();\n return false;\n }\n\n constructor() {\n this.windowMenuState?.addMenu(this);\n effect(() => {\n registerHotkey(this.hotkeyRegistry, this.children());\n });\n\n function increaseLevelBy(item: MenuBase, increase: number) {\n item.level.set(item.level() + increase);\n for (const child of item.children()) {\n increaseLevelBy(child, increase);\n }\n }\n\n effect(() => {\n const hidden = this.adaptiveContainer().hiddenElements();\n for (const item of this.children()) {\n item.level.set(0);\n }\n for (const element of hidden) {\n const item = this.dropdownItemsMap.get(element);\n if (!item) continue;\n item.level.set(1);\n }\n });\n }\n\n activate(item: MenuBase) {\n item.activate();\n this.close();\n }\n\n close() {\n // Close all\n for (const dropdown of this.dropdowns.values()) {\n dropdown.close();\n }\n this.dropdowns.clear();\n this.active.set(false);\n }\n\n lostFocus(event: FocusEvent) {\n event.view?.addEventListener('click', e => (e.preventDefault(), e.stopImmediatePropagation()), { once: true, capture: true });\n this.close();\n }\n\n protected hideSiblingsAndAbove(item: MenuBase) {\n const level = item.level();\n for (const [otherLevel, otherDropdown] of this.dropdowns.entries()) {\n if (otherLevel >= level) {\n otherDropdown.close();\n this.dropdowns.delete(otherLevel);\n }\n }\n this.active.set(this.dropdowns.size > 0);\n }\n\n dropdownHidden(dropdown: DropdownComponent, level: number) {\n const otherDropdown = this.dropdowns.get(level);\n if (otherDropdown === dropdown) {\n this.dropdowns.delete(level);\n }\n this.active.set(this.dropdowns.size > 0);\n }\n\n dropdownShown(dropdown: DropdownComponent, level: number) {\n // Close all other dropdowns with greater or same level\n for (const [otherLevel, otherDropdown] of this.dropdowns.entries()) {\n if (otherLevel >= level && otherDropdown !== dropdown) {\n otherDropdown.close();\n this.dropdowns.delete(otherLevel);\n }\n }\n this.dropdowns.set(level, dropdown);\n this.active.set(this.dropdowns.size > 0);\n }\n\n ngOnDestroy() {\n this.windowMenuState?.removeMenu(this);\n }\n}\n\nfunction registerHotkey(registry: HotkeyRegistry, items: readonly MenuBase[]): void {\n for (const item of items) {\n if (item.hotkey()) {\n registry.register(item.hotkey(), item);\n }\n registerHotkey(registry, item.children());\n }\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';\nimport { Observable, Subscription } from 'rxjs';\nimport { DomSanitizer, SafeUrl } from '@angular/platform-browser';\nimport { humanBytes } from '@deepkit/core';\n\n/**\n * Almost the same as |async pipe, but renders directly (detectChanges() instead of marking it only(markForCheck())\n * on ChangeDetectorRef.\n *\n * @deprecated Do not use this pipe anymore, it is not necessary. Use the async pipe instead.\n */\n@Pipe({ name: 'asyncRender', pure: false })\nexport class AsyncRenderPipe implements OnDestroy, PipeTransform {\n protected subscription?: Subscription;\n protected lastValue?: any;\n protected lastReturnedValue?: any;\n\n constructor(\n protected cd: ChangeDetectorRef) {\n }\n\n ngOnDestroy(): void {\n if (this.subscription) this.subscription.unsubscribe();\n }\n\n transform(value?: Observable | Promise): T | undefined {\n if (this.lastValue !== value) {\n if (this.subscription) this.subscription.unsubscribe();\n this.lastReturnedValue = undefined;\n this.lastValue = value;\n\n if (value instanceof Promise) {\n value.then((v) => {\n this.lastReturnedValue = v;\n this.cd.detectChanges();\n });\n } else if (value) {\n this.subscription = value.subscribe((next) => {\n this.lastReturnedValue = next;\n this.cd.detectChanges();\n });\n }\n }\n\n return this.lastReturnedValue;\n }\n}\n\n@Pipe({ name: 'objectURL' })\nexport class ObjectURLPipe implements PipeTransform, OnDestroy {\n protected lastUrl?: string;\n\n constructor(private sanitizer: DomSanitizer) {\n }\n\n ngOnDestroy(): void {\n if (this.lastUrl) URL.revokeObjectURL(this.lastUrl);\n }\n\n transform(buffer?: ArrayBuffer | ArrayBufferView, mimeType?: string): SafeUrl | undefined {\n if (buffer) {\n if (this.lastUrl) URL.revokeObjectURL(this.lastUrl);\n this.lastUrl = URL.createObjectURL(new Blob([buffer], { type: mimeType }));\n return this.sanitizer.bypassSecurityTrustResourceUrl(this.lastUrl);\n }\n }\n}\n\n@Pipe({ name: 'fileSize' })\nexport class HumanFileSizePipe implements PipeTransform {\n transform(bytes: number, si: boolean = false): string {\n return humanBytes(bytes, si);\n }\n}\n","import {\n deserialize,\n Excluded,\n ReflectionClass,\n ReflectionKind,\n resolveTypeMembers,\n serialize,\n Serializer,\n Type,\n typeAnnotation,\n TypeClass,\n} from '@deepkit/type';\nimport {\n ClassType,\n getClassTypeFromInstance,\n getPathValue,\n setPathValue,\n throttleTime,\n TypeAnnotation,\n} from '@deepkit/core';\nimport { EventToken } from '@deepkit/event';\nimport { ApplicationRef, Injector } from '@angular/core';\nimport { NavigationEnd, ResolveEnd, Router } from '@angular/router';\nimport onChange from 'on-change';\n\n/**\n * If this type decorator is used then the property is not persisted in localStorage,\n * but in the URL instead and recovered from the URL when reloaded.\n *\n * @example\n * ```typescript\n * class State extends EfficientState {\n * shop: number & PartOfUrl = 0;\n * }\n * ```\n */\nexport type PartOfUrl = TypeAnnotation<'partOfUrl'>;\n\nexport type FilterActions = { [name in keyof T]: T[name] extends (a: infer A extends [...a: any[]], ...args: any[]) => infer R ? (...args: A) => R : never };\n\n/**\n * EfficientState is a base class for all states that are used in the frontend.\n *\n * @example\n * ```typescript\n * //state that won't be persisted is used as `VolatileState & Excluded`\n * class VolatileState {\n * shops: Shop[] = [];\n *\n * user?: User;\n * }\n *\n * export class State extends EfficientState {\n * shop: number & PartOfUrl = 0;\n * sidebarVisible: boolean = true;\n * searchQuery: string = '';\n *\n * volatile: VolatileState & Excluded = new VolatileState();\n *\n * //normal methods are supported\n * getShop(): Shop | undefined {\n * return this.volatile.getShop(this.shop);\n * }\n *\n * //actions have access to Angular's DI container\n * async authenticated([user]: [FrontendUser], client: ControllerClient) {\n * this.volatile.shops = await client.shop.getShops();\n * this.volatile.user = user;\n * }\n * }\n * ```\n */\nexport class EfficientState {\n call: FilterActions & Excluded;\n\n constructor(injector?: Injector) {\n this.call = {} as any;\n if (!injector) return;\n const app = injector.get(ApplicationRef);\n\n for (const method of ReflectionClass.from(this.constructor as any).getMethods()) {\n if (method.name === 'constructor') continue;\n const params = method.getParameters().slice(1).map(v => v.type).filter(v => v.kind === ReflectionKind.class) as TypeClass[];\n (this.call as any)[method.name] = (...args: any[]) => {\n const deps: any = params.map(v => injector.get(v.classType));\n const res = (this as any)[method.name](args, ...deps);\n if (res instanceof Promise) {\n return res.finally(() => app.tick());\n }\n return res;\n };\n }\n }\n}\n\nexport function findPartsOfUrl(stateClass: ClassType) {\n const paths: string[] = [];\n const schema = ReflectionClass.from(stateClass);\n findPartsOfUrlForType(schema.type, paths);\n return paths;\n}\n\nexport function getQueryObject(state: EfficientState) {\n const query: any = {};\n const paths = findPartsOfUrl(getClassTypeFromInstance(state));\n for (const path of paths) {\n const value = getPathValue(state, path);\n if (value !== undefined) query[path] = value;\n }\n return query;\n}\n\nexport function findPartsOfUrlForType(type: Type, paths: string[] = [], prefix: string = '', state: any[] = []) {\n if (state.includes(type)) return;\n state.push(type);\n if (type.kind === ReflectionKind.class || type.kind === ReflectionKind.objectLiteral) {\n for (const property of resolveTypeMembers(type)) {\n if (property.kind !== ReflectionKind.property && property.kind !== ReflectionKind.propertySignature) continue;\n if (property.type.kind === ReflectionKind.class || property.type.kind === ReflectionKind.objectLiteral) {\n findPartsOfUrlForType(property.type, paths, (prefix ? prefix + '.' : '') + String(property.name), state);\n } else {\n const meta = typeAnnotation.getType(property.type, 'partOfUrl');\n if (meta) {\n paths.push((prefix ? prefix + '.' : '') + String(property.name));\n }\n }\n }\n }\n}\n\nconst stateSerializer: Serializer = new class extends Serializer {\n protected registerSerializers() {\n super.registerSerializers();\n\n this.serializeRegistry.registerClass(EventToken, (type, state) => {\n state.template = ''; //don't serialize EventToken\n });\n\n this.deserializeRegistry.registerClass(EventToken, (type, state) => {\n state.template = ''; //don't serialize EventToken\n });\n }\n};\n\n/**\n * Angular provider factory for the state class.\n *\n * @example\n * ```typescript\n *\n * @Injectable()\n * export class State extends EfficientState {\n * //events\n * fileAdded = new EventToken('file.added');\n *\n * //persisted state\n * shop: number = 0;\n * sidebarVisible: boolean = true;\n * }\n *\n * @NgModule({\n * providers: [\n * provideState(State),\n * ]\n * })\n * class AppModule {}\n * ```\n */\nexport function provideState(stateClass: ClassType, localStorageKey: string = 'appState') {\n const stateType = ReflectionClass.from(stateClass).type;\n\n return {\n provide: stateClass, deps: [Router, Injector], useFactory: (router: Router, injector: Injector) => {\n let state = new stateClass(injector);\n try {\n const nextState: any = deserialize(JSON.parse(localStorage.getItem(localStorageKey) || ''), undefined, stateSerializer, undefined, stateType);\n if (nextState) {\n delete nextState.call;\n Object.assign(state, nextState);\n }\n } catch (error) {\n }\n\n function loadFromRoute(query: object) {\n // console.log('loadFromRoute', query);\n for (const [path, value] of Object.entries(query)) {\n setPathValue(state, path, value);\n }\n }\n\n function updateQueries() {\n const queryParams = getQueryObject(state);\n const current = router.routerState.snapshot.root.queryParams;\n //check if different\n let different = false;\n for (const [key, value] of Object.entries(queryParams)) {\n if (current[key] !== value) {\n different = true;\n break;\n }\n }\n if (different) {\n router.navigate([], { queryParams: queryParams, queryParamsHandling: 'merge', replaceUrl: true });\n }\n }\n\n const updateStorage = throttleTime(() => {\n localStorage.setItem(localStorageKey, JSON.stringify(serialize(state, undefined, stateSerializer, undefined, stateType)));\n updateQueries();\n });\n\n router.events.subscribe((event) => {\n // console.log('event', event);\n if (event instanceof ResolveEnd) {\n loadFromRoute(event.state.root.queryParams);\n }\n if (event instanceof NavigationEnd) {\n updateQueries();\n }\n });\n\n return onChange(state, (path: any, value: any, previousValue: any) => {\n // console.log('State changed', path, value, previousValue);\n if (value === previousValue) return;\n updateStorage();\n }, {\n ignoreKeys: ['call', 'volatile']\n });\n }\n };\n}\n","import { booleanAttribute, Component, effect, inject, input, ViewEncapsulation } from '@angular/core';\nimport { DuiApp } from './app';\nimport { DOCUMENT } from '@angular/common';\n\n@Component({\n selector: 'dui-style',\n template: '',\n styleUrl: '../../scss/dui.css',\n encapsulation: ViewEncapsulation.None,\n})\nexport class DuiStyleComponent {\n // required to call DuiApp.start\n duiApp = inject(DuiApp);\n document = inject(DOCUMENT, { optional: true });\n\n /**\n * If true, the body applies the 'dui-normalized' class to normalize all elements.\n */\n normalizeStyle = input(false, { alias: 'normalize-style', transform: booleanAttribute });\n\n constructor() {\n effect(() => {\n const document = this.document;\n if (!document) return;\n if (this.normalizeStyle()) {\n document.body.classList.add('dui-normalized');\n } else {\n document.body.classList.remove('dui-normalized');\n }\n });\n }\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport { booleanAttribute, Component, HostListener, inject, input } from '@angular/core';\nimport { ngValueAccessor, ValueAccessorBase } from '../../core/form';\nimport { RouterLinkActive } from '@angular/router';\n\n@Component({\n selector: 'dui-tab-button',\n template: `\n \n `,\n host: {\n '[attr.tabindex]': '1',\n '[class.active]': 'isActive()',\n },\n styleUrls: ['./tab-button.component.scss'],\n hostDirectives: [\n { directive: RouterLinkActive, inputs: ['routerLinkActiveOptions'] },\n ],\n providers: [ngValueAccessor(TabButtonComponent)],\n})\nexport class TabButtonComponent extends ValueAccessorBase {\n /**\n * Whether the button is active (pressed).\n *\n * Use alternatively form API, e.g. \n */\n active = input(false, { transform: booleanAttribute });\n\n routerLinkActive = inject(RouterLinkActive);\n\n @HostListener('click')\n protected onClick() {\n const value = this.value();\n if (value === undefined) return;\n this.setValue(value);\n }\n\n protected isActive() {\n return this.routerLinkActive.isActive || this.active();\n }\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport { ChangeDetectionStrategy, Component, HostBinding, HostListener } from '@angular/core';\nimport { ngValueAccessor, ValueAccessorBase } from '../../core/form';\nimport { IconComponent } from '../icon/icon.component';\n\n/**\n * Checkbox component to toggle boolean values.\n *\n * ```html\n * Check me!\n * ```\n */\n@Component({\n selector: 'dui-checkbox',\n template: `\n \n \n \n \n `,\n styleUrls: ['./checkbox.component.scss'],\n providers: [ngValueAccessor(CheckboxComponent)],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [IconComponent],\n host: {\n '[class.dui-normalized]': 'true',\n },\n})\nexport class CheckboxComponent extends ValueAccessorBase {\n @HostBinding('tabindex')\n protected get tabIndex() {\n return 1;\n }\n\n @HostBinding('class.checked')\n protected get isChecked() {\n return true === this.value();\n }\n\n @HostListener('click')\n protected onClick() {\n if (this.isDisabled) return;\n\n this.setValue(!this.value());\n this.touch();\n }\n\n constructor() {\n super();\n this.value.set(false);\n }\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport { AfterViewInit, ComponentRef, Directive, input, OnDestroy, ViewContainerRef } from '@angular/core';\n\n@Directive({ selector: '[renderComponent]' })\nexport class RenderComponentDirective implements AfterViewInit, OnDestroy {\n renderComponent = input();\n renderComponentInputs = input<{\n [name: string]: any;\n }>({});\n\n public component?: ComponentRef;\n\n constructor(\n protected viewContainerRef: ViewContainerRef,\n ) {\n }\n\n ngAfterViewInit(): void {\n this.component = this.viewContainerRef.createComponent(this.renderComponent());\n\n for (const [i, v] of Object.entries(this.renderComponentInputs())) {\n this.component.setInput(i, v);\n }\n }\n\n ngOnDestroy(): void {\n if (this.component) {\n this.component.destroy();\n }\n }\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport {\n AfterViewInit,\n ApplicationRef,\n booleanAttribute,\n Component,\n ComponentRef,\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n inject,\n Injector,\n input,\n model,\n OnChanges,\n OnDestroy,\n Optional,\n Output,\n SimpleChanges,\n TemplateRef,\n Type,\n ViewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { WindowRegistry } from '../window/window-state';\nimport { WindowComponent } from '../window/window.component';\nimport { RenderComponentDirective } from '../core/render-component.directive';\nimport { OverlayStack, OverlayStackItem } from '../app/app';\nimport { Subscription } from 'rxjs';\nimport { ButtonComponent } from '../button/button.component';\nimport { WindowContentComponent } from '../window/window-content.component';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { unsubscribe } from '../app/reactivate-change-detection';\n\n@Component({\n template: `\n \n \n @if (component()) {\n \n \n }\n\n @if (content(); as content) {\n \n }\n\n @if (container(); as container) {\n \n } @else {\n \n }\n \n\n @if (actions(); as actions) {\n \n \n
\n }\n \n `,\n host: {\n '[attr.tabindex]': '1',\n },\n styleUrls: ['./dialog-wrapper.component.scss'],\n imports: [WindowComponent, WindowContentComponent, RenderComponentDirective, NgTemplateOutlet],\n})\nexport class DialogWrapperComponent {\n component = input>();\n componentInputs = input<{ [name: string]: any; }>({});\n\n actions = model | undefined>(undefined);\n container = model | undefined>(undefined);\n content = model | undefined>(undefined);\n class = input('');\n normalizeStyle = input(false, { alias: 'normalize-style', transform: booleanAttribute });\n\n @ViewChild(RenderComponentDirective, { static: false }) renderComponentDirective?: RenderComponentDirective;\n\n windowComponent = inject(WindowComponent, { optional: true });\n\n setActions(actions: TemplateRef | undefined) {\n this.actions.set(actions);\n }\n\n setDialogContainer(container: TemplateRef | undefined) {\n this.container.set(container);\n }\n}\n\n/**\n * A dialog component that can be used to display content in a modal dialog.\n *\n * ```html\n * \n * Hello World!\n * Abort\n * OK\n * \n * Open Dialog\n * ```\n */\n@Component({\n selector: 'dui-dialog',\n template: `\n \n \n `,\n styles: [`:host {\n display: none;\n }`],\n})\nexport class DialogComponent implements AfterViewInit, OnDestroy, OnChanges {\n title = input('');\n\n visible = model(false);\n\n class = input('');\n\n noPadding = input(false, { transform: booleanAttribute });\n\n minWidth = input();\n minHeight = input();\n\n width = input();\n height = input();\n\n maxWidth = input();\n maxHeight = input();\n\n center = input(false);\n\n backDropCloses = input(false);\n\n normalizeStyle = input(false, { alias: 'normalize-style', transform: booleanAttribute });\n\n component = input>();\n componentInputs = input<{\n [name: string]: any;\n }>({});\n\n @Output() closed = new EventEmitter();\n @Output() open = new EventEmitter();\n\n @ViewChild('template', { static: true }) template?: TemplateRef;\n\n actions?: TemplateRef | undefined;\n container?: TemplateRef | undefined;\n\n overlayRef?: OverlayRef;\n wrapperComponentRef?: ComponentRef;\n\n protected lastOverlayStackItem?: OverlayStackItem;\n\n constructor(\n protected applicationRef: ApplicationRef,\n protected overlayStack: OverlayStack,\n protected viewContainerRef: ViewContainerRef,\n protected overlay: Overlay,\n protected injector: Injector,\n protected registry: WindowRegistry,\n @Optional() protected window?: WindowComponent,\n ) {\n }\n\n toPromise(): Promise {\n return new Promise((resolve) => {\n this.closed.subscribe((v: any) => {\n resolve(v);\n });\n });\n }\n\n setDialogContainer(container: TemplateRef | undefined) {\n this.container = container;\n if (this.wrapperComponentRef) {\n this.wrapperComponentRef.instance.setDialogContainer(container);\n }\n }\n\n setActions(actions: TemplateRef | undefined) {\n this.actions = actions;\n if (this.wrapperComponentRef) {\n this.wrapperComponentRef.instance.setActions(actions);\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (this.visible()) {\n this.show();\n } else {\n this.close(undefined);\n }\n }\n\n show() {\n if (this.overlayRef) {\n return;\n }\n\n const window = this.window ? this.window.getClosestNonDialogWindow() : this.registry.getOuterActiveWindow();\n const offsetTop = window && window.header()?.getBottomPosition() || 0;\n\n // const document = this.registry.getCurrentViewContainerRef().element.nativeElement.ownerDocument;\n\n //this is necessary for multi-window environments, but doesn't work yet.\n // const overlayContainer = new OverlayContainer(document);\n //\n // const overlay = new Overlay(\n // this.injector.get(ScrollStrategyOptions),\n // overlayContainer,\n // this.injector.get(ComponentFactoryResolver),\n // new OverlayPositionBuilder(this.injector.get(ViewportRuler), document, this.injector.get(Platform), overlayContainer),\n // this.injector.get(OverlayKeyboardDispatcher),\n // this.injector,\n // this.injector.get(NgZone),\n // document,\n // this.injector.get(Directionality),\n // );\n const overlay = this.overlay;\n\n let positionStrategy = overlay\n .position()\n .global().centerHorizontally().top(offsetTop + 'px');\n\n const center = this.center();\n if (center) {\n positionStrategy = overlay\n .position()\n .global().centerHorizontally().centerVertically();\n }\n\n this.overlayRef = overlay.create({\n width: this.width() || undefined,\n height: this.height() || undefined,\n minWidth: this.minWidth() || undefined,\n minHeight: this.minHeight() || undefined,\n maxWidth: this.maxWidth() || '90%',\n maxHeight: this.maxHeight() || '90%',\n hasBackdrop: true,\n panelClass: [this.class(), (center ? 'dialog-overlay' : 'dialog-overlay-with-animation'), this.noPadding() ? 'dialog-overlay-no-padding' : ''],\n scrollStrategy: overlay.scrollStrategies.reposition(),\n positionStrategy: positionStrategy,\n });\n\n if (this.backDropCloses()) {\n this.overlayRef.backdropClick().subscribe(() => {\n this.close(undefined);\n });\n }\n\n const injector = Injector.create({\n parent: this.injector,\n providers: [\n { provide: DialogComponent, useValue: this },\n { provide: WindowComponent, useValue: window },\n ],\n });\n\n this.open.emit();\n const portal = new ComponentPortal(DialogWrapperComponent, this.viewContainerRef, injector);\n\n this.wrapperComponentRef = this.overlayRef.attach(portal);\n this.wrapperComponentRef.setInput('component', this.component());\n this.wrapperComponentRef.setInput('componentInputs', this.componentInputs());\n this.wrapperComponentRef.setInput('content', this.template);\n this.wrapperComponentRef.setInput('class', this.class());\n this.wrapperComponentRef.setInput('normalize-style', this.normalizeStyle());\n\n if (this.lastOverlayStackItem) this.lastOverlayStackItem.release();\n this.lastOverlayStackItem = this.overlayStack.register(this.overlayRef.hostElement, this, () => this.close());\n\n if (this.actions) {\n this.wrapperComponentRef.instance.setActions(this.actions);\n }\n\n if (this.container) {\n this.wrapperComponentRef.instance.setDialogContainer(this.container);\n }\n\n this.overlayRef.updatePosition();\n\n this.visible.set(true);\n\n this.wrapperComponentRef.location.nativeElement.focus();\n }\n\n protected beforeUnload() {\n if (this.lastOverlayStackItem) this.lastOverlayStackItem.release();\n\n this.wrapperComponentRef?.destroy();\n\n if (this.overlayRef) {\n this.overlayRef.detach();\n this.overlayRef.dispose();\n this.overlayRef = undefined;\n }\n }\n\n ngAfterViewInit() {\n }\n\n close(v?: any) {\n const open = !!this.overlayRef;\n this.beforeUnload();\n this.visible.set(false);\n if (open) {\n this.closed.emit(v);\n }\n }\n\n ngOnDestroy(): void {\n this.beforeUnload();\n }\n}\n\n/**\n * Directive to lazy load a dialog container.\n *\n * ```html\n * \n * \n * Lazy loaded dialog content.\n * \n * \n */\n@Directive({ selector: '[dialogContainer]' })\nexport class DialogDirective {\n constructor(protected dialog: DialogComponent, public template: TemplateRef) {\n this.dialog.setDialogContainer(this.template);\n }\n}\n\n@Component({\n selector: 'dui-dialog-actions',\n template: '',\n})\nexport class DialogActionsComponent implements AfterViewInit, OnDestroy {\n @ViewChild('template', { static: true }) template!: TemplateRef;\n\n constructor(protected dialog: DialogComponent) {\n }\n\n ngAfterViewInit(): void {\n this.dialog.setActions(this.template);\n }\n\n ngOnDestroy(): void {\n if (this.dialog.actions === this.template) {\n this.dialog.setActions(undefined);\n }\n }\n}\n\n@Component({\n selector: 'dui-dialog-error',\n template: '',\n styleUrls: ['./dialog-error.component.scss'],\n})\nexport class DialogErrorComponent {\n}\n\n/**\n * A directive to close the dialog on regular left click.\n * Can be used inside a dialog to close it.\n *\n * ```html\n * Close\n * ```\n */\n@Directive({ selector: '[closeDialog]' })\nexport class CloseDialogDirective {\n closeDialog = input();\n\n constructor(protected dialog: DialogComponent) {\n }\n\n @HostListener('click')\n protected onClick() {\n this.dialog.close(this.closeDialog());\n }\n}\n\n/**\n * A directive to open the given dialog on regular left click.\n *\n * ```html\n * \n * Hi there!\n * \n * Open Dialog\n * ```\n */\n@Directive({ selector: '[openDialog]' })\nexport class OpenDialogDirective implements AfterViewInit, OnChanges, OnDestroy {\n openDialog = input();\n\n @unsubscribe()\n openSub?: Subscription;\n\n @unsubscribe()\n hiddenSub?: Subscription;\n\n constructor(\n protected elementRef: ElementRef,\n @Optional() protected button?: ButtonComponent,\n ) {\n }\n\n ngOnDestroy() {\n }\n\n ngOnChanges() {\n this.link();\n }\n\n ngAfterViewInit() {\n this.link();\n }\n\n protected link() {\n const openDialog = this.openDialog();\n if (this.button && openDialog) {\n this.openSub = openDialog.open.subscribe(() => {\n if (this.button) this.button.active.set(true);\n });\n this.hiddenSub = openDialog.closed.subscribe(() => {\n if (this.button) this.button.active.set(false);\n });\n }\n }\n\n @HostListener('click')\n protected onClick() {\n const openDialog = this.openDialog();\n if (openDialog) openDialog.show();\n }\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport { AfterViewInit, booleanAttribute, Component, computed, ElementRef, inject, input, output, viewChild } from '@angular/core';\nimport { ngValueAccessor, ValueAccessorBase } from '../../core/form';\nimport { formatDate } from '@angular/common';\nimport { IconComponent } from '../icon/icon.component';\nimport { FormsModule } from '@angular/forms';\nimport { DuiDocument } from '../document';\n\nconst dateTimeTypes: string[] = ['time', 'date', 'datetime', 'datetime-local'];\n\n@Component({\n selector: 'dui-input',\n template: `\n @if (icon(); as icon) {\n \n }\n @if (type() === 'textarea') {\n \n } @else {\n @if (type() !== 'textarea') {\n \n }\n }\n @if (clearer() && !disabled()) {\n \n }\n `,\n styleUrls: ['./input.component.scss'],\n host: {\n '[class.is-textarea]': 'type() === \"textarea\"',\n '[class.light-focus]': 'lightFocus()',\n '[class.focus-outline]': '!lightFocus()',\n '[class.semi-transparent]': 'semiTransparent()',\n '[class.no-controls]': 'noControls()',\n '[class.has-clearer]': 'clearer()',\n '[class.filled]': 'value()',\n '[class.round]': 'round()',\n '[class.textured]': 'textured()',\n '[class.has-icon]': 'icon()',\n '[class.focused]': 'isFocused()',\n },\n providers: [ngValueAccessor(InputComponent)],\n imports: [IconComponent, FormsModule],\n})\nexport class InputComponent extends ValueAccessorBase implements AfterViewInit {\n type = input('text');\n\n step = input(1);\n\n placeholder = input('');\n\n name = input('');\n icon = input('');\n\n min = input();\n max = input();\n maxLength = input();\n minLength = input();\n\n iconSize = input(17);\n\n /**\n * Focuses this element once created (AfterViewInit).\n */\n autoFocus = input(false, { alias: 'auto-focus', transform: booleanAttribute });\n\n /**\n * Uses a more decent focus border.\n */\n lightFocus = input(false, { transform: booleanAttribute });\n\n /**\n * Disables input controls (like for type=number the arrow buttons)\n */\n noControls = input(false, { transform: booleanAttribute });\n\n /**\n * Appears a little bit transparent. Perfect for blurry background.\n */\n semiTransparent = input(false, { transform: booleanAttribute });\n\n esc = output();\n enter = output();\n keydown = output();\n keyup = output();\n blur = output();\n focus = output();\n\n input = viewChild('input', { read: ElementRef });\n\n textured = input(false, { transform: booleanAttribute });\n\n readonly = input(false, { transform: booleanAttribute });\n\n protected duiDocument = inject(DuiDocument);\n\n isFocused = computed(() => this.duiDocument.activeElement() === this.input()?.nativeElement);\n\n round = input(false, { transform: booleanAttribute });\n\n clearer = input(false, { transform: booleanAttribute });\n\n protected normalizeValue = computed(() => {\n if (dateTimeTypes.includes(this.type())) {\n if (this.value() instanceof Date) {\n if (this.type() === 'date') return formatDate(this.value(), `yyyy-MM-dd`, navigator.language);\n return formatDate(this.value(), 'yyyy-MM-ddThh:mm:ss.SSS', navigator.language);\n } else if ('string' === typeof this.value()) {\n return formatDate(new Date(this.value()), 'yyyy-MM-ddThh:mm:ss.SSS', navigator.language);\n }\n }\n return this.value();\n });\n\n\n constructor() {\n super();\n this.value.set('');\n }\n\n clear() {\n this.setValue('');\n }\n\n setValue(value: any | undefined) {\n if (this.type() === 'file' && !value && this.input) {\n //we need to manually reset the field, since writing to it via ngModel is not supported.\n const input = this.input();\n if (input) input.nativeElement.value = '';\n }\n\n value = value === undefined || value === null ? '' : value;\n\n if (this.type() === 'file') return;\n if (this.type() === 'text') {\n\n } else if (this.type() === 'number') {\n if (value && 'number' !== typeof value) {\n value = parseFloat(value);\n }\n } else if (dateTimeTypes.includes(this.type())) {\n if ('string' === typeof value) {\n value = new Date(value);\n }\n }\n super.setValue(value);\n }\n\n protected onKeyDown(event: KeyboardEvent) {\n this.touch();\n this.keydown.emit(event);\n }\n\n protected onKeyUp(event: KeyboardEvent) {\n if (event.key.toLowerCase() === 'enter' && this.type() !== 'textarea') {\n this.enter.emit(event);\n }\n\n if (event.key.toLowerCase() === 'esc' || event.key.toLowerCase() === 'escape') {\n this.esc.emit(event);\n }\n\n this.keyup.emit(event);\n }\n\n focusInput() {\n setTimeout(() => {\n const input = this.input();\n if (input) input.nativeElement.focus();\n });\n }\n\n ngAfterViewInit() {\n if (this.autoFocus() && this.input()) {\n this.focusInput();\n }\n }\n\n protected async handleFileInput(event: any) {\n const files = event.target.files;\n this.touch();\n\n const readFile = (file: File): Promise => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n if (reader.result) {\n if (reader.result instanceof ArrayBuffer) {\n resolve(reader.result);\n } else {\n resolve(undefined);\n }\n }\n };\n reader.onerror = (error) => {\n console.log('Error: ', error);\n reject();\n };\n\n reader.readAsArrayBuffer(file);\n });\n };\n\n if (files) {\n if (files.length > 1) {\n const value: any[] = [];\n for (let i = 0; i < files.length; i++) {\n const file = files.item(i);\n if (file) {\n value.push(await readFile(file));\n }\n }\n this.setValue(value);\n } else if (files.length === 1) {\n this.setValue(await readFile(files.item(0)));\n }\n }\n }\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport { ApplicationRef, Component, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, Inject, Injectable, Injector, input, model, OnDestroy, Signal, Type, ViewContainerRef } from '@angular/core';\nimport { CloseDialogDirective, DialogActionsComponent, DialogComponent } from './dialog.component';\nimport { isTargetChildOf } from '../../core/utils';\nimport { DOCUMENT } from '@angular/common';\nimport { WindowRegistry } from '../window/window-state';\nimport { Overlay } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { ButtonComponent, HotkeyDirective } from '../button/button.component';\nimport { InputComponent } from '../input/input.component';\nimport { FormsModule } from '@angular/forms';\n\n\n@Component({\n template: `\n {{ title() || 'No title' }}
\n @if (content()) {\n {{ content() }}
\n }\n\n \n Cancel\n OK\n \n `,\n imports: [DialogActionsComponent, ButtonComponent, HotkeyDirective, CloseDialogDirective],\n})\nexport class DuiDialogConfirm {\n title = input('Confirm');\n content = input('');\n\n static dialogDefaults = {\n maxWidth: '700px',\n };\n}\n\n@Component({\n template: `\n {{ title() || 'No title' }}
\n @if (content()) {\n {{ content() }}
\n }\n\n \n OK\n \n `,\n imports: [DialogActionsComponent, ButtonComponent, HotkeyDirective, CloseDialogDirective],\n})\nexport class DuiDialogAlert {\n title = input('Alert');\n content = input('');\n\n static dialogDefaults = {\n maxWidth: '700px',\n };\n}\n\n@Component({\n template: `\n {{ title() || 'No title' }}
\n @if (content(); as content) {\n {{ content }}
\n }\n \n \n
\n\n \n Cancel\n OK\n \n `,\n imports: [InputComponent, FormsModule, DialogActionsComponent, ButtonComponent, HotkeyDirective, CloseDialogDirective],\n})\nexport class DuiDialogPrompt {\n title = input('Alert');\n content = input('');\n\n value = model('');\n\n static dialogDefaults = {\n maxWidth: '700px',\n };\n\n constructor(public dialog: DialogComponent) {\n }\n}\n\nexport type Inputs = {\n [P in keyof T]?: T[P] extends Signal ? V : T[P];\n}\n\n@Injectable({ providedIn: 'root' })\nexport class DuiDialog {\n constructor(\n protected resolver: ComponentFactoryResolver,\n protected app: ApplicationRef,\n protected injector: Injector,\n protected registry: WindowRegistry,\n protected overlay: Overlay,\n ) {\n }\n\n protected getComponentRef(viewContainerRef: ViewContainerRef | null = null): ComponentRef {\n if (!viewContainerRef && !this.registry.activeWindow) {\n //create portal\n const overlayRef = this.overlay.create();\n const portal = new ComponentPortal(DialogComponent);\n\n const comp = overlayRef.attach(portal);\n comp.instance.closed.subscribe((v) => {\n comp.destroy();\n overlayRef.detach();\n overlayRef.dispose();\n });\n\n return comp;\n }\n\n if (!viewContainerRef) {\n viewContainerRef = this.registry.getCurrentViewContainerRef();\n }\n\n return viewContainerRef.createComponent(DialogComponent);\n }\n\n public open(\n component: Type,\n inputs: { [name in keyof T]?: any } = {},\n dialogInputs: Inputs = {},\n viewContainerRef: ViewContainerRef | null = null,\n ): { dialog: DialogComponent, close: Promise, component: T } {\n const comp = this.getComponentRef(viewContainerRef);\n comp.setInput('visible', true);\n comp.setInput('component', component);\n comp.setInput('componentInputs', inputs);\n\n if ((component as any).dialogDefaults) {\n for (const [i, v] of Object.entries((component as any).dialogDefaults) as Array<[string, any]>) {\n comp.setInput(i, v);\n }\n }\n\n for (const [i, v] of Object.entries(dialogInputs)) {\n comp.setInput(i, v);\n }\n\n const close = new Promise((resolve) => {\n comp.instance.closed.subscribe((v) => {\n comp.destroy();\n resolve(v);\n });\n });\n\n comp.instance.show();\n\n return {\n dialog: comp.instance,\n close,\n component: comp.instance.wrapperComponentRef?.instance?.renderComponentDirective?.component?.instance,\n };\n }\n\n public async alert(title: string, content: string = '', inputs: { [name: string]: any } = {}): Promise {\n const { dialog } = this.open(DuiDialogAlert, { title, content }, inputs);\n return dialog.toPromise();\n }\n\n public async confirm(title: string, content: string = '', inputs: { [name: string]: any } = {}): Promise {\n const { dialog } = this.open(DuiDialogConfirm, { title, content }, inputs);\n return dialog.toPromise();\n }\n\n public async prompt(title: string, value: string, content?: string, inputs: { [name: string]: any } = {}): Promise {\n const { dialog } = this.open(DuiDialogPrompt, { title, value, content }, inputs);\n return dialog.toPromise();\n }\n}\n\n/**\n * Directive to show a confirmation dialog when the user clicks on the element.\n *\n * ```html\n * Delete\n * ```\n */\n@Directive({ selector: '[confirm]' })\nexport class DuiDialogConfirmDirective implements OnDestroy {\n /**\n * The confirm message to show when the user clicks on the element.\n *\n * Use `Title\\nText` to specify a title and text, separated by a newline.\n */\n confirm = input.required();\n\n protected ignoreNextClick = false;\n\n protected callback = async (event: MouseEvent) => {\n if (isTargetChildOf(event.target, this.element.nativeElement)) {\n if (this.ignoreNextClick) {\n this.ignoreNextClick = false;\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n const confirm = this.confirm();\n const firstNewlineIndex = confirm.indexOf('\\n');\n let title = '';\n let text = '';\n if (firstNewlineIndex !== -1) {\n title = confirm.substring(0, firstNewlineIndex);\n text = confirm.substring(firstNewlineIndex + 1);\n } else {\n title = confirm;\n text = '';\n }\n const a = await this.dialog.confirm(title, text, {});\n if (a) {\n this.ignoreNextClick = true;\n this.element.nativeElement.dispatchEvent(event);\n }\n }\n };\n\n constructor(\n protected element: ElementRef,\n protected dialog: DuiDialog,\n @Inject(DOCUMENT) protected document: any,\n ) {\n this.document.body?.addEventListener('click', this.callback, true);\n }\n\n ngOnDestroy() {\n this.document.body?.removeEventListener('click', this.callback, true);\n }\n}\n","import { ClientProgress, Progress } from '@deepkit/rpc';\nimport { computed, Injectable, signal } from '@angular/core';\nimport { pathBasename } from '@deepkit/core';\n\nexport interface FileQueueEntry {\n name: string;\n dir: string;\n data: Uint8Array;\n addFile: (name: string, dir: string, data: Uint8Array) => Promise;\n progress?: Progress;\n abort?: () => void;\n done?: true;\n errored?: true;\n aborted?: true;\n}\n\nexport interface FilesystemApiFile {\n size: number;\n lastModified?: Date;\n visibility: string;\n\n // not available in Filesystem\n created?: Date;\n mimeType: string;\n path: string;\n type: 'file' | 'directory';\n}\n\nexport function fileDirectory(file: FilesystemApiFile): string {\n const lastSlash = file.path.lastIndexOf('/');\n return lastSlash <= 0 ? '/' : file.path.slice(0, lastSlash);\n}\n\nexport function fileName(file: FilesystemApiFile): string {\n return pathBasename(file.path);\n}\n\nexport function truncateFileName(name: string) {\n //if file name is too long, cut it in the middle and add ...\n const maxLength = 25;\n if (name.length > maxLength) {\n return name.substr(0, maxLength / 2) + '...' + name.substr(name.length - maxLength / 2, name.length);\n }\n return name;\n}\n\nexport interface FilesystemApi {\n getPublicUrl(path: string): Promise;\n\n createFolder(path: string): Promise;\n\n getFile(path: string): Promise;\n\n getFiles(path: string): Promise;\n\n /**\n * Return the full data of the file.\n */\n getData(path: string): Promise<{ data: Uint8Array, mimeType: string } | undefined>;\n\n // /**\n // * Return a small preview of the file, e.g. for images or PDFs.\n // * Could be just the full data if the file is not enormous.\n // */\n // getQuickLookData(path: string): Promise<{ data: Uint8Array, mimeType: string } | undefined>;\n\n /**\n * Returns an even smaller preview of the file, e.g. for images or PDFs.\n * Best size is 256x256 pixels.\n */\n getThumbnailData(path: string): Promise<{ data: Uint8Array, mimeType: string } | undefined>;\n\n renameFile(path: string, newName: string): Promise;\n\n addFile(name: string, dir: string, data: Uint8Array): Promise;\n\n remove(paths: string[]): Promise;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class FilesystemState {\n uploadQueue = signal([]);\n pendingQueue = computed(() => this.uploadQueue().filter(file => !file.done && !file.errored && !file.aborted));\n\n upload = signal(undefined);\n\n addUpload(file: FileQueueEntry) {\n this.uploadQueue.update(v => [...v, file]);\n this.checkNext();\n }\n\n protected nextCleanQueueTimeout?: ReturnType;\n\n cleanQueue() {\n if (this.nextCleanQueueTimeout) return;\n this.nextCleanQueueTimeout = setTimeout(() => {\n this.nextCleanQueueTimeout = undefined;\n this.uploadQueue.set(this.pendingQueue());\n }, 5000);\n }\n\n checkNext() {\n const upload = this.upload();\n if (upload) return;\n\n const files = this.pendingQueue();\n if (!files.length) {\n this.cleanQueue();\n return;\n }\n const file = files.find(file => !file.done && !file.errored && !file.aborted);\n if (!file) {\n this.cleanQueue();\n return;\n }\n\n this.upload.set(file);\n file.progress = ClientProgress.track();\n file.abort = () => {\n file.aborted = true;\n file.progress?.abort();\n this.upload.set(undefined);\n this.uploadQueue.update(v => v.slice());\n this.checkNext();\n };\n\n console.log('uploading', file.name, file.dir, file.data.length, 'bytes');\n file.addFile(file.name, file.dir, file.data).then(() => {\n file.done = true;\n this.upload.set(undefined);\n this.uploadQueue.update(v => v.slice());\n this.checkNext();\n }, error => {\n file.errored = true;\n this.upload.set(undefined);\n this.uploadQueue.update(v => v.slice());\n this.checkNext();\n });\n }\n}\n","import { Injectable, OnDestroy, signal, WritableSignal } from '@angular/core';\nimport { ClientProgress } from '@deepkit/rpc';\nimport { FilesystemApi } from './api';\n\ninterface CacheState {\n path: string;\n result: WritableSignal<{ data: Uint8Array, mimeType: string } | undefined>;\n loaded?: Date;\n users: number;\n abort?: () => void;\n aborted: WritableSignal;\n invalid: WritableSignal;\n progress: WritableSignal;\n load: () => Promise<{ data: Uint8Array, mimeType: string } | undefined>;\n}\n\nexport interface CacheData {\n path: string;\n aborted: WritableSignal;\n invalid: WritableSignal;\n result: WritableSignal<{ data: Uint8Array, mimeType: string } | undefined>;\n progress: WritableSignal;\n disconnect: () => void;\n}\n\n@Injectable()\nexport abstract class FilesystemFileCache implements OnDestroy {\n protected data = new Map();\n\n protected parallel = 5; // how many files to load in parallel\n protected queue = new Set;\n protected inFlight = 0;\n\n // 5 minutes\n protected maxAge = 5 * 60 * 1000;\n\n protected interval: ReturnType;\n\n constructor() {\n this.interval = setInterval(() => {\n this.clean();\n }, 30_000);\n }\n\n ngOnDestroy() {\n clearTimeout(this.interval);\n }\n\n clean() {\n // Remove files older than maxAge\n const now = new Date;\n for (const [path, data] of this.data.entries()) {\n if (!data.loaded) return;\n if (now.getTime() - data.loaded.getTime() > this.maxAge) {\n this.data.delete(path);\n }\n }\n }\n\n nextQueue() {\n if (this.inFlight >= this.parallel) return;\n\n for (const queue of this.queue) {\n if (this.inFlight >= this.parallel) return;\n\n // If cache is not loaded yet, load it\n this.inFlight++;\n const progress = ClientProgress.track();\n const sub = progress.download.subscribe(v => {\n queue.progress.set(v.progress);\n });\n this.queue.delete(queue);\n queue.abort = () => {\n if (queue.loaded) return;\n if (queue.aborted()) return;\n queue.invalid.set(true);\n queue.aborted.set(true);\n progress.abort();\n this.queue.delete(queue);\n this.data.delete(queue.path);\n };\n queue.load().then((result) => {\n this.inFlight--;\n if (!result) queue.invalid.set(true);\n queue.result.set(result);\n queue.loaded = new Date;\n queue.progress.set(1);\n sub.unsubscribe();\n this.nextQueue();\n });\n }\n }\n\n protected disconnect(path: string) {\n const existing = this.data.get(path);\n if (!existing) return;\n existing.users--;\n if (existing.users <= 0) {\n // make sure queued loading is aborted\n existing.abort?.();\n this.queue.delete(existing);\n }\n }\n\n connect(api: FilesystemApi, path: string): CacheData {\n const existing = this.data.get(path);\n if (existing) {\n existing.users++;\n return {\n path,\n aborted: existing.aborted,\n invalid: existing.invalid,\n result: existing.result,\n progress: existing.progress,\n disconnect: () => this.disconnect(path),\n };\n }\n\n const cache: CacheState = {\n path,\n result: signal<{ data: Uint8Array, mimeType: string } | undefined>(undefined),\n users: 1,\n aborted: signal(false),\n invalid: signal(false),\n loaded: new Date,\n progress: signal(0),\n load: () => this.fetchData(api, path).catch(() => undefined),\n };\n this.queue.add(cache);\n this.data.set(path, cache);\n this.nextQueue();\n\n return {\n path,\n aborted: cache.aborted,\n invalid: cache.invalid,\n result: cache.result,\n progress: cache.progress,\n disconnect: () => this.disconnect(path),\n };\n }\n\n protected async fetchData(api: FilesystemApi, id: string): Promise<{ data: Uint8Array, mimeType: string } | undefined> {\n throw new Error('Not implemented');\n }\n}\n\n@Injectable()\nexport class FilesystemFileDataCache extends FilesystemFileCache {\n protected async fetchData(api: FilesystemApi, path: string) {\n return await api.getData(path);\n }\n}\n\n@Injectable()\nexport class FilesystemFileQuickLookCache extends FilesystemFileCache {\n protected async fetchData(api: FilesystemApi, path: string) {\n return await api.getData(path);\n }\n}\n\n@Injectable()\nexport class FilesystemFileThumbnailCache extends FilesystemFileCache {\n protected async fetchData(api: FilesystemApi, path: string) {\n return await api.getThumbnailData(path);\n }\n}\n","/*\n * Deepkit Framework\n * Copyright (C) 2021 Deepkit UG, Marc J. Schmidt\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the MIT License.\n *\n * You should have received a copy of the MIT License along with this program.\n */\n\nimport {\n AfterViewInit,\n ApplicationRef,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n contentChildren,\n Directive,\n effect,\n ElementRef,\n HostBinding,\n HostListener,\n inject,\n input,\n model,\n numberAttribute,\n OnDestroy,\n OnInit,\n output,\n signal,\n TemplateRef,\n viewChild,\n viewChildren,\n} from '@angular/core';\nimport { arrayHasItem, arrayRemoveItem, empty, first, getPathValue, indexOf, nextTick } from '@deepkit/core';\nimport { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { ContextDropdownDirective, DropdownComponent, DropdownComponent as DropdownComponent_1, DropdownContainerDirective, DropdownItemComponent, DropdownSplitterComponent } from '../button/dropdown.component';\nimport { injectElementRef, registerEventListener, RegisterEventListenerRemove } from '../app/utils';\nimport { findParentWithClass } from '../../core/utils';\nimport { formatDate, NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '../icon/icon.component';\nimport { SplitterComponent } from '../splitter/splitter.component';\nimport { DragDirective, DuiDragEvent, DuiDragStartEvent } from '../app/drag';\n\n/**\n * Directive to allow dynamic content in a cell.\n *\n * ```html\n * \n * \n * {{item.fieldName | date}}\n * \n * \n * ```\n */\n@Directive({ selector: '[duiTableCell]' })\nexport class TableCellDirective {\n constructor(public template: TemplateRef) {\n }\n}\n\n/**\n * Can be used to define own dropdown items once the user opens the header context menu.\n *\n * ```html\n * \n * \n * Custom Item\n * \n * \n */\n@Directive({ selector: 'dui-dropdown[duiTableCustomHeaderContextMenu]' })\nexport class TableCustomHeaderContextMenuDirective {\n constructor(public dropdown: DropdownComponent) {\n }\n}\n\n\n/**\n * Can be used to define own dropdown items once the user opens the row context menu.\n *\n * ```html\n * \n * \n * Custom Item\n * \n * \n * ```\n */\n@Directive({ selector: 'dui-dropdown[duiTableCustomRowContextMenu]' })\nexport class TableCustomRowContextMenuDirective {\n constructor(public dropdown: DropdownComponent) {\n }\n}\n\n/**\n * Directive to allow dynamic content in a column header.\n *\n * ```html\n * \n * \n * Header\n * \n * \n * ```\n */\n@Directive({ selector: '[duiTableHeader]' })\nexport class TableHeaderDirective {\n constructor(public template: TemplateRef) {\n }\n}\n\n/**\n * Defines a new column.\n *\n * ```html\n * \n */\n@Directive({ selector: 'dui-table-column' })\nexport class TableColumnDirective implements OnInit {\n /**\n * The name of the column. Needs to be unique. If no renderer (*duiTableCell) is specified, this\n * name is used to render the content T[name].\n *\n * This supports dot notation, so you can use `user.name` to access the `name` property of the `user` object.\n */\n name = input('');\n\n /**\n * A different header name. Use dui-table-header to render HTML there.\n */\n header = input();\n\n /**\n * Default width.\n */\n width = input(100, { transform: numberAttribute });\n\n effectiveWidth = model(0);\n\n /**\n * Adds additional class to the columns cells.\n */\n class = input('');\n\n /**\n * Whether this column is start hidden. User can unhide it using the context menu on the header.\n */\n hidden = input(false, { transform: booleanAttribute });\n\n effectiveHidden = model(false);\n\n sortable = input(true);\n\n hideable = input(true);\n\n /**\n * At which position this column will be placed.\n */\n position = input