@igo2/common 17.0.0-next.4 → 17.0.0-next.6

package/lib/action/actionbar/actionbar-item.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, isObservable } from 'rxjs';
 import { Action } from '../shared/action.interfaces';
 import * as i0 from "@angular/core";
 /**
@@ -8,7 +8,6 @@ import * as i0 from "@angular/core";
 export declare class ActionbarItemComponent implements OnInit, OnDestroy {
     readonly disabled$: BehaviorSubject<boolean>;
     readonly checkCondition$: BehaviorSubject<boolean>;
-    readonly icon$: BehaviorSubject<string>;
     readonly tooltip$: BehaviorSubject<string>;
     readonly noDisplay$: BehaviorSubject<boolean>;
     readonly ngClass$: BehaviorSubject<{
@@ -17,11 +16,11 @@ export declare class ActionbarItemComponent implements OnInit, OnDestroy {
     private ngClass$$;
     private disabled$$;
     private availability$$;
-    private icon$$;
     private checkCondition$$;
     private tooltip$$;
     private noDisplay$$;
     private display$$;
+    isObservable: typeof isObservable;
     /**
      * Action
      */
@@ -60,7 +59,6 @@ export declare class ActionbarItemComponent implements OnInit, OnDestroy {
      * @internal
      */
     get title(): string;
-    constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
@@ -72,7 +70,6 @@ export declare class ActionbarItemComponent implements OnInit, OnDestroy {
     private updateNgClass;
     private updateTooltip;
     private updateCheckCondition;
-    private updateIcon;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActionbarItemComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ActionbarItemComponent, "igo-actionbar-item", never, { "action": { "alias": "action"; "required": false; }; "color": { "alias": "color"; "required": false; }; "withTitle": { "alias": "withTitle"; "required": false; }; "withIcon": { "alias": "withIcon"; "required": false; }; "withTooltip": { "alias": "withTooltip"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "noDisplay": { "alias": "noDisplay"; "required": false; }; }, { "trigger": "trigger"; }, never, never, true, never>;
 }

package/lib/action/shared/action.interfaces.d.ts

@@ -1,9 +1,10 @@
 import { Observable } from 'rxjs';
+import { IconSvg } from '../../icons';
 export interface Action {
     id: string;
     handler: ActionHandler;
     title?: string;
-    icon?: string | Observable<string>;
+    icon?: string | IconSvg | Observable<string>;
     tooltip?: string | Observable<string>;
     args?: any[];
     checkbox?: boolean;

package/lib/badge-icon/badge-icon.directive.d.ts

@@ -1,5 +1,4 @@
 import { ElementRef, OnInit } from '@angular/core';
-import { MatIconRegistry } from '@angular/material/icon';
 import * as i0 from "@angular/core";
 /**
  * This directive allow to add an icon inside a matBadge.
@@ -8,9 +7,8 @@ import * as i0 from "@angular/core";
  */
 export declare class IgoBadgeIconDirective implements OnInit {
     private el;
-    private matIconRegistry;
     set igoMatBadgeIcon(value: string);
-    private svg;
+    private html;
     set matBadgeHidden(value: boolean);
     private hidden;
     set matBadgeDisabled(value: boolean);
@@ -25,9 +23,9 @@ export declare class IgoBadgeIconDirective implements OnInit {
     private backgroundColor;
     get badge(): any;
     private originalColor;
-    constructor(el: ElementRef, matIconRegistry: MatIconRegistry);
+    constructor(el: ElementRef);
     ngOnInit(): void;
-    private updateSvg;
+    private updateHtml;
     private updateColor;
     private updateHidden;
     private updateDisabled;

package/lib/entity/shared/transaction.d.ts

@@ -3,7 +3,7 @@ import { BehaviorSubject } from 'rxjs';
 import { EntityOperationType } from './entity.enums';
 import { EntityKey, EntityOperationState, EntityTransactionOptions } from './entity.interfaces';
 import { EntityStore } from './store';
-interface EntityOperation<E extends object = object> {
+export interface EntityOperation<E extends object = object> {
     key: EntityKey;
     type: EntityOperationType;
     previous: E | undefined;
@@ -177,4 +177,3 @@ export declare class EntityTransaction {
      */
     private checkInCommitPhase;
 }
-export {};

package/lib/icons/icon/icon.component.d.ts

@@ -0,0 +1,16 @@
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { IconSvg } from '../shared';
+import * as i0 from "@angular/core";
+export declare class IgoIconComponent {
+    private iconRegistry;
+    private sanitizer;
+    set icon(icon: string | IconSvg);
+    get icon(): string | IconSvg;
+    private _icon;
+    constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer);
+    registerSvg(icon: IconSvg): void;
+    isSvg(icon: string | IconSvg): icon is IconSvg;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IgoIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgoIconComponent, "igo-icon", never, { "icon": { "alias": "icon"; "required": true; }; }, {}, never, never, true, never>;
+}

package/lib/icons/icon.provider.d.ts

@@ -0,0 +1,4 @@
+import { EnvironmentProviders } from '@angular/core';
+type MaterialSymbolStyle = 'outlined' | 'rounded' | 'sharp';
+export declare function provideIcon(style?: MaterialSymbolStyle): EnvironmentProviders;
+export {};

package/lib/icons/index.d.ts

@@ -0,0 +1,3 @@
+export * from './shared';
+export * from './icon.provider';
+export * from './icon/icon.component';

package/lib/icons/shared/icon.interface.d.ts

@@ -0,0 +1,4 @@
+export interface IconSvg {
+    name: string;
+    svg: string;
+}

package/lib/icons/shared/icons.d.ts

@@ -0,0 +1,21 @@
+import { IconSvg } from './icon.interface';
+/**
+ * Source: https://pictogrammers.com/library/mdi/
+ */
+export declare const MAGNIFY_SCAN_ICON: IconSvg;
+export declare const MICROSOFT_ICON: {
+    name: string;
+    svg: string;
+};
+export declare const KEYBOARD_ESC_ICON: {
+    name: string;
+    svg: string;
+};
+export declare const ENGINE_ICON: {
+    name: string;
+    svg: string;
+};
+export declare const SELECTION_MARKER_ICON: {
+    name: string;
+    svg: string;
+};

package/lib/icons/shared/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icons';
+export * from './icon.interface';

package/lib/tool/shared/tool.interface.d.ts

@@ -1,9 +1,9 @@
+import { IconSvg } from '../../icons';
 export interface Tool {
     name: string;
     component: any;
     title?: string;
-    icon?: string;
-    iconImage?: string;
+    icon?: string | IconSvg;
     tooltip?: string;
     global?: boolean;
     options?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igo2/common",
-  "version": "17.0.0-next.4",
+  "version": "17.0.0-next.6",
   "description": "IGO Library",
   "author": "IGO Community",
   "keywords": [
@@ -44,8 +44,8 @@
     "@angular/material": "^17.0.3",
     "@angular/platform-browser": "^17.0.6",
     "@floating-ui/utils": "^0.1.4",
-    "@igo2/core": "^17.0.0-next.4",
-    "@igo2/utils": "^17.0.0-next.4",
+    "@igo2/core": "^17.0.0-next.6",
+    "@igo2/utils": "^17.0.0-next.6",
     "angular-shepherd": "17.0.0",
     "ngx-color": "^9.0.0",
     "scroll-into-view-if-needed": "^3.0.0",

package/public_api.d.ts

@@ -61,6 +61,7 @@ export * from './lib/flexible';
 export * from './lib/form-dialog';
 export * from './lib/form';
 export * from './lib/home-button';
+export * from './lib/icons';
 export * from './lib/image';
 export * from './lib/interactive-tour';
 export * from './lib/json-dialog';

package/src/common-theme.scss

@@ -1,19 +1,19 @@
-@use './lib/action/action.theming.scss' as action;
-@use './lib/collapsible/collapsible.theming.scss' as collapsible;
-@use './lib/entity/entity.theming.scss' as entity;
-@use './lib/list/list.theming.scss' as list;
-@use './lib/panel/panel.theming.scss' as panel;
-@use './lib/tool/tool.theming.scss' as tool;
-@use './lib/interactive-tour/interactive-tour.theming.scss' as interactive-tour;
-@use './lib/home-button/home-button.theming.scss' as home-button;
-
-@mixin common-component-themes($theme) {
-  @include action.igo-action-theming($theme);
-  @include collapsible.igo-collapsible-theming($theme);
-  @include entity.igo-entity-theming($theme);
-  @include list.igo-list-theming($theme);
-  @include panel.theme($theme);
-  @include tool.igo-tool-theming($theme);
-  @include interactive-tour.theme($theme);
-  @include home-button.theme($theme);
-}
+@use './lib/action/action.theming.scss' as action;
+@use './lib/collapsible/collapsible.theming.scss' as collapsible;
+@use './lib/entity/entity.theming.scss' as entity;
+@use './lib/list/list.theming.scss' as list;
+@use './lib/panel/panel.theming.scss' as panel;
+@use './lib/tool/tool.theming.scss' as tool;
+@use './lib/interactive-tour/interactive-tour.theming.scss' as interactive-tour;
+@use './lib/home-button/home-button.theming.scss' as home-button;
+
+@mixin common-component-themes($theme) {
+  @include action.igo-action-theming($theme);
+  @include collapsible.igo-collapsible-theming($theme);
+  @include entity.igo-entity-theming($theme);
+  @include list.igo-list-theming($theme);
+  @include panel.theme($theme);
+  @include tool.igo-tool-theming($theme);
+  @include interactive-tour.theme($theme);
+  @include home-button.theme($theme);
+}

package/src/lib/action/action.theming.scss

@@ -1,5 +1,5 @@
-@use './actionbar/actionbar-item.theming.scss' as actionbar-item;
-
-@mixin igo-action-theming($theme) {
-  @include actionbar-item.density($theme);
-}
+@use './actionbar/actionbar-item.theming.scss' as actionbar-item;
+
+@mixin igo-action-theming($theme) {
+  @include actionbar-item.density($theme);
+}

package/src/lib/action/actionbar/actionbar-item.theming.scss

@@ -1,32 +1,32 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include density($theme);
-  @include typography($theme);
-}
-
-@mixin density($theme) {
-  $density: mat.get-density-config($theme);
-  $theme: map.merge(
-    $theme,
-    (
-      density: $density - 2
-    )
-  );
-
-  igo-actionbar-item {
-    @include mat.icon-button-density($theme);
-    @include mat.list-density($theme);
-  }
-}
-
-@mixin typography($theme) {
-  $typography: mat.get-typography-config($theme);
-
-  igo-actionbar-item {
-    mat-checkbox label {
-      font-size: mat.font-size($typography, body-1);
-    }
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  @include density($theme);
+  @include typography($theme);
+}
+
+@mixin density($theme) {
+  $density: mat.get-density-config($theme);
+  $theme: map.merge(
+    $theme,
+    (
+      density: $density - 2
+    )
+  );
+
+  igo-actionbar-item {
+    @include mat.icon-button-density($theme);
+    @include mat.list-density($theme);
+  }
+}
+
+@mixin typography($theme) {
+  $typography: mat.get-typography-config($theme);
+
+  igo-actionbar-item {
+    mat-checkbox label {
+      font-size: mat.font-size($typography, body-1);
+    }
+  }
+}

package/src/lib/action/actionbar/actionbar.theming.scss

@@ -1,22 +1,22 @@
-@mixin igo-actionbar-theming($theme) {
-  .igo-actionbar-overlay {
-    min-width: inherit !important;
-    padding-top: 0;
-    padding-bottom: 0;
-
-    .mat-mdc-list {
-      padding-top: 0;
-    }
-    .mat-mdc-list
-      .mat-mdc-list-item.mdc-list-item--with-leading-icon
-      .mdc-list-item__content
-      .mdc-list-item__primary-text {
-      padding-right: 16px;
-    }
-
-    .mat-mdc-menu-content:not(:empty) {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-  }
-}
+@mixin igo-actionbar-theming($theme) {
+  .igo-actionbar-overlay {
+    min-width: inherit !important;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .mat-mdc-list {
+      padding-top: 0;
+    }
+    .mat-mdc-list
+      .mat-mdc-list-item.mdc-list-item--with-leading-icon
+      .mdc-list-item__content
+      .mdc-list-item__primary-text {
+      padding-right: 16px;
+    }
+
+    .mat-mdc-menu-content:not(:empty) {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}

package/src/lib/collapsible/collapsible.theming.scss

@@ -1,22 +1,22 @@
-@mixin igo-collapsible-theming($theme) {
-  mat-icon[igocollapse] {
-    &:hover {
-      cursor: pointer;
-    }
-
-    &.igo-chevron {
-      width: auto !important;
-      transform: rotateZ(0deg);
-      transition: 300ms ease-in-out;
-
-      &.collapsed {
-        transform: rotateZ(180deg);
-        transition: 300ms ease-in-out;
-      }
-    }
-  }
-
-  div.igo-collapsed {
-    display: none !important;
-  }
-}
+@mixin igo-collapsible-theming($theme) {
+  mat-icon[igocollapse] {
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.igo-chevron {
+      width: auto !important;
+      transform: rotateZ(0deg);
+      transition: 300ms ease-in-out;
+
+      &.collapsed {
+        transform: rotateZ(180deg);
+        transition: 300ms ease-in-out;
+      }
+    }
+  }
+
+  div.igo-collapsed {
+    display: none !important;
+  }
+}

package/src/lib/entity/entity-selector/entity-selector.theming.scss

@@ -1,21 +1,21 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include density($theme);
-}
-
-@mixin density($theme) {
-  $density: mat.get-density-config($theme);
-
-  $theme: map.merge(
-    $theme,
-    (
-      density: $density - 2
-    )
-  );
-
-  igo-entity-selector {
-    @include mat.form-field-density($theme);
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  @include density($theme);
+}
+
+@mixin density($theme) {
+  $density: mat.get-density-config($theme);
+
+  $theme: map.merge(
+    $theme,
+    (
+      density: $density - 2
+    )
+  );
+
+  igo-entity-selector {
+    @include mat.form-field-density($theme);
+  }
+}

package/src/lib/entity/entity-table/entity-table.theming.scss

@@ -1,37 +1,37 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include color($theme);
-  @include density($theme);
-}
-
-@mixin color($theme) {
-  $primary: map.get($theme, primary);
-  $accent: map.get($theme, accent);
-  $background: map-get($theme, background);
-  igo-entity-table
-    table.igo-entity-table-with-selection
-    tr.igo-entity-table-row-highlighted {
-    background-color: mat.get-color-from-palette($primary, A100);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-  igo-entity-table .mat-mdc-table thead {
-    background-color: mat.get-color-from-palette($background, background);
-  }
-}
-
-@mixin density($theme) {
-  $density: mat.get-density-config($theme);
-
-  $theme: map.merge(
-    $theme,
-    (
-      density: $density - 1
-    )
-  );
-
-  igo-entity-table {
-    @include mat.table-density($theme);
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  @include color($theme);
+  @include density($theme);
+}
+
+@mixin color($theme) {
+  $primary: map.get($theme, primary);
+  $accent: map.get($theme, accent);
+  $background: map-get($theme, background);
+  igo-entity-table
+    table.igo-entity-table-with-selection
+    tr.igo-entity-table-row-highlighted {
+    background-color: mat.get-color-from-palette($primary, A100);
+    color: mat.get-color-from-palette($primary, default-contrast);
+  }
+  igo-entity-table .mat-mdc-table thead {
+    background-color: mat.get-color-from-palette($background, background);
+  }
+}
+
+@mixin density($theme) {
+  $density: mat.get-density-config($theme);
+
+  $theme: map.merge(
+    $theme,
+    (
+      density: $density - 1
+    )
+  );
+
+  igo-entity-table {
+    @include mat.table-density($theme);
+  }
+}

package/src/lib/entity/entity.theming.scss

@@ -1,7 +1,7 @@
-@use './entity-table/entity-table.theming' as entity-table;
-@use './entity-selector/entity-selector.theming' as entity-selector;
-
-@mixin igo-entity-theming($theme) {
-  @include entity-table.theme($theme);
-  @include entity-selector.theme($theme);
-}
+@use './entity-table/entity-table.theming' as entity-table;
+@use './entity-selector/entity-selector.theming' as entity-selector;
+
+@mixin igo-entity-theming($theme) {
+  @include entity-table.theme($theme);
+  @include entity-selector.theme($theme);
+}

package/src/lib/home-button/home-button.theming.scss

@@ -1,18 +1,18 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  $primary: map.get($theme, primary);
-  $accent: map.get($theme, accent);
-  $foreground: map.get($theme, foreground);
-
-  igo-home-button > #homeButton {
-    background-color: mat.get-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-
-    &:hover {
-      background-color: mat.get-color-from-palette($accent, lighter);
-      color: black;
-    }
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  $primary: map.get($theme, primary);
+  $accent: map.get($theme, accent);
+  $foreground: map.get($theme, foreground);
+
+  igo-home-button > #homeButton {
+    background-color: mat.get-color-from-palette($primary);
+    color: mat.get-color-from-palette($primary, default-contrast);
+
+    &:hover {
+      background-color: mat.get-color-from-palette($accent, lighter);
+      color: black;
+    }
+  }
+}

package/src/lib/interactive-tour/interactive-tour.theming.scss

@@ -1,32 +1,32 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include color($theme);
-}
-
-@mixin color($theme) {
-  $primary: map.get($theme, primary);
-  $accent: map.get($theme, accent);
-  $warn: map.get($theme, warn);
-
-  igo-interactive-tour {
-    button {
-      &.tour-button-tool-icon {
-        color: mat.get-color-from-palette($primary, darker-contrast);
-
-        &:hover {
-          background-color: mat.get-color-from-palette(
-            $primary,
-            default-contrast
-          );
-          color: mat.get-color-from-palette($primary);
-        }
-      }
-    }
-
-    .mat-primary .mat-mdc-icon-button {
-      color: white;
-    }
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  @include color($theme);
+}
+
+@mixin color($theme) {
+  $primary: map.get($theme, primary);
+  $accent: map.get($theme, accent);
+  $warn: map.get($theme, warn);
+
+  igo-interactive-tour {
+    button {
+      &.tour-button-tool-icon {
+        color: mat.get-color-from-palette($primary, darker-contrast);
+
+        &:hover {
+          background-color: mat.get-color-from-palette(
+            $primary,
+            default-contrast
+          );
+          color: mat.get-color-from-palette($primary);
+        }
+      }
+    }
+
+    .mat-primary .mat-mdc-icon-button {
+      color: white;
+    }
+  }
+}