{"version":3,"file":"mantic-ui-angular.mjs","sources":["../../../projects/mantic-ui/src/lib/helpers/to-boolean.ts","../../../projects/mantic-ui/src/lib/services/sorted-classes.service.ts","../../../projects/mantic-ui/src/lib/base/destroyable.ts","../../../projects/mantic-ui/src/lib/base/base.component.ts","../../../projects/mantic-ui/src/lib/base/destroyable.component.ts","../../../projects/mantic-ui/src/lib/base/destroyable.directive.ts","../../../projects/mantic-ui/src/lib/directives/active.directive.ts","../../../projects/mantic-ui/src/lib/directives/basic.directive.ts","../../../projects/mantic-ui/src/lib/directives/color.directive.ts","../../../projects/mantic-ui/src/lib/directives/disabled.directive.ts","../../../projects/mantic-ui/src/lib/directives/inverted.directive.ts","../../../projects/mantic-ui/src/lib/directives/loading.directive.ts","../../../projects/mantic-ui/src/lib/base/invertible.component.ts","../../../projects/mantic-ui/src/lib/base/button-base.component.ts","../../../projects/mantic-ui/src/lib/base/base.directive.ts","../../../projects/mantic-ui/src/lib/components/animation/animation.component.ts","../../../projects/mantic-ui/src/lib/components/animation/animation.component.html","../../../projects/mantic-ui/src/lib/components/breadcrumb/breadcrumb.component.ts","../../../projects/mantic-ui/src/lib/components/breadcrumb/breadcrumb.component.html","../../../projects/mantic-ui/src/lib/models/key.ts","../../../projects/mantic-ui/src/lib/components/toggle-button/toggle-button.component.ts","../../../projects/mantic-ui/src/lib/components/toggle-button/toggle-button.component.html","../../../projects/mantic-ui/src/lib/components/button-group/button-group.component.ts","../../../projects/mantic-ui/src/lib/components/button-group/button-group.component.html","../../../projects/mantic-ui/src/lib/directives/fluid.directive.ts","../../../projects/mantic-ui/src/lib/directives/pointing.directive.ts","../../../projects/mantic-ui/src/lib/components/icon/icon.component.ts","../../../projects/mantic-ui/src/lib/components/icon/icon.component.html","../../../projects/mantic-ui/src/lib/components/label/label.component.ts","../../../projects/mantic-ui/src/lib/components/label/label.component.html","../../../projects/mantic-ui/src/lib/components/button/button.component.ts","../../../projects/mantic-ui/src/lib/components/button/button.component.html","../../../projects/mantic-ui/src/lib/components/button/button-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/card/card.component.ts","../../../projects/mantic-ui/src/lib/components/card/card.component.html","../../../projects/mantic-ui/src/lib/components/card-group/card-group.component.ts","../../../projects/mantic-ui/src/lib/components/card-group/card-group.component.html","../../../projects/mantic-ui/src/lib/helpers/math2.ts","../../../projects/mantic-ui/src/lib/models/field-size.ts","../../../projects/mantic-ui/src/lib/components/cell/cell.component.ts","../../../projects/mantic-ui/src/lib/components/cell/cell.component.html","../../../projects/mantic-ui/src/lib/directives/read-only.directive.ts","../../../projects/mantic-ui/src/lib/components/checkbox/checkbox.component.ts","../../../projects/mantic-ui/src/lib/components/checkbox/checkbox.component.html","../../../projects/mantic-ui/src/lib/components/checkbox/checkbox-defaults.component.ts","../../../projects/mantic-ui/src/lib/directives/button.directive.ts","../../../projects/mantic-ui/src/lib/components/chat-message/chat-message.component.ts","../../../projects/mantic-ui/src/lib/components/chat-message/chat-message.component.html","../../../projects/mantic-ui/src/lib/directives/fallback-for.directive.ts","../../../projects/mantic-ui/src/lib/components/icon-button/icon-button.component.ts","../../../projects/mantic-ui/src/lib/components/icon-button/icon-button.component.html","../../../projects/mantic-ui/src/lib/components/label-dropdown/label-dropdown.component.ts","../../../projects/mantic-ui/src/lib/components/label-dropdown/label-dropdown.component.html","../../../projects/mantic-ui/src/lib/base/labeled-base.component.ts","../../../projects/mantic-ui/src/lib/components/input/input-base.component.ts","../../../projects/mantic-ui/src/lib/components/input/text/input.component.ts","../../../projects/mantic-ui/src/lib/components/input/text/input.component.html","../../../projects/mantic-ui/src/lib/components/chat/chat.component.ts","../../../projects/mantic-ui/src/lib/components/chat/chat.component.html","../../../projects/mantic-ui/src/lib/components/chat/chat-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/circular-progress/circular-progress.component.ts","../../../projects/mantic-ui/src/lib/components/circular-progress/circular-progress.component.html","../../../projects/mantic-ui/src/lib/directives/to-body.directive.ts","../../../projects/mantic-ui/src/lib/components/menu/menu.component.ts","../../../projects/mantic-ui/src/lib/components/menu/menu.component.html","../../../projects/mantic-ui/src/lib/components/context-menu/context-menu.component.ts","../../../projects/mantic-ui/src/lib/components/context-menu/context-menu.component.html","../../../projects/mantic-ui/src/lib/components/menu-item/menu-item.component.ts","../../../projects/mantic-ui/src/lib/components/menu-item/menu-item.component.html","../../../projects/mantic-ui/src/lib/components/context-menu/item/context-menu-item.component.ts","../../../projects/mantic-ui/src/lib/components/context-menu/item/context-menu-item.component.html","../../../projects/mantic-ui/src/lib/components/dimmer/dimmer.component.ts","../../../projects/mantic-ui/src/lib/components/dimmer/dimmer.component.html","../../../projects/mantic-ui/src/lib/components/dimmer/dimmer-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/data-source/data-source-request.ts","../../../projects/mantic-ui/src/lib/components/data-source/data-source.component.ts","../../../projects/mantic-ui/src/lib/components/divider/divider.component.ts","../../../projects/mantic-ui/src/lib/components/divider/divider.component.html","../../../projects/mantic-ui/src/lib/helpers/object-helper.ts","../../../projects/mantic-ui/src/lib/components/dynamic-component/component-parser.ts","../../../projects/mantic-ui/src/lib/components/dynamic-component/dynamic-component.component.ts","../../../projects/mantic-ui/src/lib/components/dynamic-component/provider.ts","../../../projects/mantic-ui/src/lib/components/dropdown/dropdown-selection.service.ts","../../../projects/mantic-ui/src/lib/components/dropdown-item/dropdown-item.component.ts","../../../projects/mantic-ui/src/lib/components/dropdown-item/dropdown-item.component.html","../../../projects/mantic-ui/src/lib/components/dropdown/dropdown-value.ts","../../../projects/mantic-ui/src/lib/components/dropdown/dropdown.component.ts","../../../projects/mantic-ui/src/lib/components/dropdown/dropdown.component.html","../../../projects/mantic-ui/src/lib/components/dropdown/dropdown-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/header/header.component.ts","../../../projects/mantic-ui/src/lib/components/header/header.component.html","../../../projects/mantic-ui/src/lib/components/dropdown-group/dropdown-group.component.ts","../../../projects/mantic-ui/src/lib/components/dropdown-group/dropdown-group.component.html","../../../projects/mantic-ui/src/lib/components/document-title/document-title.component.ts","../../../projects/mantic-ui/src/lib/components/document-title/document-title.component.html","../../../projects/mantic-ui/src/lib/components/document-no-index/document-no-index.component.ts","../../../projects/mantic-ui/src/lib/directives/ignored.directive.ts","../../../projects/mantic-ui/src/lib/directives/inline.directive.ts","../../../projects/mantic-ui/src/lib/components/loader/loader.component.ts","../../../projects/mantic-ui/src/lib/components/loader/loader.component.html","../../../projects/mantic-ui/src/lib/components/message/message.component.ts","../../../projects/mantic-ui/src/lib/components/message/message.component.html","../../../projects/mantic-ui/src/lib/components/error/error.component.ts","../../../projects/mantic-ui/src/lib/components/error/error.component.html","../../../projects/mantic-ui/src/lib/components/flex/fill/fill.component.ts","../../../projects/mantic-ui/src/lib/components/flex/fill/fill.component.html","../../../projects/mantic-ui/src/lib/components/flex/flex.directive.ts","../../../projects/mantic-ui/src/lib/components/flex/flex.component.ts","../../../projects/mantic-ui/src/lib/components/expander/expander-header.component.ts","../../../projects/mantic-ui/src/lib/components/expander/expander.component.ts","../../../projects/mantic-ui/src/lib/components/expander/expander.component.html","../../../projects/mantic-ui/src/lib/components/expander/expander-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/expander-icon/expander-icon.component.ts","../../../projects/mantic-ui/src/lib/components/expander-icon/expander-icon.component.html","../../../projects/mantic-ui/src/lib/components/expander-part/expander-part.component.ts","../../../projects/mantic-ui/src/lib/components/expander-part/expander-part.component.html","../../../projects/mantic-ui/src/lib/components/flag/flag.component.ts","../../../projects/mantic-ui/src/lib/components/flag/flag.component.html","../../../projects/mantic-ui/src/lib/helpers/timespan.ts","../../../projects/mantic-ui/src/lib/helpers/date-helper.ts","../../../projects/mantic-ui/src/lib/components/input/date/date-input.component.ts","../../../projects/mantic-ui/src/lib/components/input/date/date-input.component.html","../../../projects/mantic-ui/src/lib/components/input/numeric/numeric-input.component.ts","../../../projects/mantic-ui/src/lib/components/input/numeric/numeric-input.component.html","../../../projects/mantic-ui/src/lib/services/radio.service.ts","../../../projects/mantic-ui/src/lib/components/radio/radio.component.ts","../../../projects/mantic-ui/src/lib/components/radio/radio.component.html","../../../projects/mantic-ui/src/lib/components/slider/slider.component.ts","../../../projects/mantic-ui/src/lib/components/slider/slider.component.html","../../../projects/mantic-ui/src/lib/components/textarea/textarea.component.ts","../../../projects/mantic-ui/src/lib/components/textarea/textarea.component.html","../../../projects/mantic-ui/src/lib/components/toggle/toggle.component.ts","../../../projects/mantic-ui/src/lib/components/toggle/toggle.component.html","../../../projects/mantic-ui/src/lib/components/field/field-format-errors.pipe.ts","../../../projects/mantic-ui/src/lib/components/field/field.component.ts","../../../projects/mantic-ui/src/lib/components/field/field.component.html","../../../projects/mantic-ui/src/lib/components/field-group/field-group.component.ts","../../../projects/mantic-ui/src/lib/components/field-group/field-group.component.html","../../../projects/mantic-ui/src/lib/components/field/field-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/flex/auto/auto.component.ts","../../../projects/mantic-ui/src/lib/components/flex/auto/auto.component.html","../../../projects/mantic-ui/src/lib/components/flex/auto/auto.directive.ts","../../../projects/mantic-ui/src/lib/components/flex/fill/fill.directive.ts","../../../projects/mantic-ui/src/lib/components/flex/shrink/shrink.component.ts","../../../projects/mantic-ui/src/lib/components/flex/shrink/shrink.component.html","../../../projects/mantic-ui/src/lib/components/flex/shrink/shrink.directive.ts","../../../projects/mantic-ui/src/lib/components/flex/grow/grow.component.ts","../../../projects/mantic-ui/src/lib/components/flex/grow/grow.component.html","../../../projects/mantic-ui/src/lib/components/flex/grow/grow.directive.ts","../../../projects/mantic-ui/src/lib/components/overflow/overflow.directive.ts","../../../projects/mantic-ui/src/lib/components/footer/footer.component.ts","../../../projects/mantic-ui/src/lib/components/footer/footer.component.html","../../../projects/mantic-ui/src/lib/models/template-target.ts","../../../projects/mantic-ui/src/lib/services/layout.service.ts","../../../projects/mantic-ui/src/lib/directives/footer-link-template.directive.ts","../../../projects/mantic-ui/src/lib/components/footer-link/footer-link.component.ts","../../../projects/mantic-ui/src/lib/components/footer-link/footer-link.component.html","../../../projects/mantic-ui/src/lib/components/form/form-validation-notifier.ts","../../../projects/mantic-ui/src/lib/components/form/form.component.ts","../../../projects/mantic-ui/src/lib/components/form/form.component.html","../../../projects/mantic-ui/src/lib/components/form/form-defaults.component.ts","../../../projects/mantic-ui/src/lib/directives/header.directive.ts","../../../projects/mantic-ui/src/lib/components/grid/grid.component.ts","../../../projects/mantic-ui/src/lib/components/grid/grid.component.html","../../../projects/mantic-ui/src/lib/components/info/info.component.ts","../../../projects/mantic-ui/src/lib/components/info/info.component.html","../../../projects/mantic-ui/src/lib/components/warning/warning.component.ts","../../../projects/mantic-ui/src/lib/components/warning/warning.component.html","../../../projects/mantic-ui/src/lib/components/form-renderer/form-renderer.service.ts","../../../projects/mantic-ui/src/lib/components/form-element-renderer/form-element-renderer2.component.ts","../../../projects/mantic-ui/src/lib/components/form-element-renderer/form-element-renderer2.component.html","../../../projects/mantic-ui/src/lib/components/form-element-renderer/form-element-renderer.component.ts","../../../projects/mantic-ui/src/lib/components/form-element-renderer/form-element-renderer.component.html","../../../projects/mantic-ui/src/lib/components/form-renderer/form-renderer.component.ts","../../../projects/mantic-ui/src/lib/components/form-renderer/form-renderer.component.html","../../../projects/mantic-ui/src/lib/components/form-element-renderer/form-element.decorator.ts","../../../projects/mantic-ui/src/lib/components/form-renderer/provide-form-element.ts","../../../projects/mantic-ui/src/lib/components/header/header-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/image-upload/image-upload.component.ts","../../../projects/mantic-ui/src/lib/components/image-upload/image-upload.component.html","../../../projects/mantic-ui/src/lib/components/input/file/file-input.component.ts","../../../projects/mantic-ui/src/lib/components/input/file/file-input.component.html","../../../projects/mantic-ui/src/lib/components/input/time/time-input.component.ts","../../../projects/mantic-ui/src/lib/components/input/time/time-input.component.html","../../../projects/mantic-ui/src/lib/components/input/input-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/label-dropdown/label-dropdown-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/layout/layout.component.ts","../../../projects/mantic-ui/src/lib/components/layout/layout.component.html","../../../projects/mantic-ui/src/lib/components/layout/layout-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/localize/localize.ts","../../../projects/mantic-ui/src/lib/components/localize/localize.component.ts","../../../projects/mantic-ui/src/lib/components/localize/localize.component.html","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-header.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-code-block.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-separator.ts","../../../projects/mantic-ui/src/lib/helpers/cast.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-code.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-image.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-link.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-italic.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-bold.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-strikethrough.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-text.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-custom-element.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-empty.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-list.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/markdown-parser.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/models/markdown-paragraph.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/markdown-renderer.component.ts","../../../projects/mantic-ui/src/lib/components/markdown-renderer/markdown-renderer.component.html","../../../projects/mantic-ui/src/lib/components/menu-header/menu-header.component.ts","../../../projects/mantic-ui/src/lib/components/menu-header/menu-header.component.html","../../../projects/mantic-ui/src/lib/directives/menu-link-template.directive.ts","../../../projects/mantic-ui/src/lib/components/menu-link/menu-link.component.ts","../../../projects/mantic-ui/src/lib/components/menu-link/menu-link.component.html","../../../projects/mantic-ui/src/lib/components/message/message-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/modal/modal-footer.component.ts","../../../projects/mantic-ui/src/lib/components/modal/modal-header.component.ts","../../../projects/mantic-ui/src/lib/components/modal/modal.component.ts","../../../projects/mantic-ui/src/lib/components/modal/modal.component.html","../../../projects/mantic-ui/src/lib/components/modal/modal-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/notification/async-action.ts","../../../projects/mantic-ui/src/lib/components/notification/notification-ref.ts","../../../projects/mantic-ui/src/lib/components/notification/notification.service.ts","../../../projects/mantic-ui/src/lib/components/notification/notification-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/notification/notification-token.ts","../../../projects/mantic-ui/src/lib/components/notification/notification-injector.pipe.ts","../../../projects/mantic-ui/src/lib/components/notification/notification.component.ts","../../../projects/mantic-ui/src/lib/components/notification/notification.component.html","../../../projects/mantic-ui/src/lib/components/or/or.component.ts","../../../projects/mantic-ui/src/lib/components/or/or.component.html","../../../projects/mantic-ui/src/lib/components/row/row.component.ts","../../../projects/mantic-ui/src/lib/components/row/row.component.html","../../../projects/mantic-ui/src/lib/components/segment/segment.component.ts","../../../projects/mantic-ui/src/lib/components/segment/segment.component.html","../../../projects/mantic-ui/src/lib/components/segment/segment-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/segment-group/segment-group.component.ts","../../../projects/mantic-ui/src/lib/components/segment-group/segment-group.component.html","../../../projects/mantic-ui/src/lib/components/sidebar/sidebar.component.ts","../../../projects/mantic-ui/src/lib/components/sidebar/sidebar.component.html","../../../projects/mantic-ui/src/lib/components/submit/submit.component.ts","../../../projects/mantic-ui/src/lib/components/submit/submit.component.html","../../../projects/mantic-ui/src/lib/components/table/table.component.ts","../../../projects/mantic-ui/src/lib/components/table/table.component.html","../../../projects/mantic-ui/src/lib/components/table/table-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/tab/tab.component.ts","../../../projects/mantic-ui/src/lib/components/tab/tab.component.html","../../../projects/mantic-ui/src/lib/components/tab-group/tab-group.component.ts","../../../projects/mantic-ui/src/lib/components/tab-group/tab-group.component.html","../../../projects/mantic-ui/src/lib/components/tab-group/tab-group-defaults.component.ts","../../../projects/mantic-ui/src/lib/services/template.service.ts","../../../projects/mantic-ui/src/lib/components/template/template.component.ts","../../../projects/mantic-ui/src/lib/components/template/template.component.html","../../../projects/mantic-ui/src/lib/components/template-outlet/template-outlet.component.ts","../../../projects/mantic-ui/src/lib/components/template-outlet/template-outlet.component.html","../../../projects/mantic-ui/src/lib/components/text-container/text-container.component.ts","../../../projects/mantic-ui/src/lib/components/text-container/text-container.component.html","../../../projects/mantic-ui/src/lib/components/textarea/textarea-defaults.component.ts","../../../projects/mantic-ui/src/lib/components/title-strategy/mantic-title-strategy.ts","../../../projects/mantic-ui/src/lib/components/title-strategy/mantic-title-strategy.module.ts","../../../projects/mantic-ui/src/lib/components/title-strategy/provider.ts","../../../projects/mantic-ui/src/lib/directives/hide-on-empty-template.directive.ts","../../../projects/mantic-ui/src/lib/directives/hide-on-existing-template.directive.ts","../../../projects/mantic-ui/src/lib/directives/menu-item.directive.ts","../../../projects/mantic-ui/src/lib/directives/readonly.directive.ts","../../../projects/mantic-ui/src/lib/directives/to-template.directive.ts","../../../projects/mantic-ui/src/lib/directives/position-absolute.directive.ts","../../../projects/mantic-ui/src/lib/helpers/external-route.component.ts","../../../projects/mantic-ui/src/lib/helpers/lower-case-url-serializer.ts","../../../projects/mantic-ui/src/lib/helpers/lower-case-url-serializer.module.ts","../../../projects/mantic-ui/src/lib/helpers/mantic.ts","../../../projects/mantic-ui/src/lib/helpers/map-void.ts","../../../projects/mantic-ui/src/lib/helpers/provide-locale.ts","../../../projects/mantic-ui/src/lib/models/form-validation.ts","../../../projects/mantic-ui/src/lib/pipes/allowed-chars.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/array.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/ceil.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/debug.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/debugger.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/floor.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/is-email.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/is-filled.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/log.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/pad-end.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/pad-start.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/round.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/safe.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/title.pipe.ts","../../../projects/mantic-ui/src/lib/mantic-ui.module.ts","../../../projects/mantic-ui/src/lib/pipes/slice.pipe.ts","../../../projects/mantic-ui/src/lib/pipes/to-boolean.pipe.ts","../../../projects/mantic-ui/src/lib/services/base-href.service.ts","../../../projects/mantic-ui/src/lib/services/environment.service.ts","../../../projects/mantic-ui/src/lib/services/favicon.service.ts","../../../projects/mantic-ui/src/lib/services/theme.service.ts","../../../projects/mantic-ui/src/mantic-ui-angular.ts"],"sourcesContent":["import { BooleanLike } from '../models/boolean-like';\r\n\r\nexport const toBoolean = (value: BooleanLike): boolean => {\r\n return value === '' || value === true || value?.toString().toLowerCase() === 'true';\r\n};\r\n\r\nexport const toBooleanWithUndefined = (value: BooleanLike): boolean | undefined => {\r\n return value === undefined ? undefined : toBoolean(value);\r\n};\r\n","import { ElementRef, inject, Injectable } from '@angular/core';\r\n\r\ninterface Entry {\r\n key: string;\r\n order: number;\r\n value: string;\r\n fixed?: boolean;\r\n ignore?: boolean;\r\n previous?: string[];\r\n}\r\n\r\n@Injectable()\r\nexport class SortedClassesService {\r\n private readonly entries = new Map();\r\n private readonly elementRef: ElementRef = inject(ElementRef);\r\n\r\n /**\r\n * Registers one or more keys. The keys will only registered if they are not already registered.\r\n */\r\n public registerFallback(...keys: string[]): SortedClassesService {\r\n for (const key of keys) {\r\n if (this.has(key)) {\r\n continue;\r\n }\r\n this.registerEntry(key);\r\n }\r\n return this;\r\n }\r\n\r\n /**\r\n * Registers one or more keys. If they are already registered, the order will be updated.\r\n */\r\n public register(...keys: string[]): SortedClassesService {\r\n for (const key of keys) {\r\n const existingEntry = this.getEntry(key);\r\n if (existingEntry) {\r\n for (let [_, entry] of this.entries) {\r\n if (entry.order > existingEntry.order) {\r\n entry.order--;\r\n }\r\n }\r\n existingEntry.order = this.entries.size - 1;\r\n }\r\n else {\r\n this.registerEntry(key);\r\n }\r\n }\r\n return this;\r\n }\r\n\r\n public registerFixed(...keys: string[]): SortedClassesService {\r\n for (const key of keys) {\r\n this.registerEntry(key, { fixed: true });\r\n }\r\n return this;\r\n }\r\n\r\n public unregister(...keys: string[]): SortedClassesService {\r\n for (const key of keys) {\r\n this.entries.delete(key.toLocaleLowerCase());\r\n }\r\n return this;\r\n }\r\n\r\n public ignore(...keys: string[]): SortedClassesService {\r\n for (const key of keys) {\r\n this.registerEntry(key, { ignore: true });\r\n }\r\n return this;\r\n }\r\n\r\n private registerEntry(key: string, options?: Partial): void {\r\n if (!key) {\r\n return;\r\n }\r\n if (this.has(key)) {\r\n console.warn(`'${key}' is already registered on <${this.elementRef.nativeElement.tagName}>.`);\r\n }\r\n const entry: Entry = {\r\n ...options,\r\n key: key.toLocaleLowerCase(),\r\n value: options?.fixed ? key : options?.value ?? '',\r\n order: this.entries.size\r\n };\r\n this.entries.set(entry.key, entry);\r\n }\r\n\r\n private getEntry(key: string): Entry | undefined {\r\n key = key.toLocaleLowerCase();\r\n return this.entries.get(key);\r\n }\r\n\r\n public set(key: string, value: unknown, options?: { refresh: boolean }): SortedClassesService {\r\n let entry = this.getEntry(key);\r\n if (!entry) {\r\n console.warn(`Set an unregistered value '${key}' on <${this.elementRef.nativeElement.tagName}> is not recommended. Call register(key) method once, before using set(...) method.`);\r\n entry = this.register(key).getEntry(key);\r\n }\r\n if (!entry) {\r\n throw new Error('Entry not found #dki3kjk');\r\n }\r\n if (entry.fixed) {\r\n console.error(`Can not change an fixed value '${key} on <${this.elementRef.nativeElement.tagName}>. Use register(key) instead of registerFixed(key)`);\r\n return this;\r\n }\r\n if (value === true) {\r\n entry.value = key;\r\n }\r\n else if (value === false || value === undefined || value === null) {\r\n entry.value = '';\r\n }\r\n else {\r\n entry.value = value.toString();\r\n }\r\n if (options?.refresh !== false) {\r\n this.updateEntry(entry);\r\n }\r\n return this;\r\n }\r\n\r\n public get(key: string): unknown {\r\n return this.getEntry(key)?.value;\r\n }\r\n\r\n public has(key: string): boolean {\r\n return !!this.getEntry(key);\r\n }\r\n\r\n public toString(): string {\r\n return Array.from(this.entries.values())\r\n .sort(SortedClassesService.sortByOrder)\r\n .map(entry => entry.value)\r\n .filter(value => value)\r\n .join(' ');\r\n }\r\n\r\n public update(): void {\r\n Array.from(this.entries.values())\r\n .filter(entry => !entry.ignore)\r\n .sort(SortedClassesService.sortByOrder)\r\n .forEach(entry => this.updateEntry(entry));\r\n }\r\n\r\n private updateEntry(entry: Entry): void {\r\n const classList = this.elementRef.nativeElement.classList;\r\n if (entry.previous) {\r\n classList.remove(...entry.previous);\r\n }\r\n const values = entry.value.split(' ').filter(x => !!x);\r\n classList.add(...values);\r\n entry.previous = values;\r\n }\r\n\r\n private static sortByOrder(left: Entry, right: Entry): number {\r\n return left.order > right.order ? 1 : left.order < right.order ? -1 : 0;\r\n }\r\n}\r\n","import { Injectable, OnDestroy } from '@angular/core';\r\nimport { MonoTypeOperatorFunction, Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\n\r\n@Injectable()\r\nexport abstract class Destroyable implements OnDestroy {\r\n private readonly destroySubject = new Subject();\r\n\r\n /**\r\n * An observable that emits when the component is destroyed.\r\n */\r\n public readonly destroy = this.destroySubject.asObservable();\r\n\r\n /**\r\n * Pipe this method to a subject to take values until the component is destroyed.\r\n * Example: `observable.pipe(this.takeUntilDestroy()).subscribe(...);`\r\n * Equals to `observable.pipe(takeUntil(this.destroy)).subscribe(...);`.\r\n */\r\n public takeUntilDestroy(): MonoTypeOperatorFunction {\r\n return takeUntil(this.destroy);\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n this.destroySubject.next();\r\n }\r\n}\r\n","import { Directive, ElementRef, inject, Inject, OnInit, Optional } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\nimport { Destroyable } from './destroyable';\r\n\r\n@Directive({\r\n providers: BaseComponent.providers\r\n})\r\nexport abstract class BaseComponent extends Destroyable implements OnInit {\r\n protected static readonly providers = [SortedClassesService];\r\n\r\n protected readonly classes = inject(SortedClassesService, { self: true });\r\n private noClassesValue = false;\r\n private initialized = false;\r\n protected readonly elementRef: ElementRef = inject(ElementRef);\r\n\r\n protected tag: string;\r\n protected validateAttributes = true;\r\n\r\n protected get noClasses(): boolean {\r\n return this.noClassesValue;\r\n }\r\n\r\n protected set noClasses(value: boolean) {\r\n this.noClassesValue = value;\r\n this.refreshClasses();\r\n }\r\n\r\n protected constructor(\r\n @Optional() @Inject('none') useUiClass = true\r\n ) {\r\n super();\r\n this.tag = this.elementRef.nativeElement.tagName.toLowerCase();\r\n if (useUiClass) {\r\n this.classes.registerFixed('ui');\r\n }\r\n this.classes.register('style');\r\n }\r\n\r\n public ngOnInit(): void {\r\n this.initialized = true;\r\n if (this.classes) {\r\n this.readPropertiesFromAttributes();\r\n this.refreshClasses();\r\n }\r\n }\r\n\r\n private readPropertiesFromAttributes(): void {\r\n if (!this.validateAttributes) {\r\n return;\r\n }\r\n for (let index = 0; index < this.elementRef.nativeElement.attributes.length; index++) {\r\n const attribute = this.elementRef.nativeElement.attributes[index];\r\n if (attribute.name.indexOf('_ng') === 0 || attribute.name.indexOf('ng-') === 0 || attribute.name.indexOf('m-') === 0 || attribute.name === 'class' || attribute.name === 'title') {\r\n continue;\r\n }\r\n if (!this.classes.has(attribute.name)) {\r\n console.warn(`Unknown attribute '${attribute.name}' on <${this.tag}> found.`, this.elementRef.nativeElement);\r\n }\r\n }\r\n }\r\n\r\n // TODO: Check usage\r\n protected refreshClasses(): void {\r\n if (!this.initialized) {\r\n return;\r\n }\r\n this.classes.update();\r\n }\r\n\r\n protected toBoolean(value: BooleanLike): boolean {\r\n return toBoolean(value);\r\n }\r\n}\r\n","import { Directive } from '@angular/core';\r\nimport { Destroyable } from './destroyable';\r\n\r\n/**\r\n * @deprecated Use Destroyable instead\r\n */\r\n@Directive()\r\nexport abstract class DestroyableComponent extends Destroyable {\r\n}\r\n","import { Directive } from '@angular/core';\r\nimport { Destroyable } from './destroyable';\r\n\r\n/**\r\n * @deprecated Use Destroyable instead\r\n */\r\n@Directive()\r\nexport abstract class DestroyableDirective extends Destroyable {\r\n}\r\n","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-active]',\r\n })\r\nexport class ActiveDirective {\r\n public static readonly active = 'active';\r\n public static readonly default = { directive: ActiveDirective, inputs: [ActiveDirective.active] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isActive = false;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(ActiveDirective.active);\r\n }\r\n\r\n public get active(): boolean {\r\n return this.isActive;\r\n }\r\n\r\n @Input()\r\n public set active(value: BooleanLike) {\r\n this.isActive = toBoolean(value);\r\n this.classes.set(ActiveDirective.active, this.isActive);\r\n }\r\n}\r\n","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-basic]',\r\n })\r\nexport class BasicDirective {\r\n public static readonly basic = 'basic';\r\n public static readonly default = { directive: BasicDirective, inputs: [BasicDirective.basic] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isBasic = false;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(BasicDirective.basic);\r\n }\r\n\r\n public get basic(): boolean {\r\n return this.isBasic;\r\n }\r\n\r\n @Input()\r\n public set basic(value: BooleanLike) {\r\n this.isBasic = toBoolean(value);\r\n this.classes.set(BasicDirective.basic, this.isBasic);\r\n }\r\n}\r\n\r\n","import { Directive, inject, Input } from '@angular/core';\r\nimport { ColorName } from '../models/color';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-color]'\r\n})\r\nexport class ColorDirective {\r\n public static readonly color = 'color';\r\n public static readonly default = { directive: ColorDirective, inputs: [ColorDirective.color] };\r\n private readonly classes = inject(SortedClassesService);\r\n private colorValue: ColorName | undefined;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(ColorDirective.color);\r\n }\r\n\r\n public get color(): ColorName | undefined {\r\n return this.colorValue;\r\n }\r\n\r\n @Input()\r\n public set color(value: ColorName | undefined) {\r\n this.colorValue = value;\r\n this.classes.set(ColorDirective.color, value);\r\n }\r\n\r\n}\r\n","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-disabled]',\r\n })\r\nexport class DisabledDirective {\r\n public static readonly disabled = 'disabled';\r\n public static readonly default = { directive: DisabledDirective, inputs: [DisabledDirective.disabled] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isDisabled = false;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(DisabledDirective.disabled);\r\n }\r\n\r\n public get disabled(): boolean {\r\n return this.isDisabled;\r\n }\r\n\r\n @Input()\r\n public set disabled(value: BooleanLike) {\r\n this.isDisabled = toBoolean(value);\r\n this.classes.set(DisabledDirective.disabled, this.isDisabled);\r\n }\r\n}\r\n","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-inverted]',\r\n })\r\nexport class InvertedDirective {\r\n public static readonly inverted = 'inverted';\r\n public static readonly default = { directive: InvertedDirective, inputs: [InvertedDirective.inverted] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isInverted: boolean | undefined;\r\n private isInvertedDefault = false;\r\n\r\n @Input()\r\n public get inverted(): boolean {\r\n return this.isInverted ?? this.isInvertedDefault;\r\n }\r\n\r\n public set inverted(value: BooleanLike) {\r\n this.isInverted = toBoolean(value);\r\n this.classes.set(InvertedDirective.inverted, this.inverted);\r\n }\r\n\r\n public constructor() {\r\n this.classes.registerFallback(InvertedDirective.inverted);\r\n }\r\n\r\n public setInvertedDefault(value: boolean): void {\r\n this.isInvertedDefault = value;\r\n this.classes.set(InvertedDirective.inverted, this.inverted);\r\n }\r\n}\r\n","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-loading]',\r\n })\r\nexport class LoadingDirective {\r\n public static readonly loading = 'loading';\r\n public static readonly default = { directive: LoadingDirective, inputs: [LoadingDirective.loading] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isLoading = false;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(LoadingDirective.loading);\r\n }\r\n\r\n public get loading(): boolean {\r\n return this.isLoading;\r\n }\r\n\r\n @Input()\r\n public set loading(value: BooleanLike) {\r\n this.isLoading = toBoolean(value);\r\n this.classes.set(LoadingDirective.loading, this.isLoading);\r\n }\r\n}\r\n","import { Directive, Inject, Input, Optional } from '@angular/core';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { BaseComponent } from './base.component';\r\n\r\n@Directive()\r\nexport abstract class InvertibleComponent extends BaseComponent {\r\n protected static override readonly providers = [...BaseComponent.providers];\r\n\r\n private isInverted = false;\r\n private isInvertedChanged = false;\r\n\r\n @Input()\r\n public get inverted(): boolean {\r\n return this.isInverted;\r\n }\r\n\r\n public set inverted(value: BooleanLike) {\r\n this.isInvertedChanged = true;\r\n this.isInverted = this.toBoolean(value);\r\n this.classes.set('inverted', this.isInverted);\r\n }\r\n\r\n protected constructor(\r\n @Optional() @Inject('none') useUiClass = true\r\n ) {\r\n super(useUiClass);\r\n this.classes.register('inverted');\r\n }\r\n\r\n protected refreshInverted(value: boolean): void {\r\n if (this.isInvertedChanged) {\r\n return;\r\n }\r\n this.inverted = value;\r\n this.isInvertedChanged = false;\r\n }\r\n}\r\n","import { Directive, HostBinding, Input } from '@angular/core';\r\nimport { ActiveDirective } from '../directives/active.directive';\r\nimport { BasicDirective } from '../directives/basic.directive';\r\nimport { ColorDirective } from '../directives/color.directive';\r\nimport { DisabledDirective } from '../directives/disabled.directive';\r\nimport { InvertedDirective } from '../directives/inverted.directive';\r\nimport { LoadingDirective } from '../directives/loading.directive';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { InvertibleComponent } from './invertible.component';\r\n\r\n@Directive({\r\n hostDirectives: [ColorDirective.default, BasicDirective.default, InvertedDirective.default, DisabledDirective.default, LoadingDirective.default, ActiveDirective.default],\r\n providers: ButtonBaseComponent.providers\r\n})\r\nexport abstract class ButtonBaseComponent extends InvertibleComponent {\r\n protected static override readonly providers = [...InvertibleComponent.providers];\r\n private sizeValue = '';\r\n private isPrimary = false;\r\n private isSecondary = false;\r\n private isPositive = false;\r\n private isNegative = false;\r\n private isCircular = false;\r\n private isAttachedLeft = false;\r\n private isAttachedTop = false;\r\n private isAttachedRight = false;\r\n private isAttachedBottom = false;\r\n\r\n @Input()\r\n @HostBinding('class.primary')\r\n public get primary(): boolean {\r\n return this.isPrimary;\r\n }\r\n\r\n public set primary(value: BooleanLike) {\r\n this.isPrimary = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.secondary')\r\n public get secondary(): boolean {\r\n return this.isSecondary;\r\n }\r\n\r\n public set secondary(value: BooleanLike) {\r\n this.isSecondary = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.positive')\r\n public get positive(): boolean {\r\n return this.isPositive;\r\n }\r\n\r\n public set positive(value: BooleanLike) {\r\n this.isPositive = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.negative')\r\n public get negative(): boolean {\r\n return this.isNegative;\r\n }\r\n\r\n public set negative(value: BooleanLike) {\r\n this.isNegative = this.toBoolean(value);\r\n }\r\n\r\n public get size(): string {\r\n return this.sizeValue;\r\n }\r\n\r\n @Input()\r\n public set size(value: string) {\r\n this.sizeValue = value;\r\n this.classes.set('size', value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.circular')\r\n public get circular(): boolean {\r\n return this.isCircular;\r\n }\r\n\r\n public set circular(value: BooleanLike) {\r\n this.isCircular = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.left')\r\n public get attachedLeft(): boolean {\r\n return this.isAttachedLeft;\r\n }\r\n\r\n public set attachedLeft(value: BooleanLike) {\r\n this.isAttachedLeft = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.top')\r\n public get attachedTop(): boolean {\r\n return this.isAttachedTop;\r\n }\r\n\r\n public set attachedTop(value: BooleanLike) {\r\n this.isAttachedTop = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.right')\r\n public get attachedRight(): boolean {\r\n return this.isAttachedRight;\r\n }\r\n\r\n public set attachedRight(value: BooleanLike) {\r\n this.isAttachedRight = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.bottom')\r\n public get attachedBottom(): boolean {\r\n return this.isAttachedBottom;\r\n }\r\n\r\n public set attachedBottom(value: BooleanLike) {\r\n this.isAttachedBottom = this.toBoolean(value);\r\n }\r\n\r\n @HostBinding('class.attached')\r\n protected get attached(): boolean {\r\n return this.isAttachedTop || this.attachedBottom || this.attachedLeft || this.attachedRight;\r\n }\r\n\r\n @HostBinding('class.button')\r\n protected readonly button = true;\r\n\r\n protected constructor() {\r\n super();\r\n this.elementRef.nativeElement.setAttribute('tabindex', '0');\r\n this.classes.register('size', 'primary', 'secondary', 'positive', 'negative', 'circular', 'tabindex', 'attachedLeft', 'attachedRight', 'attachedTop', 'attachedBottom');\r\n }\r\n}\r\n","import { Directive, ElementRef, Inject, inject, OnInit, Optional, TypeProvider } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\nimport { Destroyable } from './destroyable';\r\n\r\n@Directive()\r\nexport abstract class BaseDirective extends Destroyable implements OnInit {\r\n protected static readonly providers: TypeProvider[] = [SortedClassesService];\r\n\r\n protected readonly classes = inject(SortedClassesService, { self: true });\r\n private noClassesValue = false;\r\n private initialized = false;\r\n protected readonly elementRef: ElementRef = inject(ElementRef, { self: true });\r\n\r\n protected tag: string;\r\n protected validateAttributes = true;\r\n\r\n protected get noClasses(): boolean {\r\n return this.noClassesValue;\r\n }\r\n\r\n protected set noClasses(value: boolean) {\r\n this.noClassesValue = value;\r\n this.refreshClasses();\r\n }\r\n\r\n protected constructor(\r\n @Optional() @Inject('none') useUiClass = true\r\n ) {\r\n super();\r\n this.tag = this.elementRef.nativeElement.tagName.toLowerCase();\r\n if (useUiClass) {\r\n this.classes.registerFixed('ui');\r\n }\r\n }\r\n\r\n public ngOnInit(): void {\r\n this.initialized = true;\r\n this.readPropertiesFromAttributes();\r\n this.refreshClasses();\r\n }\r\n\r\n private readPropertiesFromAttributes(): void {\r\n if (!this.validateAttributes) {\r\n return;\r\n }\r\n for (let index = 0; index < this.elementRef.nativeElement.attributes.length; index++) {\r\n const attribute = this.elementRef.nativeElement.attributes[index];\r\n if (attribute.name.indexOf('_ng') === 0 || attribute.name.indexOf('ng-') === 0 || attribute.name.indexOf('m-') === 0 || attribute.name === 'class' || attribute.name === 'title') {\r\n continue;\r\n }\r\n if (!this.classes.has(attribute.name)) {\r\n console.warn(`Unknown attribute '${attribute.name}' on <${this.tag}> found.`, this.elementRef.nativeElement);\r\n }\r\n }\r\n }\r\n\r\n protected refreshClasses(): void {\r\n if (!this.initialized) {\r\n return;\r\n }\r\n this.classes.update();\r\n }\r\n\r\n protected toBoolean(value: BooleanLike): boolean {\r\n return toBoolean(value);\r\n }\r\n\r\n}\r\n\r\n","import { Component, HostBinding, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { AnimationDirection } from './animation-direction';\r\n\r\n@Component({\r\n selector: 'm-animation',\r\n templateUrl: './animation.component.html',\r\n styleUrls: ['./animation.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class AnimationComponent extends BaseComponent {\r\n\r\n @Input()\r\n @HostBinding('class.hidden')\r\n public hidden = true;\r\n\r\n @Input()\r\n public direction: AnimationDirection;\r\n\r\n public constructor() {\r\n super(false);\r\n this.classes.registerFixed('content');\r\n this.classes.register('hidden', 'direction');\r\n }\r\n}\r\n","","import { Component } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\n\r\n@Component({\r\n selector: 'm-breadcrumb',\r\n templateUrl: './breadcrumb.component.html',\r\n styleUrls: ['./breadcrumb.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class BreadcrumbComponent extends BaseComponent {\r\n\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('breadcrumb');\r\n }\r\n}\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","export declare type KeyCode = 'Space' | 'Enter' | 'Escape';\r\n\r\nexport class Key {\r\n public static readonly space = new Key('Space');\r\n public static readonly enter = new Key('Enter');\r\n public static readonly escape = new Key('Escape');\r\n\r\n public constructor(\r\n public readonly code: string\r\n ) {\r\n }\r\n\r\n public is(event: KeyboardEvent): boolean {\r\n return Key.is(event, this);\r\n }\r\n\r\n public static is(event: KeyboardEvent, ...keys: (KeyCode | Key)[]): boolean {\r\n return keys.some(key => event.key === (typeof key === 'string' ? key : key.code));\r\n }\r\n}\r\n","import { NgIfContext } from '@angular/common';\r\nimport { Component, ContentChild, EventEmitter, HostBinding, HostListener, inject, Input, Output, TemplateRef } from '@angular/core';\r\nimport { ButtonBaseComponent } from '../../base/button-base.component';\r\nimport { ActiveDirective } from '../../directives/active.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { Key } from '../../models/key';\r\n\r\n@Component({\r\n selector: 'm-toggle-button',\r\n templateUrl: './toggle-button.component.html',\r\n styleUrls: ['./toggle-button.component.scss'],\r\n imports: [],\r\n providers: [...ButtonBaseComponent.providers]\r\n})\r\nexport class ToggleButtonComponent extends ButtonBaseComponent {\r\n private readonly activeDirective = inject(ActiveDirective, { self: true });\r\n\r\n @ContentChild('active')\r\n // eslint-disable-next-line no-null/no-null\r\n public activeTemplate: TemplateRef> | null = null;\r\n\r\n protected get active(): boolean {\r\n return this.activeDirective.active;\r\n }\r\n\r\n protected set active(value: BooleanLike) {\r\n this.activeDirective.active = value;\r\n }\r\n\r\n public get checked(): boolean {\r\n return this.active;\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.checked')\r\n public set checked(value: BooleanLike) {\r\n this.active = value;\r\n }\r\n\r\n @Output()\r\n public readonly checkedChange = new EventEmitter();\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('checked')\r\n .registerFixed('toggle');\r\n }\r\n\r\n @HostListener('click')\r\n protected toggle(): void {\r\n if (this.checked) {\r\n this.uncheck();\r\n }\r\n else {\r\n this.check();\r\n }\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n protected onKeyDown(event: KeyboardEvent): void {\r\n if (Key.is(event, Key.space, Key.enter)) {\r\n this.toggle();\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n public check(): void {\r\n if (this.checked) {\r\n return;\r\n }\r\n this.checked = true;\r\n this.checkedChange.emit(this.checked);\r\n }\r\n\r\n public uncheck(): void {\r\n if (!this.checked) {\r\n return;\r\n }\r\n this.checked = false;\r\n this.checkedChange.emit(this.checked);\r\n }\r\n}\r\n","@if (!active || !activeTemplate) {\n \n} @else {\n \n}\n","import { Component, ContentChildren, HostBinding, Input, QueryList } from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { ColorDirective } from '../../directives/color.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { ToggleButtonComponent } from '../toggle-button/toggle-button.component';\r\n\r\n@Component({\r\n selector: 'm-button-group',\r\n templateUrl: './button-group.component.html',\r\n styleUrls: ['./button-group.component.scss'],\r\n hostDirectives: [ColorDirective.default],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class ButtonGroupComponent extends BaseComponent {\r\n private toggleButtonsChangeSubscription?: Subscription;\r\n private toggleButtonSubscriptions?: Subscription[];\r\n private toggleButtonsValue?: QueryList;\r\n private isAttachedLeft = false;\r\n private isAttachedTop = false;\r\n private isAttachedRight = false;\r\n private isAttachedBottom = false;\r\n\r\n @Input()\r\n @HostBinding('class.left')\r\n public get attachedLeft(): boolean {\r\n return this.isAttachedLeft;\r\n }\r\n\r\n public set attachedLeft(value: BooleanLike) {\r\n this.isAttachedLeft = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.top')\r\n public get attachedTop(): boolean {\r\n return this.isAttachedTop;\r\n }\r\n\r\n public set attachedTop(value: BooleanLike) {\r\n this.isAttachedTop = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.right')\r\n public get attachedRight(): boolean {\r\n return this.isAttachedRight;\r\n }\r\n\r\n public set attachedRight(value: BooleanLike) {\r\n this.isAttachedRight = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.bottom')\r\n public get attachedBottom(): boolean {\r\n return this.isAttachedBottom;\r\n }\r\n\r\n public set attachedBottom(value: BooleanLike) {\r\n this.isAttachedBottom = this.toBoolean(value);\r\n }\r\n\r\n @HostBinding('class.attached')\r\n protected get attached(): boolean {\r\n return this.isAttachedTop || this.attachedBottom || this.attachedLeft || this.attachedRight;\r\n }\r\n\r\n @ContentChildren(ToggleButtonComponent)\r\n protected get toggleButtons(): QueryList | undefined {\r\n return this.toggleButtonsValue;\r\n }\r\n\r\n protected set toggleButtons(query: QueryList | undefined) {\r\n this.toggleButtonsChangeSubscription?.unsubscribe();\r\n this.toggleButtonsChangeSubscription = query?.changes.subscribe(() => this.subscribeToggleButtons());\r\n this.toggleButtonsValue = query;\r\n this.subscribeToggleButtons();\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('buttons');\r\n }\r\n\r\n private subscribeToggleButtons(): void {\r\n this.toggleButtonSubscriptions?.forEach(subscription => subscription.unsubscribe());\r\n this.toggleButtonSubscriptions = this.toggleButtons?.map(button => button.checkedChange.subscribe(value => value ? this.uncheckOthers(button) : this.keepOneChecked()));\r\n }\r\n\r\n private uncheckOthers(button: ToggleButtonComponent): void {\r\n this.toggleButtons?.filter(x => x !== button).forEach(x => x.uncheck());\r\n }\r\n\r\n private keepOneChecked(): void {\r\n const buttons = Array.from(this.toggleButtons ?? []);\r\n if (buttons.length > 0 && buttons.every(button => !button.checked)) {\r\n buttons[0].check();\r\n }\r\n }\r\n}\r\n","","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-fluid]',\r\n })\r\nexport class FluidDirective {\r\n public static readonly fluid = 'fluid';\r\n public static readonly default = { directive: FluidDirective, inputs: [FluidDirective.fluid] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isFluid = false;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(FluidDirective.fluid);\r\n }\r\n\r\n public get fluid(): boolean {\r\n return this.isFluid;\r\n }\r\n\r\n @Input()\r\n public set fluid(value: BooleanLike) {\r\n this.isFluid = toBoolean(value);\r\n this.classes.set(FluidDirective.fluid, this.isFluid);\r\n }\r\n}\r\n","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-pointing]',\r\n })\r\nexport class PointingDirective {\r\n public static readonly pointing = 'pointing';\r\n public static readonly default = { directive: PointingDirective, inputs: [PointingDirective.pointing] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isPointing = false;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(PointingDirective.pointing);\r\n }\r\n\r\n public get pointing(): boolean {\r\n return this.isPointing;\r\n }\r\n\r\n @Input()\r\n public set pointing(value: BooleanLike) {\r\n this.isPointing = toBoolean(value);\r\n this.classes.set(PointingDirective.pointing, this.isPointing);\r\n }\r\n}\r\n","import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { IconSize } from './icon-size';\r\nimport { IconType } from './icon-type';\r\n\r\n@Component({\r\n selector: 'm-icon',\r\n templateUrl: './icon.component.html',\r\n styleUrls: ['./icon.component.scss'],\r\n imports: [FontAwesomeModule, NgClass]\r\n})\r\nexport class IconComponent {\r\n protected mIcon?: string;\r\n protected mSize?: IconSize;\r\n protected faIcon?: IconProp;\r\n protected faSize?: SizeProp;\r\n\r\n @Input()\r\n public get icon(): IconType | undefined {\r\n return this.mIcon ?? this.faIcon;\r\n }\r\n\r\n public set icon(value: IconType | undefined) {\r\n if (typeof value === 'string') {\r\n this.mIcon = value;\r\n }\r\n else {\r\n this.faIcon = value;\r\n }\r\n }\r\n\r\n @Input()\r\n public get size(): IconSize {\r\n return this.mSize ?? this.faSize;\r\n }\r\n\r\n public set size(value: IconSize) {\r\n switch (value) {\r\n case 'mini':\r\n case 'tiny':\r\n case 'small':\r\n this.mSize = value;\r\n this.faSize = 'xs';\r\n break;\r\n case 'large':\r\n case 'lg':\r\n this.mSize = 'large';\r\n this.faSize = 'lg';\r\n break;\r\n case 'big':\r\n case '2x':\r\n this.mSize = 'big';\r\n this.faSize = '2x';\r\n break;\r\n case 'huge':\r\n case '4x':\r\n this.mSize = 'huge';\r\n this.faSize = '4x';\r\n break;\r\n case 'massive':\r\n case '8x':\r\n this.mSize = 'massive';\r\n this.faSize = '8x';\r\n break;\r\n case 'xs':\r\n case 'sm':\r\n case '1x':\r\n this.mSize = 'small';\r\n this.faSize = value;\r\n break;\r\n case '3x':\r\n this.mSize = 'big';\r\n this.faSize = value;\r\n break;\r\n case '5x':\r\n case '6x':\r\n this.mSize = 'huge';\r\n this.faSize = value;\r\n break;\r\n case '7x':\r\n case '9x':\r\n case '10x':\r\n this.mSize = 'massive';\r\n this.faSize = value;\r\n break;\r\n }\r\n }\r\n\r\n @Input()\r\n public iconClass?: string = 'icon';\r\n}\r\n","@if (mIcon) {\n \n}\n@if (faIcon) {\n \n}\n\n","import { Component, HostBinding, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { BasicDirective } from '../../directives/basic.directive';\r\nimport { ColorDirective } from '../../directives/color.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { LabelOptions } from '../../models/label-options';\r\nimport { LabelPosition } from '../../models/label-position';\r\n\r\nexport declare type LabelPointing =\r\n 'left'\r\n | 'right'\r\n | 'top'\r\n | 'bottom'\r\n | undefined;\r\n\r\n@Component({\r\n selector: 'm-label',\r\n templateUrl: './label.component.html',\r\n styleUrls: ['./label.component.scss'],\r\n hostDirectives: [BasicDirective.default, ColorDirective.default],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class LabelComponent extends BaseComponent implements LabelOptions {\r\n private positionValue: LabelPosition;\r\n private pointingValue: LabelPointing;\r\n private isHorizontal = false;\r\n\r\n @Input()\r\n public get position(): LabelPosition {\r\n return this.positionValue;\r\n }\r\n\r\n public set position(value: LabelPosition) {\r\n this.positionValue = value;\r\n this.classes.set('position', value);\r\n }\r\n\r\n @Input()\r\n public get pointing(): LabelPointing {\r\n return this.pointingValue;\r\n }\r\n\r\n public set pointing(value: LabelPointing) {\r\n this.pointingValue = value;\r\n this.classes.set('pointing', value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.horizontal')\r\n public get horizontal(): boolean {\r\n return this.isHorizontal;\r\n }\r\n\r\n public set horizontal(value: BooleanLike) {\r\n this.isHorizontal = this.toBoolean(value);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('pointing', 'position', 'horizontal')\r\n .registerFixed('label');\r\n }\r\n}\r\n","","import { NgClass, NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ContentChild, inject, Input } from '@angular/core';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { ButtonBaseComponent } from '../../base/button-base.component';\r\nimport { BasicDirective } from '../../directives/basic.directive';\r\nimport { ColorDirective } from '../../directives/color.directive';\r\nimport { FluidDirective } from '../../directives/fluid.directive';\r\nimport { PointingDirective } from '../../directives/pointing.directive';\r\nimport { ColorName } from '../../models/color';\r\nimport { LabelPosition } from '../../models/label-position';\r\nimport { AnimationDirection } from '../animation/animation-direction';\r\nimport { AnimationComponent } from '../animation/animation.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { LabelComponent } from '../label/label.component';\r\n\r\nexport declare type Pointing =\r\n 'left'\r\n | 'right'\r\n | 'top'\r\n | 'bottom'\r\n | undefined;\r\n\r\n@Component({\r\n selector: 'm-button',\r\n templateUrl: './button.component.html',\r\n styleUrls: ['./button.component.scss'],\r\n imports: [IconComponent, NgTemplateOutlet, NgClass],\r\n hostDirectives: [FluidDirective.default, PointingDirective.default],\r\n providers: [...ButtonBaseComponent.providers]\r\n})\r\nexport class ButtonComponent extends ButtonBaseComponent {\r\n public static readonly defaults = {\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n private readonly basicDirective = inject(BasicDirective, { self: true });\r\n private readonly colorDirective = inject(ColorDirective, { self: true });\r\n private animatedField?: AnimationComponent;\r\n private labelField?: LabelComponent;\r\n private socialValue?: string;\r\n private iconPositionValue: LabelPosition;\r\n private icoValue?: IconType;\r\n\r\n protected get basic(): boolean {\r\n return this.basicDirective.basic;\r\n }\r\n\r\n protected get color(): ColorName | undefined {\r\n return this.colorDirective.color;\r\n }\r\n\r\n public get animated(): AnimationComponent | undefined {\r\n return this.animatedField;\r\n }\r\n\r\n @ContentChild(AnimationComponent)\r\n public set animated(value: AnimationComponent | undefined) {\r\n this.animatedField = value;\r\n this.refreshClasses();\r\n }\r\n\r\n public get animation(): AnimationDirection {\r\n return this.animated ? this.animated.direction : undefined;\r\n }\r\n\r\n @ContentChild(LabelComponent)\r\n public get label(): LabelComponent | undefined {\r\n return this.labelField;\r\n }\r\n\r\n public set label(value: LabelComponent | undefined) {\r\n this.labelField = value;\r\n this.classes.set('labeled', !!value);\r\n }\r\n\r\n public get labelPosition(): LabelPosition {\r\n return this.label ? this.label.position : undefined;\r\n }\r\n\r\n @Input()\r\n public get icon(): IconType | undefined {\r\n return this.icoValue;\r\n }\r\n\r\n public set icon(value: IconType | undefined) {\r\n this.icoValue = value;\r\n this.classes.set('icon', !!value);\r\n this.classes.set('iconLabeled', value ? 'labeled' : undefined);\r\n }\r\n\r\n @Input()\r\n public iconSize: IconSize;\r\n\r\n @Input()\r\n public get iconPosition(): LabelPosition {\r\n return this.iconPositionValue;\r\n }\r\n\r\n public set iconPosition(value: LabelPosition) {\r\n this.iconPositionValue = value;\r\n this.classes.set('iconPosition', value);\r\n }\r\n\r\n @Input()\r\n public get social(): string | undefined {\r\n return this.socialValue;\r\n }\r\n\r\n public set social(value: string | undefined) {\r\n this.socialValue = value;\r\n this.classes.set('social', value);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('animation', 'animated', 'labelPosition', 'iconPosition', 'label', 'labeled', 'iconLabeled', 'social', 'icon');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n ButtonComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n}\r\n","@if (animated) {\n
\n \n
\n \n}\n@if (label) {\n @if (labelPosition === 'left') {\n \n }\n
\n \n
\n @if (labelPosition !== 'left') {\n \n }\n \n \n \n}\n@if (social) {\n \n {{social}}\n}\n@if (!animated && !label && !social) {\n \n}\n\n @if (icon) {\n \n }\n \n\n","import { Component, Input } from '@angular/core';\r\nimport { ButtonComponent } from './button.component';\r\n\r\n@Component({\r\n selector: 'm-button-defaults',\r\n template: ''\r\n})\r\nexport class ButtonDefaultsComponent {\r\n @Input()\r\n public set inverted(value: boolean) {\r\n ButtonComponent.defaults.inverted = value;\r\n ButtonComponent.defaults.invertedChange.next(value);\r\n }\r\n}\r\n","import { Component, HostBinding } from '@angular/core';\r\n\r\n\r\n@Component({\n selector: 'm-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n imports: []\n})\r\nexport class CardComponent {\r\n\r\n @HostBinding('class.ui')\r\n @HostBinding('class.card')\r\n protected readonly host = true;\r\n}\r\n","\r\n","import { Component, HostBinding } from '@angular/core';\r\n\r\n\r\n@Component({\n selector: 'm-card-group',\n imports: [],\n templateUrl: './card-group.component.html',\n styleUrls: ['./card-group.component.scss']\n})\r\nexport class CardGroupComponent {\r\n @HostBinding('class.ui')\r\n @HostBinding('class.cards')\r\n protected readonly host = true;\r\n}\r\n","\r\n","export class Math2 {\r\n // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n private constructor() {}\r\n\r\n public static keepInRange(min: number, value: number | undefined, max?: number | undefined): number\r\n public static keepInRange(min: number | undefined, value: number, max?: number | undefined): number\r\n public static keepInRange(min: number | undefined, value: number | undefined, max: number): number\r\n public static keepInRange(min: number | undefined, value: number | undefined, max?: number | undefined): number {\r\n if (min !== undefined && (value === undefined || value < min)) {\r\n return min;\r\n }\r\n if (max !== undefined && (value === undefined || value > max)) {\r\n return max;\r\n }\r\n return value as number;\r\n }\r\n\r\n public static sum(values: (number | undefined)[] | undefined): number {\r\n let sum = 0;\r\n values?.forEach(value => sum += value ?? 0);\r\n return sum;\r\n }\r\n\r\n public static round(value: number, decimals: number): number {\r\n const factor = Math.pow(10, decimals);\r\n return Math.round(value * factor) / factor;\r\n }\r\n}\r\n","import { Math2 } from \"../helpers/math2\";\r\n\r\nexport declare type FieldSize = '' | 'one' | 'two' | 'three' | 'four' | 'five' | 'six' | 'seven' | 'eight' | 'nine' | 'ten' | 'eleven' | 'twelve' | 'thirteen' | 'fourteen' | 'fifteen' | 'sixteen';\r\n\r\nexport declare type ParsableFieldSize = FieldSize\r\n | number | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16\r\n | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16'\r\n | undefined;\r\n\r\nexport const fieldSizes: FieldSize[] = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen'];\r\n\r\nexport const parseFieldSize = (size: ParsableFieldSize): FieldSize => {\r\n if (typeof size === 'number') {\r\n return fieldSizes[size];\r\n }\r\n const parsedSizeNumber = size ? Math2.keepInRange(1, parseInt(size, 10), 16) : undefined;\r\n return parsedSizeNumber ? fieldSizes[parsedSizeNumber] : (size ?? '') as FieldSize;\r\n};\r\n","import { Component, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { FieldSize, ParsableFieldSize, parseFieldSize } from '../../models/field-size';\r\n\r\nexport declare type CellFloat =\r\n 'left'\r\n | 'right';\r\n\r\nexport declare type CellAlign =\r\n 'left'\r\n | 'right';\r\n\r\n@Component({\r\n selector: 'm-cell',\r\n templateUrl: './cell.component.html',\r\n styleUrls: ['./cell.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class CellComponent extends BaseComponent {\r\n private sizeValue?: FieldSize;\r\n private floatValue?: CellFloat;\r\n private alignValue?: CellAlign;\r\n\r\n public get size(): FieldSize | undefined {\r\n return this.sizeValue;\r\n }\r\n\r\n @Input()\r\n public set size(value: ParsableFieldSize | undefined) {\r\n this.sizeValue = parseFieldSize(value);\r\n this.classes.set('size', this.sizeValue);\r\n this.classes.set('wide', !!this.sizeValue);\r\n }\r\n\r\n @Input()\r\n public get float(): CellFloat | undefined {\r\n return this.floatValue;\r\n }\r\n\r\n public set float(value: CellFloat | undefined) {\r\n this.floatValue = value;\r\n this.classes.set('float', value ? `${value} floated` : undefined);\r\n }\r\n\r\n @Input()\r\n public get align(): CellAlign | undefined {\r\n return this.alignValue;\r\n }\r\n\r\n public set align(value: CellAlign | undefined) {\r\n this.alignValue = value;\r\n this.classes.set('align', value ? `${value} aligned` : undefined);\r\n }\r\n\r\n public constructor() {\r\n super(false);\r\n this.classes.register('size', 'wide', 'float', 'align')\r\n .registerFixed('column');\r\n }\r\n\r\n}\r\n","","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-read-only]',\r\n })\r\nexport class ReadOnlyDirective {\r\n public static readonly readonly = 'readonly';\r\n private static readonly readOnly = 'read-only';\r\n public static readonly default = { directive: ReadOnlyDirective, inputs: [ReadOnlyDirective.readonly] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isReadonly = false;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(ReadOnlyDirective.readOnly);\r\n }\r\n\r\n public get readonly(): boolean {\r\n return this.isReadonly;\r\n }\r\n\r\n @Input()\r\n public set readonly(value: BooleanLike) {\r\n this.isReadonly = toBoolean(value);\r\n this.classes.set(ReadOnlyDirective.readOnly, this.isReadonly);\r\n }\r\n}\r\n","\r\nimport { Component, EventEmitter, HostBinding, HostListener, inject, Input, Output } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { DisabledDirective } from '../../directives/disabled.directive';\r\nimport { ReadOnlyDirective } from '../../directives/read-only.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { Key } from '../../models/key';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\n\r\n@Component({\n selector: 'm-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n imports: [\n IconComponent,\n FormsModule\n],\n hostDirectives: [DisabledDirective.default, ReadOnlyDirective.default],\n providers: CheckboxComponent.providers\n})\r\nexport class CheckboxComponent extends InvertibleComponent {\r\n public static readonly defaults = {\r\n checkIcon: 'check',\r\n checkIconSize: 'small',\r\n indeterminateIcon: 'minus',\r\n indeterminateIconSize: 'small',\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n protected static override readonly providers = [...InvertibleComponent.providers];\r\n\r\n private readonly readOnlyDirective = inject(ReadOnlyDirective, { self: true });\r\n private readonly disabledDirective = inject(DisabledDirective, { self: true });\r\n private nameValue?: string;\r\n private labelValue?: string;\r\n private isChecked: boolean | undefined = false;\r\n private isIndeterminate = false;\r\n protected readonly defaults = CheckboxComponent.defaults;\r\n\r\n public get readonly(): boolean {\r\n return this.readOnlyDirective.readonly;\r\n }\r\n\r\n public set readonly(value: BooleanLike) {\r\n this.readOnlyDirective.readonly = value;\r\n }\r\n\r\n public get disabled(): boolean {\r\n return this.disabledDirective.disabled;\r\n }\r\n\r\n public set disabled(value: BooleanLike) {\r\n this.disabledDirective.disabled = value;\r\n }\r\n\r\n @Input()\r\n public get value(): boolean | undefined {\r\n return this.isChecked;\r\n }\r\n\r\n public set value(value: BooleanLike) {\r\n this.isChecked = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get name(): string {\r\n return this.nameValue ?? '';\r\n }\r\n\r\n public set name(value: string | undefined) {\r\n this.nameValue = value;\r\n }\r\n\r\n @Input()\r\n public get label(): string | undefined {\r\n return this.labelValue;\r\n }\r\n\r\n public set label(value: string | undefined) {\r\n this.labelValue = value;\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.checked')\r\n public get checked(): boolean {\r\n return this.isChecked ?? false;\r\n }\r\n\r\n public set checked(value: BooleanLike) {\r\n this.isChecked = this.toBoolean(value);\r\n }\r\n\r\n @Output()\r\n public readonly valueChange = new EventEmitter();\r\n\r\n @Output()\r\n public readonly checkedChange = new EventEmitter();\r\n\r\n @Input()\r\n @HostBinding('class.indeterminate')\r\n public get indeterminate(): boolean {\r\n return this.isIndeterminate;\r\n }\r\n\r\n public set indeterminate(value: BooleanLike) {\r\n this.isIndeterminate = this.toBoolean(value);\r\n }\r\n\r\n @Output()\r\n public readonly indeterminateChange = this.valueChange;\r\n\r\n @Input()\r\n public canUncheck = true;\r\n\r\n @Input()\r\n public checkIcon?: IconType;\r\n\r\n @Input()\r\n public checkIconSize?: IconSize;\r\n\r\n @Input()\r\n public indeterminateIcon?: IconType;\r\n\r\n @Input()\r\n public indeterminateIconSize?: IconSize;\r\n\r\n @HostBinding('class.checkbox')\r\n public readonly checkbox = true;\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('indeterminate', 'fitted', 'checked', 'value', 'name', 'label', 'readonly');\r\n CheckboxComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n protected onClick(event: MouseEvent): void {\r\n if (event.target instanceof HTMLInputElement || this.readOnlyDirective.readonly || this.disabledDirective.disabled) {\r\n return;\r\n }\r\n this.set(!this.value);\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n protected onKeyDown(event: KeyboardEvent): void {\r\n if (this.readOnlyDirective.readonly || this.disabledDirective.disabled || !Key.space.is(event)) {\r\n return;\r\n }\r\n event.preventDefault();\r\n this.set(!this.value);\r\n }\r\n\r\n protected set(value: boolean): void {\r\n if (!value && !this.canUncheck) {\r\n return;\r\n }\r\n this.indeterminate = false;\r\n if (this.value !== value) {\r\n this.value = value;\r\n this.onChange();\r\n }\r\n this.refreshClasses();\r\n }\r\n\r\n protected onChange(): void {\r\n this.valueChange.emit(this.value);\r\n this.checkedChange.emit(this.isChecked);\r\n }\r\n\r\n}\r\n","\n\n","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { CheckboxComponent } from './checkbox.component';\r\n\r\n@Component({\r\n selector: 'm-checkbox-defaults',\r\n template: ''\r\n})\r\nexport class CheckboxDefaultsComponent implements OnDestroy {\r\n private readonly previousDropdownIcon = CheckboxComponent.defaults.checkIcon;\r\n private readonly previousDropdownIconSize = CheckboxComponent.defaults.checkIconSize;\r\n private readonly previousDeleteIcon = CheckboxComponent.defaults.indeterminateIcon;\r\n private readonly previousDeleteIconSize = CheckboxComponent.defaults.indeterminateIconSize;\r\n private currentCheckIcon?: IconType;\r\n private currentCheckIconSize?: IconSize;\r\n private currentIndeterminateIcon?: IconType;\r\n private currentIndeterminateIconSize?: IconSize;\r\n\r\n @Input()\r\n public set checkIcon(value: IconType) {\r\n this.currentCheckIcon = value;\r\n CheckboxComponent.defaults.checkIcon = value;\r\n }\r\n\r\n @Input()\r\n public set checkIconSize(value: IconSize) {\r\n this.currentCheckIconSize = value;\r\n CheckboxComponent.defaults.checkIconSize = value;\r\n }\r\n\r\n @Input()\r\n public set indeterminateIcon(value: IconType) {\r\n this.currentIndeterminateIcon = value;\r\n CheckboxComponent.defaults.indeterminateIcon = value;\r\n }\r\n\r\n @Input()\r\n public set indeterminateIconSize(value: IconSize) {\r\n this.currentIndeterminateIconSize = value;\r\n CheckboxComponent.defaults.indeterminateIconSize = value;\r\n }\r\n\r\n @Input()\r\n public set inverted(value: boolean) {\r\n CheckboxComponent.defaults.inverted = value;\r\n CheckboxComponent.defaults.invertedChange.next(value);\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentCheckIcon === CheckboxComponent.defaults.checkIcon) {\r\n CheckboxComponent.defaults.checkIcon = this.previousDropdownIcon;\r\n }\r\n if (this.currentCheckIconSize === CheckboxComponent.defaults.checkIconSize) {\r\n CheckboxComponent.defaults.checkIconSize = this.previousDropdownIconSize;\r\n }\r\n if (this.currentIndeterminateIcon === CheckboxComponent.defaults.indeterminateIcon) {\r\n CheckboxComponent.defaults.indeterminateIcon = this.previousDeleteIcon;\r\n }\r\n if (this.currentIndeterminateIconSize === CheckboxComponent.defaults.indeterminateIconSize) {\r\n CheckboxComponent.defaults.indeterminateIconSize = this.previousDeleteIconSize;\r\n }\r\n }\r\n}\r\n","import { Directive, OnInit } from '@angular/core';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { ButtonBaseComponent } from '../base/button-base.component';\r\nimport { ButtonComponent } from '../components/button/button.component';\r\n\r\n@Directive({\r\n selector: '[m-button]',\r\n providers: [...ButtonBaseComponent.providers]\r\n})\r\nexport class ButtonDirective extends ButtonBaseComponent implements OnInit {\r\n public constructor() {\r\n super();\r\n this.validateAttributes = false;\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n ButtonComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n}\r\n","import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\r\nimport { ChatMessage } from '../../models/chat-message';\r\nimport { ButtonComponent } from '../button/button.component';\r\n\r\nimport { ButtonDirective } from '../../directives/button.directive';\r\nimport { RouterLink } from '@angular/router';\r\n\r\n@Component({\n selector: 'm-chat-message',\n templateUrl: './chat-message.component.html',\n styleUrls: ['./chat-message.component.scss'],\n imports: [\n ButtonComponent,\n ButtonDirective,\n RouterLink\n]\n})\r\nexport class ChatMessageComponent {\r\n\r\n @Input({ required: true })\r\n public message: ChatMessage | undefined;\r\n\r\n @HostBinding('class.in')\r\n public get in(): boolean {\r\n return this.message?.direction === 'in';\r\n }\r\n\r\n @HostBinding('class.out')\r\n public get out(): boolean {\r\n return this.message?.direction === 'out';\r\n }\r\n\r\n @HostBinding('class.grouped')\r\n public get grouped(): boolean {\r\n return this.message?.grouped ?? false;\r\n }\r\n\r\n @Output()\r\n public readonly execute = new EventEmitter();\r\n\r\n public open(url: string): void {\r\n window.open(url);\r\n }\r\n\r\n public onExecute(action: string): void {\r\n this.execute.emit(action);\r\n }\r\n}\r\n","
\n @if (message && !message.grouped) {\n
{{message.sender}}
\n }\n {{message?.text}}\n @if (message?.options) {\n
\n @for (option of message?.options; track option) {\n @if (option.url) {\n @if (!option.hideUrl) {\n @if (option.url.indexOf('http') === 0) {\n {{option.text}}\n }\n @if (option.url.indexOf('http') !== 0) {\n {{option.text}}\n }\n }\n @if (option.hideUrl) {\n {{option.text}}\n }\n }\n @if (option.action) {\n {{option.text}}\n }\n @if (!option.url && !option.action) {\n {{option.text}}\n }\n }\n
\n }\n
\n","import { Directive, ElementRef, Input, TemplateRef, ViewContainerRef } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[m-fallback-for]',\r\n })\r\nexport class FallbackForDirective {\r\n\r\n @Input('m-fallback-for')\r\n public set fallback(selector: string) {\r\n const foundElement = this.elementRef.nativeElement.parentElement?.querySelector(selector);\r\n if (foundElement) {\r\n this.viewContainer.clear();\r\n } else {\r\n this.viewContainer.createEmbeddedView(this.templateRef);\r\n }\r\n }\r\n\r\n public constructor(\r\n private readonly elementRef: ElementRef,\r\n private readonly templateRef: TemplateRef,\r\n private readonly viewContainer: ViewContainerRef\r\n ) { }\r\n\r\n}\r\n","\r\nimport { Component, HostBinding, Input, OnInit } from '@angular/core';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { ButtonBaseComponent } from '../../base/button-base.component';\r\nimport { ButtonComponent } from '../button/button.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\n\r\n@Component({\n selector: 'm-icon-button',\n templateUrl: './icon-button.component.html',\n styleUrls: ['./icon-button.component.scss'],\n imports: [\n IconComponent\n],\n providers: [...ButtonBaseComponent.providers]\n})\r\nexport class IconButtonComponent extends ButtonBaseComponent implements OnInit {\r\n\r\n @Input()\r\n public icon: IconType | undefined;\r\n\r\n @Input()\r\n public iconSize: IconSize;\r\n\r\n @Input()\r\n @HostBinding('class.social')\r\n public social: string | undefined;\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('iconSize', 'social', 'title')\r\n .registerFixed('icon');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n ButtonComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n}\r\n","@if (icon || social) {\n \n}\n","import { Component, HostListener, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { LabelPosition } from '../../models/label-position';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\n\r\n// TODO: Enable animation\r\n// TODO: Enable active state\r\n@Component({\r\n selector: 'm-label-dropdown',\r\n templateUrl: './label-dropdown.component.html',\r\n styleUrls: ['./label-dropdown.component.scss'],\r\n imports: [\r\n IconComponent\r\n ],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class LabelDropdownComponent extends BaseComponent {\r\n public static readonly defaults = { dropdownIcon: 'dropdown', dropdownIconSize: undefined };\r\n protected readonly defaults = LabelDropdownComponent.defaults;\r\n\r\n public isOpen = false;\r\n\r\n @Input()\r\n public position: LabelPosition;\r\n\r\n @Input()\r\n public dropdownIcon: IconType | undefined;\r\n\r\n @Input()\r\n public dropdownIconSize: IconSize;\r\n\r\n @Input()\r\n public value: string | undefined;\r\n\r\n @Input()\r\n public items: string[] | undefined;\r\n\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('dropdown', 'label');\r\n }\r\n\r\n private readonly onOutsideClickHandler = () => this.close();\r\n\r\n @HostListener('click', ['$event'])\r\n protected onClick(event: MouseEvent): void {\r\n // TODO: Replace prevent\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (this.isOpen) {\r\n this.close();\r\n }\r\n else {\r\n this.isOpen = true;\r\n window.addEventListener('click', this.onOutsideClickHandler);\r\n }\r\n }\r\n\r\n private close(): void {\r\n window.removeEventListener('click', this.onOutsideClickHandler);\r\n this.isOpen = false;\r\n }\r\n\r\n public select(value: string): void {\r\n this.value = value;\r\n }\r\n}\r\n","
{{value}}
\n\n
\n @for (item of items; track item) {\n
{{item}}
\n }\n
\n","import { ContentChild, Directive, HostBinding, Input } from '@angular/core';\r\nimport { ButtonComponent } from '../components/button/button.component';\r\nimport { IconButtonComponent } from '../components/icon-button/icon-button.component';\r\nimport { LabelDropdownComponent } from '../components/label-dropdown/label-dropdown.component';\r\nimport { LabelComponent } from '../components/label/label.component';\r\nimport { LabelOptions } from '../models/label-options';\r\nimport { InvertibleComponent } from './invertible.component';\r\n\r\n@Directive()\r\nexport abstract class LabeledBaseComponent extends InvertibleComponent {\r\n protected static override readonly providers = [...InvertibleComponent.providers];\r\n\r\n private labelValue: LabelOptions | undefined;\r\n private labelDropdownValue: LabelDropdownComponent | undefined;\r\n\r\n @ContentChild(LabelComponent)\r\n public get label(): LabelOptions | undefined {\r\n return this.labelValue;\r\n }\r\n\r\n public set label(value: LabelOptions | undefined) {\r\n this.labelValue = value;\r\n if (value) {\r\n this.classes.set('labeled', (value.position ?? '') + ' labeled');\r\n }\r\n }\r\n\r\n @ContentChild(LabelDropdownComponent)\r\n public get labelDropdown(): LabelDropdownComponent | undefined {\r\n return this.labelDropdownValue;\r\n }\r\n\r\n public set labelDropdown(value: LabelDropdownComponent | undefined) {\r\n this.labelDropdownValue = value;\r\n if (value) {\r\n this.classes.set('labeled', (value.position ?? '') + ' labeled');\r\n }\r\n }\r\n\r\n @ContentChild(IconButtonComponent)\r\n protected iconButton: IconButtonComponent | undefined;\r\n\r\n @ContentChild(ButtonComponent)\r\n protected button: ButtonComponent | undefined;\r\n\r\n public get isRight(): boolean {\r\n return !!this.label && this.label.position === 'right' || !!this.labelDropdown && this.labelDropdown.position === 'right';\r\n }\r\n\r\n @Input()\r\n public buttonPosition: 'left' | 'right' = 'right';\r\n\r\n @HostBinding('class.action')\r\n public get isAction(): boolean {\r\n return !!this.button || !!this.iconButton;\r\n }\r\n\r\n protected constructor() {\r\n super();\r\n this.classes.register('labeled');\r\n //TODO: Implement actions\r\n // .registerAction('labelDropdown', (entry) => entry.classes = this.labelDropdown ? ((this.labelDropdown.position || '') + ' labeled').trim() : undefined);\r\n }\r\n\r\n}\r\n","import { Directive, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, Output } from '@angular/core';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { LabeledBaseComponent } from '../../base/labeled-base.component';\r\nimport { FluidDirective } from '../../directives/fluid.directive';\r\nimport { LoadingDirective } from '../../directives/loading.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { InputIconPosition } from './text/input.component';\r\n\r\n@Directive({\r\n hostDirectives: [LoadingDirective.default, FluidDirective.default],\r\n providers: InputBaseComponent.providers\r\n})\r\nexport abstract class InputBaseComponent extends LabeledBaseComponent implements OnDestroy {\r\n protected readonly colorForId = Date.now().toString() + Math.random();\r\n public static readonly defaults = {\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n protected static override readonly providers = [...LabeledBaseComponent.providers];\r\n\r\n private iconPositionValue: InputIconPosition | undefined;\r\n private transparentValue = false;\r\n private hasErrorValue = false;\r\n private readonlyValue = false;\r\n private disabledValue = false;\r\n private isAutoFocused = false;\r\n\r\n public inputElement: ElementRef | undefined;\r\n\r\n public get iconPosition(): InputIconPosition | undefined {\r\n return this.iconPositionValue;\r\n }\r\n\r\n @Input()\r\n public set iconPosition(value: InputIconPosition | undefined) {\r\n this.iconPositionValue = value;\r\n this.classes.set('iconPosition', value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.icon')\r\n public icon: IconType | undefined;\r\n\r\n @Input()\r\n public iconSize: IconSize;\r\n\r\n @HostBinding('class.focus')\r\n public focused = false;\r\n\r\n @Input()\r\n @HostBinding('class.disabled')\r\n public get disabled(): boolean {\r\n return this.disabledValue;\r\n }\r\n\r\n public set disabled(value: BooleanLike) {\r\n this.disabledValue = this.toBoolean(value);\r\n this.refreshInput();\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.readonly')\r\n public get readonly(): boolean {\r\n return this.readonlyValue;\r\n }\r\n\r\n public set readonly(value: BooleanLike) {\r\n this.readonlyValue = this.toBoolean(value);\r\n this.refreshInput();\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.error')\r\n public get hasError(): boolean {\r\n return this.hasErrorValue;\r\n }\r\n\r\n public set hasError(value: BooleanLike) {\r\n this.hasErrorValue = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.transparent')\r\n public get transparent(): boolean {\r\n return this.transparentValue;\r\n }\r\n\r\n public set transparent(value: BooleanLike) {\r\n this.transparentValue = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get autofocus(): boolean {\r\n return this.isAutoFocused;\r\n }\r\n\r\n public set autofocus(value: BooleanLike) {\r\n this.isAutoFocused = this.toBoolean(value);\r\n this.refreshFocus();\r\n }\r\n\r\n @Input()\r\n public placeholder: string | undefined;\r\n\r\n @Input()\r\n public name: string | undefined;\r\n\r\n @Input()\r\n public for: string | undefined;\r\n\r\n @Output()\r\n public readonly keyDown = new EventEmitter();\r\n\r\n @Output()\r\n public readonly keyUp = new EventEmitter();\r\n\r\n @Output()\r\n public readonly keyPress = new EventEmitter();\r\n\r\n @Output()\r\n public readonly blur = new EventEmitter();\r\n\r\n @Output()\r\n public readonly focus = new EventEmitter();\r\n\r\n @Output()\r\n public readonly focusin = new EventEmitter();\r\n\r\n @Output()\r\n public readonly focusout = new EventEmitter();\r\n\r\n @HostBinding('class.color')\r\n protected isColor = false;\r\n\r\n protected constructor() {\r\n super();\r\n InputBaseComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n this.classes.registerFixed('input');\r\n this.classes.register('icon', 'focused', 'disabled', 'readonly', 'transparent', 'hasError', 'autofocus', 'placeholder', 'iconPosition');\r\n }\r\n\r\n public override ngOnDestroy(): void {\r\n super.ngOnDestroy();\r\n this.unbindEvents();\r\n }\r\n\r\n protected refreshInput(): void {\r\n if (!this.inputElement) {\r\n return;\r\n }\r\n this.inputElement.nativeElement.disabled = this.disabledValue;\r\n this.inputElement.nativeElement.readOnly = this.readonlyValue;\r\n }\r\n\r\n private readonly keyDownEventHandler = (event: KeyboardEvent) => this.keyDown.next(event);\r\n private readonly keyUpEventHandler = (event: KeyboardEvent) => this.keyUp.next(event);\r\n private readonly keyPressEventHandler = (event: Event) => this.keyPress.next(event);\r\n private readonly blurEventHandler = (event: FocusEvent) => this.blur.next(event);\r\n private readonly focusEventHandler = (event: FocusEvent) => this.focus.next(event);\r\n private readonly focusinEventHandler = (event: FocusEvent) => this.focusin.next(event);\r\n private readonly focusoutEventHandler = (event: FocusEvent) => this.focusout.next(event);\r\n\r\n protected bindEvents(): void {\r\n if (!this.inputElement) {\r\n return;\r\n }\r\n // TODO: Improve event binding!\r\n this.inputElement.nativeElement.addEventListener('keydown', this.keyDownEventHandler);\r\n this.inputElement.nativeElement.addEventListener('keyup', this.keyUpEventHandler);\r\n this.inputElement.nativeElement.addEventListener('keyPress', this.keyPressEventHandler);\r\n this.inputElement.nativeElement.addEventListener('blur', this.blurEventHandler);\r\n this.inputElement.nativeElement.addEventListener('focus', this.focusEventHandler);\r\n this.inputElement.nativeElement.addEventListener('focusin', this.focusinEventHandler);\r\n this.inputElement.nativeElement.addEventListener('focusout', this.focusoutEventHandler);\r\n }\r\n\r\n protected unbindEvents(): void {\r\n if (!this.inputElement) {\r\n return;\r\n }\r\n this.inputElement.nativeElement.removeEventListener('keydown', this.keyDownEventHandler);\r\n this.inputElement.nativeElement.removeEventListener('keyup', this.keyUpEventHandler);\r\n this.inputElement.nativeElement.removeEventListener('keyPress', this.keyPressEventHandler);\r\n this.inputElement.nativeElement.removeEventListener('blur', this.blurEventHandler);\r\n this.inputElement.nativeElement.removeEventListener('focus', this.focusEventHandler);\r\n this.inputElement.nativeElement.removeEventListener('focusin', this.focusinEventHandler);\r\n this.inputElement.nativeElement.removeEventListener('focusout', this.focusoutEventHandler);\r\n }\r\n\r\n protected refreshFocus(): void {\r\n if (this.isAutoFocused && this.inputElement) {\r\n setTimeout(() => this.setFocus());\r\n }\r\n }\r\n\r\n public setFocus(): void {\r\n this.inputElement?.nativeElement.focus();\r\n }\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { FallbackForDirective } from '../../../directives/fallback-for.directive';\r\nimport { IconComponent } from '../../icon/icon.component';\r\nimport { InputBaseComponent } from '../input-base.component';\r\n\r\nexport declare type InputIconPosition =\r\n 'left'\r\n | 'right';\r\n\r\nexport declare type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'urlweek';\r\n\r\n@Component({\r\n selector: 'm-input',\r\n templateUrl: './input.component.html',\r\n styleUrls: ['./input.component.scss'],\r\n imports: [IconComponent, FallbackForDirective, FormsModule, NgTemplateOutlet],\r\n providers: [...InputBaseComponent.providers]\r\n})\r\nexport class InputComponent extends InputBaseComponent {\r\n private typeValue?: InputType;\r\n\r\n @Input()\r\n public value: string | undefined;\r\n\r\n @Input()\r\n public get text(): string {\r\n return this.value ?? this.default;\r\n }\r\n\r\n public set text(value: string | undefined) {\r\n this.value = value;\r\n }\r\n\r\n @Input()\r\n public default = '';\r\n\r\n @Input()\r\n public get type(): InputType | undefined {\r\n return this.typeValue;\r\n }\r\n\r\n public set type(value: InputType | undefined) {\r\n this.typeValue = value;\r\n this.isColor = value === 'color';\r\n if (this.isColor) {\r\n this.label = { position: 'right' };\r\n }\r\n }\r\n\r\n @Input()\r\n public maxlength: string | number | undefined;\r\n\r\n @Output()\r\n public readonly valueChange = new EventEmitter();\r\n\r\n @Output()\r\n public readonly textChange = new EventEmitter();\r\n\r\n @ContentChild('input')\r\n protected set contentInputElement(input: ElementRef) {\r\n this.unbindEvents();\r\n this.inputElement = input;\r\n this.refreshInput();\r\n this.bindEvents();\r\n this.refreshFocus();\r\n }\r\n\r\n @ViewChild('input')\r\n protected set viewInputElement(input: ElementRef) {\r\n this.unbindEvents();\r\n this.inputElement = input;\r\n this.bindEvents();\r\n this.refreshFocus();\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('maxlength', 'type', 'defaultValue', 'value', 'text');\r\n }\r\n\r\n protected onChange(): void {\r\n this.value ??= this.default;\r\n this.valueChange.emit(this.value);\r\n this.textChange.emit(this.text);\r\n }\r\n}\r\n","@if (!isRight) {\n \n}\n@if (buttonPosition === 'left') {\n \n}\n\n@if (type === 'color') {\n \n \n}\n\n@if (icon) {\n \n}\n@if (isRight) {\n \n}\n@if (buttonPosition === 'right') {\n \n}\n\n\n \n \n\n\n\n \n \n\n","import { NgIfContext } from '@angular/common';\r\nimport { Component, DoCheck, ElementRef, Input, IterableDiffer, IterableDiffers, Output, TemplateRef, ViewChild } from '@angular/core';\r\nimport { Subject } from 'rxjs';\r\nimport { toBoolean } from '../../helpers/to-boolean';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { ChatMessage } from '../../models/chat-message';\r\nimport { ButtonComponent } from '../button/button.component';\r\nimport { ChatMessageComponent } from '../chat-message/chat-message.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { InputComponent } from '../input/text/input.component';\r\n\r\n@Component({\r\n selector: 'm-chat',\r\n templateUrl: './chat.component.html',\r\n styleUrls: ['./chat.component.scss'],\r\n imports: [\r\n ChatMessageComponent,\r\n InputComponent,\r\n ButtonComponent,\r\n IconComponent\r\n]\r\n})\r\nexport class ChatComponent implements DoCheck {\r\n public static readonly defaults = { sendIcon: 'caret right', sendIconSize: 'big' };\r\n private readonly sendSubject = new Subject();\r\n private readonly messagesDiffer: IterableDiffer;\r\n protected readonly defaults = ChatComponent.defaults;\r\n private canSendValue = true;\r\n protected isSendIconVisible = false;\r\n\r\n @Input()\r\n public messages: ChatMessage[] = [];\r\n\r\n public message: string | undefined;\r\n\r\n @Input()\r\n public get canSend(): boolean {\r\n return this.canSendValue;\r\n }\r\n\r\n public set canSend(value: BooleanLike) {\r\n this.canSendValue = toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public sender: string | undefined;\r\n\r\n @Input()\r\n // eslint-disable-next-line no-null/no-null\r\n public sendIconTemplate: TemplateRef> | null = null;\r\n\r\n @Input()\r\n public sendIcon: IconType | undefined;\r\n\r\n @Input()\r\n public sendIconSize: IconSize;\r\n\r\n @Input()\r\n public get showSendIcon(): boolean {\r\n return this.isSendIconVisible;\r\n }\r\n\r\n public set showSendIcon(value: BooleanLike) {\r\n this.isSendIconVisible = toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public placeholder = 'Type a message and send with ENTER';\r\n\r\n @Output()\r\n public readonly send = this.sendSubject.asObservable();\r\n\r\n @ViewChild('chat')\r\n protected chat: ElementRef | undefined;\r\n\r\n @ViewChild(InputComponent)\r\n protected input: InputComponent | undefined;\r\n\r\n public constructor(\r\n iterableDiffers: IterableDiffers\r\n ) {\r\n this.messagesDiffer = iterableDiffers.find([]).create(undefined);\r\n }\r\n\r\n public ngDoCheck(): void {\r\n if (this.messagesDiffer.diff(this.messages)) {\r\n this.scrollDown();\r\n }\r\n }\r\n\r\n protected sendMessage(): void {\r\n if (this.message) {\r\n this.sendSubject.next({ direction: 'out', text: this.message, sender: this.sender ?? 'Unknown', timestamp: Date.now() });\r\n }\r\n this.message = undefined;\r\n this.input?.setFocus();\r\n }\r\n\r\n protected onKeyDown(event: KeyboardEvent): void {\r\n if (event.code === 'Enter' || event.code === 'NumpadEnter') {\r\n this.sendMessage();\r\n }\r\n }\r\n\r\n private scrollDown(): void {\r\n setTimeout(() => this.chat?.nativeElement.scrollTo(0, 999999));\r\n }\r\n}\r\n","
\n @for (message of messages; track message) {\n \n }\n \n
\n@if (canSend) {\n
\n \n @if (isSendIconVisible) {\n \n @if (!sendIconTemplate) {\n \n } @else {\n \n }\n \n }\n \n
\n}\n","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { ChatComponent } from './chat.component';\r\nimport { IconSize } from '../icon/icon-size';\r\n\r\n@Component({\r\n selector: 'm-chat-defaults',\r\n template: ''\r\n})\r\nexport class ChatDefaultsComponent implements OnDestroy {\r\n private readonly previousSendIcon = ChatComponent.defaults.sendIcon;\r\n private readonly previousSendIconSize = ChatComponent.defaults.sendIconSize;\r\n private currentSendIcon?: IconType;\r\n private currentSendIconSize?: IconSize;\r\n\r\n @Input()\r\n public set sendIcon(value: IconType) {\r\n this.currentSendIcon = value;\r\n ChatComponent.defaults.sendIcon = value;\r\n }\r\n\r\n @Input()\r\n public set sendIconSize(value: IconSize) {\r\n this.currentSendIconSize = value;\r\n ChatComponent.defaults.sendIconSize = value;\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentSendIcon === ChatComponent.defaults.sendIcon) {\r\n ChatComponent.defaults.sendIcon = this.previousSendIcon;\r\n }\r\n if (this.currentSendIconSize === ChatComponent.defaults.sendIconSize) {\r\n ChatComponent.defaults.sendIconSize = this.previousSendIconSize;\r\n }\r\n }\r\n}\r\n","import { Component, HostBinding, inject, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { ColorDirective } from '../../directives/color.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { ColorName } from '../../models/color';\r\n\r\n@Component({\r\n selector: 'm-circular-progress',\r\n templateUrl: './circular-progress.component.html',\r\n styleUrls: ['./circular-progress.component.scss'],\r\n hostDirectives: [ColorDirective.default],\r\n imports: [],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class CircularProgressComponent extends BaseComponent {\r\n private readonly colorDirective = inject(ColorDirective, { self: true });\r\n private isSuccess = false;\r\n private isWarning = false;\r\n private isError = false;\r\n\r\n @Input({ required: true })\r\n public value = 0;\r\n\r\n @Input()\r\n public min = 0;\r\n\r\n @Input()\r\n public max = 100;\r\n\r\n @Input()\r\n public size = 160;\r\n\r\n @Input()\r\n public strokeWidth = 12;\r\n\r\n @Input()\r\n public centerContent = true;\r\n\r\n @HostBinding('class.ui')\r\n @HostBinding('class.progress')\r\n @HostBinding('class.circular')\r\n protected readonly host = true;\r\n\r\n @Input()\r\n @HostBinding('class.success')\r\n public get success(): boolean {\r\n return this.isSuccess;\r\n }\r\n\r\n public set success(value: BooleanLike) {\r\n this.isSuccess = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.error')\r\n public get error(): boolean {\r\n return this.isError;\r\n }\r\n\r\n public set error(value: BooleanLike) {\r\n this.isError = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.warning')\r\n public get warning(): boolean {\r\n return this.isWarning;\r\n }\r\n\r\n public set warning(value: BooleanLike) {\r\n this.isWarning = this.toBoolean(value);\r\n }\r\n\r\n @HostBinding('class')\r\n protected get color(): ColorName | undefined {\r\n return this.colorDirective.color;\r\n }\r\n\r\n protected get radius(): number {\r\n return this.size / 2 - this.strokeWidth / 2;\r\n }\r\n\r\n protected get total(): number {\r\n return 2 * Math.PI * this.radius;\r\n }\r\n\r\n protected get offset(): number {\r\n const valueOffset = (this.value - this.min) / (this.max - this.min);\r\n return this.total * (1 - valueOffset);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n }\r\n\r\n}\r\n","\n \n \n\n
\n @if (centerContent) {\n
\n \n
\n } @else {\n \n }\n
\n","import { AfterViewInit, Directive, EmbeddedViewRef, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[m-to-body]',\r\n })\r\nexport class ToBodyDirective implements AfterViewInit, OnDestroy {\r\n private embeddedViewRef: EmbeddedViewRef | undefined;\r\n\r\n public constructor(\r\n private readonly template: TemplateRef,\r\n private readonly viewContainerRef: ViewContainerRef\r\n ) {\r\n }\r\n\r\n public ngAfterViewInit(): void {\r\n this.embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.template);\r\n this.embeddedViewRef.detectChanges();\r\n for (const node of this.embeddedViewRef.rootNodes) {\r\n document.body.appendChild(node);\r\n }\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n for (const node of this.embeddedViewRef?.rootNodes ?? []) {\r\n if (document.body.contains(node)) {\r\n document.body.removeChild(node);\r\n }\r\n }\r\n this.embeddedViewRef?.destroy();\r\n this.embeddedViewRef = undefined;\r\n }\r\n}\r\n","import { Component, HostBinding, Input, Optional, SkipSelf } from '@angular/core';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { PointingDirective } from '../../directives/pointing.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\n\r\nexport declare type MenuPosition =\r\n 'top'\r\n | 'left'\r\n | 'bottom'\r\n | 'right'\r\n | undefined;\r\n\r\n@Component({\r\n selector: 'm-menu',\r\n templateUrl: './menu.component.html',\r\n styleUrls: ['./menu.component.scss'],\r\n hostDirectives: [PointingDirective.default],\r\n providers: [...InvertibleComponent.providers]\r\n})\r\nexport class MenuComponent extends InvertibleComponent {\r\n private isFixed = false;\r\n private positionValue: MenuPosition;\r\n private isSecondary = false;\r\n private attachedValue: MenuPosition;\r\n private isTabular = false;\r\n private isText = false;\r\n private isVertical = false;\r\n\r\n public readonly element = this.elementRef;\r\n\r\n public get position(): MenuPosition {\r\n return this.positionValue;\r\n }\r\n\r\n @Input()\r\n public set position(value: MenuPosition) {\r\n this.positionValue = value;\r\n this.classes.set('position', value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.fixed')\r\n public get fixed(): boolean {\r\n return this.isFixed;\r\n }\r\n\r\n public set fixed(value: BooleanLike) {\r\n this.isFixed = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.secondary')\r\n public get secondary(): boolean {\r\n return this.isSecondary;\r\n }\r\n\r\n public set secondary(value: BooleanLike) {\r\n this.isSecondary = this.toBoolean(value);\r\n }\r\n\r\n public get attached(): MenuPosition {\r\n return this.attachedValue;\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.attached')\r\n public set attached(value: MenuPosition) {\r\n this.attachedValue = value;\r\n this.classes.set('attached', value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.tabular')\r\n public get tabular(): boolean {\r\n return this.isTabular;\r\n }\r\n\r\n public set tabular(value: BooleanLike) {\r\n this.isTabular = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.text')\r\n public get text(): boolean {\r\n return this.isText;\r\n }\r\n\r\n public set text(value: BooleanLike) {\r\n this.isText = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.vertical')\r\n public get vertical(): boolean {\r\n return this.isVertical;\r\n }\r\n\r\n public set vertical(value: BooleanLike) {\r\n this.isVertical = this.toBoolean(value);\r\n }\r\n\r\n public constructor(\r\n @Optional() @SkipSelf() parentMenu?: MenuComponent\r\n ) {\r\n super(!parentMenu);\r\n this.classes.registerFixed('menu');\r\n this.classes.register('position', 'fixed', 'secondary', 'tabular', 'text', 'attached', 'vertical');\r\n }\r\n}\r\n","\r\n\r\n","import { AfterViewInit, Component, EventEmitter, HostBinding, HostListener, Input, Output, ViewChild } from '@angular/core';\r\nimport { animationFrameScheduler, fromEvent } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { ToBodyDirective } from '../../directives/to-body.directive';\r\nimport { Math2 } from '../../helpers/math2';\r\nimport { Mouse } from '../../helpers/mouse';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { MenuComponent } from '../menu/menu.component';\r\nimport { ContextMenuEvent } from './models/context-menu-event';\r\nimport { ContextMenuMouseEvent } from './models/context-menu-mouse-event';\r\n\r\n@Component({\r\n selector: 'm-context-menu',\r\n templateUrl: './context-menu.component.html',\r\n styleUrls: ['./context-menu.component.scss'],\r\n imports: [\r\n MenuComponent,\r\n ToBodyDirective\r\n ],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class ContextMenuComponent extends BaseComponent implements AfterViewInit {\r\n private isOpenOnLeftClick = false;\r\n private isOpenOnRightClick = true;\r\n private isVertical = true;\r\n private isShared = false;\r\n\r\n public left: number | undefined;\r\n public top: number | undefined;\r\n\r\n @HostBinding('class.visible')\r\n public isVisible = false;\r\n\r\n @Input()\r\n public get openOnLeftClick(): boolean {\r\n return this.isOpenOnLeftClick;\r\n }\r\n\r\n public set openOnLeftClick(value: BooleanLike) {\r\n this.isOpenOnLeftClick = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get openOnRightClick(): boolean {\r\n return this.isOpenOnRightClick;\r\n }\r\n\r\n public set openOnRightClick(value: BooleanLike) {\r\n this.isOpenOnRightClick = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get vertical(): boolean {\r\n return this.isVertical;\r\n }\r\n\r\n public set vertical(value: BooleanLike) {\r\n this.isVertical = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get shared(): boolean {\r\n return this.isShared;\r\n }\r\n\r\n public set shared(value: BooleanLike) {\r\n this.isShared = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public margin = 5;\r\n\r\n // eslint-disable-next-line @angular-eslint/no-output-rename\r\n @Output('close')\r\n public readonly onclose = new EventEmitter();\r\n\r\n // eslint-disable-next-line @angular-eslint/no-output-rename\r\n @Output('open')\r\n public readonly onopen = new EventEmitter();\r\n\r\n @ViewChild(MenuComponent)\r\n protected menu: MenuComponent | undefined;\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('openOnLeftClick', 'openOnRightClick', 'vertical', 'margin', 'shared');\r\n }\r\n\r\n public ngAfterViewInit(): void {\r\n if (!this.isShared && this.elementRef.nativeElement.parentElement) {\r\n fromEvent(this.elementRef.nativeElement.parentElement, 'click').pipe(takeUntil(this.destroy)).subscribe(event => this.onParentClick(event as ContextMenuMouseEvent));\r\n fromEvent(this.elementRef.nativeElement.parentElement, 'contextmenu').pipe(takeUntil(this.destroy)).subscribe(event => this.onParentClick(event as ContextMenuMouseEvent));\r\n }\r\n fromEvent(document.documentElement, 'scroll', { capture: true }).pipe(takeUntil(this.destroy)).subscribe(event => this.onOutsideAction(event));\r\n }\r\n\r\n private onParentClick(event: ContextMenuMouseEvent): void {\r\n if (event.button === Mouse.left && !this.isOpenOnLeftClick) {\r\n return;\r\n }\r\n if (event.button === Mouse.right && !this.isOpenOnRightClick) {\r\n return;\r\n }\r\n this.open(event);\r\n }\r\n\r\n @HostListener('document:mousedown', ['$event'])\r\n @HostListener('document:keydown', ['$event'])\r\n protected onOutsideAction(event: ContextMenuEvent): void {\r\n if (!this.isVisible) {\r\n return;\r\n }\r\n if (event.contextMenuTarget === this || (event as KeyboardEvent).key === 'F8') {\r\n return;\r\n }\r\n if ((event.target as HTMLElement).closest('m-context-menu-item')) {\r\n return;\r\n }\r\n this.close();\r\n }\r\n\r\n private refreshPosition(tries = 3): void {\r\n if (!this.menu) {\r\n if (tries > 0) {\r\n animationFrameScheduler.schedule(() => this.refreshPosition(tries - 1));\r\n }\r\n return;\r\n }\r\n const menuRect = this.menu.element.nativeElement.getBoundingClientRect();\r\n const clipRect = document.documentElement.getBoundingClientRect();\r\n this.left = Math2.keepInRange(clipRect.left + this.margin, this.left, clipRect.right - this.margin - menuRect.width);\r\n this.top = Math2.keepInRange(clipRect.top + this.margin, this.top, clipRect.bottom - this.margin - menuRect.height);\r\n }\r\n\r\n public open(left?: number, top?: number): void\r\n public open(event: MouseEvent): void\r\n public open(leftOrEvent?: number | ContextMenuMouseEvent, top?: number): void {\r\n if (typeof leftOrEvent === 'number' || leftOrEvent === undefined) {\r\n this.left = leftOrEvent ?? this.left;\r\n this.top = top ?? this.top;\r\n }\r\n else {\r\n leftOrEvent.preventDefault();\r\n leftOrEvent.contextMenuTarget = this;\r\n this.left = leftOrEvent.clientX;\r\n this.top = leftOrEvent.clientY;\r\n }\r\n this.isVisible = true;\r\n this.refreshPosition();\r\n this.onopen.emit();\r\n }\r\n\r\n public close(): void {\r\n this.isVisible = false;\r\n this.onclose.emit();\r\n }\r\n}\r\n\r\n","@if (isVisible) {\n \n \n \n}\n","import { Component, EventEmitter, HostBinding, inject, Inject, Input, Optional, Output } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { ActiveDirective } from '../../directives/active.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { SortedClassesService } from '../../services/sorted-classes.service';\r\n\r\n@Component({\r\n selector: 'm-menu-item',\r\n templateUrl: './menu-item.component.html',\r\n styleUrls: ['./menu-item.component.scss'],\r\n providers: [SortedClassesService],\r\n hostDirectives: [ActiveDirective.default]\r\n})\r\nexport class MenuItemComponent extends BaseComponent {\r\n protected static override readonly providers = [...BaseComponent.providers];\r\n protected readonly activeDirective = inject(ActiveDirective, { self: true });\r\n private isLink = false;\r\n\r\n // TODO: Remove HostBinding\r\n @HostBinding('class.active')\r\n public get active(): boolean {\r\n return this.activeDirective.active;\r\n }\r\n\r\n protected set active(value: BooleanLike) {\r\n this.activeDirective.active = value;\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.link')\r\n public get link(): boolean {\r\n return this.isLink;\r\n }\r\n\r\n public set link(value: BooleanLike) {\r\n this.isLink = this.toBoolean(value);\r\n }\r\n\r\n @Output()\r\n public readonly activeChange = new EventEmitter();\r\n\r\n public constructor(\r\n @Optional() @Inject('none') useUiClass = true\r\n ) {\r\n super(useUiClass);\r\n this.classes.register('link')\r\n .registerFixed('item');\r\n }\r\n}\r\n","","import { Component, HostListener, Input, Optional } from '@angular/core';\r\nimport { BooleanLike } from '../../../models/boolean-like';\r\nimport { IconType } from '../../icon/icon-type';\r\nimport { IconComponent } from '../../icon/icon.component';\r\nimport { MenuItemComponent } from '../../menu-item/menu-item.component';\r\nimport { ContextMenuComponent } from '../context-menu.component';\r\n\r\n@Component({\r\n selector: 'm-context-menu-item',\r\n templateUrl: './context-menu-item.component.html',\r\n styleUrls: ['./context-menu-item.component.scss'],\r\n imports: [\r\n IconComponent\r\n ],\r\n providers: [...MenuItemComponent.providers]\r\n})\r\nexport class ContextMenuItemComponent extends MenuItemComponent {\r\n private keepOpenValue = false;\r\n\r\n @Input()\r\n public icon: IconType | undefined;\r\n\r\n @Input()\r\n public iconColor: string | undefined;\r\n\r\n @Input()\r\n public get keepOpen(): boolean {\r\n return this.keepOpenValue;\r\n }\r\n\r\n public set keepOpen(value: BooleanLike) {\r\n this.keepOpenValue = this.toBoolean(value);\r\n }\r\n\r\n public constructor(\r\n @Optional() private readonly contextMenu: ContextMenuComponent\r\n ) {\r\n super();\r\n this.classes.register('keepOpen', 'icon');\r\n this.link = true;\r\n }\r\n\r\n @HostListener('click')\r\n protected onClick(): void {\r\n if (this.keepOpen) {\r\n return;\r\n }\r\n this.contextMenu.close();\r\n }\r\n}\r\n","\r\n\r\n\r\n","import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit } from '@angular/core';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\n\r\n// TODO: Enable animation\r\n\r\n@Component({\r\n selector: 'm-dimmer',\r\n templateUrl: './dimmer.component.html',\r\n styleUrls: ['./dimmer.component.scss'],\r\n providers: [...InvertibleComponent.providers]\r\n})\r\nexport class DimmerComponent extends InvertibleComponent implements OnInit, OnDestroy {\r\n public static readonly defaults = {\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n private visibleValue = true;\r\n private isPage = false;\r\n private isHideOnClick = false;\r\n\r\n @Input()\r\n @HostBinding('class.page')\r\n public get page(): boolean {\r\n return this.isPage;\r\n }\r\n\r\n public set page(value: BooleanLike) {\r\n this.isPage = this.toBoolean(value);\r\n }\r\n\r\n // @Input()\r\n // public useContent = true;\r\n\r\n @Input()\r\n public get hideOnClick(): boolean {\r\n return this.isHideOnClick;\r\n }\r\n\r\n public set hideOnClick(value: BooleanLike) {\r\n this.isHideOnClick = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.visible')\r\n @HostBinding('class.active')\r\n public get visible(): boolean {\r\n return this.visibleValue;\r\n }\r\n\r\n public set visible(value: BooleanLike) {\r\n if (this.toBoolean(value)) {\r\n this.show();\r\n }\r\n else {\r\n this.hide();\r\n }\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('page', 'visible')\r\n .registerFixed('dimmer');\r\n DimmerComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n if (this.visible === undefined) {\r\n this.show();\r\n }\r\n }\r\n\r\n public override ngOnDestroy(): void {\r\n super.ngOnDestroy();\r\n this.hide();\r\n }\r\n\r\n public show(): void {\r\n this.visibleValue = true;\r\n this.refreshClasses();\r\n }\r\n\r\n public hide(): void {\r\n this.visibleValue = false;\r\n this.refreshClasses();\r\n }\r\n\r\n @HostListener('click')\r\n protected onClick(): void {\r\n if (this.hideOnClick) {\r\n this.hide();\r\n }\r\n }\r\n}\r\n","\r\n\r\n","import { Component, Input } from '@angular/core';\r\nimport { DimmerComponent } from './dimmer.component';\r\n\r\n@Component({\r\n selector: 'm-dimmer-defaults',\r\n template: ''\r\n})\r\nexport class DimmerDefaultsComponent {\r\n\r\n @Input()\r\n public set inverted(value: boolean) {\r\n DimmerComponent.defaults.inverted = value;\r\n DimmerComponent.defaults.invertedChange.next(value);\r\n }\r\n\r\n}\r\n","import { Observable, ReplaySubject } from 'rxjs';\r\n\r\nexport class DataSourceRequest {\r\n private readonly subject = new ReplaySubject[]>(1);\r\n public readonly observable = this.subject.asObservable();\r\n\r\n public constructor(\r\n public readonly key: string\r\n ) {\r\n }\r\n\r\n public resolve(data: Record[] | Observable[]>): void {\r\n if (Array.isArray(data)) {\r\n this.subject.next(data);\r\n } else {\r\n data.subscribe({\r\n next: result => this.subject.next(result),\r\n error: error => this.subject.error(error)\r\n });\r\n }\r\n }\r\n}\r\n","import { Component, Output } from '@angular/core';\r\nimport { Observable, Subject } from 'rxjs';\r\nimport { DataSourceRequest } from './data-source-request';\r\n\r\n@Component({\r\n selector: 'm-data-source',\r\n template: ''\r\n})\r\nexport class DataSourceComponent {\r\n private readonly requestSubject = new Subject();\r\n\r\n @Output()\r\n public readonly request = this.requestSubject.asObservable();\r\n\r\n public get(key: string): Observable[]> {\r\n const request = new DataSourceRequest(key);\r\n this.requestSubject.next(request);\r\n return request.observable;\r\n }\r\n}\r\n","import { Component } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\n\r\n@Component({\r\n selector: 'm-divider',\r\n templateUrl: './divider.component.html',\r\n styleUrls: ['./divider.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class DividerComponent extends BaseComponent {\r\n\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('divider');\r\n }\r\n}\r\n","","export class ObjectHelper {\r\n // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n private constructor() {}\r\n\r\n public static clone(value: T): T {\r\n return JSON.parse(JSON.stringify(value)) as T;\r\n }\r\n\r\n public static get(object: Record | undefined, path: string | string[]): T | undefined {\r\n const pathArray = typeof path === 'string' ? path.split('.') : path;\r\n return pathArray.length > 1 ? this.get(object?.[pathArray[0]] as Record | undefined, pathArray.slice(1)) : object?.[pathArray[0]] as T;\r\n }\r\n\r\n /*\r\n * Checks if the object has all specified keys. This is like a typesafe version of the `in` operator\r\n */\r\n public static has(value: unknown, ...keys: (keyof T)[]): value is T {\r\n // eslint-disable-next-line no-restricted-syntax\r\n return !!value && typeof value === 'object' && keys.every(key => key in value);\r\n }\r\n\r\n /*\r\n * Checks if the object has any of the specified keys. This is like a typesafe version of the `in` operator\r\n */\r\n public static hasSome(value: unknown, ...keys: (keyof T)[]): value is T {\r\n // eslint-disable-next-line no-restricted-syntax\r\n return !!value && typeof value === 'object' && keys.some(key => key in value);\r\n }\r\n}\r\n","import { Type, ViewContainerRef } from '@angular/core';\r\nimport { ObjectHelper } from '../../helpers/object-helper';\r\n\r\ninterface ComponentDef {\r\n readonly ngContentSelectors?: string[];\r\n readonly selectors: string[][];\r\n readonly type: Type;\r\n hostDirectives: HostDirectiveDef[] | null;\r\n}\r\n\r\ninterface HostDirectiveDef {\r\n directive: Type;\r\n inputs: Record;\r\n outputs: Record;\r\n}\r\n\r\nfunction getComponentDef(type: Type): ComponentDef | undefined {\r\n return (type as any)['ɵ' + 'cmp'] || undefined;\r\n}\r\n\r\nexport class ComponentParser {\r\n private static readonly registeredComponents: ComponentDef[] = [];\r\n\r\n public static register(component: Type): void {\r\n const componentDef = getComponentDef(component);\r\n if (!componentDef) {\r\n throw new Error(`Can not register component '${component.name}': no definition found`);\r\n }\r\n this.registeredComponents.push(componentDef);\r\n }\r\n\r\n public static parse(template: string | undefined, viewContainerRef: ViewContainerRef, data?: Record): Node[] {\r\n if (!template) {\r\n viewContainerRef.clear();\r\n return [];\r\n }\r\n data ??= {};\r\n const nodes: Node[] = [];\r\n const helperNode = document.createElement('div');\r\n helperNode.innerHTML = template;\r\n const nodesToParse = Array.from(helperNode.childNodes);\r\n const dataNode = nodesToParse.find(node => node.nodeName === 'M-JSON');\r\n const index = dataNode ? nodesToParse.indexOf(dataNode) : -1;\r\n if (index >= 0) {\r\n nodesToParse.splice(index, 1);\r\n }\r\n if (dataNode instanceof Element) {\r\n Object.assign(data, JSON.parse(dataNode.innerHTML || '{}'));\r\n }\r\n for (const node of nodesToParse) {\r\n nodes.push(this.parseNode(node, viewContainerRef, data));\r\n }\r\n return nodes;\r\n }\r\n\r\n private static parseNode(node: Node, viewContainerRef: ViewContainerRef, data: Record): Node {\r\n const definition = this.registeredComponents.find(d => d.selectors.some(sa => sa.some(s => s.toLowerCase() === node.nodeName.toLowerCase())));\r\n if (!definition) {\r\n const target: Node = viewContainerRef.element.nativeElement;\r\n this.appendTo(target, node);\r\n return node;\r\n }\r\n\r\n const nodes: Node[] = [];\r\n const nodesToParse = Array.from(node.childNodes);\r\n for (const nodeToParse of nodesToParse) {\r\n nodes.push(this.parseNode(nodeToParse, viewContainerRef, data));\r\n }\r\n const unusedNodes = [...nodes];\r\n const projectableNodes: Node[][] | undefined = definition.ngContentSelectors?.map(selector => {\r\n if (selector === '*') {\r\n return unusedNodes;\r\n }\r\n const foundNodes = nodes.filter(node => node.nodeName.toLowerCase() === selector);\r\n for (const foundNode of foundNodes) {\r\n const index = unusedNodes.indexOf(foundNode);\r\n if (index >= 0) {\r\n unusedNodes.splice(index, 1);\r\n }\r\n }\r\n return foundNodes;\r\n });\r\n const componentRef = viewContainerRef.createComponent(definition.type, {\r\n projectableNodes\r\n });\r\n if (node instanceof Element) {\r\n for (const attribute of Array.from(node.attributes)) {\r\n const boundAttribute = /^\\[(?.*)]$/.exec(attribute.name);\r\n const attributeName = boundAttribute ? boundAttribute.groups?.['name'] ?? '' : attribute.name;\r\n const attributeValue = boundAttribute ? ObjectHelper.get(data, attribute.value) : attribute.value;\r\n let inputFound = false;\r\n if (definition.hostDirectives) {\r\n for (const hostDirective of definition.hostDirectives) {\r\n if (hostDirective.inputs[attributeName]) {\r\n (componentRef.instance as any)[attributeName + 'Directive'][attributeName] = attributeValue;\r\n inputFound = true;\r\n }\r\n }\r\n }\r\n if (!inputFound) {\r\n (componentRef.instance as any)[attributeName] = attributeValue;\r\n }\r\n }\r\n }\r\n this.appendTo(componentRef.location.nativeElement, node);\r\n return componentRef.location.nativeElement;\r\n }\r\n\r\n private static appendTo(target: Node, node: Node): void {\r\n if (target.nextSibling) {\r\n target.parentNode?.insertBefore(node, target.nextSibling);\r\n } else {\r\n target.parentNode?.appendChild(node);\r\n }\r\n }\r\n}\r\n","import { Component, inject, Input, ViewContainerRef } from '@angular/core';\r\n\r\nimport { ComponentParser } from './component-parser';\r\n\r\n@Component({\n selector: 'm-dynamic-component',\n imports: [],\n template: '',\n styleUrls: []\n})\r\nexport class DynamicComponentComponent {\r\n private readonly viewContainerRef = inject(ViewContainerRef);\r\n private codeValue: string | undefined;\r\n\r\n @Input({ required: true })\r\n public get code(): string | undefined {\r\n return this.codeValue;\r\n }\r\n\r\n public set code(value: string | undefined) {\r\n this.codeValue = value;\r\n ComponentParser.parse(value, this.viewContainerRef, this.data);\r\n }\r\n\r\n @Input()\r\n public data: Record | undefined;\r\n}\r\n","import { EnvironmentProviders, makeEnvironmentProviders, Type } from '@angular/core';\r\nimport { ComponentParser } from './component-parser';\r\n\r\nexport function provideDynamicComponent(\r\n type: Type\r\n): EnvironmentProviders {\r\n ComponentParser.register(type);\r\n return makeEnvironmentProviders([]);\r\n}\r\n","import { ElementRef, Injectable } from '@angular/core';\r\nimport { Subject } from 'rxjs';\r\n\r\n// Use this to solve circular dependency problem\r\n@Injectable()\r\nexport class DropDownSelectionService {\r\n private readonly selectedSubject = new Subject();\r\n public readonly selected = this.selectedSubject.asObservable();\r\n\r\n public select(value: unknown): void {\r\n this.selectedSubject.next(value);\r\n }\r\n}\r\n","import { Component, HostBinding, HostListener, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { DropDownSelectionService } from '../dropdown/dropdown-selection.service';\r\n\r\n@Component({\r\n selector: 'm-dropdown-item',\r\n templateUrl: './dropdown-item.component.html',\r\n styleUrls: ['./dropdown-item.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class DropdownItemComponent extends BaseComponent {\r\n private isFilteredOut = false;\r\n private isSelected = false;\r\n\r\n @Input()\r\n public value: unknown;\r\n\r\n @Input()\r\n @HostBinding('class.filtered')\r\n public get filteredOut(): boolean {\r\n return this.isFilteredOut;\r\n }\r\n\r\n public set filteredOut(value: BooleanLike) {\r\n this.isFilteredOut = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.active')\r\n @HostBinding('class.selected')\r\n public get selected(): boolean {\r\n return this.isSelected;\r\n }\r\n\r\n public set selected(value: BooleanLike) {\r\n this.isSelected = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public icon: string | undefined;\r\n\r\n public readonly element = this.elementRef;\r\n\r\n public constructor(\r\n private readonly dropDownSelectionService: DropDownSelectionService\r\n ) {\r\n super();\r\n this.classes.register('filtered', 'selected', 'value')\r\n .registerFixed('item');\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n protected click(event: MouseEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.dropDownSelectionService.select(this.value);\r\n }\r\n\r\n public select(value = true): void {\r\n this.selected = value;\r\n }\r\n}\r\n","","import { IconType } from '../icon/icon-type';\r\nimport { IconSize } from '../icon/icon-size';\r\n\r\nexport class DropdownValue {\r\n public filtered?: boolean;\r\n\r\n public constructor(\r\n public value: T,\r\n public text?: string,\r\n public icon?: IconType,\r\n public iconSize?: IconSize\r\n ) {\r\n\r\n }\r\n}\r\n","\r\nimport { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgZone, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { fromEvent, ReplaySubject } from 'rxjs';\r\nimport { filter, takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { DisabledDirective } from '../../directives/disabled.directive';\r\nimport { FluidDirective } from '../../directives/fluid.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { DropdownItemComponent } from '../dropdown-item/dropdown-item.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { DropDownSelectionService } from './dropdown-selection.service';\r\nimport { DropdownValue } from './dropdown-value';\r\n\r\n@Component({\n selector: 'm-dropdown',\n templateUrl: './dropdown.component.html',\n styleUrls: ['./dropdown.component.scss'],\n imports: [\n FormsModule,\n IconComponent,\n DropdownItemComponent\n],\n hostDirectives: [FluidDirective.default, DisabledDirective.default],\n providers: [...InvertibleComponent.providers, DropDownSelectionService]\n})\r\nexport class DropdownComponent extends InvertibleComponent implements OnInit {\r\n public static readonly defaults = {\r\n dropdownIcon: 'dropdown',\r\n dropdownIconSize: undefined,\r\n deleteIcon: 'delete',\r\n deleteIconSize: undefined,\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n private isMultiple = false;\r\n private isSearch = false;\r\n private isSelectFirst = false;\r\n private isAttachedLeft = false;\r\n private isAttachedTop = false;\r\n private isAttachedRight = false;\r\n private isAttachedBottom = false;\r\n private isFreeTextAllowed = false;\r\n private isUserUpward = false;\r\n private isSystemUpward = false;\r\n private isDisabled = false;\r\n private isReadonly = false;\r\n protected readonly defaults = DropdownComponent.defaults;\r\n\r\n @ViewChild('htmlElement')\r\n protected textElement: ElementRef | undefined;\r\n\r\n @ViewChild('menuElement')\r\n protected menuElement: ElementRef | undefined;\r\n\r\n @ViewChild('inputElement')\r\n protected inputElement: ElementRef | undefined;\r\n\r\n @ContentChildren(DropdownItemComponent)\r\n protected set contentItemComponentsQuery(query: QueryList) {\r\n if (query.length > 0) {\r\n this.refreshItems(query);\r\n }\r\n query.changes.subscribe(() => this.refreshItems(query));\r\n }\r\n\r\n @ViewChildren(DropdownItemComponent)\r\n protected set viewItemComponentsQuery(query: QueryList) {\r\n if (query.length > 0) {\r\n this.refreshItems(query);\r\n }\r\n query.changes.subscribe(() => this.refreshItems(query));\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.multiple')\r\n public get multiple(): boolean {\r\n return this.isMultiple;\r\n }\r\n\r\n public set multiple(value: BooleanLike) {\r\n this.isMultiple = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get search(): boolean {\r\n return this.isSearch;\r\n }\r\n\r\n public set search(value: BooleanLike) {\r\n this.isSearch = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.attached-left')\r\n public get attachedLeft(): boolean {\r\n return this.isAttachedLeft;\r\n }\r\n\r\n public set attachedLeft(value: BooleanLike) {\r\n this.isAttachedLeft = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.attached-top')\r\n public get attachedTop(): boolean {\r\n return this.isAttachedTop;\r\n }\r\n\r\n public set attachedTop(value: BooleanLike) {\r\n this.isAttachedTop = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.attached-right')\r\n public get attachedRight(): boolean {\r\n return this.isAttachedRight;\r\n }\r\n\r\n public set attachedRight(value: BooleanLike) {\r\n this.isAttachedRight = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.attached-bottom')\r\n public get attachedBottom(): boolean {\r\n return this.isAttachedBottom;\r\n }\r\n\r\n public set attachedBottom(value: BooleanLike) {\r\n this.isAttachedBottom = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public placeholder: string | undefined;\r\n\r\n public get value(): unknown {\r\n return this.valueField;\r\n }\r\n\r\n @Input()\r\n public set value(value: unknown) {\r\n value ??= undefined;\r\n if (this.valueField === value) {\r\n return;\r\n }\r\n this.valueField = value;\r\n this.select(value);\r\n }\r\n\r\n @Input()\r\n public filter: string | undefined;\r\n\r\n @Input()\r\n public animationDuration = 200;\r\n\r\n public get items(): DropdownValue[] | undefined {\r\n return this.itemsField;\r\n }\r\n\r\n @Input()\r\n public set items(value: DropdownValue[] | null | undefined) {\r\n value ??= undefined;\r\n if (this.itemsField === value) {\r\n return;\r\n }\r\n this.itemsField = value;\r\n this.select(this.value);\r\n }\r\n\r\n @Input()\r\n public name?: string;\r\n\r\n @Input()\r\n public filterValue = true;\r\n\r\n @Input()\r\n public filterText = true;\r\n\r\n @Input()\r\n public icon: IconType | undefined;\r\n\r\n @Input()\r\n public iconSize: IconSize;\r\n\r\n @Input()\r\n public dropdownIcon: IconType | undefined;\r\n\r\n @Input()\r\n public dropdownIconSize: IconSize;\r\n\r\n @Input()\r\n public deleteIcon: IconType | undefined;\r\n\r\n @Input()\r\n public deleteIconSize: IconSize;\r\n\r\n @Input()\r\n public filterType: 'startsWith' | 'contains' = 'startsWith';\r\n\r\n @Input()\r\n public get selectFirst(): boolean {\r\n return this.isSelectFirst;\r\n }\r\n\r\n public set selectFirst(value: BooleanLike) {\r\n this.isSelectFirst = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get allowFreeText(): boolean {\r\n return this.isFreeTextAllowed;\r\n }\r\n\r\n public set allowFreeText(value: BooleanLike) {\r\n this.isFreeTextAllowed = this.toBoolean(value);\r\n }\r\n\r\n @HostBinding('attr.tabindex')\r\n public get tabIndex(): number {\r\n return (this.search ? undefined : 0) as any;\r\n }\r\n\r\n @HostBinding('class.search')\r\n public get searchClass(): boolean {\r\n return this.isSearch || this.isFreeTextAllowed;\r\n }\r\n\r\n @HostBinding('class.active')\r\n public isActive = false;\r\n\r\n @Input()\r\n public get upwards(): boolean {\r\n return this.isUserUpward;\r\n }\r\n\r\n public set upwards(value: BooleanLike) {\r\n this.isUserUpward = this.toBoolean(value);\r\n }\r\n\r\n public set disabled(value: BooleanLike) {\r\n this.isDisabled = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.disabled')\r\n public get readonly(): boolean {\r\n return this.isReadonly;\r\n }\r\n\r\n public set readonly(value: BooleanLike) {\r\n this.isReadonly = this.toBoolean(value);\r\n }\r\n\r\n @HostBinding('class.upward')\r\n public get isUpwardClass(): boolean {\r\n return this.isUserUpward ?? this.isSystemUpward;\r\n }\r\n\r\n public isDefault = true;\r\n public isMenuVisible = false;\r\n public isHidden = false;\r\n public isSlidingIn = false;\r\n public isSlidingOut = false;\r\n public isFiltered = false;\r\n public isLoading = false;\r\n public selectedIndex: number | undefined;\r\n public selectedItem: DropdownValue | undefined;\r\n public selectedItems: DropdownValue[] = [];\r\n\r\n private isFocused = false;\r\n private keepOpen = false;\r\n private itemComponents: DropdownItemComponent[] = [];\r\n private valueField: unknown;\r\n private itemsField: DropdownValue[] | undefined;\r\n\r\n public get hasItems(): boolean {\r\n return !!this.itemComponents?.length;\r\n }\r\n\r\n @Output()\r\n public readonly valueChange = new EventEmitter();\r\n\r\n public constructor(\r\n private readonly dropDownSelectionService: DropDownSelectionService,\r\n private readonly zone: NgZone\r\n ) {\r\n super();\r\n this.classes.register('multiple', 'search', 'active', 'visible', 'upward', 'selectFirst', 'placeholder', 'attachedLeft', 'attachedRight', 'attachedTop', 'attachedBottom', 'filterType', 'allowFreetext')\r\n .registerFixed('selection', 'dropdown');\r\n this.dropDownSelectionService.selected.pipe(takeUntil(this.destroy)).subscribe(event => this.select(event));\r\n DropdownComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n this.zone.runOutsideAngular(() =>\r\n fromEvent(window, 'scroll', { capture: true }).pipe(\r\n filter(event => this.isActive && event.target instanceof HTMLElement && this.elementRef.nativeElement !== event.target && !this.elementRef.nativeElement.contains(event.target)),\r\n takeUntil(this.destroy)\r\n ).subscribe(() => this.zone.run(() => this.close())));\r\n }\r\n\r\n @HostListener('focusin')\r\n public focus(): void {\r\n // Ignore focus/blur of window\r\n if (this.isFocused) {\r\n return;\r\n }\r\n this.open();\r\n setTimeout(() => this.isFocused = true, this.animationDuration);\r\n }\r\n\r\n @HostListener('focusout')\r\n public blur(): void {\r\n // Ignore focus/blur of window\r\n if (document.activeElement === this.elementRef.nativeElement || this.inputElement && document.activeElement === this.inputElement.nativeElement || this.keepOpen) {\r\n return;\r\n }\r\n this.isFocused = false;\r\n this.close();\r\n }\r\n\r\n @HostListener('click')\r\n public toggle(): void {\r\n if (this.isFocused && this.isMenuVisible && !this.search) {\r\n this.close();\r\n }\r\n else {\r\n this.open();\r\n }\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n protected onKeyDown(event: KeyboardEvent): void {\r\n if (event.code === 'ArrowUp') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.selectIndex(this.selectedIndex === undefined ? 0 : this.selectedIndex - 1);\r\n this.open();\r\n }\r\n else if (event.code === 'ArrowDown') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.selectIndex(this.selectedIndex === undefined ? 0 : this.selectedIndex + 1);\r\n this.open();\r\n }\r\n else if (event.code === 'Enter' || event.code === 'Space') {\r\n if (this.selectedIndex !== undefined && this.selectedIndex >= 0) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const component = this.itemComponents[this.selectedIndex];\r\n this.select(component.value);\r\n this.close();\r\n }\r\n else {\r\n const filteredComponents = this.itemComponents.filter(component => !component.filteredOut);\r\n if (filteredComponents.length === 1) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.select(filteredComponents[0].value);\r\n this.close();\r\n }\r\n }\r\n }\r\n else if (event.code === 'Backspace') {\r\n if (this.multiple && this.selectedItems.length > 0) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.deselect(this.selectedItems[this.selectedItems.length - 1]);\r\n }\r\n }\r\n else if (event.code === 'Escape') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.filter = undefined;\r\n this.onFilter();\r\n this.close();\r\n }\r\n else if (event.code === 'Tab') {\r\n if (this.selectedIndex !== undefined && this.selectedIndex >= 0) {\r\n const component = this.itemComponents[this.selectedIndex];\r\n this.select(component.value);\r\n }\r\n else {\r\n const filteredComponents = this.itemComponents.filter(component => !component.filteredOut);\r\n if (filteredComponents.length === 1) {\r\n this.select(filteredComponents[0].value);\r\n }\r\n }\r\n }\r\n }\r\n\r\n protected deleteClick(item: DropdownValue, event: MouseEvent): void {\r\n event.preventDefault();\r\n this.deselect(item);\r\n }\r\n\r\n public open(): void {\r\n if (this.isMenuVisible) {\r\n return;\r\n }\r\n if (this.search) {\r\n this.inputElement?.nativeElement.focus();\r\n }\r\n this.isHidden = true;\r\n this.isLoading = true;\r\n this.isSystemUpward = false;\r\n // this.refreshClasses();\r\n // Wait for rendering complete\r\n setTimeout(() => {\r\n const bounds = this.menuElement?.nativeElement.getBoundingClientRect();\r\n this.isSystemUpward = !!bounds && bounds.bottom >= window.innerHeight;\r\n\r\n this.isLoading = false;\r\n this.isHidden = false;\r\n\r\n // Wait for rendering complete\r\n setTimeout(() => {\r\n this.isActive = true;\r\n this.isMenuVisible = true;\r\n this.isSlidingIn = true;\r\n this.isSlidingOut = false;\r\n // this.refreshClasses();\r\n });\r\n });\r\n }\r\n\r\n public close(): void {\r\n this.isSlidingIn = false;\r\n this.isSlidingOut = true;\r\n this.isActive = false;\r\n if (this.isFreeTextAllowed && (this.selectedIndex === -1 || this.selectedIndex === undefined) && this.filter) {\r\n this.value = this.filter;\r\n this.valueChange.emit(this.value);\r\n }\r\n this.filter = undefined;\r\n this.onFilter();\r\n this.keepOpen = false;\r\n setTimeout(() => {\r\n this.isMenuVisible = false;\r\n this.isSlidingOut = false;\r\n // this.refreshClasses();\r\n }, this.animationDuration);\r\n // this.refreshClasses();\r\n }\r\n\r\n protected select(value: unknown): void {\r\n const isChanged = this.valueField !== value;\r\n if (this.items?.length && !this.itemComponents?.length) {\r\n return;\r\n }\r\n this.isDefault = false;\r\n if (!this.itemComponents?.length) {\r\n this.selectedItem = undefined;\r\n this.selectedItems.length = 0;\r\n this.value = value;\r\n this.filter = undefined;\r\n return;\r\n }\r\n let component = this.itemComponents.find(x => x.value === value);\r\n if (this.isSelectFirst) {\r\n component ??= this.itemComponents[0];\r\n }\r\n if (this.isFreeTextAllowed) {\r\n this.value = component?.value ?? value;\r\n }\r\n else if (this.isSearch && this.filter) {\r\n this.filter = undefined;\r\n this.onFilter();\r\n this.value = component?.value;\r\n }\r\n else {\r\n this.value = component?.value;\r\n }\r\n if (isChanged) {\r\n this.valueChange.emit(this.value);\r\n }\r\n this.selectedIndex = component ? this.itemComponents.indexOf(component) : undefined;\r\n if (this.multiple && component) {\r\n this.selectedItem = undefined;\r\n // TODO: Implement\r\n // this.selectedItems.push(item);\r\n // item.filtered = true;\r\n }\r\n else {\r\n this.selectedItem = this.items ? this.items.find(item => item.value === value) : { value };\r\n }\r\n if (!this.multiple) {\r\n this.close();\r\n }\r\n // HACK: This is a dirty hack, but currently i found no other solution. If you have a solution please create an issue\r\n setTimeout(() => {\r\n if (!this.textElement) {\r\n return;\r\n }\r\n this.textElement.nativeElement.innerHTML = component?.element.nativeElement.innerHTML ?? '';\r\n });\r\n // HACK-END\r\n }\r\n\r\n protected deselect(item: DropdownValue): void {\r\n const index = this.selectedItems.indexOf(item);\r\n if (index >= 0) {\r\n this.selectedItems.splice(index, 1);\r\n }\r\n if (this.selectedItems.length === 0) {\r\n this.isDefault = true;\r\n }\r\n }\r\n\r\n protected selectIndex(index: number): void {\r\n this.selectedIndex = Math.max(0, Math.min(index, this.itemComponents.length - 1));\r\n this.itemComponents.forEach((item, itemIndex) => item.select(itemIndex === this.selectedIndex));\r\n }\r\n\r\n protected onFilter(): void {\r\n if (this.itemComponents) {\r\n this.itemComponents.forEach(item => item.filteredOut = this.isItemFilteredOut(item));\r\n // this.isFiltered = this.itemComponents.some(item => item.filtered);\r\n }\r\n else {\r\n // this.isFiltered = false;\r\n }\r\n const filteredItems = this.itemComponents.filter(item => !item.filteredOut);\r\n if (filteredItems.length === 1) {\r\n this.selectedIndex = this.itemComponents.indexOf(filteredItems[0]);\r\n }\r\n else if (this.selectedIndex !== undefined && !filteredItems.includes(this.itemComponents[this.selectedIndex])) {\r\n this.selectedIndex = this.itemComponents.indexOf(filteredItems[0]);\r\n }\r\n this.isFiltered = !!this.filter;\r\n // TODO: Filter content children\r\n }\r\n\r\n private isItemFilteredOut(item: DropdownItemComponent): boolean {\r\n if (!this.filter) {\r\n return false;\r\n }\r\n const caseInsensitiveFilter = this.filter.toLowerCase();\r\n const filterAction: (value: string | undefined) => boolean = this.filterType === 'contains'\r\n ? value => !!value && value.toLowerCase().indexOf(caseInsensitiveFilter) === -1\r\n : value => !!value && value.toLowerCase().indexOf(caseInsensitiveFilter) !== 0;\r\n const textContainsFilter = !this.filterText || filterAction(item.element.nativeElement.innerText);\r\n const valueContainsFilter = !this.filterValue || filterAction(item.value && typeof item.value.toString === 'function' ? item.value.toString() : undefined);\r\n return textContainsFilter && valueContainsFilter;\r\n }\r\n\r\n private refreshItems(query: QueryList): void {\r\n this.itemComponents = query.toArray();\r\n if (this.selectedIndex === undefined || this.itemComponents?.[this.selectedIndex]?.value !== this.value) {\r\n setTimeout(() => this.select(this.value));\r\n }\r\n }\r\n\r\n protected itemMouseDown(item: DropdownValue): void {\r\n this.keepOpen = true;\r\n // this.select(item);\r\n setTimeout(() => {\r\n if (this.search) {\r\n this.inputElement?.nativeElement.focus();\r\n }\r\n else {\r\n this.elementRef.nativeElement.focus();\r\n }\r\n });\r\n }\r\n\r\n protected itemMouseUp(item: DropdownValue): void {\r\n this.keepOpen = false;\r\n }\r\n}\r\n","\n@if (icon) {\n \n}\n@if (!allowFreeText && hasItems) {\n \n}\n@for (selectedItem of selectedItems; track selectedItem) {\n \n @if (selectedItem.icon) {\n \n }\n {{selectedItem.text === undefined ? selectedItem.value : selectedItem.text}}\n \n \n}\n@if (search || allowFreeText) {\n \n}\n
\n @if (!selectedItem) {\n {{value || placeholder}}\n }\n \n
\n
\n @if (items) {\n @for (item of items; track item; let index = $index) {\n \n @if (item.icon) {\n \n }\n {{item.text === undefined ? item.value : item.text}}\n \n }\n } @else {\n \n }\n
\n","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { DropdownComponent } from './dropdown.component';\r\n\r\n@Component({\r\n selector: 'm-dropdown-defaults',\r\n template: ''\r\n})\r\nexport class DropdownDefaultsComponent implements OnDestroy {\r\n private readonly previousDropdownIcon = DropdownComponent.defaults.dropdownIcon;\r\n private readonly previousDropdownIconSize = DropdownComponent.defaults.dropdownIconSize;\r\n private readonly previousDeleteIcon = DropdownComponent.defaults.deleteIcon;\r\n private readonly previousDeleteIconSize = DropdownComponent.defaults.deleteIconSize;\r\n private currentDropdownIcon?: IconType;\r\n private currentDropdownIconSize?: IconSize;\r\n private currentDeleteIcon?: IconType;\r\n private currentDeleteIconSize?: IconSize;\r\n\r\n @Input()\r\n public set dropdownIcon(value: IconType) {\r\n this.currentDropdownIcon = value;\r\n DropdownComponent.defaults.dropdownIcon = value;\r\n }\r\n\r\n @Input()\r\n public set dropdownIconSize(value: IconSize) {\r\n this.currentDropdownIconSize = value;\r\n DropdownComponent.defaults.dropdownIconSize = value;\r\n }\r\n\r\n @Input()\r\n public set deleteIcon(value: IconType) {\r\n this.currentDeleteIcon = value;\r\n DropdownComponent.defaults.deleteIcon = value;\r\n }\r\n\r\n @Input()\r\n public set deleteIconSize(value: IconSize) {\r\n this.currentDeleteIconSize = value;\r\n DropdownComponent.defaults.deleteIconSize = value;\r\n }\r\n\r\n @Input()\r\n public set inverted(value: boolean) {\r\n DropdownComponent.defaults.inverted = value;\r\n DropdownComponent.defaults.invertedChange.next(value);\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentDropdownIcon === DropdownComponent.defaults.dropdownIcon) {\r\n DropdownComponent.defaults.dropdownIcon = this.previousDropdownIcon;\r\n }\r\n if (this.currentDropdownIconSize === DropdownComponent.defaults.dropdownIconSize) {\r\n DropdownComponent.defaults.dropdownIconSize = this.previousDropdownIconSize;\r\n }\r\n if (this.currentDeleteIcon === DropdownComponent.defaults.deleteIcon) {\r\n DropdownComponent.defaults.deleteIcon = this.previousDeleteIcon;\r\n }\r\n if (this.currentDeleteIconSize === DropdownComponent.defaults.deleteIconSize) {\r\n DropdownComponent.defaults.deleteIconSize = this.previousDeleteIconSize;\r\n }\r\n }\r\n}\r\n","\r\nimport { Component, Input, OnInit } from '@angular/core';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\n\r\nexport declare type HeaderSize = 'huge' | 'large' | 'medium' | 'small' | 'tiny';\r\n\r\n@Component({\n selector: 'm-header',\n templateUrl: './header.component.html',\n styleUrls: ['./header.component.scss'],\n imports: [\n IconComponent\n],\n providers: [...BaseComponent.providers]\n})\r\nexport class HeaderComponent extends InvertibleComponent implements OnInit {\r\n public static readonly defaults = {\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n private sizeValue: HeaderSize | undefined;\r\n\r\n @Input()\r\n public icon: IconType | undefined;\r\n\r\n @Input()\r\n public iconSize: IconSize;\r\n\r\n @Input()\r\n public get size(): HeaderSize | undefined {\r\n return this.sizeValue;\r\n }\r\n\r\n public set size(value: HeaderSize | undefined) {\r\n this.sizeValue = value;\r\n this.classes.set('size', value);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('size', 'iconSize')\r\n .registerFixed('header');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n HeaderComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n}\r\n","@if (icon) {\n \n}\n\n","import { AfterViewInit, Component, Input, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { HeaderComponent } from '../header/header.component';\r\nimport { DividerComponent } from '../divider/divider.component';\r\n\r\n\r\n@Component({\n selector: 'm-dropdown-group',\n templateUrl: './dropdown-group.component.html',\n styleUrls: ['./dropdown-group.component.scss'],\n imports: [\n HeaderComponent,\n DividerComponent\n]\n})\r\nexport class DropdownGroupComponent implements AfterViewInit {\r\n @Input()\r\n public label: string | undefined;\r\n\r\n @Input()\r\n public icon: IconType | undefined;\r\n\r\n @Input()\r\n public iconSize: IconSize;\r\n\r\n @ViewChild('contentTemplate')\r\n protected contentTemplate: TemplateRef | undefined;\r\n\r\n public constructor(\r\n private readonly viewContainerRef: ViewContainerRef\r\n ) {\r\n }\r\n\r\n public ngAfterViewInit(): void {\r\n if (this.contentTemplate) {\r\n this.viewContainerRef.createEmbeddedView(this.contentTemplate);\r\n } else {\r\n this.viewContainerRef.clear();\r\n }\r\n }\r\n\r\n}\r\n","\n @if (icon || label) {\n {{label}}\n }\n \n \n\n","import { Component, DoCheck, ElementRef, Input, OnDestroy } from '@angular/core';\r\nimport { Title } from '@angular/platform-browser';\r\n\r\n/**\r\n * @deprecated Use Route.title instead\r\n */\r\n@Component({\r\n selector: 'm-document-title',\r\n templateUrl: './document-title.component.html',\r\n styleUrls: ['./document-title.component.scss']\r\n})\r\nexport class DocumentTitleComponent implements DoCheck, OnDestroy {\r\n public static globalPostfix = '';\r\n public static globalPrefix = '';\r\n private previousTitle: string | undefined;\r\n private value: string | undefined;\r\n private title: string | undefined;\r\n\r\n @Input()\r\n public get postfix(): string {\r\n return DocumentTitleComponent.globalPostfix;\r\n }\r\n\r\n public set postfix(value: string) {\r\n DocumentTitleComponent.globalPostfix = value;\r\n }\r\n\r\n @Input()\r\n public get prefix(): string {\r\n return DocumentTitleComponent.globalPrefix;\r\n }\r\n\r\n public set prefix(value: string) {\r\n DocumentTitleComponent.globalPrefix = value;\r\n }\r\n\r\n public constructor(\r\n private readonly element: ElementRef,\r\n private readonly titleService: Title\r\n ) {\r\n }\r\n\r\n public ngDoCheck(): void {\r\n const newValue = this.prefix + this.element.nativeElement.innerText + this.postfix;\r\n if (newValue !== this.value) {\r\n this.value = newValue;\r\n if (this.previousTitle === undefined) {\r\n this.previousTitle = this.titleService.getTitle();\r\n }\r\n this.title = this.value;\r\n this.titleService.setTitle(this.title);\r\n }\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.titleService.getTitle() === this.title) {\r\n this.titleService.setTitle(this.previousTitle ?? '');\r\n }\r\n }\r\n}\r\n","","import { Component, OnDestroy, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'm-document-no-index',\r\n template: ''\r\n})\r\nexport class DocumentNoIndexComponent implements OnInit, OnDestroy {\r\n\r\n public ngOnInit(): void {\r\n const robotsMetaElement = document.querySelector('meta[name=robots]') as HTMLMetaElement;\r\n if (robotsMetaElement) {\r\n robotsMetaElement.content = 'noindex';\r\n } else {\r\n const element = document.createElement('meta') as HTMLMetaElement;\r\n element.name = 'robots';\r\n element.content = 'noindex';\r\n document.head.appendChild(element);\r\n }\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n const robotsMetaElement = document.querySelector('meta[name=robots]') as HTMLMetaElement;\r\n if (robotsMetaElement) {\r\n robotsMetaElement.content = 'index';\r\n }\r\n }\r\n\r\n}\r\n","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-ignored]',\r\n })\r\nexport class IgnoredDirective {\r\n public static readonly ignored = 'ignored';\r\n public static readonly default = { directive: IgnoredDirective, inputs: [IgnoredDirective.ignored] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isIgnored = false;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(IgnoredDirective.ignored);\r\n }\r\n\r\n public get ignored(): boolean {\r\n return this.isIgnored;\r\n }\r\n\r\n @Input()\r\n public set ignored(value: BooleanLike) {\r\n this.isIgnored = toBoolean(value);\r\n this.classes.set(IgnoredDirective.ignored, this.isIgnored);\r\n }\r\n}\r\n","import { Directive, inject, Input } from '@angular/core';\r\nimport { toBoolean } from '../helpers/to-boolean';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { SortedClassesService } from '../services/sorted-classes.service';\r\n\r\n@Directive({\r\n selector: '[-m-inline]',\r\n })\r\nexport class InlineDirective {\r\n public static readonly inline = 'inline';\r\n public static readonly default = { directive: InlineDirective, inputs: [InlineDirective.inline] };\r\n private readonly classes = inject(SortedClassesService);\r\n private isInline = false;\r\n\r\n public constructor() {\r\n this.classes.registerFallback(InlineDirective.inline);\r\n }\r\n\r\n public get inline(): boolean {\r\n return this.isInline;\r\n }\r\n\r\n @Input()\r\n public set inline(value: BooleanLike) {\r\n this.isInline = toBoolean(value);\r\n this.classes.set(InlineDirective.inline, this.isInline);\r\n }\r\n}\r\n","\r\nimport { Component, HostBinding, inject, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { ActiveDirective } from '../../directives/active.directive';\r\nimport { InlineDirective } from '../../directives/inline.directive';\r\nimport { InvertedDirective } from '../../directives/inverted.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\n\r\nexport declare type LoaderSize = 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive';\r\n\r\n@Component({\n selector: 'm-loader',\n templateUrl: './loader.component.html',\n styleUrls: ['./loader.component.scss'],\n imports: [],\n hostDirectives: [InvertedDirective.default, ActiveDirective.default, InlineDirective.default],\n providers: [...BaseComponent.providers]\n})\r\nexport class LoaderComponent extends BaseComponent {\r\n private readonly activeDirective = inject(ActiveDirective);\r\n private textValue: string | undefined;\r\n private sizeValue: LoaderSize | undefined;\r\n private isInline = false;\r\n\r\n @Input()\r\n public get text(): string | undefined {\r\n return this.textValue;\r\n }\r\n\r\n public set text(value: string | undefined) {\r\n this.textValue = value;\r\n this.classes.set('text', value || value === '');\r\n }\r\n\r\n @Input()\r\n public get size(): LoaderSize | undefined {\r\n return this.sizeValue;\r\n }\r\n\r\n public set size(value: LoaderSize | undefined) {\r\n this.sizeValue = value;\r\n this.classes.set('size', value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.inline')\r\n public get inline(): boolean {\r\n return this.isInline;\r\n }\r\n\r\n public set inline(value: BooleanLike) {\r\n this.isInline = this.toBoolean(value);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.activeDirective.active = true;\r\n this.classes.register('text', 'size')\r\n .registerFixed('loader');\r\n }\r\n\r\n}\r\n","@if (text) {\n {{text}}\n}\n\n","import { Component, EventEmitter, HostBinding, HostListener, Input, OnInit, Output } from '@angular/core';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { IgnoredDirective } from '../../directives/ignored.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { LoaderComponent } from '../loader/loader.component';\r\n\r\nexport declare type MessageAttached = 'bottom' | 'top' | undefined;\r\n\r\n@Component({\r\n selector: 'm-message',\r\n templateUrl: './message.component.html',\r\n styleUrls: ['./message.component.scss'],\r\n imports: [\r\n IconComponent,\r\n LoaderComponent\r\n ],\r\n hostDirectives: [IgnoredDirective.default],\r\n providers: [...InvertibleComponent.providers]\r\n})\r\nexport class MessageComponent extends InvertibleComponent implements OnInit {\r\n public static readonly defaults = {\r\n closeIcon: 'close',\r\n closeIconSize: undefined,\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n\r\n private isPositive = false;\r\n private isSuccess = false;\r\n private isWarning = false;\r\n private isError = false;\r\n private isInfo = false;\r\n private isClosable = false;\r\n private isCloseVisible = true;\r\n private isLoading = false;\r\n private attachedValue: MessageAttached;\r\n private iconValue: IconType | undefined;\r\n\r\n protected readonly defaults = MessageComponent.defaults;\r\n\r\n @Input()\r\n @HostBinding('class.positive')\r\n public get positive(): boolean {\r\n return this.isPositive;\r\n }\r\n\r\n public set positive(value: BooleanLike) {\r\n this.isPositive = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.info')\r\n public get info(): boolean {\r\n return this.isInfo;\r\n }\r\n\r\n public set info(value: BooleanLike) {\r\n this.isInfo = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.success')\r\n public get success(): boolean {\r\n return this.isSuccess;\r\n }\r\n\r\n public set success(value: BooleanLike) {\r\n this.isSuccess = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.warning')\r\n public get warning(): boolean {\r\n return this.isWarning;\r\n }\r\n\r\n public set warning(value: BooleanLike) {\r\n this.isWarning = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.error')\r\n public get error(): boolean {\r\n return this.isError;\r\n }\r\n\r\n public set error(value: BooleanLike) {\r\n this.isError = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get closable(): boolean {\r\n return this.isClosable;\r\n }\r\n\r\n public set closable(value: BooleanLike) {\r\n this.isClosable = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get showClose(): boolean {\r\n return this.isCloseVisible;\r\n }\r\n\r\n public set showClose(value: BooleanLike) {\r\n this.isCloseVisible = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get loading(): boolean {\r\n return this.isLoading;\r\n }\r\n\r\n public set loading(value: BooleanLike) {\r\n this.isLoading = this.toBoolean(value);\r\n this.classes.set('icon', this.isLoading || !!this.iconValue);\r\n }\r\n\r\n @Input()\r\n public get attached(): MessageAttached {\r\n return this.attachedValue;\r\n }\r\n\r\n public set attached(value: MessageAttached) {\r\n this.attachedValue = value;\r\n this.classes.set('attached', value ? value + ' attached' : undefined);\r\n }\r\n\r\n @Input()\r\n public header: string | undefined;\r\n\r\n @Input()\r\n public get icon(): IconType | undefined {\r\n return this.iconValue;\r\n }\r\n\r\n public set icon(value: IconType | undefined) {\r\n this.iconValue = value;\r\n this.classes.set('icon', !!value);\r\n }\r\n\r\n @Input()\r\n public iconSize: IconSize;\r\n\r\n @Input()\r\n public closeIcon: IconType | undefined;\r\n\r\n @Input()\r\n public closeIconSize: IconSize;\r\n\r\n @Output()\r\n public readonly close = new EventEmitter();\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('positive', 'success', 'warning', 'error', 'attached', 'icon', 'closable')\r\n .registerFixed('visible', 'message');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n MessageComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n protected onClick(event: MouseEvent): void {\r\n const selection = window.getSelection();\r\n if (selection && this.elementRef.nativeElement.contains(selection?.focusNode) && (selection.anchorNode !== selection.focusNode || selection.anchorOffset !== selection.focusOffset)) {\r\n return;\r\n }\r\n if (this.closable) {\r\n this.close.next(event);\r\n }\r\n }\r\n}\r\n","@if (header) {\n
{{ header }}
\n}\n@if (icon && !loading) {\n \n}\n@if (loading) {\n \n}\n\n@if (closable && showClose) {\n \n}\n","import { Component } from '@angular/core';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { IgnoredDirective } from '../../directives/ignored.directive';\r\nimport { MessageComponent } from '../message/message.component';\r\n\r\n@Component({\r\n selector: 'm-error',\r\n templateUrl: './error.component.html',\r\n styleUrls: ['./error.component.scss'],\r\n hostDirectives: [IgnoredDirective.default],\r\n providers: [...InvertibleComponent.providers]\r\n})\r\nexport class ErrorComponent extends InvertibleComponent {\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('visible', 'error', 'message');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n MessageComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n}\r\n","","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'm-fill',\r\n templateUrl: './fill.component.html',\r\n styleUrls: ['./fill.component.scss'],\r\n })\r\nexport class FillComponent {\r\n\r\n}\r\n","\r\n","import { Directive, HostBinding, input, Input } from '@angular/core';\r\nimport { toBoolean } from '../../helpers/to-boolean';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { FlexAlignItems, FlexDirection, FlexJustifyContent } from './flex.types';\r\n\r\n@Directive({\r\n selector: '[m-flex]'\r\n})\r\nexport class FlexDirective {\r\n public static readonly default = { directive: FlexDirective, inputs: ['direction', 'alignItems', 'justifyContent', 'row', 'column', 'gap', 'wrap', 'wrapReverse'] };\r\n\r\n @HostBinding('style.display')\r\n protected display = 'flex';\r\n\r\n @Input()\r\n @HostBinding('style.flex-direction')\r\n public direction: FlexDirection | '' | undefined;\r\n\r\n @Input()\r\n public get 'm-flex'(): FlexDirection | '' | undefined {\r\n return this.direction;\r\n }\r\n\r\n public set 'm-flex'(value: FlexDirection | '' | undefined | null) {\r\n this.direction = value ?? '';\r\n this.display = value || value === '' ? 'flex' : '';\r\n }\r\n\r\n @Input()\r\n public get column(): boolean {\r\n return this.direction === 'column';\r\n }\r\n\r\n public set column(value: BooleanLike) {\r\n this.direction = toBoolean(value) ? 'column' : 'row';\r\n }\r\n\r\n @Input()\r\n public get row(): boolean {\r\n return this.direction === 'row';\r\n }\r\n\r\n public set row(value: BooleanLike) {\r\n this.direction = toBoolean(value) ? 'row' : 'column';\r\n }\r\n\r\n @Input()\r\n @HostBinding('style.align-items')\r\n public alignItems: FlexAlignItems | undefined;\r\n\r\n @Input()\r\n @HostBinding('style.justify-content')\r\n public justifyContent: FlexJustifyContent | undefined;\r\n\r\n @Input()\r\n @HostBinding('style.gap')\r\n public gap: string | undefined;\r\n\r\n public readonly wrap = input(false, { transform: toBoolean });\r\n public readonly wrapReverse = input(false, { transform: toBoolean });\r\n\r\n @HostBinding('style.flex-wrap')\r\n public get wrapStyle(): string {\r\n return this.wrap() ? 'wrap' : this.wrapReverse() ? 'wrap-reverse' : '';\r\n }\r\n}\r\n","import { Component } from '@angular/core';\r\nimport { FlexDirective } from './flex.directive';\r\n\r\n@Component({\r\n selector: 'm-flex',\r\n template: '',\r\n hostDirectives: [FlexDirective.default]\r\n})\r\nexport class FlexComponent {\r\n}\r\n","import { Component, TemplateRef, ViewChild } from '@angular/core';\r\nimport { NgIfContext } from '@angular/common';\r\n\r\n@Component({\n selector: 'm-expander-header',\n template: `\r\n \r\n \r\n \r\n `,\n imports: []\n})\r\nexport class ExpanderHeaderComponent {\r\n\r\n @ViewChild(TemplateRef)\r\n // eslint-disable-next-line no-null/no-null\r\n public template: TemplateRef> | null = null;\r\n\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ContentChild, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { FillComponent } from '../flex/fill/fill.component';\r\nimport { FlexComponent } from '../flex/flex.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { ExpanderHeaderComponent } from './expander-header.component';\r\n\r\n@Component({\r\n selector: 'm-expander',\r\n templateUrl: './expander.component.html',\r\n styleUrls: ['./expander.component.scss'],\r\n imports: [IconComponent, FlexComponent, FillComponent, NgTemplateOutlet],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class ExpanderComponent extends BaseComponent {\r\n public static readonly defaults = {\r\n dropdownIcon: 'caret right',\r\n dropdownIconSize: undefined\r\n };\r\n private isExpanded = false;\r\n private isBasic = false;\r\n protected readonly defaults = ExpanderComponent.defaults;\r\n\r\n @Input()\r\n public header: string | undefined;\r\n\r\n @Input()\r\n public get expanded(): boolean {\r\n return this.isExpanded;\r\n }\r\n\r\n public set expanded(value: BooleanLike) {\r\n this.isExpanded = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public dropdownIcon: IconType | undefined;\r\n\r\n @Input()\r\n public dropdownIconSize: IconSize;\r\n\r\n @Input()\r\n public get basic(): boolean {\r\n return this.isBasic;\r\n }\r\n\r\n public set basic(value: BooleanLike) {\r\n this.isBasic = this.toBoolean(value);\r\n this.classes.set('styled', !this.isBasic);\r\n }\r\n\r\n @Input()\r\n public iconPosition: 'left' | 'right' = 'left';\r\n\r\n @ContentChild(ExpanderHeaderComponent)\r\n protected headerTemplate: ExpanderHeaderComponent | undefined;\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('header', 'expanded', 'dropdownIcon', 'dropdownIconSize', 'styled')\r\n .registerFixed('fluid', 'accordion');\r\n this.classes.set('styled', true);\r\n }\r\n\r\n public toggle(): void {\r\n if (this.isExpanded) {\r\n this.collapse();\r\n }\r\n else {\r\n this.expand();\r\n }\r\n }\r\n\r\n public collapse(): void {\r\n this.isExpanded = false;\r\n }\r\n\r\n public expand(): void {\r\n this.isExpanded = true;\r\n }\r\n}\r\n","\n \n \n @if (headerTemplate) {\n \n } @else {\n {{header}}\n }\n \n\n
\n \n
\n","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { ExpanderComponent } from './expander.component';\r\nimport { IconSize } from '../icon/icon-size';\r\n\r\n@Component({\r\n selector: 'm-expander-defaults',\r\n template: '',\r\n })\r\nexport class ExpanderDefaultsComponent implements OnDestroy {\r\n private readonly previousDropdownIcon = ExpanderComponent.defaults.dropdownIcon;\r\n private readonly previousDropdownIconSize = ExpanderComponent.defaults.dropdownIconSize;\r\n private currentDropdownIcon?: IconType;\r\n private currentDropdownIconSize?: IconSize;\r\n\r\n @Input()\r\n public set dropdownIcon(value: IconType) {\r\n this.currentDropdownIcon = value;\r\n ExpanderComponent.defaults.dropdownIcon = value;\r\n }\r\n\r\n @Input()\r\n public set dropdownIconSize(value: IconSize) {\r\n this.currentDropdownIconSize = value;\r\n ExpanderComponent.defaults.dropdownIconSize = value;\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentDropdownIcon === ExpanderComponent.defaults.dropdownIcon) {\r\n ExpanderComponent.defaults.dropdownIcon = this.previousDropdownIcon;\r\n }\r\n if (this.currentDropdownIconSize === ExpanderComponent.defaults.dropdownIconSize) {\r\n ExpanderComponent.defaults.dropdownIconSize = this.previousDropdownIconSize;\r\n }\r\n }\r\n}\r\n","import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { ExpanderComponent } from '../expander/expander.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\n\r\n@Component({\n selector: 'm-expander-icon',\n templateUrl: './expander-icon.component.html',\n styleUrls: ['./expander-icon.component.scss'],\n imports: [\n IconComponent\n ],\n providers: [...BaseComponent.providers]\n})\r\nexport class ExpanderIconComponent extends BaseComponent {\r\n private isExpanded = false;\r\n protected readonly defaults = ExpanderComponent.defaults;\r\n\r\n @Input()\r\n @HostBinding('class.expanded')\r\n public get expanded(): boolean {\r\n return this.isExpanded;\r\n }\r\n\r\n public set expanded(value: BooleanLike) {\r\n this.isExpanded = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public dropdownIcon: IconType | undefined;\r\n\r\n @Input()\r\n public dropdownIconSize: IconSize;\r\n\r\n @Output()\r\n public readonly expandedChange = new EventEmitter();\r\n\r\n public constructor() {\r\n super();\r\n }\r\n\r\n public toggle(): void {\r\n if (this.isExpanded) {\r\n this.collapse();\r\n }\r\n else {\r\n this.expand();\r\n }\r\n }\r\n\r\n public collapse(): void {\r\n this.isExpanded = false;\r\n this.expandedChange.emit(this.isExpanded);\r\n }\r\n\r\n public expand(): void {\r\n this.isExpanded = true;\r\n this.expandedChange.emit(this.isExpanded);\r\n }\r\n}\r\n","\r\n","import { Component, EventEmitter, HostBinding, HostListener, Input, Output, ViewChild } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { ExpanderIconComponent } from '../expander-icon/expander-icon.component';\r\nimport { FillComponent } from '../flex/fill/fill.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\n\r\n@Component({\r\n selector: 'm-expander-part',\r\n templateUrl: './expander-part.component.html',\r\n styleUrls: ['./expander-part.component.scss'],\r\n imports: [\r\n FillComponent,\r\n ExpanderIconComponent\r\n ],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class ExpanderPartComponent extends BaseComponent {\r\n private isExpanded = false;\r\n\r\n @Input()\r\n @HostBinding('class.expandable')\r\n public expandable: boolean | undefined = true;\r\n\r\n @Input()\r\n @HostBinding('class.expanded')\r\n public get expanded(): boolean {\r\n return this.isExpanded && this.expandable !== false;\r\n }\r\n\r\n public set expanded(value: BooleanLike) {\r\n this.isExpanded = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public dropdownIcon: IconType | undefined;\r\n\r\n @Input()\r\n public dropdownIconSize: IconSize;\r\n\r\n @Output()\r\n public readonly expandedChange = new EventEmitter();\r\n\r\n @ViewChild(ExpanderIconComponent)\r\n protected icon: ExpanderIconComponent | undefined;\r\n\r\n public constructor() {\r\n super(false);\r\n this.classes.register('expanded', 'expandable');\r\n }\r\n\r\n @HostListener('click')\r\n protected onClick(): void {\r\n if (this.expandable === false) {\r\n return;\r\n }\r\n this.icon?.toggle();\r\n }\r\n}\r\n","\n \n\n@if (expandable) {\n \n}\n","import { Component, Input } from '@angular/core';\r\nimport { IconSize } from '../icon/icon-size';\r\n\r\n@Component({\r\n selector: 'm-flag',\r\n templateUrl: './flag.component.html',\r\n styleUrls: ['./flag.component.scss'],\r\n })\r\nexport class FlagComponent {\r\n @Input()\r\n public flag: string | undefined;\r\n\r\n @Input()\r\n public size: IconSize;\r\n}\r\n","\r\n","export class Timespan {\r\n public static readonly hoursInDay = 24;\r\n\r\n public static readonly minutesInHour = 60;\r\n public static readonly minutesInDay = this.minutesInHour * this.hoursInDay;\r\n\r\n public static readonly secondsInMinute = 60;\r\n public static readonly secondsInHour = this.secondsInMinute * this.minutesInHour;\r\n public static readonly secondsInDay = this.secondsInMinute * this.minutesInDay;\r\n\r\n public static readonly millisecondsInSecond = 1000;\r\n public static readonly millisecondsInMinute = this.millisecondsInSecond * this.secondsInMinute;\r\n public static readonly millisecondsInHour = this.millisecondsInSecond * this.secondsInHour;\r\n public static readonly millisecondsInDay = this.millisecondsInSecond * this.secondsInDay;\r\n}\r\n","import { Timespan } from './timespan';\r\n\r\nexport abstract class DateHelper {\r\n public static keepInRange(min: Date, value: Date | undefined, max?: Date | undefined): Date\r\n public static keepInRange(min: Date | undefined, value: Date, max?: Date | undefined): Date\r\n public static keepInRange(min: Date | undefined, value: Date | undefined, max?: Date): Date\r\n public static keepInRange(min: Date | undefined, value: Date | undefined, max?: Date | undefined): Date {\r\n if (min !== undefined && (value === undefined || value < min)) {\r\n return min;\r\n }\r\n if (max !== undefined && (value === undefined || value > max)) {\r\n return max;\r\n }\r\n return value as any;\r\n }\r\n\r\n public static sameDay(left: Date | undefined, right: Date | undefined): boolean {\r\n if (!left || !right) {\r\n return false;\r\n }\r\n return this.sameMonth(left, right) && left.getDate() === right.getDate();\r\n }\r\n\r\n public static sameWeek(left: Date | undefined, right: Date | undefined): boolean {\r\n if (!left || !right) {\r\n return false;\r\n }\r\n const leftDayOfYear = Math.floor((left.getTime() - new Date(left.getFullYear(), 0, 0).getTime()) / Timespan.millisecondsInDay);\r\n const rightDayOfYear = Math.floor((right.getTime() - new Date(right.getFullYear(), 0, 0).getTime()) / Timespan.millisecondsInDay);\r\n const leftWeekNumber = Math.ceil((leftDayOfYear + 1) / 7);\r\n const rightWeekNumber = Math.ceil((rightDayOfYear + 1) / 7);\r\n return leftWeekNumber === rightWeekNumber;\r\n }\r\n\r\n public static sameMonth(left: Date | undefined, right: Date | undefined): boolean {\r\n if (!left || !right) {\r\n return false;\r\n }\r\n return this.sameYear(left, right) && left.getMonth() === right.getMonth();\r\n }\r\n\r\n public static sameYear(left: Date | undefined, right: Date | undefined): boolean {\r\n if (!left || !right) {\r\n return false;\r\n }\r\n return left.getFullYear() === right.getFullYear();\r\n }\r\n\r\n public static today(): Date {\r\n const today = new Date();\r\n today.setUTCHours(0, 0, 0, 0);\r\n return today;\r\n }\r\n}\r\n","import { DatePipe, NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { FallbackForDirective } from '../../../directives/fallback-for.directive';\r\nimport { DateHelper } from '../../../helpers/date-helper';\r\nimport { BooleanLike } from '../../../models/boolean-like';\r\nimport { ColorName } from '../../../models/color';\r\nimport { IconComponent } from '../../icon/icon.component';\r\nimport { LabelComponent } from '../../label/label.component';\r\nimport { InputBaseComponent } from '../input-base.component';\r\n\r\n@Component({\r\n selector: 'm-date-input',\r\n templateUrl: './date-input.component.html',\r\n styleUrls: ['./date-input.component.scss'],\r\n imports: [IconComponent, FallbackForDirective, FormsModule, LabelComponent, NgTemplateOutlet, DatePipe],\r\n providers: [...InputBaseComponent.providers]\r\n})\r\nexport class DateInputComponent extends InputBaseComponent implements OnInit {\r\n private valueField: Date | undefined;\r\n private showDayValue = false;\r\n\r\n // eslint-disable-next-line no-null/no-null\r\n protected internalValue: string | null = null;\r\n\r\n @Input()\r\n public get value(): Date | undefined {\r\n return this.valueField;\r\n }\r\n\r\n public set value(value: Date | number | string | undefined) {\r\n value = value ? new Date(value) : undefined;\r\n value = isNaN(value?.getDate() as any) ? undefined : value;\r\n if (value != this.valueField) {\r\n this.setInternalValue(value);\r\n }\r\n this.valueField = value;\r\n }\r\n\r\n @Input()\r\n public get date(): Date {\r\n return this.value ?? this.default;\r\n }\r\n\r\n public set date(value: Date | number | string | undefined) {\r\n this.value = value;\r\n }\r\n\r\n @Input()\r\n public default = new Date(0);\r\n\r\n @Input()\r\n public min: Date | undefined;\r\n\r\n @Input()\r\n public max: Date | undefined;\r\n\r\n @Input()\r\n public get showDay(): boolean {\r\n return this.showDayValue;\r\n }\r\n\r\n public set showDay(value: BooleanLike) {\r\n this.showDayValue = this.toBoolean(value);\r\n this.classes.set('labeled', this.showDayValue);\r\n }\r\n\r\n @Input()\r\n public weekendColor: ColorName | undefined = 'red';\r\n\r\n @Output()\r\n public readonly valueChange = new EventEmitter();\r\n\r\n @Output()\r\n public readonly dateChange = new EventEmitter();\r\n\r\n @ContentChild('input')\r\n protected set contentInputElement(input: ElementRef) {\r\n this.unbindEvents();\r\n this.inputElement = input;\r\n this.refreshInput();\r\n this.bindEvents();\r\n this.refreshFocus();\r\n }\r\n\r\n @ViewChild('input')\r\n protected set viewInputElement(input: ElementRef) {\r\n this.unbindEvents();\r\n this.inputElement = input;\r\n this.bindEvents();\r\n this.refreshFocus();\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('min', 'max', 'default', 'value', 'date', 'showDay', 'weekendColor');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n // Set internal value on blur to ensure a invalid value is overwritten\r\n this.blur.subscribe(() => this.setInternalValue(this.value));\r\n }\r\n\r\n protected onInternalChange(rawValue: string): void {\r\n let value = rawValue ? new Date(rawValue) : undefined;\r\n if (value) {\r\n this.setInternalValue(value);\r\n }\r\n value = DateHelper.keepInRange(this.min, value, this.max);\r\n if (value !== this.value) {\r\n this.valueField = value;\r\n this.valueChange.emit(this.value);\r\n this.dateChange.emit(this.date);\r\n }\r\n }\r\n\r\n private setInternalValue(value: Date | null | undefined): void {\r\n // Use null to avoid strange input behaviour with undefined values (e.g. input of negative values requires two minus signs to work)\r\n // eslint-disable-next-line no-null/no-null\r\n this.internalValue = value?.toISOString().split('T')[0] ?? null;\r\n }\r\n}\r\n","@if (!isRight) {\n \n}\n@if (buttonPosition === 'left') {\n \n}\n\n\n@if (icon) {\n \n}\n@if (isRight) {\n \n}\n@if (buttonPosition === 'right') {\n \n}\n\n\n @if (showDay) {\n {{value | date: 'E'}}\n }\n \n \n\n\n\n \n \n\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { FallbackForDirective } from '../../../directives/fallback-for.directive';\r\nimport { Math2 } from '../../../helpers/math2';\r\nimport { BooleanLike } from '../../../models/boolean-like';\r\nimport { IconComponent } from '../../icon/icon.component';\r\nimport { InputBaseComponent } from '../input-base.component';\r\n\r\n@Component({\r\n selector: 'm-numeric-input',\r\n templateUrl: './numeric-input.component.html',\r\n styleUrls: ['./numeric-input.component.scss'],\r\n imports: [IconComponent, FallbackForDirective, FormsModule, NgTemplateOutlet],\r\n providers: [...InputBaseComponent.providers]\r\n})\r\nexport class NumericInputComponent extends InputBaseComponent implements OnInit {\r\n private valueField: number | undefined;\r\n private rangeValue = false;\r\n // eslint-disable-next-line no-null/no-null\r\n protected internalValue: number | null = null;\r\n public type: 'number' | 'range' = 'number';\r\n\r\n @Input()\r\n public default = 0;\r\n\r\n @Input()\r\n public min: number | undefined;\r\n\r\n @Input()\r\n public max: number | undefined;\r\n\r\n @Input()\r\n public zeroText: string | undefined;\r\n\r\n protected get placeholderInternal(): string {\r\n return this.value === 0 && this.zeroText ? this.zeroText : this.placeholder ?? '';\r\n }\r\n\r\n @Input()\r\n public get value(): number | undefined {\r\n return this.valueField;\r\n }\r\n\r\n public set value(value: number | undefined) {\r\n if (value != this.valueField) {\r\n this.setInternalValue(value);\r\n }\r\n this.valueField = value;\r\n }\r\n\r\n @Input()\r\n public get number(): number {\r\n return this.value ?? this.default;\r\n }\r\n\r\n public set number(value: number | undefined) {\r\n this.value = value;\r\n }\r\n\r\n @Input()\r\n public get range(): boolean {\r\n return this.rangeValue;\r\n }\r\n\r\n public set range(value: BooleanLike) {\r\n this.rangeValue = this.toBoolean(value);\r\n this.type = this.rangeValue ? 'range' : 'number';\r\n }\r\n\r\n @Output()\r\n public readonly valueChange = new EventEmitter();\r\n\r\n @Output()\r\n public readonly numberChange = new EventEmitter();\r\n\r\n @ContentChild('input')\r\n protected set contentInputElement(input: ElementRef) {\r\n this.unbindEvents();\r\n this.inputElement = input;\r\n this.refreshInput();\r\n this.bindEvents();\r\n this.refreshFocus();\r\n }\r\n\r\n @ViewChild('input')\r\n protected set viewInputElement(input: ElementRef) {\r\n this.unbindEvents();\r\n this.inputElement = input;\r\n this.bindEvents();\r\n this.refreshFocus();\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('min', 'max', 'defaultValue', 'value', 'range', 'zeroText', 'number');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n // Set internal value on blur to ensure a invalid value is overwritten\r\n this.blur.subscribe(() => this.setInternalValue(this.value));\r\n }\r\n\r\n protected onInternalChange(rawValue: string | null | undefined): void {\r\n let value = typeof rawValue === 'string' ? rawValue !== '' ? parseFloat(rawValue) : undefined : rawValue ?? undefined;\r\n this.setInternalValue(value);\r\n value = value == undefined || Number.isNaN(value) ? undefined : Math2.keepInRange(this.min, value, this.max);\r\n if (value !== this.value) {\r\n this.valueField = value;\r\n this.valueChange.emit(this.value);\r\n this.numberChange.emit(this.number);\r\n }\r\n }\r\n\r\n private setInternalValue(value: number | null | undefined): void {\r\n if (value === 0 && this.zeroText) {\r\n // Use null to avoid strange input behaviour with undefined values (e.g. input of negative values requires two minus signs to work)\r\n // eslint-disable-next-line no-null/no-null\r\n this.internalValue = null;\r\n return;\r\n }\r\n // Use null to avoid strange input behaviour with undefined values (e.g. input of negative values requires two minus signs to work)\r\n // eslint-disable-next-line no-null/no-null\r\n this.internalValue = value ?? null;\r\n }\r\n}\r\n","@if (!isRight) {\n \n}\n@if (buttonPosition === 'left') {\n \n}\n\n\n@if (icon) {\n \n}\n@if (isRight) {\n \n}\n@if (buttonPosition === 'right') {\n \n}\n\n\n \n \n\n\n\n \n \n\n","import { Injectable } from '@angular/core';\r\nimport { Subject } from 'rxjs';\r\nimport { RadioCheckEvent } from '../models/radio-check-event';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class RadioService {\r\n private readonly checkedSubject = new Subject();\r\n public readonly checked = this.checkedSubject.asObservable();\r\n\r\n public check(group: string, value: unknown): void {\r\n this.checkedSubject.next({ group, value });\r\n }\r\n}\r\n","import { Component } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { filter, takeUntil } from 'rxjs/operators';\r\nimport { RadioService } from '../../services/radio.service';\r\nimport { CheckboxComponent } from '../checkbox/checkbox.component';\r\n\r\n@Component({\n selector: 'm-radio',\n templateUrl: './radio.component.html',\n styleUrls: ['./radio.component.scss'],\n imports: [\n FormsModule\n ],\n providers: [...CheckboxComponent.providers]\n})\r\nexport class RadioComponent extends CheckboxComponent {\r\n\r\n public constructor(\r\n private readonly radioService: RadioService\r\n ) {\r\n super();\r\n this.classes.registerFixed('radio');\r\n this.canUncheck = false;\r\n this.radioService.checked.pipe(\r\n filter(event => !!event.group && event.group === this.name && event.value !== this),\r\n takeUntil(this.destroy)\r\n ).subscribe(() => this.checked = false);\r\n this.valueChange.pipe(filter(checked => !!checked)).subscribe(() => this.radioService.check(this.name, this));\r\n }\r\n}\r\n","\r\n","import { Component } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { filter, takeUntil } from 'rxjs/operators';\r\nimport { RadioService } from '../../services/radio.service';\r\nimport { CheckboxComponent } from '../checkbox/checkbox.component';\r\n\r\n@Component({\n selector: 'm-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss'],\n imports: [\n FormsModule\n ],\n providers: [...CheckboxComponent.providers]\n})\r\nexport class SliderComponent extends CheckboxComponent {\r\n public constructor(\r\n private readonly radioService: RadioService\r\n ) {\r\n super();\r\n this.classes.registerFixed('slider');\r\n this.radioService.checked.pipe(\r\n filter(event => !!event.group && event.group === this.name && event.value !== this),\r\n takeUntil(this.destroy)\r\n ).subscribe(() => this.checked = false);\r\n this.valueChange.pipe(filter(checked => !!checked)).subscribe(() => this.radioService.check(this.name, this));\r\n }\r\n}\r\n","\r\n","import { ApplicationRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { FallbackForDirective } from '../../directives/fallback-for.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\n\r\n@Component({\n selector: 'm-textarea',\n templateUrl: './textarea.component.html',\n styleUrls: ['./textarea.component.scss'],\n imports: [\n FormsModule,\n FallbackForDirective\n ],\n providers: [...InvertibleComponent.providers]\n})\r\nexport class TextareaComponent extends InvertibleComponent {\r\n public static readonly defaults = {\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n\r\n private readonlyValue = false;\r\n private disabledValue = false;\r\n\r\n public textareaElement?: ElementRef;\r\n\r\n @Input()\r\n public name?: string;\r\n\r\n @Input()\r\n @HostBinding('class.disabled')\r\n public get disabled(): boolean {\r\n return this.disabledValue;\r\n }\r\n\r\n public set disabled(value: BooleanLike) {\r\n this.disabledValue = this.toBoolean(value);\r\n this.refreshTextarea();\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.disabled')\r\n public get readonly(): boolean {\r\n return this.readonlyValue;\r\n }\r\n\r\n public set readonly(value: BooleanLike) {\r\n this.readonlyValue = this.toBoolean(value);\r\n this.refreshTextarea();\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.error')\r\n public hasError = false;\r\n\r\n @Input()\r\n public placeholder: string | undefined;\r\n\r\n @Input()\r\n public value: string | undefined;\r\n\r\n @Input()\r\n public get text(): string {\r\n return this.value ?? this.default;\r\n }\r\n\r\n public set text(value: string | undefined) {\r\n this.value = value;\r\n }\r\n\r\n @Input()\r\n public default = '';\r\n\r\n @Input()\r\n public inputId: string | undefined;\r\n\r\n @Output()\r\n public readonly valueChange = new EventEmitter();\r\n\r\n @Output()\r\n public readonly textChange = new EventEmitter();\r\n\r\n @Output()\r\n public readonly keyDown = new EventEmitter();\r\n\r\n @Output()\r\n public readonly keyUp = new EventEmitter();\r\n\r\n @Output()\r\n public readonly keyPress = new EventEmitter();\r\n\r\n @Output()\r\n public readonly blur = new EventEmitter();\r\n\r\n @Output()\r\n public readonly focus = new EventEmitter();\r\n\r\n @Output()\r\n public readonly focusin = new EventEmitter();\r\n\r\n @Output()\r\n public readonly focusout = new EventEmitter();\r\n\r\n @ContentChild('textarea')\r\n protected set contentTextareaElement(textarea: ElementRef) {\r\n this.unbindEvents();\r\n this.textareaElement = textarea;\r\n this.refreshTextarea();\r\n this.bindEvents();\r\n }\r\n\r\n @ViewChild('textarea')\r\n protected set viewInputElement(textarea: ElementRef) {\r\n this.unbindEvents();\r\n this.textareaElement = textarea;\r\n this.bindEvents();\r\n }\r\n\r\n public constructor(\r\n private readonly applicationRef: ApplicationRef\r\n ) {\r\n super();\r\n this.classes.register('disabled', 'readonly', 'hasError', 'fluid', 'value', 'text', 'default', 'placeholder')\r\n // HACK: Currently I do not know a other way to style a textarea with semantic ui, so I have to use form class here\r\n .registerFixed('form', 'textarea');\r\n TextareaComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n\r\n protected onChange(): void {\r\n this.value ??= this.default;\r\n this.valueChange.emit(this.value);\r\n this.textChange.emit(this.text);\r\n }\r\n\r\n private refreshTextarea(): void {\r\n if (!this.textareaElement) {\r\n return;\r\n }\r\n this.textareaElement.nativeElement.disabled = this.disabledValue;\r\n this.textareaElement.nativeElement.readOnly = this.readonlyValue;\r\n }\r\n\r\n private readonly keyDownEventHandler = (event: KeyboardEvent) => this.keyDown.next(event);\r\n private readonly keyUpEventHandler = (event: KeyboardEvent) => this.keyUp.next(event);\r\n private readonly keyPressEventHandler = (event: Event) => this.keyPress.next(event);\r\n private readonly blurEventHandler = (event: FocusEvent) => this.blur.next(event);\r\n private readonly focusEventHandler = (event: FocusEvent) => this.focus.next(event);\r\n private readonly focusinEventHandler = (event: FocusEvent) => this.focusin.next(event);\r\n private readonly focusoutEventHandler = (event: FocusEvent) => this.focusout.next(event);\r\n\r\n protected bindEvents(): void {\r\n if (!this.textareaElement) {\r\n return;\r\n }\r\n // TODO: Improve event binding!\r\n this.textareaElement.nativeElement.addEventListener('keydown', this.keyDownEventHandler);\r\n this.textareaElement.nativeElement.addEventListener('keyup', this.keyUpEventHandler);\r\n this.textareaElement.nativeElement.addEventListener('keyPress', this.keyPressEventHandler);\r\n this.textareaElement.nativeElement.addEventListener('blur', this.blurEventHandler);\r\n this.textareaElement.nativeElement.addEventListener('focus', this.focusEventHandler);\r\n this.textareaElement.nativeElement.addEventListener('focusin', this.focusinEventHandler);\r\n this.textareaElement.nativeElement.addEventListener('focusout', this.focusoutEventHandler);\r\n }\r\n\r\n protected unbindEvents(): void {\r\n if (!this.textareaElement) {\r\n return;\r\n }\r\n this.textareaElement.nativeElement.removeEventListener('keydown', this.keyDownEventHandler);\r\n this.textareaElement.nativeElement.removeEventListener('keyup', this.keyUpEventHandler);\r\n this.textareaElement.nativeElement.removeEventListener('keyPress', this.keyPressEventHandler);\r\n this.textareaElement.nativeElement.removeEventListener('blur', this.blurEventHandler);\r\n this.textareaElement.nativeElement.removeEventListener('focus', this.focusEventHandler);\r\n this.textareaElement.nativeElement.removeEventListener('focusin', this.focusinEventHandler);\r\n this.textareaElement.nativeElement.removeEventListener('focusout', this.focusoutEventHandler);\r\n }\r\n}\r\n","\r\n\r\n","import { Component } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { filter, takeUntil } from 'rxjs/operators';\r\nimport { RadioService } from '../../services/radio.service';\r\nimport { CheckboxComponent } from '../checkbox/checkbox.component';\r\n\r\n@Component({\n selector: 'm-toggle',\n templateUrl: './toggle.component.html',\n styleUrls: ['./toggle.component.scss'],\n imports: [\n FormsModule\n ],\n providers: [...CheckboxComponent.providers]\n})\r\nexport class ToggleComponent extends CheckboxComponent {\r\n public constructor(\r\n private readonly radioService: RadioService\r\n ) {\r\n super();\r\n this.classes.registerFixed('toggle');\r\n this.radioService.checked.pipe(\r\n filter(event => !!event.group && event.group === this.name && event.value !== this),\r\n takeUntil(this.destroy)\r\n ).subscribe(() => this.checked = false);\r\n this.valueChange.pipe(filter(checked => !!checked)).subscribe(() => this.radioService.check(this.name, this));\r\n }\r\n}\r\n","\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\nimport { FormError } from '../../models/form-error';\r\n\r\n@Pipe({\r\n name: 'fieldFormatErrors',\r\n })\r\nexport class FieldFormatErrorsPipe implements PipeTransform {\r\n\r\n public transform(errors: FormError[]): string {\r\n return errors.map(error => error.label + ' ' + error.message).join('\\n');\r\n }\r\n\r\n}\r\n","\r\nimport { Component, ContentChild, EventEmitter, HostBinding, Input, Output } from '@angular/core';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { FieldSize, ParsableFieldSize, parseFieldSize } from '../../models/field-size';\r\nimport { FormError } from '../../models/form-error';\r\nimport { FormValidation } from '../../models/form-validation';\r\nimport { CheckboxComponent } from '../checkbox/checkbox.component';\r\nimport { DropdownComponent } from '../dropdown/dropdown.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { DateInputComponent } from '../input/date/date-input.component';\r\nimport { NumericInputComponent } from '../input/numeric/numeric-input.component';\r\nimport { InputComponent } from '../input/text/input.component';\r\nimport { RadioComponent } from '../radio/radio.component';\r\nimport { SliderComponent } from '../slider/slider.component';\r\nimport { TextareaComponent } from '../textarea/textarea.component';\r\nimport { ToggleComponent } from '../toggle/toggle.component';\r\nimport { FieldFormatErrorsPipe } from './field-format-errors.pipe';\r\n\r\n@Component({\n selector: 'm-field',\n templateUrl: './field.component.html',\n styleUrls: ['./field.component.scss'],\n imports: [\n IconComponent,\n FieldFormatErrorsPipe\n],\n providers: [...BaseComponent.providers]\n})\r\nexport class FieldComponent extends BaseComponent {\r\n public static readonly defaults = {\r\n hintIcon: 'info circle',\r\n hintIconSize: undefined,\r\n errorIcon: 'exclamation circle',\r\n errorIconSize: undefined\r\n };\r\n private labelElementValue?: HTMLLabelElement;\r\n private inputComponentValue?: InputComponent;\r\n private numericInputComponentValue?: NumericInputComponent;\r\n private dateInputComponentValue?: DateInputComponent;\r\n private checkboxComponentValue?: CheckboxComponent;\r\n private sliderComponentValue?: SliderComponent;\r\n private toggleComponentValue?: ToggleComponent;\r\n private radioComponentValue?: RadioComponent;\r\n private textareaComponentValue?: TextareaComponent;\r\n private dropDownComponentValue?: DropdownComponent;\r\n private nameValue?: string;\r\n private labelValue?: string;\r\n private sizeValue: FieldSize = '';\r\n private disabledValue = false;\r\n private readonlyValue = false;\r\n private errorValue = false;\r\n private hideInitialErrorValue = true;\r\n private isInline = false;\r\n private isFill = false;\r\n\r\n protected wasAnytimeValid = false;\r\n public readonly errors: FormError[] = [];\r\n protected readonly defaults = FieldComponent.defaults;\r\n private isInlineValidation = false;\r\n private hasOwnLabel = false;\r\n private isForceLabel = false;\r\n private originalLabel?: string;\r\n\r\n @ContentChild('labelElement')\r\n protected get labelElement(): HTMLLabelElement | undefined {\r\n return this.labelElementValue;\r\n }\r\n\r\n protected set labelElement(value: HTMLLabelElement | undefined) {\r\n this.labelElementValue = value;\r\n if (this.labelElementValue && this.name) {\r\n this.labelElementValue.setAttribute('for', this.name);\r\n }\r\n }\r\n\r\n @ContentChild(InputComponent)\r\n protected get inputComponent(): InputComponent | undefined {\r\n return this.inputComponentValue;\r\n }\r\n\r\n protected set inputComponent(value: InputComponent | undefined) {\r\n this.inputComponentValue = value;\r\n if (this.inputComponentValue) {\r\n this.inputComponentValue.for = this.name;\r\n this.inputComponentValue.name = this.name;\r\n this.inputComponentValue.readonly = this.readonly;\r\n this.inputComponentValue.disabled = this.disabled;\r\n this.inputComponentValue.valueChange.pipe(takeUntil(this.destroy)).subscribe(() => this.change.next());\r\n }\r\n }\r\n\r\n @ContentChild(NumericInputComponent)\r\n protected get numericInputComponent(): NumericInputComponent | undefined {\r\n return this.numericInputComponentValue;\r\n }\r\n\r\n protected set numericInputComponent(value: NumericInputComponent | undefined) {\r\n this.numericInputComponentValue = value;\r\n if (this.numericInputComponentValue) {\r\n this.numericInputComponentValue.for = this.name;\r\n this.numericInputComponentValue.name = this.name;\r\n this.numericInputComponentValue.readonly = this.readonly;\r\n this.numericInputComponentValue.disabled = this.disabled;\r\n this.numericInputComponentValue.valueChange.pipe(takeUntil(this.destroy)).subscribe(() => this.change.next());\r\n }\r\n }\r\n\r\n @ContentChild(DateInputComponent)\r\n protected get dateInputComponent(): DateInputComponent | undefined {\r\n return this.dateInputComponentValue;\r\n }\r\n\r\n protected set dateInputComponent(value: DateInputComponent | undefined) {\r\n this.dateInputComponentValue = value;\r\n if (this.dateInputComponentValue) {\r\n this.dateInputComponentValue.for = this.name;\r\n this.dateInputComponentValue.name = this.name;\r\n this.dateInputComponentValue.readonly = this.readonly;\r\n this.dateInputComponentValue.disabled = this.disabled;\r\n this.dateInputComponentValue.valueChange.pipe(takeUntil(this.destroy)).subscribe(() => this.change.next());\r\n }\r\n }\r\n\r\n @ContentChild(CheckboxComponent)\r\n protected get checkboxComponent(): CheckboxComponent | undefined {\r\n return this.checkboxComponentValue;\r\n }\r\n\r\n protected set checkboxComponent(value: CheckboxComponent | undefined) {\r\n this.checkboxComponentValue = value;\r\n if (this.checkboxComponentValue) {\r\n this.checkboxComponentValue.name = this.name;\r\n if (!this.ownLabel) {\r\n this.checkboxComponentValue.label = this.label;\r\n }\r\n this.checkboxComponentValue.readonly = this.readonly;\r\n this.checkboxComponentValue.disabled = this.disabled;\r\n this.checkboxComponentValue.valueChange.pipe(takeUntil(this.destroy)).subscribe(() => this.change.next());\r\n }\r\n }\r\n\r\n @ContentChild(SliderComponent)\r\n protected get sliderComponent(): SliderComponent | undefined {\r\n return this.sliderComponentValue;\r\n }\r\n\r\n protected set sliderComponent(value: SliderComponent | undefined) {\r\n this.sliderComponentValue = value;\r\n if (this.sliderComponentValue) {\r\n this.sliderComponentValue.name = this.name;\r\n if (!this.ownLabel) {\r\n this.sliderComponentValue.label = this.label;\r\n }\r\n this.sliderComponentValue.readonly = this.readonly;\r\n this.sliderComponentValue.disabled = this.disabled;\r\n this.sliderComponentValue.valueChange.pipe(takeUntil(this.destroy)).subscribe(() => this.change.next());\r\n }\r\n }\r\n\r\n @ContentChild(ToggleComponent)\r\n protected get toggleComponent(): ToggleComponent | undefined {\r\n return this.toggleComponentValue;\r\n }\r\n\r\n protected set toggleComponent(value: ToggleComponent | undefined) {\r\n this.toggleComponentValue = value;\r\n if (this.toggleComponentValue) {\r\n this.toggleComponentValue.name = this.name;\r\n if (!this.ownLabel) {\r\n this.toggleComponentValue.label = this.label;\r\n }\r\n this.toggleComponentValue.readonly = this.readonly;\r\n this.toggleComponentValue.disabled = this.disabled;\r\n this.toggleComponentValue.valueChange.pipe(takeUntil(this.destroy)).subscribe(() => this.change.next());\r\n }\r\n }\r\n\r\n @ContentChild(RadioComponent)\r\n protected get radioComponent(): RadioComponent | undefined {\r\n return this.radioComponentValue;\r\n }\r\n\r\n protected set radioComponent(value: RadioComponent | undefined) {\r\n this.radioComponentValue = value;\r\n if (this.radioComponentValue) {\r\n this.radioComponentValue.name = this.name;\r\n if (!this.ownLabel) {\r\n this.radioComponentValue.label = this.label;\r\n }\r\n this.radioComponentValue.readonly = this.readonly;\r\n this.radioComponentValue.disabled = this.disabled;\r\n this.radioComponentValue.valueChange.pipe(takeUntil(this.destroy)).subscribe(() => this.change.next());\r\n }\r\n }\r\n\r\n @ContentChild(TextareaComponent)\r\n protected get textareaComponent(): TextareaComponent | undefined {\r\n return this.textareaComponentValue;\r\n }\r\n\r\n protected set textareaComponent(value: TextareaComponent | undefined) {\r\n this.textareaComponentValue = value;\r\n if (this.textareaComponentValue) {\r\n this.textareaComponentValue.name = this.name;\r\n this.textareaComponentValue.readonly = this.readonly;\r\n this.textareaComponentValue.disabled = this.disabled;\r\n this.textareaComponentValue.valueChange.pipe(takeUntil(this.destroy)).subscribe(() => this.change.next());\r\n }\r\n }\r\n\r\n @ContentChild(DropdownComponent)\r\n protected get dropDownComponent(): DropdownComponent | undefined {\r\n return this.dropDownComponentValue;\r\n }\r\n\r\n protected set dropDownComponent(value: DropdownComponent | undefined) {\r\n this.dropDownComponentValue = value;\r\n if (this.dropDownComponentValue) {\r\n this.dropDownComponentValue.name = this.name;\r\n this.dropDownComponentValue.readonly = this.readonly;\r\n this.dropDownComponentValue.disabled = this.disabled;\r\n this.dropDownComponentValue.valueChange.pipe(takeUntil(this.destroy)).subscribe(() => this.change.next());\r\n }\r\n }\r\n\r\n @Input()\r\n public get name(): string | undefined {\r\n return this.nameValue;\r\n }\r\n\r\n public set name(value: string | undefined) {\r\n this.nameValue = value;\r\n if (this.labelElement) {\r\n this.labelElement.setAttribute('for', value ?? '');\r\n }\r\n if (this.inputComponent) {\r\n this.inputComponent.for = value;\r\n this.inputComponent.name = value;\r\n }\r\n if (this.numericInputComponent) {\r\n this.numericInputComponent.for = value;\r\n this.numericInputComponent.name = value;\r\n }\r\n if (this.dateInputComponent) {\r\n this.dateInputComponent.for = value;\r\n this.dateInputComponent.name = value;\r\n }\r\n if (this.checkboxComponent) {\r\n this.checkboxComponent.name = value;\r\n }\r\n if (this.sliderComponent) {\r\n this.sliderComponent.name = value;\r\n }\r\n if (this.toggleComponent) {\r\n this.toggleComponent.name = value;\r\n }\r\n if (this.radioComponent) {\r\n this.radioComponent.name = value;\r\n }\r\n if (this.textareaComponent) {\r\n this.textareaComponent.name = value;\r\n }\r\n if (this.dropDownComponent) {\r\n this.dropDownComponent.name = value;\r\n }\r\n }\r\n\r\n @Input()\r\n public get label(): string | undefined {\r\n return this.labelValue;\r\n }\r\n\r\n public set label(value: string | undefined) {\r\n this.labelValue = value;\r\n if (this.checkboxComponent) {\r\n if (!this.ownLabel) {\r\n this.originalLabel = this.checkboxComponent.label;\r\n this.checkboxComponent.label = value;\r\n }\r\n else if (this.originalLabel) {\r\n this.checkboxComponent.label = this.originalLabel;\r\n }\r\n }\r\n if (this.sliderComponent) {\r\n if (!this.ownLabel) {\r\n this.originalLabel = this.sliderComponent.label;\r\n this.sliderComponent.label = value;\r\n }\r\n else if (this.originalLabel) {\r\n this.sliderComponent.label = this.originalLabel;\r\n }\r\n }\r\n if (this.toggleComponent) {\r\n if (!this.ownLabel) {\r\n this.originalLabel = this.toggleComponent.label;\r\n this.toggleComponent.label = value;\r\n }\r\n else if (this.originalLabel) {\r\n this.toggleComponent.label = this.originalLabel;\r\n }\r\n }\r\n if (this.radioComponent) {\r\n if (!this.ownLabel) {\r\n this.originalLabel = this.radioComponent.label;\r\n this.radioComponent.label = value;\r\n }\r\n else if (this.originalLabel) {\r\n this.radioComponent.label = this.originalLabel;\r\n }\r\n }\r\n }\r\n\r\n @Input()\r\n public hint: string | undefined;\r\n\r\n @Input()\r\n @HostBinding('class.wide')\r\n public get size(): FieldSize {\r\n return this.sizeValue;\r\n }\r\n\r\n public set size(value: ParsableFieldSize) {\r\n this.sizeValue = parseFieldSize(value) ?? '';\r\n this.classes.set('size', this.sizeValue);\r\n }\r\n\r\n @Input()\r\n public get error(): boolean {\r\n return this.errorValue;\r\n }\r\n\r\n public set error(value: BooleanLike) {\r\n value = this.toBoolean(value);\r\n if (this.errorValue === value) {\r\n return;\r\n }\r\n this.errorValue = value;\r\n this.visibleError = value;\r\n this.errorChange.emit(value);\r\n }\r\n\r\n @HostBinding('class.error')\r\n protected visibleError = false;\r\n\r\n @Input()\r\n public set valid(value: boolean | FormValidation) {\r\n const oldError = this.error;\r\n const newError = typeof value === 'boolean' ? !value : value && !value.valid;\r\n this.errors.length = 0;\r\n if (newError) {\r\n const message = typeof value === 'boolean' ? '' : value.message ?? '';\r\n const label = (typeof value === 'boolean' ? this.label : value.label === undefined ? this.label : value.label) ?? '';\r\n this.errors.push({ message, label });\r\n }\r\n if (newError !== oldError) {\r\n this.error = newError;\r\n this.refreshClasses();\r\n }\r\n if (!this.error) {\r\n this.wasAnytimeValid = true;\r\n }\r\n else if (this.hideInitialError && !this.wasAnytimeValid) {\r\n this.visibleError = false;\r\n }\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.disabled')\r\n public get disabled(): boolean {\r\n return this.disabledValue;\r\n }\r\n\r\n public set disabled(value: BooleanLike) {\r\n this.disabledValue = this.toBoolean(value);\r\n if (this.inputComponent) {\r\n this.inputComponent.disabled = value;\r\n }\r\n if (this.numericInputComponent) {\r\n this.numericInputComponent.disabled = value;\r\n }\r\n if (this.dateInputComponent) {\r\n this.dateInputComponent.disabled = value;\r\n }\r\n if (this.checkboxComponent) {\r\n this.checkboxComponent.disabled = value;\r\n }\r\n if (this.toggleComponent) {\r\n this.toggleComponent.disabled = value;\r\n }\r\n if (this.sliderComponent) {\r\n this.sliderComponent.disabled = value;\r\n }\r\n if (this.radioComponent) {\r\n this.radioComponent.disabled = value;\r\n }\r\n if (this.textareaComponent) {\r\n this.textareaComponent.disabled = value;\r\n }\r\n if (this.dropDownComponent) {\r\n this.dropDownComponent.disabled = value;\r\n }\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.readonly')\r\n public get readonly(): boolean {\r\n return this.readonlyValue;\r\n }\r\n\r\n public set readonly(value: BooleanLike) {\r\n this.readonlyValue = this.toBoolean(value);\r\n if (this.inputComponent) {\r\n this.inputComponent.readonly = value;\r\n }\r\n if (this.numericInputComponent) {\r\n this.numericInputComponent.readonly = value;\r\n }\r\n if (this.dateInputComponent) {\r\n this.dateInputComponent.readonly = value;\r\n }\r\n if (this.checkboxComponent) {\r\n this.checkboxComponent.readonly = value;\r\n }\r\n if (this.toggleComponent) {\r\n this.toggleComponent.readonly = value;\r\n }\r\n if (this.sliderComponent) {\r\n this.sliderComponent.readonly = value;\r\n }\r\n if (this.radioComponent) {\r\n this.radioComponent.readonly = value;\r\n }\r\n if (this.dropDownComponent) {\r\n this.dropDownComponent.readonly = value;\r\n }\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.inline')\r\n public get inline(): boolean {\r\n return this.isInline;\r\n }\r\n\r\n public set inline(value: BooleanLike) {\r\n this.isInline = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get hideInitialError(): boolean {\r\n return this.hideInitialErrorValue;\r\n }\r\n\r\n public set hideInitialError(value: boolean) {\r\n this.hideInitialErrorValue = value;\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.fill')\r\n public get fill(): boolean {\r\n return this.isFill;\r\n }\r\n\r\n public set fill(value: BooleanLike) {\r\n this.isFill = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get inlineValidation(): boolean {\r\n return this.isInlineValidation;\r\n }\r\n\r\n public set inlineValidation(value: BooleanLike) {\r\n this.isInlineValidation = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get ownLabel(): boolean {\r\n return this.hasOwnLabel;\r\n }\r\n\r\n public set ownLabel(value: BooleanLike) {\r\n this.hasOwnLabel = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get forceLabel(): boolean {\r\n return this.isForceLabel;\r\n }\r\n\r\n public set forceLabel(value: BooleanLike) {\r\n this.isForceLabel = this.toBoolean(value);\r\n }\r\n\r\n @Output()\r\n public readonly errorChange = new EventEmitter();\r\n\r\n @Output()\r\n public readonly change = new EventEmitter();\r\n\r\n public constructor() {\r\n super(false);\r\n this.classes.registerFixed('field');\r\n this.classes.register('size', 'disabled', 'readonly', 'inline', 'label', 'fill', 'name');\r\n }\r\n\r\n public forceValidation(): void {\r\n this.wasAnytimeValid = true;\r\n this.visibleError = this.error;\r\n }\r\n}\r\n","@if ((checkboxComponent || sliderComponent || toggleComponent || radioComponent) && !ownLabel && forceLabel) {\n \n} @else if (label || hint) {\n @if ((label || hint) && (!checkboxComponent && !sliderComponent && !toggleComponent && !radioComponent || ownLabel)) {\n \n }\n}\n\n\n","import { Component, ContentChildren, EventEmitter, HostBinding, Input, Output, QueryList } from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { InlineDirective } from '../../directives/inline.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { FieldComponent } from '../field/field.component';\r\n\r\nexport declare type FieldsType =\r\n ''\r\n | 'two'\r\n | 'three'\r\n | 'four'\r\n | 'five'\r\n | 'six'\r\n | 'seven'\r\n | 'eight'\r\n | 'nine'\r\n | 'ten'\r\n | number;\r\n\r\n@Component({\r\n selector: 'm-field-group',\r\n templateUrl: './field-group.component.html',\r\n styleUrls: ['./field-group.component.scss'],\r\n hostDirectives: [InlineDirective.default],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class FieldGroupComponent extends BaseComponent {\r\n private readonly fieldClasses: FieldsType[] = ['', '', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];\r\n private fieldsValue: FieldsType | undefined;\r\n private fieldsAutoValue: FieldsType | undefined;\r\n private isGrouped = false;\r\n private isInlineValidation = false;\r\n private errorValue = false;\r\n private changeSubscriptions: Subscription[] = [];\r\n private fieldComponentsValue?: QueryList;\r\n\r\n @Input()\r\n public get fields(): FieldsType | undefined {\r\n return this.fieldsValue || this.fieldsAutoValue;\r\n }\r\n\r\n public set fields(value: FieldsType | undefined) {\r\n // TODO: Parse number as string e.g. '2'\r\n if (typeof value === 'number') {\r\n this.fieldsValue = this.fieldClasses[value];\r\n }\r\n else {\r\n this.fieldsValue = value;\r\n }\r\n }\r\n\r\n @ContentChildren(FieldComponent)\r\n public get fieldComponents(): QueryList | undefined {\r\n return this.fieldComponentsValue;\r\n }\r\n\r\n public set fieldComponents(value: QueryList | undefined) {\r\n this.fieldComponentsValue = value;\r\n this.refreshInlineValidation();\r\n this.refreshChangeSubscriptions();\r\n this.refreshIsValid();\r\n if (this.fieldComponentsValue) {\r\n this.refreshFields(this.fieldComponentsValue.length);\r\n this.fieldComponentsValue.changes.subscribe(() => {\r\n this.refreshFields(this.fieldComponentsValue?.length ?? 0);\r\n this.refreshInlineValidation();\r\n this.refreshChangeSubscriptions();\r\n this.refreshIsValid();\r\n });\r\n }\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.grouped')\r\n public get grouped(): boolean {\r\n return this.isGrouped;\r\n }\r\n\r\n public set grouped(value: BooleanLike) {\r\n this.isGrouped = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get inlineValidation(): boolean {\r\n return this.isInlineValidation;\r\n }\r\n\r\n public set inlineValidation(value: BooleanLike) {\r\n this.isInlineValidation = this.toBoolean(value);\r\n this.refreshInlineValidation();\r\n }\r\n\r\n @Input()\r\n public get error(): boolean {\r\n return this.errorValue;\r\n }\r\n\r\n public set error(value: BooleanLike) {\r\n value = this.toBoolean(value);\r\n if (this.errorValue === value) {\r\n return;\r\n }\r\n this.errorValue = value;\r\n this.errorChange.emit(value);\r\n }\r\n\r\n @Output()\r\n public readonly errorChange = new EventEmitter();\r\n\r\n @Output()\r\n public readonly change = new EventEmitter();\r\n\r\n public constructor() {\r\n super(false);\r\n this.classes.register('grouped')\r\n .registerFixed('fields');\r\n }\r\n\r\n private refreshFields(count: number): void {\r\n this.fieldsAutoValue = this.fieldClasses[count];\r\n }\r\n\r\n private refreshInlineValidation(): void {\r\n this.fieldComponents?.forEach(field => field.inlineValidation = this.inlineValidation);\r\n }\r\n\r\n private refreshChangeSubscriptions(): void {\r\n this.changeSubscriptions.forEach(subscription => subscription.unsubscribe());\r\n this.fieldComponents?.forEach(field =>\r\n this.changeSubscriptions.push(\r\n field.change.pipe(takeUntil(this.destroy)).subscribe(() => this.change.emit()),\r\n field.errorChange.pipe(takeUntil(this.destroy)).subscribe(() => this.refreshIsValid())\r\n ));\r\n }\r\n\r\n private refreshIsValid(): void {\r\n this.error = this.fieldComponents?.some(component => component.error);\r\n }\r\n}\r\n","","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { FieldComponent } from './field.component';\r\n\r\n@Component({\r\n selector: 'm-field-defaults',\r\n template: '',\r\n })\r\nexport class FieldDefaultsComponent implements OnDestroy {\r\n private readonly previousHintIcon = FieldComponent.defaults.hintIcon;\r\n private readonly previousHintIconSize = FieldComponent.defaults.hintIconSize;\r\n private readonly previousErrorIcon = FieldComponent.defaults.errorIcon;\r\n private readonly previousErrorIconSize = FieldComponent.defaults.errorIconSize;\r\n private currentHintIcon?: IconType;\r\n private currentHintIconSize?: IconType;\r\n private currentErrorIcon?: IconType;\r\n private currentErrorIconSize?: IconType;\r\n\r\n @Input()\r\n public set hintIcon(value: IconType) {\r\n this.currentHintIcon = value;\r\n FieldComponent.defaults.hintIcon = value;\r\n }\r\n\r\n @Input()\r\n public set hintIconSize(value: IconSize) {\r\n this.currentHintIconSize = value;\r\n FieldComponent.defaults.hintIconSize = value;\r\n }\r\n\r\n @Input()\r\n public set errorIcon(value: IconType) {\r\n this.currentErrorIcon = value;\r\n FieldComponent.defaults.errorIcon = value;\r\n }\r\n\r\n @Input()\r\n public set errorIconSize(value: IconSize) {\r\n this.currentErrorIconSize = value;\r\n FieldComponent.defaults.errorIconSize = value;\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentHintIcon === FieldComponent.defaults.hintIcon) {\r\n FieldComponent.defaults.hintIcon = this.previousHintIcon;\r\n }\r\n if (this.currentHintIconSize === FieldComponent.defaults.hintIconSize) {\r\n FieldComponent.defaults.hintIconSize = this.previousHintIconSize;\r\n }\r\n if (this.currentErrorIcon === FieldComponent.defaults.errorIcon) {\r\n FieldComponent.defaults.errorIcon = this.previousErrorIcon;\r\n }\r\n if (this.currentErrorIconSize === FieldComponent.defaults.errorIconSize) {\r\n FieldComponent.defaults.errorIconSize = this.previousErrorIconSize;\r\n }\r\n }\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'm-auto',\r\n templateUrl: './auto.component.html',\r\n styleUrls: ['./auto.component.scss'],\r\n })\r\nexport class AutoComponent {\r\n\r\n}\r\n","\r\n","import { Directive, HostBinding } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[m-auto]',\r\n })\r\nexport class AutoDirective {\r\n\r\n @HostBinding('style.flex')\r\n public readonly flex = '0 0 auto';\r\n\r\n}\r\n","import { Directive, HostBinding } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[m-fill]',\r\n })\r\nexport class FillDirective {\r\n\r\n @HostBinding('style.flex')\r\n public readonly flex = '1';\r\n\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'm-shrink',\r\n templateUrl: './shrink.component.html',\r\n styleUrls: ['./shrink.component.scss'],\r\n })\r\nexport class ShrinkComponent {\r\n\r\n}\r\n","\r\n","import { Directive, HostBinding } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[m-shrink]',\r\n })\r\nexport class ShrinkDirective {\r\n\r\n @HostBinding('style.flex')\r\n protected readonly flex = '0 1 auto';\r\n\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'm-grow',\r\n templateUrl: './grow.component.html',\r\n styleUrls: ['./grow.component.scss'],\r\n })\r\nexport class GrowComponent {\r\n\r\n}\r\n","\r\n","import { Directive, HostBinding } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[m-grow]',\r\n })\r\nexport class GrowDirective {\r\n\r\n @HostBinding('style.flex')\r\n public readonly flex = '1 0 auto';\r\n\r\n}\r\n","import { computed, Directive, input } from '@angular/core';\nimport { OverflowValue } from './overflow.types';\n\n@Directive({\n selector: '[m-overflow]',\n host: {\n '[style.overflow-x]': 'effectiveOverflowX()',\n '[style.overflow-y]': 'effectiveOverflowY()',\n }\n})\nexport class OverflowDirective {\n public static readonly default = {\n directive: OverflowDirective,\n inputs: ['m-overflow', 'm-overflow-x', 'm-overflow-y']\n };\n\n public readonly overflow = input(undefined, { alias: 'm-overflow' });\n public readonly overflowX = input(undefined, { alias: 'm-overflow-x' });\n public readonly overflowY = input(undefined, { alias: 'm-overflow-y' });\n\n protected readonly effectiveOverflowX = computed(() => this.overflowX() || this.overflow() || undefined);\n protected readonly effectiveOverflowY = computed(() => this.overflowY() || this.overflow() || undefined);\n}\n","import { Component } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\n\r\n@Component({\r\n selector: 'm-footer',\r\n templateUrl: './footer.component.html',\r\n styleUrls: ['./footer.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class FooterComponent extends BaseComponent {\r\n\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('footer ui segment vertical no-border');\r\n }\r\n\r\n}\r\n","","import { TemplateRef } from '@angular/core';\r\n\r\nexport class TemplateTarget {\r\n public template: TemplateRef | undefined;\r\n}\r\n","import { Injectable, TemplateRef } from '@angular/core';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class LayoutService {\r\n public readonly menuTemplates: TemplateRef[] = [];\r\n public readonly footerTemplates: TemplateRef[] = [];\r\n}\r\n","import { Directive, TemplateRef } from '@angular/core';\r\nimport { LayoutService } from '../services/layout.service';\r\n\r\n@Directive({\r\n selector: '[m-footer-link-template]',\r\n })\r\nexport class FooterLinkTemplateDirective {\r\n public constructor(\r\n private readonly menuService: LayoutService,\r\n private readonly template: TemplateRef\r\n ) {\r\n this.menuService.footerTemplates.push(this.template);\r\n }\r\n}\r\n","import { Component } from '@angular/core';\r\nimport { TemplateTarget } from '../../models/template-target';\r\nimport { FooterLinkTemplateDirective } from '../../directives/footer-link-template.directive';\r\n\r\n@Component({\n selector: 'm-footer-link',\n templateUrl: './footer-link.component.html',\n styleUrls: ['./footer-link.component.scss'],\n imports: [\n FooterLinkTemplateDirective\n ]\n})\r\n// TODO: Implement\r\nexport class FooterLinkComponent {\r\n\r\n public readonly target = new TemplateTarget();\r\n}\r\n","\r\n \r\n\r\n","import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\n\r\n@Injectable()\r\nexport class FormValidationNotifier {\r\n private isValidValue = true;\r\n private readonly isValidSubject = new BehaviorSubject(this.isValidValue);\r\n public readonly isValid$ = this.isValidSubject.asObservable();\r\n\r\n public get isValid(): boolean {\r\n return this.isValidValue;\r\n }\r\n\r\n public set(value: boolean): void {\r\n this.isValidValue = value;\r\n this.isValidSubject.next(value);\r\n }\r\n\r\n}\r\n","\r\nimport { Component, ContentChildren, EventEmitter, HostBinding, inject, Input, OnInit, Output, QueryList } from '@angular/core';\r\nimport { delay, ReplaySubject, Subject, Subscription, throttleTime } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { LoadingDirective } from '../../directives/loading.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { FieldGroupComponent } from '../field-group/field-group.component';\r\nimport { FieldComponent } from '../field/field.component';\r\nimport { FillDirective } from '../flex/fill/fill.directive';\r\nimport { FlexDirective } from '../flex/flex.directive';\r\nimport { FlexDirection } from '../flex/flex.types';\r\nimport { FormValidationNotifier } from './form-validation-notifier';\r\n\r\n@Component({\n selector: 'm-form',\n templateUrl: './form.component.html',\n styleUrls: ['./form.component.scss'],\n imports: [\n FlexDirective,\n FillDirective\n],\n hostDirectives: [LoadingDirective.default],\n providers: [...InvertibleComponent.providers]\n})\r\nexport class FormComponent extends InvertibleComponent implements OnInit {\r\n public static readonly defaults = {\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n private readonly loadingDirective = inject(LoadingDirective, { self: true });\r\n private readonly flexDirective = inject(FlexDirective, { self: true, optional: true });\r\n private readonly formValidationNotifier = inject(FormValidationNotifier, { optional: true });\r\n private fieldComponentsValue?: QueryList;\r\n private fieldGroupsComponentsValue?: QueryList;\r\n private fieldSubscriptions?: Subscription[];\r\n private groupSubscriptions?: Subscription[];\r\n private isValidValue = false;\r\n private isSuccess = false;\r\n private isWarning = false;\r\n private isError = false;\r\n private isAutoSubmit = false;\r\n private readonly autoSubmitSubject = new Subject();\r\n private autoSubmitThrottleValue = 1000;\r\n private autoSubmitSubscription: Subscription | undefined;\r\n private isInlineValidation = false;\r\n\r\n protected get loading(): boolean {\r\n return this.loadingDirective.loading;\r\n }\r\n\r\n protected get flexDirection(): FlexDirection | '' | undefined {\r\n return this.flexDirective?.direction;\r\n }\r\n\r\n @ContentChildren(FieldComponent)\r\n public get fieldComponents(): QueryList | undefined {\r\n return this.fieldComponentsValue;\r\n }\r\n\r\n protected set fieldComponents(value: QueryList | undefined) {\r\n this.releaseFields();\r\n this.fieldComponentsValue = value;\r\n this.subscribeFields();\r\n this.refreshIsValid();\r\n this.refreshInlineValidation();\r\n if (this.fieldComponentsValue) {\r\n this.fieldComponentsValue.changes.subscribe(() => {\r\n this.releaseFields();\r\n this.subscribeFields();\r\n this.refreshInlineValidation();\r\n });\r\n }\r\n }\r\n\r\n @ContentChildren(FieldGroupComponent)\r\n public get fieldGroupsComponents(): QueryList | undefined {\r\n return this.fieldGroupsComponentsValue;\r\n }\r\n\r\n protected set fieldGroupsComponents(value: QueryList | undefined) {\r\n this.releaseGroups();\r\n this.fieldGroupsComponentsValue = value;\r\n this.subscribeGroups();\r\n this.refreshIsValid();\r\n this.refreshInlineValidation();\r\n if (this.fieldGroupsComponentsValue) {\r\n this.fieldGroupsComponentsValue.changes.subscribe(() => {\r\n this.releaseGroups();\r\n this.subscribeGroups();\r\n this.refreshInlineValidation();\r\n });\r\n }\r\n }\r\n\r\n @Input()\r\n public action?: string;\r\n\r\n @Input()\r\n public autocomplete?: 'on' | 'off';\r\n\r\n @Input()\r\n public enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';\r\n\r\n @Input()\r\n public method?: 'get' | 'post';\r\n\r\n @Input()\r\n public name?: string;\r\n\r\n @Input()\r\n public novalidate = false;\r\n\r\n @Input()\r\n @HostBinding('class.success')\r\n public get success(): boolean {\r\n return this.isSuccess;\r\n }\r\n\r\n public set success(value: BooleanLike) {\r\n this.isSuccess = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.error')\r\n public get error(): boolean {\r\n return this.isError;\r\n }\r\n\r\n public set error(value: BooleanLike) {\r\n this.isError = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.warning')\r\n public get warning(): boolean {\r\n return this.isWarning;\r\n }\r\n\r\n public set warning(value: BooleanLike) {\r\n this.isWarning = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public target?: '_blank' | '_self' | '_parent' | '_top';\r\n\r\n @Input()\r\n public get isValid(): boolean {\r\n return this.isValidValue;\r\n }\r\n\r\n public set isValid(_: boolean) {\r\n // Ignore the value from the binding\r\n }\r\n\r\n @Input()\r\n public get autoSubmit(): boolean {\r\n return this.isAutoSubmit;\r\n }\r\n\r\n public set autoSubmit(value: BooleanLike) {\r\n this.isAutoSubmit = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get autoSubmitThrottle(): number {\r\n return this.autoSubmitThrottleValue;\r\n }\r\n\r\n public set autoSubmitThrottle(value: number) {\r\n this.autoSubmitThrottleValue = value;\r\n this.refreshAutoSubmitSubscription();\r\n }\r\n\r\n @Input()\r\n public get inlineValidation(): boolean {\r\n return this.isInlineValidation;\r\n }\r\n\r\n public set inlineValidation(value: BooleanLike) {\r\n this.isInlineValidation = this.toBoolean(value);\r\n this.refreshInlineValidation();\r\n }\r\n\r\n @Output()\r\n public readonly submit = new EventEmitter();\r\n\r\n @Output()\r\n public readonly isValidChange = new EventEmitter();\r\n\r\n public constructor() {\r\n super(false);\r\n this.classes.register('success', 'warning', 'error', 'autoSubmit');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n FormComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n this.refreshAutoSubmitSubscription();\r\n }\r\n\r\n private releaseFields(): void {\r\n if (this.fieldSubscriptions) {\r\n this.fieldSubscriptions.forEach(subscription => subscription.unsubscribe());\r\n this.fieldSubscriptions = undefined;\r\n }\r\n }\r\n\r\n private subscribeFields(): void {\r\n if (this.fieldComponents) {\r\n this.fieldSubscriptions = [\r\n ...this.fieldComponents.map(field => field.errorChange.subscribe(() => this.refreshIsValid())),\r\n ...(this.isAutoSubmit ? this.fieldComponents.map(field => field.change.subscribe(() => this.changed())) : [])\r\n ];\r\n }\r\n }\r\n\r\n private releaseGroups(): void {\r\n if (this.groupSubscriptions) {\r\n this.groupSubscriptions.forEach(subscription => subscription.unsubscribe());\r\n this.groupSubscriptions = undefined;\r\n }\r\n }\r\n\r\n private subscribeGroups(): void {\r\n if (this.fieldGroupsComponents) {\r\n this.groupSubscriptions = [\r\n ...this.fieldGroupsComponents.map(group => group.errorChange.subscribe(() => this.refreshIsValid())),\r\n ...(this.isAutoSubmit ? this.fieldGroupsComponents.map(group => group.change.subscribe(() => this.changed())) : [])\r\n ];\r\n }\r\n }\r\n\r\n public changed(): void {\r\n this.autoSubmitSubject.next();\r\n }\r\n\r\n private refreshAutoSubmitSubscription(): void {\r\n this.autoSubmitSubscription?.unsubscribe();\r\n this.autoSubmitSubscription = this.autoSubmitSubject.pipe(\r\n throttleTime(this.autoSubmitThrottleValue, undefined, { leading: true, trailing: true }),\r\n // Delay a little bit to let all bindings be executed and the values written to the objects\r\n delay(1)\r\n ).subscribe(() => this.validateAndSubmit());\r\n }\r\n\r\n private refreshIsValid(): void {\r\n const hasError = this.fieldComponents?.some(field => field.error) || this.fieldGroupsComponents?.some(group => group.error);\r\n const isValid = !hasError;\r\n this.error = hasError;\r\n if (this.isValidValue !== isValid) {\r\n this.isValidValue = isValid;\r\n this.formValidationNotifier?.set(isValid);\r\n // Delay the notification be fire the change outside the check to ensure a change detection run will be started\r\n setTimeout(() => this.isValidChange.emit(isValid));\r\n }\r\n }\r\n\r\n public validateAndSubmit(): void {\r\n if (this.error) {\r\n this.fieldComponents?.forEach(field => field.forceValidation());\r\n }\r\n else {\r\n this.submit.emit();\r\n }\r\n }\r\n\r\n protected onSubmit(event: SubmitEvent): void {\r\n event.preventDefault();\r\n // TODO: Implement\r\n }\r\n\r\n private refreshInlineValidation(): void {\r\n this.fieldComponents?.forEach(field => field.inlineValidation = this.inlineValidation);\r\n this.fieldGroupsComponents?.forEach(group => group.inlineValidation = this.inlineValidation);\r\n }\r\n}\r\n","
\n \n @if (error) {\n
\n
    \n @for (field of fieldComponents; track field) {\n @if (field.error) {\n @for (error of field.errors; track error) {\n
  • {{error.label}} {{error.message}}
    • \n }\n }\n }\n @for (group of fieldGroupsComponents; track group) {\n @if (group.error) {\n @for (field of group.fieldComponents; track field) {\n @for (error of field.errors; track error) {\n
  • {{error.label}} {{error.message}}
    • \n }\n }\n }\n }\n
\n
\n }\n\n","import { Component, Input } from '@angular/core';\r\nimport { FormComponent } from './form.component';\r\n\r\n@Component({\r\n selector: 'm-form-defaults',\r\n template: '',\r\n })\r\nexport class FormDefaultsComponent {\r\n @Input()\r\n public set inverted(value: boolean) {\r\n FormComponent.defaults.inverted = value;\r\n FormComponent.defaults.invertedChange.next(value);\r\n }\r\n}\r\n","import { Directive, HostBinding, inject, Input, OnInit } from '@angular/core';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { BaseDirective } from '../base/base.directive';\r\nimport { HeaderComponent } from '../components/header/header.component';\r\nimport { BooleanLike } from '../models/boolean-like';\r\nimport { InvertedDirective } from './inverted.directive';\r\n\r\n@Directive({\r\n selector: '[m-header]',\r\n hostDirectives: [InvertedDirective.default],\r\n providers: [...BaseDirective.providers]\r\n})\r\nexport class HeaderDirective extends BaseDirective implements OnInit {\r\n private readonly invertedDirective = inject(InvertedDirective);\r\n private isDividing = false;\r\n private isIcon = false;\r\n\r\n public get inverted(): boolean {\r\n return this.invertedDirective.inverted;\r\n }\r\n\r\n public set inverted(value: BooleanLike) {\r\n this.invertedDirective.inverted = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.dividing')\r\n public get dividing(): boolean {\r\n return this.isDividing;\r\n }\r\n\r\n public set dividing(value: BooleanLike) {\r\n this.isDividing = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.icon')\r\n public get icon(): boolean {\r\n return this.isIcon;\r\n }\r\n\r\n public set icon(value: BooleanLike) {\r\n this.isIcon = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.sub')\r\n public sub = false;\r\n\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('header');\r\n this.validateAttributes = false;\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n HeaderComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.invertedDirective.setInvertedDefault(value));\r\n }\r\n}\r\n","import { Component, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { FieldSize, ParsableFieldSize, parseFieldSize } from '../../models/field-size';\r\n\r\nexport declare type GridWidth = 'equal';\r\n\r\n@Component({\r\n selector: 'm-grid',\r\n templateUrl: './grid.component.html',\r\n styleUrls: ['./grid.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class GridComponent extends BaseComponent {\r\n private columnsValue?: FieldSize;\r\n private isVertically = false;\r\n private isDivided = false;\r\n private isCelled = false;\r\n private isInternally = false;\r\n private widthValue?: GridWidth;\r\n private noMarginValue = false;\r\n\r\n @Input()\r\n public get vertically(): boolean {\r\n return this.isVertically;\r\n }\r\n\r\n public set vertically(value: BooleanLike) {\r\n this.isVertically = this.toBoolean(value);\r\n this.classes.set('vertically', this.isVertically);\r\n }\r\n\r\n @Input()\r\n public get divided(): boolean {\r\n return this.isDivided;\r\n }\r\n\r\n public set divided(value: BooleanLike) {\r\n this.isDivided = this.toBoolean(value);\r\n this.classes.set('divided', this.isDivided);\r\n }\r\n\r\n @Input()\r\n public get columns(): FieldSize | undefined {\r\n return this.columnsValue;\r\n }\r\n\r\n public set columns(value: ParsableFieldSize | undefined) {\r\n this.columnsValue = parseFieldSize(value);\r\n this.classes.set('columns', this.columnsValue ? `${this.columnsValue} column` : undefined);\r\n }\r\n\r\n @Input()\r\n public get internally(): boolean {\r\n return this.isInternally;\r\n }\r\n\r\n public set internally(value: BooleanLike) {\r\n this.isInternally = this.toBoolean(value);\r\n this.classes.set('internally', this.isInternally);\r\n }\r\n\r\n @Input()\r\n public get celled(): boolean {\r\n return this.isCelled;\r\n }\r\n\r\n public set celled(value: BooleanLike) {\r\n this.isCelled = this.toBoolean(value);\r\n this.classes.set('celled', this.isCelled);\r\n }\r\n\r\n @Input()\r\n public get width(): GridWidth | undefined {\r\n return this.widthValue;\r\n }\r\n\r\n public set width(value: GridWidth | undefined) {\r\n this.widthValue = value;\r\n this.classes.set('width', value ? `${value} width` : undefined);\r\n }\r\n\r\n @Input()\r\n public get noMargin(): boolean {\r\n return this.noMarginValue;\r\n }\r\n\r\n public set noMargin(value: BooleanLike) {\r\n this.noMarginValue = this.toBoolean(value);\r\n this.classes.set('no-margin', this.noMargin);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('vertically', 'divided', 'columns', 'internally', 'celled', 'width', 'noMargin')\r\n .registerFixed('grid');\r\n }\r\n\r\n}\r\n","","import { Component, OnInit } from '@angular/core';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { IgnoredDirective } from '../../directives/ignored.directive';\r\nimport { MessageComponent } from '../message/message.component';\r\n\r\n@Component({\r\n selector: 'm-info',\r\n templateUrl: './info.component.html',\r\n styleUrls: ['./info.component.scss'],\r\n hostDirectives: [IgnoredDirective.default],\r\n providers: [...InvertibleComponent.providers]\r\n})\r\nexport class InfoComponent extends InvertibleComponent implements OnInit {\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('visible', 'info', 'message');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n MessageComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n}\r\n","","\r\nimport { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { MessageComponent } from '../message/message.component';\r\n\r\n@Component({\n selector: 'm-warning',\n templateUrl: './warning.component.html',\n styleUrls: ['./warning.component.scss'],\n imports: [\n IconComponent\n],\n providers: [...InvertibleComponent.providers]\n})\r\nexport class WarningComponent extends InvertibleComponent {\r\n protected readonly defaults = MessageComponent.defaults;\r\n\r\n @Input()\r\n public showClose = true;\r\n\r\n @Input()\r\n @HostBinding('class.closed')\r\n public closed = false;\r\n\r\n @HostBinding('class.visible')\r\n public get visible(): boolean {\r\n return !this.closed;\r\n }\r\n\r\n @Output()\r\n public readonly close = new EventEmitter();\r\n\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('warning', 'message');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n MessageComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n\r\n public onClose(): void {\r\n this.closed = true;\r\n this.close.emit();\r\n }\r\n}\r\n","@if (showClose) {\n \n}\n\n","import { Injectable, Type } from '@angular/core';\nimport { FormElementBase } from '../form-element-renderer/form-element-base';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class FormRendererService {\n public static readonly formElements: { [key: string]: Type } = {};\n\n public register(type: Type, name: string): void {\n if (!name) {\n throw new Error('FormRendererService.register requires a name');\n }\n FormRendererService.formElements[name] = type;\n }\n\n public get(name: string | undefined): Type | undefined {\n return name ? FormRendererService.formElements[name] : undefined;\n }\n}\n","\r\nimport { Component, ComponentRef, HostBinding, inject, Input, OnDestroy, Type, ViewContainerRef } from '@angular/core';\r\nimport { FormElements } from '../form-renderer/form-layout';\r\nimport { FormRendererService } from '../form-renderer/form-renderer.service';\r\nimport { FormElementBase } from './form-element-base';\r\n\r\n@Component({\n selector: 'm-form-renderer2',\n templateUrl: './form-element-renderer2.component.html',\n styleUrls: ['./form-element-renderer2.component.scss'],\n imports: []\n})\r\nexport class FormElementRenderer2Component implements OnDestroy {\r\n private readonly formRendererService = inject(FormRendererService);\r\n private readonly viewContainerRef = inject(ViewContainerRef);\r\n private elementType: Type | undefined;\r\n private elementValue: FormElements | undefined;\r\n private dataValue: unknown;\r\n\r\n public componentRef: ComponentRef | undefined;\r\n\r\n @HostBinding('class.visible')\r\n public invalidType: string | undefined;\r\n\r\n public get element(): FormElements | undefined {\r\n return this.elementValue;\r\n }\r\n\r\n @Input()\r\n public set element(value: FormElements | undefined) {\r\n this.elementValue = value;\r\n this.elementType = this.formRendererService.get(value?.elementType);\r\n if (!this.elementType) {\r\n this.invalidType = value?.elementType;\r\n }\r\n this.createComponent();\r\n }\r\n\r\n public get data(): unknown {\r\n return this.dataValue;\r\n }\r\n\r\n @Input()\r\n public set data(value: unknown) {\r\n this.dataValue = value;\r\n if (this.componentRef?.instance) {\r\n this.componentRef.instance.data = value;\r\n }\r\n }\r\n\r\n public createComponent(): void {\r\n this.viewContainerRef.clear();\r\n if (!this.elementType || !this.element) {\r\n return;\r\n }\r\n this.componentRef = this.viewContainerRef.createComponent(this.elementType);\r\n this.componentRef.instance.element = this.element;\r\n this.componentRef.instance.data = this.data;\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n this.componentRef?.destroy();\r\n }\r\n}\r\n","@if (invalidType) {\n
{{invalidType}} is not a known component type
\n}\n","import { AsyncPipe } from '@angular/common';\r\nimport { Component, DoCheck, HostBinding, Input, IterableDiffer, IterableDiffers, Output } from '@angular/core';\r\nimport { merge, Observable, ReplaySubject, Subject } from 'rxjs';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { HeaderDirective } from '../../directives/header.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { ButtonComponent } from '../button/button.component';\r\nimport { CellComponent } from '../cell/cell.component';\r\nimport { CheckboxComponent } from '../checkbox/checkbox.component';\r\nimport { DataSourceComponent } from '../data-source/data-source.component';\r\nimport { DividerComponent } from '../divider/divider.component';\r\nimport { DropdownValue } from '../dropdown/dropdown-value';\r\nimport { DropdownComponent } from '../dropdown/dropdown.component';\r\nimport { ErrorComponent } from '../error/error.component';\r\nimport { FieldComponent } from '../field/field.component';\r\nimport { FormAreaElement, FormButtonElement, FormCheckboxElement, FormDataElement, FormDropDownElement, FormElements, FormError, FormFieldGroupElement, FormGridElement, FormHeader, FormInfo, FormInputElement, FormLabelElement, FormMessage, FormWarning } from '../form-renderer/form-layout';\r\nimport { GridComponent } from '../grid/grid.component';\r\nimport { InfoComponent } from '../info/info.component';\r\nimport { NumericInputComponent } from '../input/numeric/numeric-input.component';\r\nimport { InputComponent } from '../input/text/input.component';\r\nimport { MessageComponent } from '../message/message.component';\r\nimport { TextareaComponent } from '../textarea/textarea.component';\r\nimport { WarningComponent } from '../warning/warning.component';\r\nimport { FormElementRenderer2Component } from './form-element-renderer2.component';\r\n\r\n@Component({\r\n selector: 'm-form-element-renderer',\r\n templateUrl: './form-element-renderer.component.html',\r\n styleUrls: ['./form-element-renderer.component.scss'],\r\n imports: [FieldComponent, InputComponent, NumericInputComponent, CheckboxComponent, TextareaComponent, DropdownComponent, ButtonComponent, GridComponent, CellComponent, MessageComponent, WarningComponent, InfoComponent, ErrorComponent, DividerComponent, FormElementRenderer2Component, HeaderDirective, AsyncPipe],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class FormElementRendererComponent extends BaseComponent implements DoCheck {\r\n private isFields = false;\r\n private readonly elementsDiffer: IterableDiffer;\r\n private readonly fieldClasses = ['', '', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];\r\n private readonly dataCache = new Map[]>>();\r\n private readonly dropDownCache = new Map>();\r\n private readonly executeSubject = new Subject();\r\n private elementsValue: FormElements[] = [];\r\n private dataValue: Record = {};\r\n\r\n @Input()\r\n public get elements(): FormElements[] {\r\n return this.elementsValue;\r\n }\r\n\r\n public set elements(value: FormElements[]) {\r\n this.elementsValue = value;\r\n this.applyDefaults();\r\n }\r\n\r\n @Output()\r\n public readonly execute = this.executeSubject.asObservable();\r\n\r\n public get fields(): boolean {\r\n return this.isFields;\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.fields')\r\n public set fields(value: BooleanLike) {\r\n this.isFields = this.toBoolean(value);\r\n }\r\n\r\n protected get anyData(): any {\r\n return this.data;\r\n }\r\n\r\n @Input()\r\n public get data(): Record {\r\n return this.dataValue ?? {};\r\n }\r\n\r\n public set data(value: Record) {\r\n this.dataValue = value;\r\n this.applyDefaults();\r\n }\r\n\r\n @Input()\r\n public dataSources: DataSourceComponent[] = [];\r\n\r\n public constructor(\r\n iterableDiffers: IterableDiffers\r\n ) {\r\n super(false);\r\n this.classes.register('elements', 'fields');\r\n this.elementsDiffer = iterableDiffers.find([]).create(undefined);\r\n }\r\n\r\n public ngDoCheck(): void {\r\n if (this.isFields && this.elementsDiffer.diff(this.elements)) {\r\n this.classes.set('elements', this.fieldClasses[this.elements.length]);\r\n }\r\n }\r\n\r\n protected getData(dataSource: string): Observable[]> {\r\n const cachedObservable = this.dataCache.get(dataSource);\r\n if (cachedObservable) {\r\n return cachedObservable;\r\n }\r\n const subject = new ReplaySubject[]>(1);\r\n this.dataCache.set(dataSource, subject.asObservable());\r\n merge(...this.dataSources.map(x => x.get(dataSource)).filter(x => x)).subscribe({\r\n next: data => subject.next(data),\r\n error: error => subject.next(error)\r\n });\r\n return subject.asObservable();\r\n }\r\n\r\n protected getItems(dropdown: FormDropDownElement): Observable {\r\n const cachedObservable = this.dropDownCache.get(dropdown.dataSource);\r\n if (cachedObservable) {\r\n return cachedObservable;\r\n }\r\n const subject = new ReplaySubject(1);\r\n this.dropDownCache.set(dropdown.dataSource, subject.asObservable());\r\n this.getData(dropdown.dataSource).subscribe({\r\n next: data => {\r\n const values = data?.map(entry => new DropdownValue(entry[dropdown.valueField], this.format(entry, dropdown.textField, dropdown.textFieldFormatter)));\r\n subject.next([\r\n ...this.upgradeItems(dropdown.prefixItems),\r\n ...values,\r\n ...this.upgradeItems(dropdown.postfixItems)\r\n ]);\r\n },\r\n error: error => subject.next(error)\r\n });\r\n return subject.asObservable();\r\n }\r\n\r\n protected onExecute(action: string): void {\r\n this.executeSubject.next(action);\r\n }\r\n\r\n private applyDefaults(): void {\r\n if (!this.data || !this.elements) {\r\n return;\r\n }\r\n for (const element of this.elements as FormDataElement[]) {\r\n if (element.field && element.defaultValue) {\r\n this.data[element.field] ??= element.defaultValue;\r\n }\r\n }\r\n }\r\n\r\n private format(entry: Record, field: string | string[], fieldFormatter?: string): string {\r\n if (typeof field === 'string') {\r\n return entry[field]?.toString() ?? '';\r\n }\r\n if (fieldFormatter) {\r\n let result = fieldFormatter;\r\n const matches = fieldFormatter.matchAll(/[^$]*(?\\$+\\d+)/gm);\r\n for (const match of matches) {\r\n const variable = match?.groups?.['var'];\r\n if (variable && !variable.startsWith('$$')) {\r\n const index = parseInt(variable.replace(/\\$/g, ''));\r\n result = result.replace(variable, entry[field[index]] as string);\r\n }\r\n }\r\n return result;\r\n }\r\n return field.map(x => entry[x]).join(' ');\r\n }\r\n\r\n private upgradeItems(values: DropdownValue[] | undefined): DropdownValue[] {\r\n if (!values) {\r\n return [];\r\n }\r\n for (const value of values) {\r\n value.value ??= undefined;\r\n }\r\n return values;\r\n }\r\n\r\n protected $input(element: FormElements): FormInputElement {\r\n if (element.elementType === 'input') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'input'`);\r\n }\r\n\r\n protected $checkbox(element: FormElements): FormCheckboxElement {\r\n if (element.elementType === 'checkbox') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'checkbox'`);\r\n }\r\n\r\n protected $area(element: FormElements): FormAreaElement {\r\n if (element.elementType === 'area') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'area'`);\r\n }\r\n\r\n protected $dropdown(element: FormElements): FormDropDownElement {\r\n if (element.elementType === 'dropdown') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'dropdown'`);\r\n }\r\n\r\n protected $button(element: FormElements): FormButtonElement {\r\n if (element.elementType === 'button') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'button'`);\r\n }\r\n\r\n protected $label(element: FormElements): FormLabelElement {\r\n if (element.elementType === 'label') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'label'`);\r\n }\r\n\r\n protected $fields(element: FormElements): FormFieldGroupElement {\r\n if (element.elementType === 'fields') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'fields'`);\r\n }\r\n\r\n protected $grid(element: FormElements): FormGridElement {\r\n if (element.elementType === 'grid') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'grid'`);\r\n }\r\n\r\n protected $message(element: FormElements): FormMessage | FormWarning | FormInfo | FormError {\r\n if (element.elementType === 'message' || element.elementType === 'warning' || element.elementType === 'info' || element.elementType === 'error') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'message'`);\r\n }\r\n\r\n protected $header(element: FormElements): FormHeader {\r\n if (element.elementType === 'h1' || element.elementType === 'h2' || element.elementType === 'h3' || element.elementType === 'h4' || element.elementType === 'h5' || element.elementType === 'h6') {\r\n return element;\r\n }\r\n throw new Error(`${element.elementType} can not be casted to 'h1-6'`);\r\n }\r\n}\r\n","@for (element of elements; track element) {\n @switch (element.elementType) {\n @case ('input') {\n @if ($input(element); as input) {\n \n @if (input.type !== 'number' && input.type !== 'range') {\n \n }\n @if (input.type === 'number' || input.type === 'range') {\n \n }\n \n }\n }\n @case ('checkbox') {\n @if ($checkbox(element); as checkbox) {\n \n \n \n }\n }\n @case ('area') {\n @if ($area(element); as area) {\n \n \n \n }\n }\n @case ('dropdown') {\n @if ($dropdown(element); as dropdown) {\n \n \n \n }\n }\n @case ('button') {\n @if ($button(element); as button) {\n {{ button.label }}\n }\n }\n @case ('label') {\n @if ($label(element); as label) {\n \n }\n }\n @case ('fields') {\n @if ($fields(element); as fields) {\n \n }\n }\n @case ('grid') {\n @if ($grid(element); as grid) {\n \n @for (cell of grid.cells; track cell) {\n \n \n \n }\n \n }\n }\n @case ('message') {\n @if ($message(element); as message) {\n {{ message.text }}\n }\n }\n @case ('warning') {\n @if ($message(element); as message) {\n {{ message.text }}\n }\n }\n @case ('info') {\n @if ($message(element); as message) {\n {{ message.text }}\n }\n }\n @case ('error') {\n @if ($message(element); as message) {\n {{ message.text }}\n }\n }\n @case ('divider') {\n \n }\n @case ('h1') {\n @if ($header(element); as header) {\n

{{ header.text }}

\n }\n }\n @case ('h2') {\n @if ($header(element); as header) {\n

{{ header.text }}

\n }\n }\n @case ('h3') {\n @if ($header(element); as header) {\n

{{ header.text }}

\n }\n }\n @case ('h4') {\n @if ($header(element); as header) {\n

{{ header.text }}

\n }\n }\n @case ('h5') {\n @if ($header(element); as header) {\n
{{ header.text }}
\n }\n }\n @case ('h6') {\n @if ($header(element); as header) {\n
{{ header.text }}
\n }\n }\n @default {\n \n }\n }\n}\n@if (!elements.length) {\n
No elements configured
\n}\n","import { Component, ContentChildren, Input, Output, QueryList } from '@angular/core';\r\nimport { FormLayout } from './form-layout';\r\nimport { Subject } from 'rxjs';\r\nimport { DataSourceComponent } from '../data-source/data-source.component';\r\n\r\nimport { FormComponent } from '../form/form.component';\r\nimport { FormElementRendererComponent } from '../form-element-renderer/form-element-renderer.component';\r\nimport { FlexDirective } from '../flex/flex.directive';\r\nimport { FillDirective } from '../flex/fill/fill.directive';\r\n\r\n@Component({\n selector: 'm-form-renderer',\n templateUrl: './form-renderer.component.html',\n styleUrls: ['./form-renderer.component.scss'],\n imports: [\n FormComponent,\n FormElementRendererComponent,\n FlexDirective,\n FillDirective\n]\n})\r\nexport class FormRendererComponent {\r\n private readonly dataChangeSubject = new Subject();\r\n private readonly executeSubject = new Subject();\r\n private layoutValue: FormLayout = { elements: [] };\r\n private dataValue: Record = {};\r\n public dataSources: DataSourceComponent[] = [];\r\n\r\n @Input()\r\n public get layout(): FormLayout {\r\n return this.layoutValue;\r\n }\r\n\r\n public set layout(value: FormLayout | undefined) {\r\n this.layoutValue = value ?? { elements: [] };\r\n }\r\n\r\n public get data(): Record {\r\n return this.dataValue;\r\n }\r\n\r\n @Input()\r\n public set data(value: Record | any) {\r\n this.dataValue = value;\r\n if (!value) {\r\n setTimeout(() => {\r\n this.dataValue = {};\r\n this.dataChangeSubject.next(this.dataValue);\r\n });\r\n }\r\n }\r\n\r\n @Output()\r\n public readonly dataChange = this.dataChangeSubject.asObservable();\r\n\r\n @Output()\r\n public readonly execute = this.executeSubject.asObservable();\r\n\r\n @ContentChildren(DataSourceComponent)\r\n protected set dataSourceElements(query: QueryList) {\r\n this.dataSources = Array.from(query);\r\n query.changes.subscribe(() => this.dataSources = Array.from(query));\r\n }\r\n\r\n protected onExecute(action: string): void {\r\n this.executeSubject.next(action);\r\n }\r\n}\r\n","\r\n \r\n \r\n\r\n","import { Type } from '@angular/core';\r\nimport { FormRendererService } from '../form-renderer/form-renderer.service';\r\n\r\n/*\r\n @deprecated Use provideFormElement(...) instead\r\n */\r\nexport function FormElement(name: string): (constructor: Type) => void {\r\n if (!name) {\r\n throw new Error('FormElement decorator requires a name');\r\n }\r\n if (FormRendererService.formElements[name]) {\r\n throw new Error('FormElement ' + name + ' decorator is already registered');\r\n }\r\n return function (constructor: Type) {\r\n FormRendererService.formElements[name] = constructor;\r\n };\r\n}\r\n","import { EnvironmentProviders, makeEnvironmentProviders, Type } from '@angular/core';\r\nimport { FormElementBase } from '../form-element-renderer/form-element-base';\r\nimport { FormRendererService } from './form-renderer.service';\r\n\r\nexport function provideFormElement(\r\n type: Type, name: string\r\n): EnvironmentProviders {\r\n if (!name) {\r\n throw new Error('provideFormElement requires a name');\r\n }\r\n if (FormRendererService.formElements[name]) {\r\n throw new Error('FormElement ' + name + ' is already registered');\r\n }\r\n FormRendererService.formElements[name] = type;\r\n return makeEnvironmentProviders([]);\r\n}\r\n","import { Component, Input } from '@angular/core';\r\nimport { HeaderComponent } from './header.component';\r\n\r\n@Component({\r\n selector: 'm-header-defaults',\r\n template: '',\r\n })\r\nexport class HeaderDefaultsComponent {\r\n @Input()\r\n public set inverted(value: boolean) {\r\n HeaderComponent.defaults.inverted = value;\r\n HeaderComponent.defaults.invertedChange.next(value);\r\n }\r\n}\r\n","\r\nimport { Component, Input, Output } from '@angular/core';\r\nimport { Subject } from 'rxjs';\r\nimport { ButtonBaseComponent } from '../../base/button-base.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\n\r\n@Component({\n selector: 'm-image-upload',\n templateUrl: './image-upload.component.html',\n styleUrls: ['./image-upload.component.scss'],\n imports: [],\n providers: [...ButtonBaseComponent.providers]\n})\r\nexport class ImageUploadComponent extends ButtonBaseComponent {\r\n private readonly previewImageChangeSubject = new Subject();\r\n private readonly uploadSubject = new Subject();\r\n public isPreviewVisible = true;\r\n private isPreviewImageChangeForced = false;\r\n\r\n @Input()\r\n public previewImage?: string;\r\n\r\n @Input()\r\n public radius?: number;\r\n\r\n @Input()\r\n public previewWidth?: number;\r\n\r\n @Input()\r\n public previewHeight?: number;\r\n\r\n @Input()\r\n public width?: number;\r\n\r\n @Input()\r\n public height?: number;\r\n\r\n @Input()\r\n public set hidePreview(value: BooleanLike) {\r\n this.isPreviewVisible = !this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public set forcePreviewImageChange(value: BooleanLike) {\r\n this.isPreviewImageChangeForced = this.toBoolean(value);\r\n }\r\n\r\n @Output()\r\n public readonly previewImageChange = this.previewImageChangeSubject.asObservable();\r\n\r\n @Output()\r\n public readonly upload = this.uploadSubject.asObservable();\r\n\r\n protected onUpload(fileList: FileList | null): void {\r\n if (!fileList?.length) {\r\n return;\r\n }\r\n this.uploadSubject.next(fileList);\r\n const files = Array.from(fileList);\r\n if (this.isPreviewVisible || this.isPreviewImageChangeForced) {\r\n this.showPreview(files[0]);\r\n }\r\n }\r\n\r\n private showPreview(file: File): void {\r\n const reader = new FileReader();\r\n const image = new Image();\r\n reader.onload = () => {\r\n image.src = reader.result?.toString() ?? '';\r\n };\r\n image.onload = () => {\r\n let width = this.width || image.width;\r\n let height = this.height || image.height;\r\n const widthRatio = image.width / width;\r\n const heightRatio = image.height / height;\r\n const ratio = Math.max(widthRatio, heightRatio);\r\n if (!this.width) {\r\n width = image.width / ratio;\r\n }\r\n if (!this.height) {\r\n height = image.height / ratio;\r\n }\r\n const imageWidth = image.width / ratio;\r\n const imageHeight = image.height / ratio;\r\n const canvas = document.createElement('canvas');\r\n canvas.width = width;\r\n canvas.height = height;\r\n const left = (width - imageWidth) / 2;\r\n const top = (height - imageHeight) / 2;\r\n const context = canvas.getContext('2d');\r\n context?.drawImage(image, left, top, imageWidth, imageHeight);\r\n this.previewImage = canvas.toDataURL('image/png', 1);\r\n this.previewImageChangeSubject.next(this.previewImage);\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n}\r\n","@if (isPreviewVisible) {\n
\n \"\"\n
\n}\n
\n \n
\n\n","import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';\r\nimport { ButtonDirective } from '../../../directives/button.directive';\r\n\r\n@Component({\n selector: 'm-file-input',\n templateUrl: './file-input.component.html',\n styleUrls: ['./file-input.component.scss'],\n imports: [\n ButtonDirective\n ]\n})\r\nexport class FileInputComponent {\r\n public readonly id = `file_input_${Date.now()}_${Math.floor(Math.random() * 1000000)}`;\r\n\r\n @ViewChild('input')\r\n public input: ElementRef | undefined;\r\n\r\n public get files(): FileList | undefined {\r\n return this.input?.nativeElement.files ?? undefined;\r\n }\r\n\r\n @Input()\r\n public accept: string | undefined;\r\n\r\n @Output()\r\n public readonly change = new EventEmitter();\r\n\r\n}\r\n","\r\n\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { FallbackForDirective } from '../../../directives/fallback-for.directive';\r\nimport { DateHelper } from '../../../helpers/date-helper';\r\nimport { IconComponent } from '../../icon/icon.component';\r\nimport { InputBaseComponent } from '../input-base.component';\r\n\r\n@Component({\r\n selector: 'm-time-input',\r\n templateUrl: './time-input.component.html',\r\n styleUrls: ['./time-input.component.scss'],\r\n imports: [FormsModule, IconComponent, FallbackForDirective, NgTemplateOutlet],\r\n providers: [...InputBaseComponent.providers]\r\n})\r\nexport class TimeInputComponent extends InputBaseComponent implements OnInit {\r\n private valueField: Date | undefined;\r\n\r\n // eslint-disable-next-line no-null/no-null\r\n protected internalValue: string | null = null;\r\n\r\n @Input()\r\n public get value(): Date | undefined {\r\n return this.valueField;\r\n }\r\n\r\n public set value(value: Date | number | string | undefined) {\r\n value = value ? new Date(value) : undefined;\r\n value = isNaN(value?.getDate() as any) ? undefined : value;\r\n if (value != this.valueField) {\r\n this.setInternalValue(value);\r\n }\r\n this.valueField = value;\r\n }\r\n\r\n @Input()\r\n public get time(): Date {\r\n return this.value ?? this.default;\r\n }\r\n\r\n public set time(value: Date | number | string | undefined) {\r\n this.value = value;\r\n }\r\n\r\n @Input()\r\n public default = new Date(0);\r\n\r\n @Input()\r\n public min: Date | undefined;\r\n\r\n @Input()\r\n public max: Date | undefined;\r\n\r\n @Output()\r\n public readonly valueChange = new EventEmitter();\r\n\r\n @Output()\r\n public readonly timeChange = new EventEmitter();\r\n\r\n @ContentChild('input')\r\n protected set contentInputElement(input: ElementRef) {\r\n this.unbindEvents();\r\n this.inputElement = input;\r\n this.refreshInput();\r\n this.bindEvents();\r\n this.refreshFocus();\r\n }\r\n\r\n @ViewChild('input')\r\n protected set viewInputElement(input: ElementRef) {\r\n this.unbindEvents();\r\n this.inputElement = input;\r\n this.bindEvents();\r\n this.refreshFocus();\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('min', 'max', 'defaultValue', 'value', 'time');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n // Set internal value on blur to ensure a invalid value is overwritten\r\n this.blur.subscribe(() => this.setInternalValue(this.value));\r\n }\r\n\r\n protected onInternalChange(rawValue: string): void {\r\n const oldValue = this.valueField ? new Date(this.valueField) : this.valueField;\r\n let value = this.valueField ?? new Date();\r\n const chunks = rawValue.split(':');\r\n value.setHours(parseInt(chunks[0]) || 0, parseInt(chunks[1]) || 0, 0, 0);\r\n value = DateHelper.keepInRange(this.min, value, this.max);\r\n if (value !== this.valueField || oldValue !== value) {\r\n this.valueField = value;\r\n this.valueChange.emit(this.value);\r\n this.timeChange.emit(this.time);\r\n }\r\n }\r\n\r\n private setInternalValue(value: Date | null | undefined): void {\r\n // Use null to avoid strange input behaviour with undefined values (e.g. input of negative values requires two minus signs to work)\r\n // eslint-disable-next-line no-null/no-null\r\n this.internalValue = value?.toISOString().split('T')[1].replace('Z', '') ?? null;\r\n }\r\n\r\n}\r\n","@if (!isRight) {\n \n}\n@if (buttonPosition === 'left') {\n \n}\n\n\n@if (icon) {\n \n}\n@if (isRight) {\n \n}\n@if (buttonPosition === 'right') {\n \n}\n\n\n \n \n\n\n\n \n \n\n","import { Component, Input } from '@angular/core';\r\nimport { InputBaseComponent } from './input-base.component';\r\n\r\n@Component({\r\n selector: 'm-input-defaults',\r\n template: '',\r\n })\r\nexport class InputDefaultsComponent {\r\n\r\n @Input()\r\n public set inverted(value: boolean) {\r\n InputBaseComponent.defaults.inverted = value;\r\n InputBaseComponent.defaults.invertedChange.next(value);\r\n }\r\n}\r\n","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { LabelDropdownComponent } from './label-dropdown.component';\r\n\r\n@Component({\r\n selector: 'm-label-dropdown-defaults',\r\n template: '',\r\n })\r\nexport class LabelDropdownDefaultsComponent implements OnDestroy {\r\n private readonly previousDropdownIcon = LabelDropdownComponent.defaults.dropdownIcon;\r\n private readonly previousDropdownIconSize = LabelDropdownComponent.defaults.dropdownIconSize;\r\n private currentDropdownIcon?: IconType;\r\n private currentDropdownIconSize?: IconSize;\r\n\r\n @Input()\r\n public set dropdownIcon(value: IconType) {\r\n this.currentDropdownIcon = value;\r\n LabelDropdownComponent.defaults.dropdownIcon = value;\r\n }\r\n\r\n @Input()\r\n public set dropdownIconSize(value: IconSize) {\r\n this.currentDropdownIconSize = value;\r\n LabelDropdownComponent.defaults.dropdownIconSize = value;\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentDropdownIcon === LabelDropdownComponent.defaults.dropdownIcon) {\r\n LabelDropdownComponent.defaults.dropdownIcon = this.previousDropdownIcon;\r\n }\r\n if (this.currentDropdownIconSize === LabelDropdownComponent.defaults.dropdownIconSize) {\r\n LabelDropdownComponent.defaults.dropdownIconSize = this.previousDropdownIconSize;\r\n }\r\n }\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, Input, TemplateRef } from '@angular/core';\r\nimport { LayoutService } from '../../services/layout.service';\r\nimport { FooterComponent } from '../footer/footer.component';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { MenuItemComponent } from '../menu-item/menu-item.component';\r\nimport { MenuComponent } from '../menu/menu.component';\r\n\r\n@Component({\r\n selector: 'm-layout',\r\n templateUrl: './layout.component.html',\r\n styleUrls: ['./layout.component.scss'],\r\n imports: [MenuComponent, MenuItemComponent, IconComponent, FooterComponent, NgTemplateOutlet]\r\n})\r\nexport class LayoutComponent {\r\n public static readonly defaults = { menuIcon: 'bars', menuIconSize: undefined };\r\n protected readonly defaults = LayoutComponent.defaults;\r\n\r\n @Input()\r\n public showHamburger = false;\r\n\r\n @Input()\r\n public menuIcon: IconType | undefined;\r\n\r\n @Input()\r\n public menuIconSize: IconSize;\r\n\r\n public get menuTemplates(): TemplateRef[] {\r\n return this.layoutService.menuTemplates;\r\n }\r\n\r\n public get footerTemplates(): TemplateRef[] {\r\n return this.layoutService.footerTemplates;\r\n }\r\n\r\n public constructor(\r\n private readonly layoutService: LayoutService\r\n ) {\r\n }\r\n\r\n}\r\n","\n @if (showHamburger) {\n \n \n \n }\n @for (template of menuTemplates; track template) {\n \n }\n\n\n\n @for (template of footerTemplates; track template) {\n \n }\n\n","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { LayoutComponent } from './layout.component';\r\n\r\n@Component({\r\n selector: 'm-layout-defaults',\r\n template: '',\r\n })\r\nexport class LayoutDefaultsComponent implements OnDestroy {\r\n private readonly previousMenuIcon = LayoutComponent.defaults.menuIcon;\r\n private readonly previousMenuIconSize = LayoutComponent.defaults.menuIconSize;\r\n private currentMenuIcon?: IconType;\r\n private currentMenuIconSize?: IconSize;\r\n\r\n @Input()\r\n public set menuIcon(value: IconType) {\r\n this.currentMenuIcon = value;\r\n LayoutComponent.defaults.menuIcon = value;\r\n }\r\n\r\n @Input()\r\n public set menuIconSize(value: IconSize) {\r\n this.currentMenuIconSize = value;\r\n LayoutComponent.defaults.menuIconSize = value;\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentMenuIcon === LayoutComponent.defaults.menuIcon) {\r\n LayoutComponent.defaults.menuIcon = this.previousMenuIcon;\r\n }\r\n if (this.currentMenuIconSize === LayoutComponent.defaults.menuIconSize) {\r\n LayoutComponent.defaults.menuIconSize = this.previousMenuIconSize;\r\n }\r\n }\r\n}\r\n","export const localizeDictionary = new Map();\r\n\r\nexport function localize(key: string, fallback?: string): string {\r\n return localizeDictionary.get(key) ?? fallback ?? key;\r\n}\r\n","import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, inject, input, OnInit } from '@angular/core';\r\nimport { localizeDictionary } from './localize';\r\n\r\n@Component({\n selector: 'm-localize',\n imports: [],\n templateUrl: './localize.component.html',\n styleUrl: './localize.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\r\nexport class LocalizeComponent implements AfterViewInit, OnInit {\r\n private readonly elementRef = inject(ElementRef);\r\n public readonly key = input.required();\r\n\r\n public ngOnInit(): void {\r\n localizeDictionary.set(this.key(), this.elementRef.nativeElement.textContent);\r\n }\r\n\r\n public ngAfterViewInit(): void {\r\n localizeDictionary.set(this.key(), this.elementRef.nativeElement.textContent);\r\n }\r\n}\r\n","\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownHeader1 extends MarkdownElement {\r\n type: 'header1';\r\n elements: MarkdownElement[];\r\n isBlock: true;\r\n}\r\n\r\nexport const markdownHeader1Type = 'header1';\r\nexport const isMarkdownHeader1 = (element: MarkdownElement): element is MarkdownHeader1 => element?.type === markdownHeader1Type;\r\n\r\nexport interface MarkdownHeader2 extends MarkdownElement {\r\n type: 'header2';\r\n elements: MarkdownElement[];\r\n isBlock: true;\r\n}\r\n\r\nexport const markdownHeader2Type = 'header2';\r\nexport const isMarkdownHeader2 = (element: MarkdownElement): element is MarkdownHeader2 => element?.type === markdownHeader2Type;\r\n\r\nexport interface MarkdownHeader3 extends MarkdownElement {\r\n type: 'header3';\r\n elements: MarkdownElement[];\r\n isBlock: true;\r\n}\r\n\r\nexport const markdownHeader3Type = 'header3';\r\nexport const isMarkdownHeader3 = (element: MarkdownElement): element is MarkdownHeader3 => element?.type === markdownHeader3Type;\r\n\r\nexport interface MarkdownHeader4 extends MarkdownElement {\r\n type: 'header4';\r\n elements: MarkdownElement[];\r\n isBlock: true;\r\n}\r\n\r\nexport const markdownHeader4Type = 'header4';\r\nexport const isMarkdownHeader4 = (element: MarkdownElement): element is MarkdownHeader4 => element?.type === markdownHeader4Type;\r\n\r\nexport interface MarkdownHeader5 extends MarkdownElement {\r\n type: 'header5';\r\n elements: MarkdownElement[];\r\n isBlock: true;\r\n}\r\n\r\nexport const markdownHeader5Type = 'header5';\r\nexport const isMarkdownHeader5 = (element: MarkdownElement): element is MarkdownHeader5 => element?.type === markdownHeader5Type;\r\n\r\nexport interface MarkdownHeader6 extends MarkdownElement {\r\n type: 'header6';\r\n elements: MarkdownElement[];\r\n isBlock: true;\r\n}\r\n\r\nexport const markdownHeader6Type = 'header6';\r\nexport const isMarkdownHeader6 = (element: MarkdownElement): element is MarkdownHeader6 => element?.type === markdownHeader6Type;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownCodeBlock extends MarkdownElement {\r\n type: 'code-block';\r\n language: string | undefined;\r\n code: string | undefined;\r\n isBlock: true;\r\n}\r\n\r\nexport const markdownCodeBlockType = 'code-block';\r\nexport const isMarkdownCodeBlock = (element: MarkdownElement): element is MarkdownCodeBlock => element?.type === markdownCodeBlockType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownSeparator extends MarkdownElement {\r\n type: 'separator';\r\n isBlock: true;\r\n}\r\n\r\nexport const markdownSeparatorType = 'separator';\r\nexport const isMarkdownSeparator = (element: MarkdownElement): element is MarkdownSeparator => element?.type === markdownSeparatorType;\r\n","export const cast = (value: T): T => value;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownCode extends MarkdownElement {\r\n type: 'code';\r\n code: string | undefined;\r\n}\r\n\r\nexport const markdownCodeType = 'code';\r\nexport const isMarkdownCode = (element: MarkdownElement): element is MarkdownCode => element?.type === markdownCodeType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownImage extends MarkdownElement {\r\n type: 'image';\r\n alt: string;\r\n url: string;\r\n}\r\n\r\nexport const markdownImageType = 'image';\r\nexport const isMarkdownImage = (element: MarkdownElement): element is MarkdownImage => element?.type === markdownImageType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownLink extends MarkdownElement {\r\n type: 'link';\r\n elements: MarkdownElement[];\r\n url: string;\r\n}\r\n\r\nexport const markdownLinkType = 'link';\r\nexport const isMarkdownLink = (element: MarkdownElement): element is MarkdownLink => element?.type === markdownLinkType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownItalic extends MarkdownElement {\r\n type: 'italic';\r\n elements: MarkdownElement[];\r\n}\r\n\r\nexport const markdownItalicType = 'italic';\r\nexport const isMarkdownItalic = (element: MarkdownElement): element is MarkdownItalic => element?.type === markdownItalicType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownBold extends MarkdownElement {\r\n type: 'bold';\r\n elements: MarkdownElement[];\r\n}\r\n\r\nexport const markdownBoldType = 'bold';\r\nexport const isMarkdownBold = (element: MarkdownElement): element is MarkdownBold => element?.type === markdownBoldType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownStrikethrough extends MarkdownElement {\r\n type: 'strikethrough';\r\n elements: MarkdownElement[];\r\n}\r\n\r\nexport const markdownStrikethroughType = 'strikethrough';\r\nexport const isMarkdownStrikethrough = (element: MarkdownElement): element is MarkdownStrikethrough => element?.type === markdownStrikethroughType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownText extends MarkdownElement {\r\n type: 'text';\r\n text: string;\r\n}\r\n\r\nexport const markdownTextType = 'text';\r\nexport const isMarkdownText = (element: MarkdownElement): element is MarkdownText => element?.type === markdownTextType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownCustomElement extends MarkdownElement {\r\n type: 'custom-element';\r\n isBlock: true;\r\n code: string | undefined;\r\n data: Record | undefined;\r\n}\r\n\r\nexport const markdownCustomElementType = 'custom-element';\r\nexport const isMarkdownCustomElement = (element: MarkdownElement): element is MarkdownCustomElement => element?.type === markdownCustomElementType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownEmpty extends MarkdownElement {\r\n type: 'empty';\r\n}\r\n\r\nexport const markdownEmptyType = 'empty';\r\nexport const isMarkdownElement = (element: MarkdownElement): element is MarkdownEmpty => element?.type === markdownEmptyType;\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownList extends MarkdownElement {\r\n type: 'list';\r\n style: 'unordered';\r\n level: number;\r\n items: MarkdownListItem[];\r\n}\r\n\r\nexport interface MarkdownListItem extends MarkdownElement {\r\n type: 'list-item';\r\n elements: MarkdownElement[];\r\n}\r\n\r\nexport const markdownListType = 'list';\r\nexport const isMarkdownList = (element: MarkdownElement): element is MarkdownList => element?.type === markdownListType;\r\n","import { Injectable, Type } from '@angular/core';\r\nimport { MarkdownBlockParser } from './models/markdown-block-parser';\r\nimport { MarkdownInlineParser } from './models/markdown-inline-parser';\r\nimport { MarkdownHeader1, markdownHeader1Type, MarkdownHeader2, markdownHeader2Type, MarkdownHeader3, markdownHeader3Type, MarkdownHeader4, markdownHeader4Type, MarkdownHeader5, markdownHeader5Type, MarkdownHeader6, markdownHeader6Type } from './models/markdown-header';\r\nimport { MarkdownCodeBlock, markdownCodeBlockType } from './models/markdown-code-block';\r\nimport { MarkdownSeparator, markdownSeparatorType } from './models/markdown-separator';\r\nimport { MarkdownElement } from './models/markdown-element';\r\nimport { cast } from '../../helpers/cast';\r\nimport { MarkdownCode, markdownCodeType } from './models/markdown-code';\r\nimport { MarkdownImage, markdownImageType } from './models/markdown-image';\r\nimport { MarkdownLink, markdownLinkType } from './models/markdown-link';\r\nimport { MarkdownItalic, markdownItalicType } from './models/markdown-italic';\r\nimport { MarkdownBold, markdownBoldType } from './models/markdown-bold';\r\nimport { MarkdownStrikethrough, markdownStrikethroughType } from './models/markdown-strikethrough';\r\nimport { MarkdownParagraph } from './models/markdown-paragraph';\r\nimport { MarkdownText, markdownTextType } from './models/markdown-text';\r\nimport { MarkdownCustomElement, markdownCustomElementType } from './models/markdown-custom-element';\r\nimport { MarkdownEmpty, markdownEmptyType } from './models/markdown-empty';\r\nimport { ComponentParser } from '../dynamic-component/component-parser';\r\nimport { isMarkdownList, MarkdownList, MarkdownListItem, markdownListType } from './models/markdown-list';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class MarkdownParser {\r\n private readonly blockParsers: MarkdownBlockParser[] = [];\r\n private readonly inlineParsers: MarkdownInlineParser[] = [];\r\n\r\n public constructor() {\r\n this.registerBlockParser({\r\n regex: /^\\s*#(?[^#].*)$/,\r\n factory: (result: RegExpExecArray): MarkdownHeader1 => ({\r\n type: markdownHeader1Type,\r\n elements: this.parseInline(result.groups?.['inline']?.trim()),\r\n isBlock: true\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^\\s*#{2}(?[^#].*)$/,\r\n factory: (result: RegExpExecArray): MarkdownHeader2 => ({\r\n type: markdownHeader2Type,\r\n elements: this.parseInline(result.groups?.['inline']?.trim()),\r\n isBlock: true\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^\\s*#{3}(?[^#].*)$/,\r\n factory: (result: RegExpExecArray): MarkdownHeader3 => ({\r\n type: markdownHeader3Type,\r\n elements: this.parseInline(result.groups?.['inline']?.trim()),\r\n isBlock: true\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^\\s*#{4}(?[^#].*)$/,\r\n factory: (result: RegExpExecArray): MarkdownHeader4 => ({\r\n type: markdownHeader4Type,\r\n elements: this.parseInline(result.groups?.['inline']?.trim()),\r\n isBlock: true\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^\\s*#{5}(?[^#].*)$/,\r\n factory: (result: RegExpExecArray): MarkdownHeader5 => ({\r\n type: markdownHeader5Type,\r\n elements: this.parseInline(result.groups?.['inline']?.trim()),\r\n isBlock: true\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^\\s*#{6}(?[^#].*)$/,\r\n factory: (result: RegExpExecArray): MarkdownHeader6 => ({\r\n type: markdownHeader6Type,\r\n elements: this.parseInline(result.groups?.['inline']?.trim()),\r\n isBlock: true\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^\\s*`{3}(?.*?)\\r?\\n(?(.|\\r?\\n)*?)`{3}$/g,\r\n factory: (result: RegExpExecArray): MarkdownCodeBlock => ({\r\n type: markdownCodeBlockType,\r\n language: result.groups?.['language'],\r\n code: result.groups?.['code'],\r\n isBlock: true\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^\\s*-{3}$/,\r\n factory: (): MarkdownSeparator => ({\r\n type: markdownSeparatorType,\r\n isBlock: true\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^\\s*(?<([^>]+)(.+?)<\\/\\2>)$/g,\r\n factory: (result: RegExpExecArray, data?: Record): MarkdownCustomElement => ({\r\n type: markdownCustomElementType,\r\n code: result.groups?.['code'],\r\n data,\r\n isBlock: true\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^\\s*$/g,\r\n factory: (): MarkdownEmpty => ({\r\n type: markdownEmptyType\r\n })\r\n });\r\n this.registerBlockParser({\r\n regex: /^(?\\s*)-\\s*(?.*)$/,\r\n factory: (result: RegExpExecArray, _, previous): MarkdownList | undefined => {\r\n const item: MarkdownListItem = {\r\n type: 'list-item',\r\n elements: this.parseInline(result.groups?.['inline'])\r\n };\r\n if (isMarkdownList(previous)) {\r\n previous.items.push(item);\r\n return undefined;\r\n }\r\n return {\r\n type: markdownListType,\r\n level: result.groups?.['level'].length ?? 0,\r\n style: 'unordered',\r\n items: [item],\r\n isBlock: true\r\n };\r\n }\r\n });\r\n\r\n this.registerInlineParser({\r\n regex: /`(?[^`].*?)`(?.*)/,\r\n factory: (result: RegExpExecArray): MarkdownElement[] => [\r\n ...this.parseInline(result.input.substring(0, result.index)),\r\n cast({\r\n type: markdownCodeType,\r\n code: result.groups?.['code']\r\n }),\r\n ...this.parseInline(result.groups?.['post'])\r\n ]\r\n });\r\n this.registerInlineParser({\r\n regex: /!\\[(?.*)]\\((?.*)\\)(?.*)/,\r\n factory: (result: RegExpExecArray): MarkdownElement[] => [\r\n ...this.parseInline(result.input.substring(0, result.index)),\r\n cast({\r\n type: markdownImageType,\r\n url: result.groups?.['url'] ?? '',\r\n alt: result.groups?.['alt'] ?? ''\r\n }),\r\n ...this.parseInline(result.groups?.['post'])\r\n ]\r\n });\r\n this.registerInlineParser({\r\n regex: /\\[(?.*)]\\((?.*)\\)(?.*)/,\r\n factory: (result: RegExpExecArray): MarkdownElement[] => [\r\n ...this.parseInline(result.input.substring(0, result.index)),\r\n cast({\r\n type: markdownLinkType,\r\n url: result.groups?.['url'] ?? '',\r\n elements: this.parseInline(result.groups?.['inline'])\r\n }),\r\n ...this.parseInline(result.groups?.['post'])\r\n ]\r\n });\r\n this.registerInlineParser({\r\n regex: /\\*(?.*?)\\*(?.*)/,\r\n factory: (result: RegExpExecArray): MarkdownElement[] => [\r\n ...this.parseInline(result.input.substring(0, result.index)),\r\n cast({\r\n type: markdownItalicType,\r\n elements: this.parseInline(result.groups?.['inline'])\r\n }),\r\n ...this.parseInline(result.groups?.['post'])\r\n ]\r\n });\r\n this.registerInlineParser({\r\n regex: /_(?.*?)_(?.*)/,\r\n factory: (result: RegExpExecArray): MarkdownElement[] => [\r\n ...this.parseInline(result.input.substring(0, result.index)),\r\n cast({\r\n type: markdownItalicType,\r\n elements: this.parseInline(result.groups?.['inline'])\r\n }),\r\n ...this.parseInline(result.groups?.['post'])\r\n ]\r\n });\r\n this.registerInlineParser({\r\n regex: /\\*\\*(?.*?)\\*\\*(?.*)/,\r\n factory: (result: RegExpExecArray): MarkdownElement[] => [\r\n ...this.parseInline(result.input.substring(0, result.index)),\r\n cast({\r\n type: markdownBoldType,\r\n elements: this.parseInline(result.groups?.['inline'])\r\n }),\r\n ...this.parseInline(result.groups?.['post'])\r\n ]\r\n });\r\n this.registerInlineParser({\r\n regex: /__(?.*?)__(?.*)/,\r\n factory: (result: RegExpExecArray): MarkdownElement[] => [\r\n ...this.parseInline(result.input.substring(0, result.index)),\r\n cast({\r\n type: markdownBoldType,\r\n elements: this.parseInline(result.groups?.['inline'])\r\n }),\r\n ...this.parseInline(result.groups?.['post'])\r\n ]\r\n });\r\n this.registerInlineParser({\r\n regex: /~~(?.*?)~~(?.*)/,\r\n factory: (result: RegExpExecArray): MarkdownElement[] => [\r\n ...this.parseInline(result.input.substring(0, result.index)),\r\n cast({\r\n type: markdownStrikethroughType,\r\n elements: this.parseInline(result.groups?.['inline'])\r\n }),\r\n ...this.parseInline(result.groups?.['post'])\r\n ]\r\n });\r\n\r\n }\r\n\r\n public registerBlockParser(parser: MarkdownBlockParser): void {\r\n this.blockParsers.push(parser);\r\n }\r\n\r\n public registerInlineParser(parser: MarkdownInlineParser): void {\r\n this.inlineParsers.push(parser);\r\n }\r\n\r\n public registerComponent(component: Type): void {\r\n ComponentParser.register(component);\r\n }\r\n\r\n public parse(value: string): MarkdownElement[] {\r\n const data = this.parseData(value);\r\n if (value.includes('\\n\\n')) {\r\n const elements: MarkdownElement[] = [];\r\n const paragraphs = value.split('\\n\\n');\r\n for (const paragraph of paragraphs) {\r\n elements.push(cast({\r\n type: 'paragraph',\r\n elements: this.parseBlock(paragraph, data),\r\n isBlock: true\r\n }));\r\n }\r\n return elements;\r\n }\r\n return this.parseBlock(value, data);\r\n }\r\n\r\n private parseData(value: string): Record {\r\n const data: Record = {};\r\n const regex = /(?.*?)<\\/m-json> *\\r?\\n?/gm;\r\n let match = regex.exec(value);\r\n while (match) {\r\n Object.assign(data, JSON.parse(match.groups?.['json'] ?? '{}'));\r\n match = regex.exec(value);\r\n }\r\n return data;\r\n }\r\n\r\n private parseBlock(text: string, data: Record): MarkdownElement[] {\r\n const lines = text.split('\\n');\r\n const elements: MarkdownElement[] = [];\r\n for (let line of lines) {\r\n line = line?.trimEnd();\r\n let parsed = false;\r\n for (const parser of this.blockParsers) {\r\n const regexResult = parser.regex.exec(line);\r\n if (regexResult) {\r\n const element = parser.factory(regexResult, data, elements[elements.length - 1]);\r\n if (element) {\r\n elements.push(element);\r\n }\r\n parsed = true;\r\n break;\r\n }\r\n }\r\n if (!parsed) {\r\n elements.push(...this.parseInline(line));\r\n }\r\n elements[elements.length - 1].breakLine = true;\r\n }\r\n return elements;\r\n }\r\n\r\n private parseInline(text: string | undefined): MarkdownElement[] {\r\n if (!text) {\r\n return [{ type: 'empty' }];\r\n }\r\n const elements: MarkdownElement[] = [];\r\n let firstResult: RegExpExecArray | undefined;\r\n let firstParser: MarkdownInlineParser | undefined;\r\n for (const parser of this.inlineParsers) {\r\n const regexResult = parser.regex.exec(text);\r\n if (regexResult && (!firstResult || regexResult.index <= firstResult.index)) {\r\n firstResult = regexResult;\r\n firstParser = parser;\r\n }\r\n }\r\n if (firstResult && firstParser) {\r\n elements.push(...firstParser.factory(firstResult));\r\n } else {\r\n elements.push(cast({ type: markdownTextType, text }));\r\n }\r\n return elements;\r\n }\r\n}\r\n","import { MarkdownElement } from './markdown-element';\r\n\r\nexport interface MarkdownParagraph extends MarkdownElement {\r\n type: 'paragraph';\r\n elements: MarkdownElement[];\r\n isBlock: true;\r\n}\r\n\r\nexport const markdownParagraphType = 'paragraph';\r\nexport const isMarkdownParagraph = (element: MarkdownElement): element is MarkdownParagraph => element?.type === markdownParagraphType;\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, inject, Input } from '@angular/core';\r\nimport { DynamicComponentComponent } from '../dynamic-component/dynamic-component.component';\r\nimport { MarkdownParser } from './markdown-parser';\r\nimport { isMarkdownBold, MarkdownBold, markdownBoldType } from './models/markdown-bold';\r\nimport { isMarkdownCode, MarkdownCode, markdownCodeType } from './models/markdown-code';\r\nimport { isMarkdownCodeBlock, MarkdownCodeBlock, markdownCodeBlockType } from './models/markdown-code-block';\r\nimport { isMarkdownCustomElement, MarkdownCustomElement, markdownCustomElementType } from './models/markdown-custom-element';\r\nimport { MarkdownElement } from './models/markdown-element';\r\nimport { markdownEmptyType } from './models/markdown-empty';\r\nimport { isMarkdownHeader1, isMarkdownHeader2, isMarkdownHeader3, isMarkdownHeader4, isMarkdownHeader5, isMarkdownHeader6, MarkdownHeader1, markdownHeader1Type, MarkdownHeader2, markdownHeader2Type, MarkdownHeader3, markdownHeader3Type, MarkdownHeader4, markdownHeader4Type, MarkdownHeader5, markdownHeader5Type, MarkdownHeader6, markdownHeader6Type } from './models/markdown-header';\r\nimport { isMarkdownImage, MarkdownImage, markdownImageType } from './models/markdown-image';\r\nimport { isMarkdownItalic, MarkdownItalic, markdownItalicType } from './models/markdown-italic';\r\nimport { isMarkdownLink, MarkdownLink, markdownLinkType } from './models/markdown-link';\r\nimport { isMarkdownList, MarkdownList, markdownListType } from './models/markdown-list';\r\nimport { isMarkdownParagraph, MarkdownParagraph, markdownParagraphType } from './models/markdown-paragraph';\r\nimport { markdownSeparatorType } from './models/markdown-separator';\r\nimport { isMarkdownStrikethrough, MarkdownStrikethrough, markdownStrikethroughType } from './models/markdown-strikethrough';\r\nimport { isMarkdownText, MarkdownText, markdownTextType } from './models/markdown-text';\r\n\r\n@Component({\r\n selector: 'm-markdown-renderer',\r\n imports: [CommonModule, DynamicComponentComponent],\r\n templateUrl: './markdown-renderer.component.html',\r\n styleUrls: ['./markdown-renderer.component.scss']\r\n})\r\nexport class MarkdownRendererComponent {\r\n private readonly parser = inject(MarkdownParser);\r\n private rawValue = '';\r\n protected elements: MarkdownElement[] = [];\r\n protected readonly markdownParagraphType = markdownParagraphType;\r\n protected readonly markdownHeader1Type = markdownHeader1Type;\r\n protected readonly markdownHeader2Type = markdownHeader2Type;\r\n protected readonly markdownHeader3Type = markdownHeader3Type;\r\n protected readonly markdownHeader4Type = markdownHeader4Type;\r\n protected readonly markdownHeader5Type = markdownHeader5Type;\r\n protected readonly markdownHeader6Type = markdownHeader6Type;\r\n protected readonly markdownCodeBlockType = markdownCodeBlockType;\r\n protected readonly markdownSeparatorType = markdownSeparatorType;\r\n protected readonly markdownCustomElementType = markdownCustomElementType;\r\n protected readonly markdownCodeType = markdownCodeType;\r\n protected readonly markdownImageType = markdownImageType;\r\n protected readonly markdownLinkType = markdownLinkType;\r\n protected readonly markdownItalicType = markdownItalicType;\r\n protected readonly markdownBoldType = markdownBoldType;\r\n protected readonly markdownStrikethroughType = markdownStrikethroughType;\r\n protected readonly markdownTextType = markdownTextType;\r\n protected readonly markdownEmptyType = markdownEmptyType;\r\n protected readonly markdownListType = markdownListType;\r\n\r\n @Input()\r\n public get value(): string {\r\n return this.rawValue;\r\n }\r\n\r\n public set value(value: string | undefined) {\r\n this.rawValue = value ?? '';\r\n this.elements.length = 0;\r\n if (!value) {\r\n return;\r\n }\r\n this.elements = this.parser.parse(value);\r\n }\r\n\r\n protected $elements(elements: []): MarkdownElement[] {\r\n return elements;\r\n }\r\n\r\n protected $paragraph(element: MarkdownElement): MarkdownParagraph | undefined {\r\n return isMarkdownParagraph(element) ? element : undefined;\r\n }\r\n\r\n protected $header1(element: MarkdownElement): MarkdownHeader1 | undefined {\r\n return isMarkdownHeader1(element) ? element : undefined;\r\n }\r\n\r\n protected $header2(element: MarkdownElement): MarkdownHeader2 | undefined {\r\n return isMarkdownHeader2(element) ? element : undefined;\r\n }\r\n\r\n protected $header3(element: MarkdownElement): MarkdownHeader3 | undefined {\r\n return isMarkdownHeader3(element) ? element : undefined;\r\n }\r\n\r\n protected $header4(element: MarkdownElement): MarkdownHeader4 | undefined {\r\n return isMarkdownHeader4(element) ? element : undefined;\r\n }\r\n\r\n protected $header5(element: MarkdownElement): MarkdownHeader5 | undefined {\r\n return isMarkdownHeader5(element) ? element : undefined;\r\n }\r\n\r\n protected $header6(element: MarkdownElement): MarkdownHeader6 | undefined {\r\n return isMarkdownHeader6(element) ? element : undefined;\r\n }\r\n\r\n protected $codeBlock(element: MarkdownElement): MarkdownCodeBlock | undefined {\r\n return isMarkdownCodeBlock(element) ? element : undefined;\r\n }\r\n\r\n protected $customElement(element: MarkdownElement): MarkdownCustomElement | undefined {\r\n return isMarkdownCustomElement(element) ? element : undefined;\r\n }\r\n\r\n protected $code(element: MarkdownElement): MarkdownCode | undefined {\r\n return isMarkdownCode(element) ? element : undefined;\r\n }\r\n\r\n protected $list(element: MarkdownElement): MarkdownList | undefined {\r\n return isMarkdownList(element) ? element : undefined;\r\n }\r\n\r\n protected $image(element: MarkdownElement): MarkdownImage | undefined {\r\n return isMarkdownImage(element) ? element : undefined;\r\n }\r\n\r\n protected $link(element: MarkdownElement): MarkdownLink | undefined {\r\n return isMarkdownLink(element) ? element : undefined;\r\n }\r\n\r\n protected $italic(element: MarkdownElement): MarkdownItalic | undefined {\r\n return isMarkdownItalic(element) ? element : undefined;\r\n }\r\n\r\n protected $bold(element: MarkdownElement): MarkdownBold | undefined {\r\n return isMarkdownBold(element) ? element : undefined;\r\n }\r\n\r\n protected $strikethrough(element: MarkdownElement): MarkdownStrikethrough | undefined {\r\n return isMarkdownStrikethrough(element) ? element : undefined;\r\n }\r\n\r\n protected $text(element: MarkdownElement): MarkdownText | undefined {\r\n return isMarkdownText(element) ? element : undefined;\r\n }\r\n}\r\n","\r\n\r\n\r\n \r\n \r\n

\r\n \r\n

\r\n \r\n \r\n

\r\n \r\n

\r\n \r\n \r\n

\r\n \r\n

\r\n \r\n \r\n

\r\n \r\n

\r\n \r\n \r\n

\r\n \r\n

\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n                {{codeBlock.code}}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {{code.code}}\r\n \r\n \r\n \r\n \r\n
    \r\n
  • \r\n \r\n
    • \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {{text.text}}\r\n \r\n \r\n Unknown element '{{element.type}}'\r\n
\r\n \r\n\r\n","import { Component } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\n\r\n@Component({\r\n selector: 'm-menu-header',\r\n templateUrl: './menu-header.component.html',\r\n styleUrls: ['./menu-header.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class MenuHeaderComponent extends BaseComponent {\r\n\r\n public constructor() {\r\n super();\r\n this.classes.registerFixed('header', 'item');\r\n }\r\n\r\n}\r\n","","import { Directive, TemplateRef } from '@angular/core';\r\nimport { LayoutService } from '../services/layout.service';\r\n\r\n@Directive({\r\n selector: '[m-menu-link-template]',\r\n })\r\nexport class MenuLinkTemplateDirective {\r\n public constructor(\r\n private readonly menuService: LayoutService,\r\n private readonly template: TemplateRef\r\n ) {\r\n this.menuService.menuTemplates.push(this.template);\r\n }\r\n}\r\n","import { Component } from '@angular/core';\r\nimport { TemplateTarget } from '../../models/template-target';\r\nimport { MenuLinkTemplateDirective } from '../../directives/menu-link-template.directive';\r\n\r\n@Component({\n selector: 'm-menu-link',\n templateUrl: './menu-link.component.html',\n styleUrls: ['./menu-link.component.scss'],\n imports: [\n MenuLinkTemplateDirective\n ]\n})\r\nexport class MenuLinkComponent {\r\n\r\n public readonly target = new TemplateTarget();\r\n\r\n}\r\n","\r\n \r\n\r\n","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { MessageComponent } from './message.component';\r\n\r\n@Component({\r\n selector: 'm-message-defaults',\r\n template: '',\r\n })\r\nexport class MessageDefaultsComponent implements OnDestroy {\r\n private readonly previousCloseIcon = MessageComponent.defaults.closeIcon;\r\n private readonly previousCloseIconSize = MessageComponent.defaults.closeIconSize;\r\n private currentCloseIcon?: IconType;\r\n private currentCloseIconSize?: IconType;\r\n\r\n @Input()\r\n public set closeIcon(value: IconType) {\r\n this.currentCloseIcon = value;\r\n MessageComponent.defaults.closeIcon = value;\r\n }\r\n\r\n @Input()\r\n public set closeIconSize(value: IconSize) {\r\n this.currentCloseIconSize = value;\r\n MessageComponent.defaults.closeIconSize = value;\r\n }\r\n\r\n @Input()\r\n public set inverted(value: boolean) {\r\n MessageComponent.defaults.inverted = value;\r\n MessageComponent.defaults.invertedChange.next(value);\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentCloseIcon === MessageComponent.defaults.closeIcon) {\r\n MessageComponent.defaults.closeIcon = this.previousCloseIcon;\r\n }\r\n if (this.currentCloseIconSize === MessageComponent.defaults.closeIconSize) {\r\n MessageComponent.defaults.closeIconSize = this.previousCloseIconSize;\r\n }\r\n }\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'm-modal-footer',\r\n template: ''\r\n})\r\nexport class ModalFooterComponent {\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'm-modal-header',\r\n template: ''\r\n})\r\nexport class ModalHeaderComponent {\r\n\r\n}\r\n","\r\nimport { Component, effect, ElementRef, EventEmitter, HostBinding, inject, input, Input, Output, viewChild } from '@angular/core';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { BasicDirective } from '../../directives/basic.directive';\r\nimport { FallbackForDirective } from '../../directives/fallback-for.directive';\r\nimport { toBoolean } from '../../helpers/to-boolean';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { ButtonComponent } from '../button/button.component';\r\nimport { DimmerComponent } from '../dimmer/dimmer.component';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { LoaderComponent } from '../loader/loader.component';\r\nimport { ModalFooterComponent } from './modal-footer.component';\r\nimport { ModalHeaderComponent } from './modal-header.component';\r\n\r\nexport type ModalSize =\r\n 'mini'\r\n | 'tiny'\r\n | 'small'\r\n | 'large';\r\n\r\n@Component({\r\n selector: 'm-modal',\r\n templateUrl: './modal.component.html',\r\n styleUrls: ['./modal.component.scss'],\r\n imports: [DimmerComponent, ModalHeaderComponent, ModalFooterComponent, IconComponent, ButtonComponent, LoaderComponent, FallbackForDirective],\r\n hostDirectives: [BasicDirective.default],\r\n providers: [...InvertibleComponent.providers]\r\n})\r\nexport class ModalComponent extends InvertibleComponent {\r\n public static readonly defaults = {\r\n closeIcon: 'close',\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n\r\n private isShowClose = false;\r\n private isShowHeader = true;\r\n private isShowFooter = true;\r\n private isHideDimmer = false;\r\n private isVisible = true;\r\n private isImageContent = false;\r\n private isFullscreen = false;\r\n private isScrolling = true;\r\n private isNoPadding = false;\r\n private isLoading = false;\r\n private readonly resizeObserver = new ResizeObserver(() => this.onResize());\r\n protected minGrowOnlyContentHeight = 0;\r\n\r\n private readonly basicDirective = inject(BasicDirective, { self: true });\r\n protected readonly defaults = ModalComponent.defaults;\r\n\r\n public readonly growOnly = input(false, { transform: toBoolean });\r\n public readonly contentElementRef = viewChild>('content');\r\n\r\n protected get basic(): boolean {\r\n return this.basicDirective.basic;\r\n }\r\n\r\n @Input()\r\n public header: string | undefined;\r\n\r\n @Input()\r\n public get showClose(): boolean {\r\n return this.isShowClose;\r\n }\r\n\r\n public set showClose(value: BooleanLike) {\r\n this.isShowClose = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get showHeader(): boolean {\r\n return this.isShowHeader;\r\n }\r\n\r\n public set showHeader(value: BooleanLike) {\r\n this.isShowHeader = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get hideHeader(): boolean {\r\n return !this.isShowHeader;\r\n }\r\n\r\n public set hideHeader(value: BooleanLike) {\r\n this.isShowHeader = !this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get showFooter(): boolean {\r\n return this.isShowFooter;\r\n }\r\n\r\n public set showFooter(value: BooleanLike) {\r\n this.isShowFooter = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get hideFooter(): boolean {\r\n return !this.isShowFooter;\r\n }\r\n\r\n public set hideFooter(value: BooleanLike) {\r\n this.isShowFooter = !this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.hide-dimmer')\r\n public get hideDimmer(): boolean {\r\n return this.isHideDimmer;\r\n }\r\n\r\n public set hideDimmer(value: BooleanLike) {\r\n this.isHideDimmer = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get visible(): boolean {\r\n return this.isVisible;\r\n }\r\n\r\n public set visible(value: BooleanLike) {\r\n this.isVisible = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get imageContent(): boolean {\r\n return this.isImageContent;\r\n }\r\n\r\n public set imageContent(value: BooleanLike) {\r\n this.isImageContent = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get fullscreen(): boolean {\r\n return this.isFullscreen;\r\n }\r\n\r\n public set fullscreen(value: BooleanLike) {\r\n this.isFullscreen = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public size: ModalSize | undefined;\r\n\r\n @Input()\r\n public get scrolling(): boolean {\r\n return this.isScrolling;\r\n }\r\n\r\n public set scrolling(value: BooleanLike) {\r\n this.isScrolling = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get noPadding(): boolean {\r\n return this.isNoPadding;\r\n }\r\n\r\n public set noPadding(value: BooleanLike) {\r\n this.isNoPadding = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get loading(): boolean {\r\n return this.isLoading;\r\n }\r\n\r\n public set loading(value: BooleanLike) {\r\n this.isLoading = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public minContentHeight: string | undefined;\r\n\r\n @Input()\r\n public maxContentHeight: string | undefined;\r\n\r\n @Input()\r\n public closeIcon: IconType | undefined;\r\n\r\n @Output()\r\n public readonly close = new EventEmitter();\r\n\r\n public constructor() {\r\n super(false);\r\n this.classes.register('visible', 'fullscreen', 'size', 'scrolling', 'imageContent', 'header', 'footer', 'showHeader', 'hideHeader', 'showFooter', 'hideFooter', 'hideDimmer', 'showClose', 'minContentHeight', 'maxContentHeight');\r\n ModalComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n\r\n effect(() => {\r\n const growOnly = this.growOnly();\r\n const ref = this.contentElementRef();\r\n if (!ref) {\r\n return;\r\n }\r\n if (growOnly) {\r\n this.resizeObserver.observe(ref.nativeElement);\r\n this.onResize();\r\n }\r\n else {\r\n this.minGrowOnlyContentHeight = 0;\r\n this.resizeObserver.unobserve(ref.nativeElement);\r\n }\r\n });\r\n }\r\n\r\n protected onClose(): void {\r\n this.close.emit();\r\n }\r\n\r\n protected onDimmerClick(event: MouseEvent): void {\r\n // Only close modal if dimmer was clicked\r\n if ((event.target as HTMLElement).closest('.modal')) {\r\n return;\r\n }\r\n if (this.showClose || this.showClose === undefined) {\r\n this.onClose();\r\n }\r\n }\r\n\r\n private onResize(): void {\r\n this.minGrowOnlyContentHeight = Math.max(this.minGrowOnlyContentHeight ?? 0, this.contentElementRef()?.nativeElement.clientHeight ?? 0);\r\n }\r\n}\r\n","\n
\n @if (showHeader) {\n
\n \n \n {{ header }}\n \n @if (basic && showClose === true || !basic && (showClose || showClose === undefined)) {\n @if (closeIcon || defaults.closeIcon) {\n \n }\n }\n
\n }\n
\n \n @if (loading) {\n \n \n \n }\n
\n @if (showFooter) {\n
\n \n \n Close\n \n
\n }\n
\n\n","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { ModalComponent } from './modal.component';\r\n\r\n@Component({\r\n selector: 'm-modal-defaults',\r\n template: ''\r\n})\r\nexport class ModalDefaultsComponent implements OnDestroy {\r\n private readonly previousCloseIcon = ModalComponent.defaults.closeIcon;\r\n private currentCloseIcon?: IconType;\r\n\r\n @Input()\r\n public set closeIcon(value: IconType) {\r\n this.currentCloseIcon = value;\r\n ModalComponent.defaults.closeIcon = value;\r\n }\r\n\r\n @Input()\r\n public set inverted(value: boolean) {\r\n ModalComponent.defaults.inverted = value;\r\n ModalComponent.defaults.invertedChange.next(value);\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentCloseIcon === ModalComponent.defaults.closeIcon) {\r\n ModalComponent.defaults.closeIcon = this.previousCloseIcon;\r\n }\r\n }\r\n}\r\n","import { InteropObservable, Subject, Subscribable } from 'rxjs';\r\n\r\nexport class AsyncAction implements InteropObservable {\r\n private readonly subject = new Subject();\r\n\r\n public readonly event = this.subject.asObservable();\r\n\r\n /**\r\n * Alias for done to support rxjs.Observer\r\n * @deprecated\r\n */\r\n public readonly next = this.done;\r\n\r\n public done(): void {\r\n this.subject.next();\r\n this.subject.complete();\r\n }\r\n\r\n public error(message?: string): void {\r\n this.subject.error(message);\r\n }\r\n\r\n public [Symbol.observable](): Subscribable {\r\n return this.subject;\r\n }\r\n}\r\n","import { Notification } from './notification';\r\nimport { NotificationHandler } from './notification-handler';\r\n\r\nexport class NotificationRef {\r\n public constructor(\r\n public readonly notification: Notification,\r\n private readonly handler: NotificationHandler\r\n ) {\r\n }\r\n\r\n public close(): void {\r\n this.handler.remove(this.notification);\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { Subject } from 'rxjs';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { AsyncAction } from './async-action';\r\nimport { Notification } from './notification';\r\nimport { NotificationHandler } from './notification-handler';\r\nimport { NotificationRef } from './notification-ref';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class NotificationService implements NotificationHandler {\r\n public static readonly defaults = {\r\n successIcon: 'check'\r\n };\r\n private readonly addedSubject = new Subject();\r\n private readonly removedSubject = new Subject();\r\n private readonly erroredSubject = new Subject();\r\n private readonly warnedSubject = new Subject();\r\n private readonly succeededSubject = new Subject();\r\n private readonly positivedSubject = new Subject();\r\n private readonly informedSubject = new Subject();\r\n private readonly messages: Record = {\r\n all: [],\r\n empty: []\r\n };\r\n\r\n public readonly added = this.addedSubject.asObservable();\r\n public readonly removed = this.removedSubject.asObservable();\r\n public readonly errored = this.erroredSubject.asObservable();\r\n public readonly warned = this.warnedSubject.asObservable();\r\n public readonly succeeded = this.succeededSubject.asObservable();\r\n public readonly positived = this.positivedSubject.asObservable();\r\n public readonly informed = this.informedSubject.asObservable();\r\n\r\n public get(group?: 'all' | 'empty' | string): Notification[] {\r\n group ||= 'all';\r\n if (!this.messages[group]) {\r\n this.messages[group] = [];\r\n }\r\n return this.messages[group];\r\n }\r\n\r\n public add(notification: Notification): NotificationRef {\r\n this.messages['all'].push(notification);\r\n if (notification.group) {\r\n this.get(notification.group).push(notification);\r\n }\r\n else {\r\n this.messages['empty'].push(notification);\r\n }\r\n this.addedSubject.next(notification);\r\n if (notification?.timeout && notification.timeout > 0) {\r\n setTimeout(() => this.remove(notification), notification.timeout);\r\n }\r\n return new NotificationRef(notification, this);\r\n }\r\n\r\n public remove(notification: Notification): void {\r\n const index = this.messages['all'].indexOf(notification);\r\n if (index >= 0) {\r\n this.messages['all'].splice(index, 1);\r\n }\r\n if (notification.group) {\r\n const groupIndex = this.messages[notification.group].indexOf(notification);\r\n if (groupIndex >= 0) {\r\n this.messages[notification.group].splice(groupIndex, 1);\r\n }\r\n }\r\n else {\r\n const groupIndex = this.messages['empty'].indexOf(notification);\r\n if (groupIndex >= 0) {\r\n this.messages['empty'].splice(groupIndex, 1);\r\n }\r\n }\r\n this.removedSubject.next(notification);\r\n }\r\n\r\n public async(processingText: string, doneText: string, errorText?: string): AsyncAction {\r\n const action = new AsyncAction();\r\n const loadingMessage: Notification = { type: 'none', text: processingText, loading: true, group: 'content' };\r\n this.add(loadingMessage);\r\n action.event.subscribe({\r\n next: () => {\r\n this.remove(loadingMessage);\r\n this.success(doneText, { icon: NotificationService.defaults.successIcon, group: 'content' });\r\n },\r\n error: (error: string, options?: { timeout: 10000 } | Partial) => {\r\n this.remove(loadingMessage);\r\n this.error(error ?? errorText ?? 'Could not execute action due to an unexpected network issue. Please retry or contact the support team.', options);\r\n }\r\n });\r\n return action;\r\n }\r\n\r\n public error(message: { timeout: 0 } | Partial): NotificationRef\r\n public error(text: string, options?: { timeout: 0 } | Partial): NotificationRef\r\n public error(textOrOptions: string | Partial, optionsFallback?: Partial): NotificationRef {\r\n const options: Partial = typeof textOrOptions === 'object' ? textOrOptions : optionsFallback ?? {};\r\n const text = typeof textOrOptions === 'string' ? textOrOptions : options.text;\r\n const notification: Notification = { timeout: 0, ...options, type: 'error', text };\r\n const ref = this.add(notification);\r\n this.erroredSubject.next(notification);\r\n return ref;\r\n }\r\n\r\n public warning(message: { timeout: 2000 } | Partial): NotificationRef\r\n public warning(text: string, options?: { timeout: 2000 } | Partial): NotificationRef\r\n public warning(textOrOptions: string | Partial, optionsFallback?: Partial): NotificationRef {\r\n const options: Partial = typeof textOrOptions === 'object' ? textOrOptions : optionsFallback ?? {};\r\n const text = typeof textOrOptions === 'string' ? textOrOptions : options.text;\r\n const notification: Notification = { timeout: 2000, ...options, type: 'warning', text };\r\n const ref = this.add(notification);\r\n this.warnedSubject.next(notification);\r\n return ref;\r\n }\r\n\r\n public success(message: { timeout: 2000 } | Partial): NotificationRef\r\n public success(text: string, options?: { timeout: 2000 } | Partial): NotificationRef\r\n public success(textOrOptions: string | Partial, optionsFallback?: Partial): NotificationRef {\r\n const options: Partial = typeof textOrOptions === 'object' ? textOrOptions : optionsFallback ?? {};\r\n const text = typeof textOrOptions === 'string' ? textOrOptions : options.text;\r\n const notification: Notification = { timeout: 2000, ...options, type: 'success', text };\r\n const ref = this.add(notification);\r\n this.succeededSubject.next(notification);\r\n return ref;\r\n }\r\n\r\n public positive(message: { timeout: 2000 } | Partial): NotificationRef\r\n public positive(text: string, options?: { timeout: 2000 } | Partial): NotificationRef\r\n public positive(textOrOptions: string | Partial, optionsFallback?: Partial): NotificationRef {\r\n const options: Partial = typeof textOrOptions === 'object' ? textOrOptions : optionsFallback ?? {};\r\n const text = typeof textOrOptions === 'string' ? textOrOptions : options.text;\r\n const notification: Notification = { timeout: 2000, ...options, type: 'positive', text };\r\n const ref = this.add(notification);\r\n this.positivedSubject.next(notification);\r\n return ref;\r\n }\r\n\r\n public info(message: { timeout: 2000 } | Partial): NotificationRef\r\n public info(text: string, options?: { timeout: 2000 } | Partial): NotificationRef\r\n public info(textOrOptions: string | Partial, optionsFallback?: Partial): NotificationRef {\r\n const options: Partial = typeof textOrOptions === 'object' ? textOrOptions : optionsFallback ?? {};\r\n const text = typeof textOrOptions === 'string' ? textOrOptions : options.text;\r\n const notification: Notification = { timeout: 2000, ...options, type: 'info', text };\r\n const ref = this.add(notification);\r\n this.positivedSubject.next(notification);\r\n return ref;\r\n }\r\n}\r\n","import { Component, Input, OnDestroy } from '@angular/core';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { NotificationService } from './notification.service';\r\n\r\n@Component({\r\n selector: 'm-notification-defaults',\r\n template: '',\r\n })\r\nexport class NotificationDefaultsComponent implements OnDestroy {\r\n private readonly previousSuccessIcon = NotificationService.defaults.successIcon;\r\n private currentSuccessIcon?: IconType;\r\n\r\n @Input()\r\n public set successIcon(value: IconType) {\r\n this.currentSuccessIcon = value;\r\n NotificationService.defaults.successIcon = value;\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this.currentSuccessIcon === NotificationService.defaults.successIcon) {\r\n NotificationService.defaults.successIcon = this.previousSuccessIcon;\r\n }\r\n }\r\n}\r\n","import { InjectionToken } from '@angular/core';\r\nimport { Notification } from './notification';\r\n\r\nexport const notificationToken = new InjectionToken('Notification');\r\n","import { inject, Injector, Pipe, PipeTransform } from '@angular/core';\r\nimport { Notification } from './notification';\r\nimport { notificationToken } from './notification-token';\r\n\r\n@Pipe({\r\n name: 'notificationInjector'\r\n})\r\nexport class NotificationInjectorPipe implements PipeTransform {\r\n private readonly injector = inject(Injector);\r\n\r\n public transform(message: Notification): Injector {\r\n return Injector.create({\r\n parent: this.injector,\r\n providers: [\r\n { provide: notificationToken, useValue: message }\r\n ]\r\n });\r\n }\r\n\r\n}\r\n","import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { MessageAttached, MessageComponent } from '../message/message.component';\r\nimport { Notification } from './notification';\r\nimport { NotificationInjectorPipe } from './notification-injector.pipe';\r\nimport { NotificationService } from './notification.service';\r\n\r\n@Component({\r\n selector: 'm-notification',\r\n templateUrl: './notification.component.html',\r\n styleUrls: ['./notification.component.scss'],\r\n imports: [MessageComponent, NotificationInjectorPipe, NgTemplateOutlet, NgComponentOutlet],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class NotificationComponent extends BaseComponent {\r\n @Input()\r\n public set fromService(value: string) {\r\n this.messages = this.notificationService.get(value);\r\n }\r\n\r\n @Input()\r\n public messages: Notification[] = [];\r\n\r\n @Input()\r\n public mode: 'overlap' | 'stack' = 'stack';\r\n\r\n @Input()\r\n public attached: MessageAttached;\r\n\r\n public constructor(\r\n private readonly notificationService: NotificationService\r\n ) {\r\n super();\r\n this.classes.register('fromService', 'mode');\r\n }\r\n\r\n public close(message: Notification, event: MouseEvent): void {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n this.notificationService.remove(message);\r\n }\r\n\r\n protected $message(message: unknown): Notification {\r\n return message as Notification;\r\n }\r\n}\r\n","@if (messages.length && mode === 'overlap') {\n \n}\n@if (mode === 'stack') {\n @for (message of messages; track message) {\n \n }\n}\n\n\n @if ($message(message); as message) {\n \n @if (message.component) {\n \n } @else {\n {{ message.text }}\n }\n \n }\n\n\n\n","import { Component, HostBinding } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'm-or',\r\n templateUrl: './or.component.html',\r\n })\r\nexport class OrComponent {\r\n @HostBinding('class.or')\r\n public readonly ui = true;\r\n}\r\n","","import { Component, HostBinding, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { FieldSize, ParsableFieldSize, parseFieldSize } from '../../models/field-size';\r\n\r\n@Component({\r\n selector: 'm-row',\r\n templateUrl: './row.component.html',\r\n styleUrls: ['./row.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class RowComponent extends BaseComponent {\r\n private columnsValue: FieldSize | undefined;\r\n private isStretched = false;\r\n\r\n @Input()\r\n public get columns(): FieldSize | undefined {\r\n return this.columnsValue;\r\n }\r\n\r\n public set columns(value: ParsableFieldSize) {\r\n this.columnsValue = parseFieldSize(value);\r\n this.classes.set('columns', this.columnsValue);\r\n this.classes.set('column', !!this.columnsValue);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.stretched')\r\n public get stretched(): boolean {\r\n return this.isStretched;\r\n }\r\n\r\n public set stretched(value: BooleanLike) {\r\n this.isStretched = this.toBoolean(value);\r\n }\r\n\r\n public constructor() {\r\n super(false);\r\n this.classes.register('columns', 'column', 'stretched')\r\n .registerFixed('row');\r\n }\r\n\r\n}\r\n","","import { Component, Input, OnInit } from '@angular/core';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { BasicDirective } from '../../directives/basic.directive';\r\nimport { ColorDirective } from '../../directives/color.directive';\r\nimport { LoadingDirective } from '../../directives/loading.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\n\r\nexport declare type SegmentAttached =\r\n 'top'\r\n | 'bottom';\r\n\r\n@Component({\r\n selector: 'm-segment',\r\n templateUrl: './segment.component.html',\r\n styleUrls: ['./segment.component.scss'],\r\n hostDirectives: [BasicDirective.default, ColorDirective.default, LoadingDirective.default],\r\n providers: SegmentComponent.providers\r\n})\r\nexport class SegmentComponent extends InvertibleComponent implements OnInit {\r\n public static readonly defaults = {\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1),\r\n raised: false,\r\n raisedChange: new ReplaySubject(1)\r\n };\r\n protected static override readonly providers = [...InvertibleComponent.providers];\r\n\r\n private isVertical = false;\r\n private isRaised = false;\r\n private isRaisedChanged = false;\r\n private isPlaceholder = false;\r\n private isSecondary = false;\r\n private isTertiary = false;\r\n private attachedValue: SegmentAttached | undefined;\r\n private isNoPadding = false;\r\n private isNoMargin = false;\r\n\r\n @Input()\r\n public get raised(): boolean {\r\n return this.isRaised;\r\n }\r\n\r\n public set raised(value: BooleanLike) {\r\n this.isRaisedChanged = true;\r\n this.isRaised = this.toBoolean(value);\r\n this.classes.set('raised', this.isRaised);\r\n }\r\n\r\n @Input()\r\n public get vertical(): boolean {\r\n return this.isVertical;\r\n }\r\n\r\n public set vertical(value: BooleanLike) {\r\n this.isVertical = this.toBoolean(value);\r\n this.classes.set('vertical', this.isVertical);\r\n }\r\n\r\n @Input()\r\n public get placeholder(): boolean {\r\n return this.isPlaceholder;\r\n }\r\n\r\n public set placeholder(value: BooleanLike) {\r\n this.isPlaceholder = this.toBoolean(value);\r\n this.classes.set('placeholder', this.isPlaceholder);\r\n }\r\n\r\n @Input()\r\n public get secondary(): boolean {\r\n return this.isSecondary;\r\n }\r\n\r\n public set secondary(value: BooleanLike) {\r\n this.isSecondary = this.toBoolean(value);\r\n this.classes.set('secondary', this.isSecondary);\r\n }\r\n\r\n @Input()\r\n public get tertiary(): boolean {\r\n return this.isTertiary;\r\n }\r\n\r\n public set tertiary(value: BooleanLike) {\r\n this.isTertiary = this.toBoolean(value);\r\n this.classes.set('tertiary', this.isTertiary);\r\n }\r\n\r\n public get attached(): SegmentAttached | undefined {\r\n return this.attachedValue;\r\n }\r\n\r\n @Input()\r\n public set attached(value: SegmentAttached | undefined) {\r\n this.attachedValue = value;\r\n this.classes.set('attachedValue', value);\r\n this.classes.set('attached', !!value);\r\n }\r\n\r\n @Input()\r\n public get noPadding(): boolean {\r\n return this.isNoPadding;\r\n }\r\n\r\n public set noPadding(value: BooleanLike) {\r\n this.isNoPadding = this.toBoolean(value);\r\n this.classes.set('noPadding', this.isNoPadding ? 'no-padding' : undefined);\r\n }\r\n\r\n @Input()\r\n public get noMargin(): boolean {\r\n return this.isNoMargin;\r\n }\r\n\r\n public set noMargin(value: BooleanLike) {\r\n this.isNoMargin = this.toBoolean(value);\r\n this.classes.set('noMargin', this.isNoMargin ? 'no-margin' : undefined);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('raised', 'vertical', 'placeholder', 'secondary', 'tertiary', 'attached', 'attachedValue', 'noPadding', 'noMargin')\r\n .registerFixed('segment');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n SegmentComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n SegmentComponent.defaults.raisedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshRaised(value));\r\n }\r\n\r\n private refreshRaised(value: boolean): void {\r\n if (this.isRaisedChanged) {\r\n return;\r\n }\r\n this.raised = value;\r\n this.isRaisedChanged = false;\r\n }\r\n}\r\n","","import { Component, Input } from '@angular/core';\r\nimport { SegmentComponent } from './segment.component';\r\n\r\n@Component({\r\n selector: 'm-segment-defaults',\r\n template: '',\r\n })\r\nexport class SegmentDefaultsComponent {\r\n @Input()\r\n public set inverted(value: boolean) {\r\n SegmentComponent.defaults.inverted = value;\r\n SegmentComponent.defaults.invertedChange.next(value);\r\n }\r\n\r\n @Input()\r\n public set raised(value: boolean) {\r\n SegmentComponent.defaults.raised = value;\r\n SegmentComponent.defaults.raisedChange.next(value);\r\n }\r\n}\r\n","import { Component, HostBinding, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\n\r\n@Component({\r\n selector: 'm-segment-group',\r\n templateUrl: './segment-group.component.html',\r\n styleUrls: ['./segment-group.component.scss'],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class SegmentGroupComponent extends BaseComponent {\r\n private isHorizontal = false;\r\n\r\n @Input()\r\n @HostBinding('class.horizontal')\r\n public get horizontal(): boolean {\r\n return this.isHorizontal;\r\n }\r\n\r\n public set horizontal(value: BooleanLike) {\r\n this.isHorizontal = this.toBoolean(value);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('horizontal')\r\n .registerFixed('segments');\r\n }\r\n\r\n}\r\n","","import { Component, HostBinding, Input } from '@angular/core';\r\nimport { BaseComponent } from '../../base/base.component';\r\nimport { FluidDirective } from '../../directives/fluid.directive';\r\nimport { InvertedDirective } from '../../directives/inverted.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\n\r\nexport declare type SidebarWidth =\r\n 'thin'\r\n | 'very thin'\r\n | 'wide'\r\n | 'very wide'\r\n | undefined;\r\n\r\nexport declare type SidebarPosition =\r\n 'left'\r\n | 'right'\r\n | 'top'\r\n | 'bottom';\r\n\r\n@Component({\r\n selector: 'm-sidebar',\r\n templateUrl: './sidebar.component.html',\r\n styleUrls: ['./sidebar.component.scss'],\r\n hostDirectives: [InvertedDirective.default, FluidDirective.default],\r\n providers: [...BaseComponent.providers]\r\n})\r\nexport class SidebarComponent extends BaseComponent {\r\n private widthValue: SidebarWidth;\r\n private isVisible = false;\r\n private positionValue: SidebarPosition | undefined;\r\n private noScrollingValue = false;\r\n\r\n @Input()\r\n public get visible(): boolean {\r\n return this.isVisible;\r\n }\r\n\r\n public set visible(value: BooleanLike) {\r\n this.isVisible = this.toBoolean(value);\r\n this.classes.set('visible', this.isVisible);\r\n }\r\n\r\n @Input()\r\n public get width(): SidebarWidth {\r\n return this.widthValue;\r\n }\r\n\r\n public set width(value: SidebarWidth) {\r\n this.widthValue = value;\r\n this.classes.set('width', value);\r\n }\r\n\r\n @Input()\r\n public get position(): SidebarPosition | undefined {\r\n return this.positionValue;\r\n }\r\n\r\n public set position(value: SidebarPosition | undefined) {\r\n this.positionValue = value;\r\n this.classes.set('position', value);\r\n }\r\n\r\n @Input()\r\n @HostBinding('class.no-scrolling')\r\n public get noScrolling(): boolean {\r\n return this.noScrollingValue;\r\n }\r\n\r\n public set noScrolling(value: BooleanLike) {\r\n this.noScrollingValue = this.toBoolean(value);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('width', 'position', 'visible', 'noScrolling')\r\n .registerFixed('sidebar');\r\n this.position = 'left';\r\n this.visible = true;\r\n this.refreshClasses();\r\n }\r\n\r\n public show(): void {\r\n this.visible = true;\r\n }\r\n\r\n public hide(): void {\r\n this.visible = false;\r\n }\r\n}\r\n","\r\n","import { Component, HostListener, Optional } from '@angular/core';\r\nimport { ButtonBaseComponent } from '../../base/button-base.component';\r\nimport { Key } from '../../models/key';\r\nimport { FormComponent } from '../form/form.component';\r\n\r\n@Component({\r\n selector: 'm-submit',\r\n templateUrl: './submit.component.html',\r\n styleUrls: ['./submit.component.scss'],\r\n imports: [],\r\n providers: [...ButtonBaseComponent.providers]\r\n})\r\nexport class SubmitComponent extends ButtonBaseComponent {\r\n\r\n public constructor(\r\n @Optional() private readonly form: FormComponent\r\n ) {\r\n super();\r\n }\r\n\r\n @HostListener('click')\r\n protected onClick(): void {\r\n this.submit();\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n protected onKeyDown(event: KeyboardEvent): void {\r\n if (Key.is(event, Key.space, Key.enter)) {\r\n this.submit();\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n protected submit(): void {\r\n if (!this.form) {\r\n return;\r\n }\r\n this.form.validateAndSubmit();\r\n }\r\n}\r\n","","import { Component, Input, OnInit } from '@angular/core';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { BasicDirective } from '../../directives/basic.directive';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\n\r\nexport declare type Align =\r\n | 'top'\r\n | 'bottom'\r\n | 'middle';\r\n\r\n@Component({\r\n selector: 'm-table',\r\n templateUrl: './table.component.html',\r\n styleUrls: ['./table.component.scss'],\r\n hostDirectives: [BasicDirective.default],\r\n providers: [...InvertibleComponent.providers]\r\n})\r\nexport class TableComponent extends InvertibleComponent implements OnInit {\r\n public static readonly defaults = {\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n\r\n private isCelled = true;\r\n private isUnstackable = false;\r\n private isVery = false;\r\n private alignedValue: Align | undefined;\r\n private isDefinition = false;\r\n private isCollapsing = false;\r\n\r\n @Input()\r\n public get celled(): boolean {\r\n return this.isCelled;\r\n }\r\n\r\n public set celled(value: BooleanLike) {\r\n this.isCelled = this.toBoolean(value);\r\n this.classes.set('celled', this.isCelled);\r\n }\r\n\r\n @Input()\r\n public get notCelled(): boolean {\r\n return !this.celled;\r\n }\r\n\r\n public set notCelled(value: BooleanLike) {\r\n this.celled = !this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get very(): boolean {\r\n return this.isVery;\r\n }\r\n\r\n public set very(value: BooleanLike) {\r\n this.isVery = this.toBoolean(value);\r\n this.classes.set('very', this.isVery);\r\n }\r\n\r\n @Input()\r\n public get unstackable(): boolean {\r\n return this.isUnstackable;\r\n }\r\n\r\n public set unstackable(value: BooleanLike) {\r\n this.isUnstackable = this.toBoolean(value);\r\n this.classes.set('unstackable', this.isUnstackable);\r\n }\r\n\r\n @Input()\r\n public get aligned(): Align | undefined {\r\n return this.alignedValue;\r\n }\r\n\r\n public set aligned(value: Align | undefined) {\r\n this.alignedValue = value;\r\n this.classes.set('aligned', value ? value + ' aligned' : undefined);\r\n }\r\n\r\n @Input()\r\n public get definition(): boolean {\r\n return this.isDefinition;\r\n }\r\n\r\n public set definition(value: BooleanLike) {\r\n this.isDefinition = this.toBoolean(value);\r\n this.classes.set('definition', this.isDefinition);\r\n }\r\n\r\n @Input()\r\n public get collapsing(): boolean {\r\n return this.isCollapsing;\r\n }\r\n\r\n public set collapsing(value: BooleanLike) {\r\n this.isCollapsing = this.toBoolean(value);\r\n this.classes.set('collapsing', this.isCollapsing);\r\n }\r\n\r\n public constructor() {\r\n super();\r\n this.classes.register('celled', 'notCelled', 'very', BasicDirective.basic, 'unstackable', 'aligned', 'definition', 'collapsing')\r\n .registerFixed('table');\r\n this.aligned ??= 'middle';\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n TableComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n}\r\n","\r\n","import { Component, Input } from '@angular/core';\r\nimport { TableComponent } from './table.component';\r\n\r\n@Component({\r\n selector: 'm-table-defaults',\r\n template: '',\r\n })\r\nexport class TableDefaultsComponent {\r\n @Input()\r\n public set inverted(value: boolean) {\r\n TableComponent.defaults.inverted = value;\r\n TableComponent.defaults.invertedChange.next(value);\r\n }\r\n}\r\n","import { NgIfContext, NgTemplateOutlet } from '@angular/common';\r\nimport { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';\r\nimport { SortedClassesService } from '../../services/sorted-classes.service';\r\nimport { IconSize } from '../icon/icon-size';\r\nimport { IconType } from '../icon/icon-type';\r\nimport { MenuItemComponent } from '../menu-item/menu-item.component';\r\n\r\n@Component({\r\n selector: 'm-tab',\r\n templateUrl: './tab.component.html',\r\n styleUrls: ['./tab.component.scss'],\r\n imports: [\r\n NgTemplateOutlet\r\n ],\r\n providers: [SortedClassesService]\r\n})\r\nexport class TabComponent extends MenuItemComponent {\r\n\r\n @Input()\r\n public name: string | undefined;\r\n\r\n @Input()\r\n public label: string | undefined;\r\n\r\n @Input()\r\n public icon: IconType | undefined;\r\n\r\n @Input()\r\n public iconSize: IconSize;\r\n\r\n @Input()\r\n // eslint-disable-next-line no-null/no-null\r\n public template: TemplateRef> | null = null;\r\n\r\n @Output()\r\n public readonly activate = new EventEmitter();\r\n\r\n @Output()\r\n public readonly deactivate = new EventEmitter();\r\n\r\n public constructor() {\r\n super(false);\r\n this.classes.register('name', 'label', 'icon');\r\n }\r\n\r\n public changeState(value: boolean | undefined): void {\r\n if (value === undefined || value === this.active) {\r\n return;\r\n }\r\n this.active = value;\r\n this.activeChange.emit(value);\r\n if (value) {\r\n this.activate.emit();\r\n }\r\n else {\r\n this.deactivate.emit();\r\n }\r\n }\r\n}\r\n","@if (activate) {\r\n @if (template) {\r\n \r\n } @else {\r\n \r\n }\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport { AfterViewInit, Component, ContentChildren, EventEmitter, HostBinding, Input, OnInit, Output, QueryList } from '@angular/core';\r\nimport { ActivatedRoute, NavigationEnd, Route, Router, Routes, UrlSegment } from '@angular/router';\r\nimport { ReplaySubject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { InvertibleComponent } from '../../base/invertible.component';\r\nimport { BooleanLike } from '../../models/boolean-like';\r\nimport { IconComponent } from '../icon/icon.component';\r\nimport { MenuComponent, MenuPosition } from '../menu/menu.component';\r\nimport { SegmentComponent } from '../segment/segment.component';\r\nimport { TabComponent } from '../tab/tab.component';\r\n\r\n@Component({\r\n selector: 'm-tab-group',\r\n templateUrl: './tab-group.component.html',\r\n styleUrls: ['./tab-group.component.scss'],\r\n imports: [SegmentComponent, MenuComponent, IconComponent, NgTemplateOutlet],\r\n providers: [...InvertibleComponent.providers]\r\n})\r\nexport class TabGroupComponent extends InvertibleComponent implements OnInit, AfterViewInit {\r\n public static readonly defaults = {\r\n inverted: false,\r\n invertedChange: new ReplaySubject(1)\r\n };\r\n\r\n private selectedIndexField: number | undefined;\r\n private isSelectByRoute = false;\r\n private routeParameterName = '';\r\n private isNoPadding = false;\r\n private tabsValue: QueryList | undefined;\r\n private isScrollable = false;\r\n private isPointing = false;\r\n private isSecondary = false;\r\n private isLoading = false;\r\n private routes: NamedRoute[] = [];\r\n\r\n @Input()\r\n public menu: MenuPosition = 'top';\r\n\r\n @Output()\r\n public readonly selectedIndexChange = new EventEmitter();\r\n\r\n @Input()\r\n public get pointing(): boolean {\r\n return this.isPointing;\r\n }\r\n\r\n public set pointing(value: BooleanLike) {\r\n this.isPointing = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get secondary(): boolean {\r\n return this.isSecondary;\r\n }\r\n\r\n public set secondary(value: BooleanLike) {\r\n this.isSecondary = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get loading(): boolean {\r\n return this.isLoading;\r\n }\r\n\r\n public set loading(value: BooleanLike) {\r\n this.isLoading = this.toBoolean(value);\r\n }\r\n\r\n @HostBinding('class')\r\n protected get menuPosition(): string {\r\n return 'menu-' + this.menu;\r\n }\r\n\r\n @HostBinding('class.horizontal')\r\n protected get horizontal(): boolean {\r\n return this.menu === 'left' || this.menu === 'right';\r\n }\r\n\r\n @Input()\r\n public get selectByRoute(): string {\r\n return this.routeParameterName;\r\n }\r\n\r\n public set selectByRoute(value: string) {\r\n this.isSelectByRoute = value === '' || !!value;\r\n this.routeParameterName = value || 'tab';\r\n }\r\n\r\n public get selectedIndex(): number | undefined {\r\n return this.selectedIndexField;\r\n }\r\n\r\n @Input()\r\n public set selectedIndex(value: number | undefined) {\r\n this.selectedIndexField = value;\r\n if (this.tabs) {\r\n this.tabs.forEach((tab, index) => tab.changeState(index === value));\r\n }\r\n }\r\n\r\n @Input()\r\n public get noPadding(): boolean {\r\n return this.isNoPadding;\r\n }\r\n\r\n public set noPadding(value: BooleanLike) {\r\n this.isNoPadding = this.toBoolean(value);\r\n }\r\n\r\n @Input()\r\n public get scrollable(): boolean {\r\n return this.isScrollable;\r\n }\r\n\r\n public set scrollable(value: BooleanLike) {\r\n this.isScrollable = this.toBoolean(value);\r\n }\r\n\r\n @ContentChildren(TabComponent)\r\n protected get tabs(): QueryList | undefined {\r\n return this.tabsValue;\r\n }\r\n\r\n protected set tabs(value: QueryList | undefined) {\r\n this.tabsValue = value;\r\n value?.changes.pipe(takeUntil(this.destroy)).subscribe(() => this.refreshTab());\r\n }\r\n\r\n public constructor(\r\n private readonly route: ActivatedRoute,\r\n private readonly router: Router\r\n ) {\r\n super(false);\r\n this.noClasses = true;\r\n this.classes.register('pointing', 'secondary', 'position', 'selectByRoute', 'routeParameterName', 'noPadding', 'menu', 'loading', 'scrollable');\r\n }\r\n\r\n public override ngOnInit(): void {\r\n super.ngOnInit();\r\n this.routes = this.parseRoutes(this.router.config, []);\r\n this.router.events.pipe(takeUntil(this.destroy)).subscribe(event => {\r\n if (event instanceof NavigationEnd) {\r\n this.refreshTab();\r\n }\r\n });\r\n TabGroupComponent.defaults.invertedChange.pipe(takeUntil(this.destroy)).subscribe(value => this.refreshInverted(value));\r\n }\r\n\r\n public ngAfterViewInit(): void {\r\n if (this.tabs && this.tabs.length > 0 && this.tabs.toArray().every(tab => !tab.active)) {\r\n setTimeout(() => this.tabs?.forEach((tab, index) => tab.changeState(index === (this.selectedIndex || 0))));\r\n }\r\n this.refreshTab();\r\n }\r\n\r\n private refreshTab(): void {\r\n if (!this.isSelectByRoute) {\r\n return;\r\n }\r\n let selectedTabName = this.route.snapshot.params[this.routeParameterName];\r\n const selectedTabIndex = parseInt(selectedTabName, 10);\r\n let found: TabComponent | undefined;\r\n if (selectedTabName) {\r\n selectedTabName = selectedTabName.toLowerCase();\r\n found = this.tabs?.find((tab, index) => tab.name && tab.name.toLocaleLowerCase() === selectedTabName || !tab.name && this.toName(tab.label) === selectedTabName || selectedTabIndex === index);\r\n\r\n }\r\n else {\r\n found = this.tabs?.find((_, index) => index === selectedTabIndex) || this.tabs?.find((_, index) => index === 0);\r\n }\r\n if (found) {\r\n const found2 = found;\r\n setTimeout(() => this.activate(found2));\r\n }\r\n }\r\n\r\n protected activate(tab: TabComponent): void {\r\n for (const activeTab of this.tabs?.filter(t => t.active) ?? []) {\r\n activeTab.changeState(false);\r\n }\r\n tab.changeState(true);\r\n this.selectedIndex = this.tabs?.toArray().indexOf(tab);\r\n this.selectedIndexChange.emit(this.selectedIndex);\r\n if (this.isSelectByRoute) {\r\n const name = tab.name || this.toName(tab.label);\r\n const urlSegments = this.getActiveRouteSegments();\r\n const segment = urlSegments.find(s => s.name === ':' + this.routeParameterName);\r\n if (segment?.path === name) {\r\n return;\r\n }\r\n if (segment) {\r\n const replaceUrl = !segment.path;\r\n segment.path = name;\r\n void this.router.navigate(urlSegments.map(s => s.path), { replaceUrl });\r\n return;\r\n }\r\n const activePath = urlSegments.map(segment => segment.name).join('/');\r\n const parameters = [\r\n ...urlSegments.filter(segment => segment.name.startsWith(':')).map(segment => segment.name.slice(1)),\r\n this.routeParameterName\r\n ];\r\n const possibleRoutes = this.routes.filter(route => route.fullPath.startsWith(activePath) && parameters.every(parameter => route.parameters.includes(parameter)))\r\n .sort((leftRoute, rightRoute) => leftRoute.parameters < rightRoute.parameters ? -1 : leftRoute.parameters > rightRoute.parameters ? 1 : 0);\r\n\r\n if (possibleRoutes.length === 0) {\r\n console.warn(`tab-group selectByRoute is set, but the route does not have a :${this.routeParameterName} parameter like { path: '/${urlSegments.map(s => s.path).join('/')}/:${this.routeParameterName}', component: ... }`);\r\n return;\r\n }\r\n const route = possibleRoutes[0];\r\n let fullPath = route.fullPath.replace(':' + this.routeParameterName, name);\r\n for (const parameterName of route.parameters) {\r\n const segmentValue = urlSegments.find(segment => segment.name === ':' + parameterName)?.path;\r\n fullPath = fullPath.replace(':' + parameterName, segmentValue ?? '');\r\n }\r\n void this.router.navigate(['/' + fullPath], { replaceUrl: true });\r\n }\r\n }\r\n\r\n private toName(value: string | undefined): string {\r\n return value ? value.toLocaleLowerCase().replace(/[^a-zA-Z0-9]/g, '-').replace(/-+/g, '-') : '';\r\n }\r\n\r\n private getActiveRouteSegments(): NamedUrlSegment[] {\r\n const segments: NamedUrlSegment[] = [];\r\n let current: ActivatedRoute | null = this.route;\r\n do {\r\n if (current?.snapshot?.routeConfig) {\r\n const names = current.routeConfig?.path?.split('/').reverse();\r\n for (const segment of current.snapshot.url.slice().reverse()) {\r\n segments.unshift(new NamedUrlSegment(names?.shift() ?? '', segment));\r\n }\r\n }\r\n current = current?.parent;\r\n }\r\n while (current);\r\n return segments;\r\n }\r\n\r\n private parseRoutes(routes: Routes, path: string[]): NamedRoute[] {\r\n const namedRoutes: NamedRoute[] = [];\r\n for (const route of routes) {\r\n const fullPath = [...path, route.path ?? ''].filter(path => !!path);\r\n namedRoutes.push({\r\n fullPath: fullPath.join('/'),\r\n parameters: fullPath.join('/').split('/').filter(parameter => parameter.startsWith(':')).map(parameter => parameter.slice(1)),\r\n ...route\r\n });\r\n if (route.children) {\r\n namedRoutes.push(...this.parseRoutes(route.children, fullPath));\r\n }\r\n }\r\n return namedRoutes;\r\n }\r\n}\r\n\r\nclass NamedUrlSegment extends UrlSegment {\r\n public constructor(\r\n public readonly name: string,\r\n segment: UrlSegment\r\n ) {\r\n super(segment.path, segment.parameters);\r\n Object.assign(this, segment);\r\n }\r\n}\r\n\r\ninterface NamedRoute extends Route {\r\n fullPath: string;\r\n parameters: string[];\r\n}\r\n","@if (menu === 'top' || menu === 'left') {\n \n}\n\n\n \n\n\n@if (menu === 'bottom' || menu === 'right') {\n \n}\n\n\n \n @for (tab of tabs; track tab) {\n \n @if (tab.icon) {\n \n }\n {{tab.label}}\n \n }\n \n\n","import { Component, Input } from '@angular/core';\r\nimport { TabGroupComponent } from './tab-group.component';\r\n\r\n@Component({\r\n selector: 'm-tab-group-defaults',\r\n template: '',\r\n })\r\nexport class TabGroupDefaultsComponent {\r\n @Input()\r\n public set inverted(value: boolean) {\r\n TabGroupComponent.defaults.inverted = value;\r\n TabGroupComponent.defaults.invertedChange.next(value);\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject, distinctUntilChanged, Observable, ReplaySubject, Subject } from 'rxjs';\r\nimport { Template } from '../models/template';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class TemplateService {\r\n private readonly subscriptions = new Map>();\r\n private readonly templates = new Map();\r\n\r\n public show(names: string | string[], template: Template): void {\r\n names = typeof names === 'string' ? [names] : names ?? [];\r\n const subscriptionSubject = new BehaviorSubject