@elderbyte/ngx-starter 19.1.0-beta.0 → 19.1.0-beta.10

package/lib/components/style-debugger/style-debugger.component.d.ts

@@ -1,40 +0,0 @@
-import { Renderer2 } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class ElderStyleDebuggerComponent {
-    private renderer;
-    isHidden: import("@angular/core").WritableSignal<boolean>;
-    isMinimized: import("@angular/core").WritableSignal<boolean>;
-    originalStyleList: {
-        name: string;
-        css: string;
-    }[];
-    styleList: {
-        isActive: boolean;
-        name: string;
-        css: string;
-    }[];
-    activeStyles: {
-        [key: number]: HTMLStyleElement;
-    };
-    stylesJson: string;
-    constructor(renderer: Renderer2);
-    ngOnInit(): void;
-    toggleStyle(index: number): void;
-    activateStyle(index: number): void;
-    toggleAllStyles(): void;
-    activateAllStyles(): void;
-    updateStyle(index: number, $event: Event): void;
-    clearStyles(): void;
-    toggleHidden(): void;
-    toggleMinimize(): void;
-    updateStylesJson(): void;
-    resetToOriginalStyles(): void;
-    resetStylesJson(): void;
-    importStylesFromJsonInputField(): void;
-    updateStylesFromJson(json: string): void;
-    exportStylesFromJsonInputField(): void;
-    saveStylesJsonToLocalStorage(): void;
-    loadStylesJsonFromLocalStorage(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderStyleDebuggerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderStyleDebuggerComponent, "elder-style-debugger", never, {}, {}, never, never, true, never>;
-}

package/src/lib/components/chips/_elder-chip-theme.scss

@@ -1,129 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-$colorStateNone: rgb(143, 143, 143);
-$colorStateOpen: rgb(199, 199, 199);
-
-$colorStateInProgress: rgb(33, 150, 243);
-$colorStateCompleted: rgb(4, 170, 109);
-$colorStateWarn: rgb(255, 145, 0);
-$colorStateError: rgb(255, 0, 0);
-$colorStateOther: rgb(121, 73, 252);
-
-$level-low: rgb(4, 170, 109);
-$level-medium: rgb(33, 150, 243);
-$level-high: rgb(255, 145, 0);
-$level-critical: rgb(255, 0, 0);
-
-@mixin theme($config-or-theme) {
-  .mat-mdc-chip.elder-chip-label {
-    --mdc-chip-elevated-container-color: rgba(143, 143, 143, 0.2);
-    background-color: var(--mdc-chip-elevated-container-color);
-
-    &.color-primary {
-      background-color: var(--md-sys-color-primary-container);
-    }
-
-    &.color-primary {
-      @include _theme_color_chip(
-        var(--md-sys-color-primary-container),
-        var(--md-sys-color-primary),
-        var(--md-sys-color-on-primary)
-      );
-    }
-
-    &.color-accent {
-      @include _theme_color_chip(
-        var(--md-sys-color-tertiary-container),
-        var(--md-sys-color-tertiary),
-        var(--md-sys-color-on-tertiary)
-      );
-    }
-
-    &.color-warn {
-      @include _theme_color_chip(
-        var(--md-sys-color-error-container),
-        var(--md-sys-color-error),
-        var(--md-sys-color-on-error)
-      );
-    }
-
-    &.none {
-      background-color: rgba($colorStateNone, 0.2);
-      border-color: $colorStateNone;
-      background-color: var(--md-sys-color-surface-variant);
-    }
-
-    &.state-open {
-      background-color: rgba($colorStateOpen, 0.2);
-      border-color: var(--md-sys-color-surface-variant);
-      .mat-mdc-chip-avatar {
-        color: var(--md-sys-color-surface-variant);
-      }
-      background-color: var(--md-sys-color-surface-container);
-    }
-
-    &.state-in-progress {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-container);
-    }
-    &.state-completed {
-      --mdc-chip-elevated-container-color: var(--mdc-chip-elevated-selected-container-color);
-      --mdc-chip-label-text-color: var(--mdc-chip-elevated-on-container-color);
-    }
-    &.state-warn {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-tertiary-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-tertiary-on-container);
-    }
-    &.state-error {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-error-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-error-on-container);
-    }
-    &.state-other {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-fixed-dim);
-      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-fixed);
-    }
-
-    &.level-low {
-      @include _outlined-label-chip($level-low);
-    }
-    &.level-medium {
-      @include _outlined-label-chip($level-medium);
-    }
-    &.level-high {
-      @include _outlined-label-chip($level-high);
-    }
-    &.level-critical {
-      @include _outlined-label-chip($level-critical);
-    }
-  }
-}
-
-@mixin _theme_color_chip($color1, $color2, $color3) {
-  &.legacy {
-    background-color: $color2;
-    .mat-mdc-chip-action-label,
-    .mat-mdc-chip-avatar,
-    .mdc-evolution-chip__checkmark {
-      color: $color3;
-    }
-  }
-  &.md3 {
-    background-color: $color1;
-    border-color: $color2;
-    .mat-mdc-chip-action-label,
-    .mat-mdc-chip-avatar,
-    .mdc-evolution-chip__checkmark {
-      //color: $color2;
-    }
-  }
-}
-
-@mixin _outlined-label-chip($color1) {
-  background-color: rgba($color1, 0.2);
-  border-color: $color1;
-  .mat-mdc-chip-action-label,
-  .mat-mdc-chip-avatar {
-    color: $color1;
-  }
-}

package/theming/style-tweaks/_elder-reset.scss

@@ -1,13 +0,0 @@
-/***************************************************************************
- *                                                                         *
- * CSS reset                                                               *
- *                                                                         *
- **************************************************************************/
-
-@mixin elder-reset() {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}

package/theming/system/_elder-design-tokens.scss

@@ -1,90 +0,0 @@
-@mixin elder-design-tokens() {
-  @include elder-badge-sizing();
-
-  // bg color
-  --md-sys-color-background: var(--md-sys-color-surface-container-highest);
-
-  // mat variables
-  --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
-  --mat-badge-small-size-text-size: 9px; // this is the mat2 setting, mat3 somehow sets this to 0, which hides the font, unclear why.
-  --mdc-dialog-container-shape: 16px; // make border-radius of dialog container smaller (default is 28px)
-  --mat-dialog-container-max-width: 80vw; // 80vw is mat 2 default, mat 3 default is very narrow: 560px;
-  --mat-toolbar-title-text-tracking: 0; // mat toolbar typography
-  --mat-toolbar-title-text-weight: 500; // mat toolbar typography
-  --mat-table-row-item-outline-color: var(--md-sys-color-outline-variant);
-  --mat-divider-color: var(--md-sys-color-outline-variant); // make divider color lighter
-  --mat-sidenav-container-elevation-shadow: var(--mat-app-elevation-shadow-level-16);
-
-  // elder custom variables
-  --elder-border-radius-sm: 4px; // typical small border radius, inspired by mat 2
-  --elder-border-light: 1px solid var(--md-sys-color-outline-variant);
-  --elder-box-shadow-default: var(--mat-app-elevation-shadow-level-8);
-  --elder-scrollbar-width: 8px;
-  --elder-lightened-transparent-bg: rgba(255, 255, 255, 0.15);
-
-  // elder pane
-  --elder-pane-padding: 8px;
-  --elder-pane-gap: calc(var(--elder-pane-padding) * 2);
-  --elder-pane-border-radius: var(
-    --mdc-outlined-card-container-shape,
-    var(--mat-app-corner-medium)
-  );
-  --elder-pane-bg-color: var(--md-sys-color-surface-container-lowest);
-
-  // card header
-  --elder-card-header-padding: 15px 15px 5px 15px;
-
-  // cards white bg
-  --mdc-elevated-card-container-color: var(--md-sys-color-surface-container-lowest);
-  --mdc-outlined-card-container-color: var(--mdc-elevated-card-container-color);
-  --mat-table-background-color: var(--md-sys-color-surface-container-lowest);
-  --mat-paginator-container-background-color: var(--mat-table-background-color);
-
-  // elder toast messages
-  --elder-toast-message-color-title-default: var(--md-sys-color-inverse-on-surface);
-  --elder-toast-message-color-title-warn: var(--md-sys-color-inverse-on-surface);
-  --elder-toast-message-color-title-error: var(--md-sys-color-inverse-on-surface);
-
-  // main nav top left button color
-  --elder-toolbar-main-nav-button-color: var(--md-sys-color-on-primary);
-  --elder-toolbar-main-nav-button-container-bg-color: var(--md-sys-color-primary);
-
-  // dark theme overwrites
-  &.elder-dark-theme {
-    --md-sys-color-primary-container: #826e38; // lighten up dark mode container color
-    --md-sys-color-tertiary-container: var(--md-sys-color-primary-container);
-    --md-sys-color-surface-container-highest: #191919;
-    --md-sys-color-surface-container-lowest: #262626;
-    --elder-dark-gray: var(--md-sys-color-surface-container);
-    --mat-sidenav-container-background-color: var(--md-sys-color-surface-container);
-    --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);
-
-    // dark mode specific colors
-    --elder-dark-mode-color-primary: var(--md-sys-color-primary);
-    --elder-dark-mode-color-on-primary: var(--md-sys-color-on-primary);
-    --elder-dark-mode-color-surface: var(--md-sys-color-surface);
-    --elder-dark-mode-color-on-surface: var(--md-sys-color-on-surface);
-  }
-}
-
-@mixin elder-badge-sizing() {
-  // Use legacy MAT 2 badge sizing
-  --mat-badge-container-size: unset;
-  --mat-badge-small-size-container-size: unset;
-  --mat-badge-large-size-container-size: unset;
-  --mat-badge-legacy-container-size: 22px;
-  --mat-badge-legacy-small-size-container-size: 16px;
-  --mat-badge-legacy-large-size-container-size: 28px;
-  --mat-badge-container-offset: -11px 0;
-  --mat-badge-small-size-container-offset: -8px 0;
-  --mat-badge-large-size-container-offset: -14px 0;
-  --mat-badge-container-overlap-offset: -11px;
-  --mat-badge-small-size-container-overlap-offset: -8px;
-  --mat-badge-large-size-container-overlap-offset: -14px;
-  --mat-badge-container-padding: 0;
-  --mat-badge-small-size-container-padding: 0;
-  --mat-badge-large-size-container-padding: 0;
-  --mat-badge-line-height: var(--mat-badge-legacy-container-size);
-  --mat-badge-small-size-line-height: var(--mat-badge-legacy-small-size-container-size);
-  --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
-}

package/theming/system/_elder-m3-theme.scss

@@ -1,156 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use 'elder-design-tokens' as elder-design-tokens;
-@use './elder-starter-theme' as starter-theme;
-@use './elder-config' as settings;
-
-@function create-default-elder-themes() {
-  @return create-themes(settings.$palettes);
-}
-
-@function create-themes($palettesArg) {
-  $_palettes: $palettesArg;
-
-  $_rest: (
-    secondary: map.get($_palettes, secondary),
-    neutral: map.get($_palettes, neutral),
-    neutral-variant: map.get($_palettes, neutral-variant),
-    error: map.get($_palettes, error),
-  );
-  $_primary: map.merge(map.get($_palettes, primary), $_rest);
-  $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
-  $_primary-reverse: map.merge(map.get($_palettes, tertiary), $_rest);
-  $_tertiary-reverse: map.merge(map.get($_palettes, tertiary), $_rest);
-
-  $density: 0; // important ot start with 0, since we are (miss-)using the tighter -4 density settings only for forms later on
-
-  $light-theme: mat.define-theme(
-    (
-      color: (
-        theme-type: light,
-        primary: $_primary,
-        tertiary: $_tertiary,
-        use-system-variables: true,
-        system-variables-prefix: md-sys-color,
-      ),
-      typography: (
-        use-system-variables: true,
-        system-variables-prefix: md-sys-typescale,
-      ),
-      density: (
-        scale: $density,
-      ),
-    )
-  );
-
-  $dark-theme: mat.define-theme(
-    (
-      color: (
-        theme-type: dark,
-        primary: $_primary,
-        tertiary: $_tertiary,
-        use-system-variables: true,
-        system-variables-prefix: md-sys-color,
-      ),
-      typography: (
-        use-system-variables: true,
-        system-variables-prefix: md-sys-typescale,
-      ),
-      density: (
-        scale: $density,
-      ),
-    )
-  );
-
-  $light-theme-reverse: mat.define-theme(
-    (
-      color: (
-        theme-type: light,
-        primary: $_primary-reverse,
-        tertiary: $_tertiary-reverse,
-        use-system-variables: true,
-        system-variables-prefix: md-sys-color,
-      ),
-      typography: (
-        use-system-variables: true,
-        system-variables-prefix: md-sys-typescale,
-      ),
-      density: (
-        scale: $density,
-      ),
-    )
-  );
-
-  $dark-theme-reverse: mat.define-theme(
-    (
-      color: (
-        theme-type: dark,
-        primary: $_primary-reverse,
-        tertiary: $_tertiary-reverse,
-        use-system-variables: true,
-        system-variables-prefix: md-sys-color,
-      ),
-      typography: (
-        use-system-variables: true,
-        system-variables-prefix: md-sys-typescale,
-      ),
-      density: (
-        scale: $density,
-      ),
-    )
-  );
-
-  @return (
-    light: $light-theme,
-    dark: $dark-theme-reverse,
-    light-reverse: $light-theme-reverse,
-    dark-reverse: $dark-theme-reverse
-  );
-}
-
-@mixin render-default-elder-theme($themes: 'default', $options: ()) {
-  @if $themes == 'default' {
-    $themes: create-default-elder-themes();
-  }
-
-  // map options
-  $use-typography-hierarchy: not map.has-key($options, 'no-typography-hierarchy');
-
-  // create theme
-  //$themes: create-default-elder-themes();
-  $elder-light-theme-m3: map.get($themes, light);
-  $elder-dark-theme-m3: map.get($themes, dark-reverse);
-
-  // render theme
-  @include mat.all-component-typographies();
-  @include mat.elevation-classes();
-  @include mat.app-background();
-
-  @if $use-typography-hierarchy {
-    @include mat.typography-hierarchy($elder-light-theme-m3, $back-compat: true);
-  }
-
-  .elder-light-theme,
-  .elder-dark-theme {
-    @include mat.all-component-themes($elder-light-theme-m3);
-    @include mat.system-level-colors($elder-light-theme-m3);
-    @include mat.system-level-typography($elder-light-theme-m3);
-    @include mat.color-variants-backwards-compatibility($elder-light-theme-m3);
-    @include starter-theme.starter-theme($elder-light-theme-m3);
-  }
-
-  .elder-dark-theme {
-    @include mat.all-component-colors($elder-dark-theme-m3);
-    @include mat.system-level-colors($elder-dark-theme-m3);
-    @include mat.color-variants-backwards-compatibility($elder-dark-theme-m3);
-  }
-
-  .elder-light-theme,
-  .elder-dark-theme {
-    @include elder-design-tokens.elder-design-tokens();
-  }
-
-  .elder-light-theme {
-    --md-sys-color-on-tertiary: var(--md-sys-color-on-surface);
-  }
-}

package/theming/system/_elder-starter-theme.scss

@@ -1,41 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-
-@forward '../system/elder-defaults';
-@use '../system/elder-defaults' as elder-defaults;
-@use '../style-tweaks/elder-color-variants' as elder-color-variants;
-@use '../style-tweaks/elder-style-fixes' as elder-fixes;
-@use '../style-tweaks/elder-common' as elder-common;
-@use '../style-tweaks/elder-form' as elder-form;
-@use '../style-tweaks/elder-reset' as elder-reset;
-@use '../style-tweaks/elder-component-themes' as elder-component-themes;
-@use '../utility-classes/elder-flex-layout' as elder-flex-layout;
-@use '../utility-classes/elder-color-helpers' as elder-color-helpers;
-@use '../utility-classes/elder-layout-system' as elder-layout-system;
-
-// Create a theme.
-@mixin starter-theme($theme) {
-  $theme: elder-defaults.validate-and-set-defaults($theme);
-
-  // ATM we need to render this here, because first need to set defaults for form-field density
-  @include mat.form-field-density(
-    map.get($theme, elder, density, form-field)
-  ); // TODO: improve density setup
-
-  // style tweaks
-  @include elder-reset.elder-reset();
-  @include elder-fixes.elder-style-fixes($theme);
-  @include elder-common.elder-common-styles($theme);
-  @include elder-form.elder-form-styles($theme);
-  @include elder-color-variants.elder-color-variants($theme);
-
-  // utility classes
-  @include elder-flex-layout.elder-flex-layout($theme);
-  @include elder-layout-system.elder-layout-system($theme);
-  @include elder-color-helpers.elder-color-helpers();
-
-  // component themes rendered in global css
-  @include elder-component-themes.theme(
-    $theme
-  ); // TODO: Move component themes directly into components
-}