@yuuvis/material 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# @yuuvis/material
+
+yuuvis Momentum component library based on [Angular Material](https://www.npmjs.com/package/@angular/material). 
+
+License: MIT

package/fesm2022/yuuvis-material.mjs

@@ -0,0 +1,229 @@
+import * as i0 from '@angular/core';
+import { Inject, Injectable, input, booleanAttribute, inject, EnvironmentInjector, ApplicationRef, ElementRef, effect, createComponent, Directive, makeEnvironmentProviders } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
+import * as i1 from '@angular/common/http';
+import * as i2 from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MatButton, MatIconButton } from '@angular/material/button';
+
+class YuvMatIconRegistry extends MatIconRegistry {
+    #yuvFontSetClassNames = ['material-symbols-sharp'];
+    constructor(_httpClient, _sanitizer, document, _errorHandler) {
+        super(_httpClient, _sanitizer, document, _errorHandler);
+        this.setDefaultFontSetClass();
+    }
+    setDefaultFontSetClass(...classnames) {
+        const merged = [...new Set([...classnames, ...this.#yuvFontSetClassNames])];
+        super.setDefaultFontSetClass(...merged);
+        return this;
+    }
+    static isFontIcon(input) {
+        if (typeof input === 'string') {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(input, 'image/svg+xml');
+            return coerceBooleanProperty(doc.querySelector('parsererror'));
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvMatIconRegistry, deps: [{ token: i1.HttpClient }, { token: i2.DomSanitizer }, { token: DOCUMENT }, { token: i0.ErrorHandler }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvMatIconRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvMatIconRegistry, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ErrorHandler }] });
+
+class YuvButtonDirective {
+    ymtButton = input('primary');
+    disabled = input(false, { transform: booleanAttribute });
+    ariaDisabled = input(false, { alias: 'aria-disabled', transform: booleanAttribute });
+    disableRipple = input(false, { transform: booleanAttribute });
+    disabledInteractive = input(false, { transform: booleanAttribute });
+    // Todo: Add input "isBusy" as "busy inactive state": not clickable and with mat-spinner in button
+    #environmentInjector = inject(EnvironmentInjector);
+    #applicationRef = inject(ApplicationRef);
+    #host = inject(ElementRef).nativeElement;
+    #matButtonComponentRef = null;
+    #iconPrefix = [];
+    #noneIconNodes = [];
+    #iconSuffix = [];
+    constructor() {
+        effect(() => {
+            const disabled = this.disabled();
+            const ariaDisabled = this.ariaDisabled();
+            const disableRipple = this.disableRipple();
+            const disabledInteractive = this.disabledInteractive();
+            this.#updateInputs(disabled, ariaDisabled, disableRipple, disabledInteractive);
+        });
+    }
+    ngOnInit() {
+        this.#iconPrefix = this.#getIconPrefixElements();
+        this.#noneIconNodes = this.#getNoneIconNodes();
+        this.#iconSuffix = this.#getIconSuffixElements();
+    }
+    ngAfterViewInit() {
+        this.#matButtonComponentRef = this.#createMatButtonComponent();
+        this.#updateInputs();
+    }
+    #updateInputs(disabled = this.disabled(), ariaDisabled = this.ariaDisabled(), disableRipple = this.disableRipple(), disabledInteractive = this.disabledInteractive()) {
+        this.#matButtonComponentRef?.setInput('disabled', disabled);
+        this.#matButtonComponentRef?.setInput('aria-disabled', ariaDisabled);
+        this.#matButtonComponentRef?.setInput('disableRipple', disableRipple);
+        this.#matButtonComponentRef?.setInput('disabledInteractive', disabledInteractive);
+    }
+    #createMatButtonComponent(host = this.#host, iconPrefix = this.#iconPrefix, noneIconNodes = this.#noneIconNodes, iconSuffix = this.#iconSuffix) {
+        const componentRef = createComponent(MatButton, {
+            environmentInjector: this.#environmentInjector,
+            hostElement: host,
+            projectableNodes: [[...iconPrefix], [...noneIconNodes], [...iconSuffix]]
+        });
+        this.#applicationRef.attachView(componentRef.hostView);
+        componentRef.changeDetectorRef.detectChanges();
+        return componentRef;
+    }
+    #getIconPrefixElements() {
+        return Array.from(this.#host.querySelectorAll('mat-icon:not([iconPositionEnd])'));
+    }
+    #getIconSuffixElements() {
+        return Array.from(this.#host.querySelectorAll('mat-icon[iconPositionEnd]'));
+    }
+    #getNoneIconNodes() {
+        const iter = document.createNodeIterator(this.#host, NodeFilter.SHOW_ALL, (node) => {
+            return node.nodeName.toLowerCase() !== 'mat-icon' && node.parentElement === this.#host
+                ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        });
+        let currentNode;
+        const filteredNodes = [];
+        while ((currentNode = iter.nextNode())) {
+            filteredNodes.push(currentNode);
+        }
+        return filteredNodes;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: YuvButtonDirective, isStandalone: true, selector: "button[ymtButton], a[ymtButton]", inputs: { ymtButton: { classPropertyName: "ymtButton", publicName: "ymtButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.mat-flat-button": "ymtButton() === \"primary\" ? \"\" : null", "attr.mat-stroked-button": "ymtButton() === \"secondary\" ? \"\" : null", "attr.mat-button": "ymtButton() === \"tertiary\" ? \"\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ymtButton], a[ymtButton]',
+                    standalone: true,
+                    host: {
+                        '[attr.mat-flat-button]': 'ymtButton() === "primary" ? "" : null',
+                        '[attr.mat-stroked-button]': 'ymtButton() === "secondary" ? "" : null',
+                        '[attr.mat-button]': 'ymtButton() === "tertiary" ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+const provideYuvMaterial = () => {
+    const providers = [
+        /**
+         * Material Icon Registry Service Override
+         */
+        { provide: MatIconRegistry, useClass: YuvMatIconRegistry },
+        YuvButtonDirective,
+        /**
+         * Material Tooltip Config
+         */
+        {
+            provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
+            useValue: {
+                showDelay: 500
+            }
+        },
+        /**
+         * Material Form Field Config
+         */
+        {
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: {
+                appearance: 'outline',
+                floatLabel: 'always'
+            }
+        }
+    ];
+    return makeEnvironmentProviders(providers);
+};
+
+var ICON_BUTTON_SIZE;
+(function (ICON_BUTTON_SIZE) {
+    ICON_BUTTON_SIZE["small"] = "small";
+    ICON_BUTTON_SIZE["medium"] = "medium";
+})(ICON_BUTTON_SIZE || (ICON_BUTTON_SIZE = {}));
+
+class IconButtonDirective {
+    disabled = input(false, { transform: booleanAttribute });
+    disableRipple = input(false, { transform: booleanAttribute });
+    ariaDisabled = input(false, { transform: booleanAttribute, alias: 'aria-disabled' });
+    disabledInteractive = input(false, { transform: booleanAttribute });
+    size = input(ICON_BUTTON_SIZE.medium, { alias: 'icon-button-size' });
+    #elRef = inject(ElementRef);
+    #host = this.#elRef.nativeElement;
+    #injector = inject(EnvironmentInjector);
+    #appRef = inject(ApplicationRef);
+    #MatIconButtonComponentRef = null;
+    #materialIconButtonInputs = [
+        { name: 'disabled', signal: this.disabled },
+        { name: 'disableRipple', signal: this.disableRipple },
+        { name: 'aria-disabled', signal: this.ariaDisabled },
+        { name: 'disabledInteractive', signal: this.disabledInteractive }
+    ];
+    constructor() {
+        effect(() => {
+            this.#applySizeClass();
+        });
+        effect(() => {
+            this.#setMaterialInputs();
+        });
+    }
+    ngOnInit() {
+        this.#MatIconButtonComponentRef = this.#createComponent();
+    }
+    #applySizeClass() {
+        this.size() === ICON_BUTTON_SIZE.small ? this.#host.classList.add(`ymt-icon-button--size-s`) : this.#host.classList.remove(`ymt-icon-button--size-s`);
+        this.size() === ICON_BUTTON_SIZE.medium ? this.#host.classList.add(`ymt-icon-button--size-m`) : this.#host.classList.remove(`ymt-icon-button--size-m`);
+    }
+    #setMaterialInputs() {
+        this.#materialIconButtonInputs.forEach(({ name, signal }) => {
+            this.#MatIconButtonComponentRef?.setInput(name, signal());
+        });
+    }
+    #createComponent() {
+        const matIcon = this.#host.querySelector('mat-icon'); //todo support also upcoming yuv-icon
+        const environmentInjector = this.#injector;
+        const hostElement = this.#host;
+        const componentRef = createComponent(MatIconButton, { hostElement, projectableNodes: [[matIcon]], environmentInjector });
+        this.#appRef.attachView(componentRef.hostView);
+        componentRef.changeDetectorRef.detectChanges();
+        return componentRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IconButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: IconButtonDirective, isStandalone: true, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "icon-button-size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "mat-icon-button": "" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IconButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]',
+                    standalone: true,
+                    host: {
+                        'mat-icon-button': ''
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+var index = {};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ICON_BUTTON_SIZE, IconButtonDirective, YuvButtonDirective, YuvMatIconRegistry, provideYuvMaterial };
+//# sourceMappingURL=yuuvis-material.mjs.map

package/fesm2022/yuuvis-material.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-material.mjs","sources":["../../../../../libs/yuuvis/material/src/lib/services/yuv-mat-icon-registry.service.ts","../../../../../libs/yuuvis/material/src/lib/directives/yuv-button.directive.ts","../../../../../libs/yuuvis/material/src/lib/providers/material.providers.ts","../../../../../libs/yuuvis/material/src/lib/directives/icon-button/icon-button.model.ts","../../../../../libs/yuuvis/material/src/lib/directives/icon-button/icon-button.directive.ts","../../../../../libs/yuuvis/material/src/lib/components/index.ts","../../../../../libs/yuuvis/material/src/yuuvis-material.ts"],"sourcesContent":["import { ErrorHandler, Inject, Injectable } from '@angular/core';\nimport { MatIconRegistry } from '@angular/material/icon';\nimport { HttpClient } from '@angular/common/http';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { DOCUMENT } from '@angular/common';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class YuvMatIconRegistry extends MatIconRegistry {\n  #yuvFontSetClassNames = ['material-symbols-sharp'];\n\n  constructor(_httpClient: HttpClient, _sanitizer: DomSanitizer, @Inject(DOCUMENT) document: any, _errorHandler: ErrorHandler) {\n    super(_httpClient, _sanitizer, document, _errorHandler);\n    this.setDefaultFontSetClass();\n  }\n\n  override setDefaultFontSetClass(...classnames: string[]) {\n    const merged = [...new Set([...classnames, ...this.#yuvFontSetClassNames])];\n    super.setDefaultFontSetClass(...merged);\n    return this;\n  }\n\n  static isFontIcon(input: string | null) {\n    if (typeof input === 'string') {\n      const parser = new DOMParser();\n      const doc = parser.parseFromString(input, 'image/svg+xml');\n      return coerceBooleanProperty(doc.querySelector('parsererror'));\n    }\n    return false;\n  }\n}\n","import {\n  ApplicationRef, ChangeDetectorRef,\n  createComponent,\n  Directive,\n  ElementRef,\n  EnvironmentInjector, input,\n  OnInit,\n  ViewContainerRef, Input, AfterViewInit, inject, effect, ComponentRef, booleanAttribute, signal, untracked\n} from '@angular/core';\nimport { MatButton } from '@angular/material/button';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\n\ntype ButtonType = 'primary' | 'secondary' | 'tertiary';\n\n@Directive({\n  selector: 'button[ymtButton], a[ymtButton]',\n  standalone: true,\n  host: {\n    '[attr.mat-flat-button]': 'ymtButton() === \"primary\" ? \"\" : null',\n    '[attr.mat-stroked-button]': 'ymtButton() === \"secondary\" ? \"\" : null',\n    '[attr.mat-button]': 'ymtButton() === \"tertiary\" ? \"\" : null',\n  },\n})\nexport class YuvButtonDirective implements OnInit, AfterViewInit {\n  ymtButton = input<ButtonType>('primary');\n  disabled = input(false, { transform: booleanAttribute });\n  ariaDisabled = input(false, { alias: 'aria-disabled',transform: booleanAttribute });\n  disableRipple = input(false, { transform: booleanAttribute });\n  disabledInteractive = input(false, { transform: booleanAttribute });\n  // Todo: Add input \"isBusy\" as \"busy inactive state\": not clickable and with mat-spinner in button\n  \n  #environmentInjector = inject(EnvironmentInjector);\n  #applicationRef = inject(ApplicationRef);\n  #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  \n  #matButtonComponentRef: ComponentRef<MatButton> | null = null;\n  \n  #iconPrefix: Element[] = [];\n  #noneIconNodes: Node[] = [];\n  #iconSuffix: Element[] = [];\n  \n  constructor() {\n    effect(() => {\n      const disabled = this.disabled();\n      const ariaDisabled = this.ariaDisabled();\n      const disableRipple = this.disableRipple();\n      const disabledInteractive = this.disabledInteractive();\n      this.#updateInputs(disabled, ariaDisabled, disableRipple, disabledInteractive);\n    });\n  }\n  \n  ngOnInit() {\n    this.#iconPrefix = this.#getIconPrefixElements();\n    this.#noneIconNodes = this.#getNoneIconNodes();\n    this.#iconSuffix = this.#getIconSuffixElements();\n  }\n  \n  ngAfterViewInit() {\n    this.#matButtonComponentRef = this.#createMatButtonComponent();\n    this.#updateInputs();\n  }\n  \n  #updateInputs(\n    disabled: boolean = this.disabled(),\n    ariaDisabled: boolean = this.ariaDisabled(),\n    disableRipple: boolean = this.disableRipple(),\n    disabledInteractive: boolean = this.disabledInteractive(),\n  ){\n    this.#matButtonComponentRef?.setInput('disabled', disabled);\n    this.#matButtonComponentRef?.setInput('aria-disabled', ariaDisabled);\n    this.#matButtonComponentRef?.setInput('disableRipple', disableRipple);\n    this.#matButtonComponentRef?.setInput('disabledInteractive', disabledInteractive);\n  }\n  \n  #createMatButtonComponent(\n    host: HTMLElement = this.#host,\n    iconPrefix: Element[] = this.#iconPrefix,\n    noneIconNodes: Node[] = this.#noneIconNodes,\n    iconSuffix: Element[] = this.#iconSuffix\n  ) {\n    const componentRef = createComponent(\n      MatButton,\n      {\n        environmentInjector: this.#environmentInjector,\n        hostElement: host,\n        projectableNodes: [[...iconPrefix],[...noneIconNodes],[...iconSuffix]]\n      });\n    this.#applicationRef.attachView(componentRef.hostView);\n    componentRef.changeDetectorRef.detectChanges();\n    return componentRef;\n  }\n  \n  #getIconPrefixElements() {\n    return Array.from(this.#host.querySelectorAll('mat-icon:not([iconPositionEnd])'));\n  }\n  \n  #getIconSuffixElements() {\n    return Array.from(this.#host.querySelectorAll('mat-icon[iconPositionEnd]'));\n  }\n  \n  #getNoneIconNodes() {\n    const iter = document.createNodeIterator(\n      this.#host,\n      NodeFilter.SHOW_ALL,\n      (node) => {\n        return node.nodeName.toLowerCase() !== 'mat-icon' && node.parentElement === this.#host\n          ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;\n      }\n    );\n    let currentNode: Node | null;\n    const filteredNodes: Node[] = [];\n    while ((currentNode = iter.nextNode())) {\n      filteredNodes.push(currentNode);\n    }\n    return filteredNodes;\n  }\n}\n","import { EnvironmentProviders, makeEnvironmentProviders, Provider } from '@angular/core';\nimport { MatIconRegistry } from '@angular/material/icon';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldDefaultOptions } from '@angular/material/form-field';\nimport { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';\nimport { YuvMatIconRegistry } from '../services/yuv-mat-icon-registry.service';\nimport { YuvButtonDirective } from '../directives/yuv-button.directive';\n\nexport const provideYuvMaterial = (): EnvironmentProviders => {\n  const providers: Provider[] = [\n    /**\n     * Material Icon Registry Service Override\n     */\n    { provide: MatIconRegistry, useClass: YuvMatIconRegistry },\n    YuvButtonDirective,\n\n    /**\n     * Material Tooltip Config\n     */\n    {\n      provide: MAT_TOOLTIP_DEFAULT_OPTIONS,\n      useValue: {\n        showDelay: 500\n      } as MatTooltipDefaultOptions\n    },\n    /**\n     * Material Form Field Config\n     */\n    {\n      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n      useValue: {\n        appearance: 'outline',\n        floatLabel: 'always'\n      } as MatFormFieldDefaultOptions\n    }\n  ];\n  return makeEnvironmentProviders(providers);\n};\n","export enum ICON_BUTTON_SIZE {\n  small = 'small',\n  medium = 'medium'\n}\n","import {\n  ApplicationRef,\n  booleanAttribute,\n  ComponentRef,\n  createComponent,\n  Directive,\n  effect,\n  ElementRef,\n  EnvironmentInjector,\n  inject,\n  input,\n  OnInit\n} from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { ICON_BUTTON_SIZE } from './icon-button.model';\n\n@Directive({\n  selector: 'button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]',\n  standalone: true,\n  host: {\n    'mat-icon-button': ''\n  }\n})\nexport class IconButtonDirective implements OnInit {\n  disabled = input(false, { transform: booleanAttribute });\n  disableRipple = input(false, { transform: booleanAttribute });\n  ariaDisabled = input(false, { transform: booleanAttribute, alias: 'aria-disabled' });\n  disabledInteractive = input(false, { transform: booleanAttribute });\n  size = input<'small' | 'medium' | ICON_BUTTON_SIZE>(ICON_BUTTON_SIZE.medium, { alias: 'icon-button-size' });\n\n  #elRef = inject(ElementRef);\n  #host = this.#elRef.nativeElement;\n  #injector = inject(EnvironmentInjector);\n  #appRef = inject(ApplicationRef);\n  #MatIconButtonComponentRef: ComponentRef<MatIconButton> | null = null;\n  #materialIconButtonInputs = [\n    { name: 'disabled', signal: this.disabled },\n    { name: 'disableRipple', signal: this.disableRipple },\n    { name: 'aria-disabled', signal: this.ariaDisabled },\n    { name: 'disabledInteractive', signal: this.disabledInteractive }\n  ];\n\n  constructor() {\n    effect(() => {\n      this.#applySizeClass();\n    });\n\n    effect(() => {\n      this.#setMaterialInputs();\n    });\n  }\n\n  ngOnInit(): void {\n    this.#MatIconButtonComponentRef = this.#createComponent();\n  }\n\n  #applySizeClass() {\n    this.size() === ICON_BUTTON_SIZE.small ? this.#host.classList.add(`ymt-icon-button--size-s`) : this.#host.classList.remove(`ymt-icon-button--size-s`);\n    this.size() === ICON_BUTTON_SIZE.medium ? this.#host.classList.add(`ymt-icon-button--size-m`) : this.#host.classList.remove(`ymt-icon-button--size-m`);\n  }\n\n  #setMaterialInputs() {\n    this.#materialIconButtonInputs.forEach(({ name, signal }) => {\n      this.#MatIconButtonComponentRef?.setInput(name, signal());\n    });\n  }\n\n  #createComponent() {\n    const matIcon = this.#host.querySelector('mat-icon'); //todo support also upcoming yuv-icon\n    const environmentInjector = this.#injector;\n    const hostElement = this.#host;\n    const componentRef = createComponent(MatIconButton, { hostElement, projectableNodes: [[matIcon]], environmentInjector });\n    this.#appRef.attachView(componentRef.hostView);\n    componentRef.changeDetectorRef.detectChanges();\n    return componentRef;\n  }\n}\n","export default {};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/providers';
+export * from './lib/services';
+export * from './lib/directives';
+export * from './lib/components';

package/lib/components/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/directives/icon-button/icon-button.directive.d.ts

@@ -0,0 +1,15 @@
+import { OnInit } from '@angular/core';
+import { ICON_BUTTON_SIZE } from './icon-button.model';
+import * as i0 from "@angular/core";
+export declare class IconButtonDirective implements OnInit {
+    #private;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    disableRipple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    ariaDisabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    disabledInteractive: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    size: import("@angular/core").InputSignal<"small" | "medium" | ICON_BUTTON_SIZE>;
+    constructor();
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconButtonDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IconButtonDirective, "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; "isSignal": true; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; "isSignal": true; }; "size": { "alias": "icon-button-size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/directives/icon-button/icon-button.model.d.ts

@@ -0,0 +1,4 @@
+export declare enum ICON_BUTTON_SIZE {
+    small = "small",
+    medium = "medium"
+}

package/lib/directives/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon-button.directive';
+export * from './icon-button.model';

package/lib/directives/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon-button';
+export * from './yuv-button.directive';

package/lib/directives/yuv-button.directive.d.ts

@@ -0,0 +1,17 @@
+import { OnInit, AfterViewInit } from '@angular/core';
+import * as i0 from "@angular/core";
+type ButtonType = 'primary' | 'secondary' | 'tertiary';
+export declare class YuvButtonDirective implements OnInit, AfterViewInit {
+    #private;
+    ymtButton: import("@angular/core").InputSignal<ButtonType>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    ariaDisabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    disableRipple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    disabledInteractive: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<YuvButtonDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<YuvButtonDirective, "button[ymtButton], a[ymtButton]", never, { "ymtButton": { "alias": "ymtButton"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/lib/providers/index.d.ts

@@ -0,0 +1 @@
+export * from './material.providers';

package/lib/providers/material.providers.d.ts

@@ -0,0 +1,2 @@
+import { EnvironmentProviders } from '@angular/core';
+export declare const provideYuvMaterial: () => EnvironmentProviders;

package/lib/services/index.d.ts

@@ -0,0 +1 @@
+export * from './yuv-mat-icon-registry.service';

package/lib/services/yuv-mat-icon-registry.service.d.ts

@@ -0,0 +1,13 @@
+import { ErrorHandler } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { HttpClient } from '@angular/common/http';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class YuvMatIconRegistry extends MatIconRegistry {
+    #private;
+    constructor(_httpClient: HttpClient, _sanitizer: DomSanitizer, document: any, _errorHandler: ErrorHandler);
+    setDefaultFontSetClass(...classnames: string[]): this;
+    static isFontIcon(input: string | null): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<YuvMatIconRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<YuvMatIconRegistry>;
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@yuuvis/material",
+  "version": "0.1.0",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/material": "^19",
+    "modern-normalize": "^3.0.1"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "sass": "./scss/index.scss",
+      "types": "./index.d.ts",
+      "default": "./fesm2022/yuuvis-material.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "module": "fesm2022/yuuvis-material.mjs",
+  "typings": "index.d.ts",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/scss/components/_loading-indicator.scss

@@ -0,0 +1,126 @@
+/*
+  Yuuvis Loading Indicators
+ */
+
+.yuv-loader-linear {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background-color: rgb(from var(--ymt-primary) r g b / 0.2);
+  height: 4px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    background-color: var(--ymt-primary);
+    animation: linear-before 1.5s infinite ease-out;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    height: 100%;
+    background-color: rgb(from var(--ymt-primary) r g b / 0.5);
+    animation: linear-after 1.5s infinite ease-in;
+  }
+}
+
+@keyframes linear-before {
+  0% {
+    left: -100%;
+    width: 100%;
+  }
+  100% {
+    left: 100%;
+    width: 10%;
+  }
+}
+
+@keyframes linear-after {
+  0% {
+    left: -150%;
+    width: 100%;
+  }
+  100% {
+    left: 100%;
+    width: 10%;
+  }
+}
+// Small straight loading spinner (dots in a row)
+.yuv-loader-straight {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  &::after,
+  &::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    margin: 0 1px;
+    border-radius: 50%;
+    display: block;
+    background-color: currentColor;
+    animation: bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  &::before {
+    animation-delay: -0.16s;
+  }
+
+  @keyframes bouncedelay {
+    0%,
+    80%,
+    100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
+  }
+}
+
+// circular loading spinner
+.yuv-loader {
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-left-color: var(--ymt-primary);
+  transform: translateZ(0);
+  animation: load8 1.1s infinite linear;
+
+  .dark & {
+    border-color: rgba(255, 255, 255, 0.1);
+    border-left-color: var(--ymt-primary);
+  }
+
+  &.large {
+    width: 10em;
+    height: 10em;
+    border-width: 8px;
+  }
+
+  &.small {
+    width: 2em;
+    height: 2em;
+    border-width: 2px;
+  }
+}
+.yuv-loader,
+.yuv-loader:after {
+  border-radius: 50%;
+  width: 5em;
+  height: 5em;
+  border-width: 4px;
+}
+
+@keyframes load8 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/scss/components/index.scss

@@ -0,0 +1 @@
+@forward 'loading-indicator';

package/scss/elements/_body.scss

@@ -0,0 +1,11 @@
+@use './../token/token.tools' as t;
+
+
+body {
+  height: 100%;
+  margin: 0;
+  font: t.use-token(font-body);
+  letter-spacing: t.use-token(font-body-tracking);
+  background-color: t.use-token(surface-frame);
+  color: t.use-token(on-surface);
+}

package/scss/elements/_focus.scss

@@ -0,0 +1,20 @@
+@use './../token/token.tools' as t;
+
+// Todo: Style focus-visible state!
+:focus-visible {
+  outline: none;
+}
+
+//outside
+//:focus-visible  {
+//  outline-offset: t.use-token(focus-indicator-size);
+//  outline: t.use-token(focus-indicator-outer) solid t.use-token(focus-indicator-size);
+//  box-shadow: 0 0 0 t.use-token(focus-indicator-size) t.use-token(focus-indicator-inner);
+//}
+
+//inside
+//:focus-visible  {
+//  outline-offset: calc(#{t.use-token(focus-indicator-size)} * -2);
+//  outline:  t.use-token(focus-indicator-inner) solid  t.use-token(focus-indicator-size);
+//  box-shadow: inset 0 0 0 t.use-token(focus-indicator-size) t.use-token(focus-indicator-outer);
+//}

package/scss/elements/_index.scss

@@ -0,0 +1,6 @@
+@forward 'root';
+@forward 'body';
+@forward 'text';
+@forward 'focus';
+@forward 'text-selection';
+@forward 'scrollbar';

package/scss/elements/_root.scss

@@ -0,0 +1,14 @@
+:where(html) {
+  font-size: 100%;
+  height: 100%;
+}
+
+:root.yuv-light-mode {
+  color-scheme: light;
+}
+
+:root.yuv-dark-mode {
+  color-scheme: dark;
+}
+
+

package/scss/elements/_scrollbar.scss

@@ -0,0 +1,33 @@
+@use './../token/token.tools' as t;
+
+::-webkit-scrollbar {
+  height: t.use-token(scrollbar-outer-size);
+  width: t.use-token(scrollbar-outer-size);
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+  outline: calc(#{t.use-token(scrollbar-inner-size)} / 2) solid #{t.use-token(scrollbar-track-color)};
+  outline-offset: calc((#{t.use-token(scrollbar-outer-size)} - #{t.use-token(scrollbar-inner-size)}) * -1);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  outline: calc(#{t.use-token(scrollbar-inner-size)} / 2) solid #{t.use-token(scrollbar-thumb-color)};
+  outline-offset: calc((#{t.use-token(scrollbar-outer-size)} - #{t.use-token(scrollbar-inner-size)}) * -1);
+  transition: outline-color 200ms ease-in-out;
+
+  &:hover {
+    outline-color: t.use-token(scrollbar-thumb-color-hover);
+    background-color: transparent;
+  }
+}
+
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}

package/scss/elements/_text-selection.scss

@@ -0,0 +1,6 @@
+@use './../token/token.tools' as t;
+
+*::selection {
+  background-color: t.use-token(text-selection-background);
+  color: t.use-token(text-selection-color);
+}

package/scss/elements/_text.scss

@@ -0,0 +1,23 @@
+@use '../token/token.tools' as t;
+
+:where(h1,h2,h3,h4,h5,h6)
+ {
+  word-wrap: break-word;
+  margin-inline: 0 0;
+  margin-block: 1em;
+  color: inherit;
+}
+:where(h1) {
+  font: t.use-token(font-headline-large);
+  letter-spacing: t.use-token(font-headline-large-tracking);
+}
+
+:where(h2) {
+  font: t.use-token(font-headline-medium);
+  letter-spacing: t.use-token(font-headline-medium-tracking);
+}
+
+:where(h3, h4, h5, h6) {
+  font: t.use-token(font-headline-small);
+  letter-spacing: t.use-token(font-headline-small-tracking);
+}

package/scss/generics/_normalize.scss

@@ -0,0 +1 @@
+@use 'modern-normalize';

package/scss/generics/index.scss

@@ -0,0 +1 @@
+@forward 'normalize';