@edsis/ui 21.3.8 → 21.3.9

package/README.md

@@ -27,6 +27,8 @@ Untuk komponen atau utilitas spesifik, gunakan subpath secondary entry point:
 ```bash
 @edsis/ui/button
 @edsis/ui/chart/bar
+@edsis/ui/icon
+@edsis/ui/theme
 ```
 
 ## Unit Test

package/fesm2022/edsis-ui-icon.mjs

@@ -0,0 +1,78 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+
+const UI_MATERIAL_SYMBOLS_FONT_ATTR = 'data-ui-icon-font';
+const UI_MATERIAL_SYMBOLS_FONT_ID = 'material-symbols-outlined';
+const UI_MATERIAL_SYMBOLS_FONT_HREF = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0';
+class UiMaterialSymbolsService {
+    documentRef = inject(DOCUMENT, { optional: true });
+    platformId = inject(PLATFORM_ID);
+    ensureLoaded() {
+        const head = this.documentRef?.head;
+        if (!isPlatformBrowser(this.platformId) || !head) {
+            return;
+        }
+        const existing = head.querySelector(`link[${UI_MATERIAL_SYMBOLS_FONT_ATTR}="${UI_MATERIAL_SYMBOLS_FONT_ID}"]`);
+        if (existing) {
+            return;
+        }
+        const link = this.documentRef.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = UI_MATERIAL_SYMBOLS_FONT_HREF;
+        link.setAttribute(UI_MATERIAL_SYMBOLS_FONT_ATTR, UI_MATERIAL_SYMBOLS_FONT_ID);
+        head.appendChild(link);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiMaterialSymbolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiMaterialSymbolsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiMaterialSymbolsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class UiIconComponent {
+    materialSymbols = inject(UiMaterialSymbolsService);
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    fill = input(0, ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    weight = input(400, ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    grade = input(0, ...(ngDevMode ? [{ debugName: "grade" }] : /* istanbul ignore next */ []));
+    opticalSize = input(24, ...(ngDevMode ? [{ debugName: "opticalSize" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.opticalSize(), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    fontVariationSettings = computed(() => `"FILL" ${this.fill()}, "wght" ${this.weight()}, "GRAD" ${this.grade()}, "opsz" ${this.opticalSize()}`, ...(ngDevMode ? [{ debugName: "fontVariationSettings" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const base = 'material-symbols-outlined inline-flex items-center justify-center leading-none select-none';
+        const extra = this.class();
+        return extra ? `${base} ${extra}` : base;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.materialSymbols.ensureLoaded();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: UiIconComponent, isStandalone: true, selector: "ui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "resolvedSize()", "style.line-height.px": "resolvedSize()", "style.font-variation-settings": "fontVariationSettings()" } }, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-icon',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[style.font-size.px]': 'resolvedSize()',
+                        '[style.line-height.px]': 'resolvedSize()',
+                        '[style.font-variation-settings]': 'fontVariationSettings()',
+                        'aria-hidden': 'true',
+                        translate: 'no',
+                    },
+                    template: `{{ name() }}`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], grade: [{ type: i0.Input, args: [{ isSignal: true, alias: "grade", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UI_MATERIAL_SYMBOLS_FONT_ATTR, UI_MATERIAL_SYMBOLS_FONT_HREF, UI_MATERIAL_SYMBOLS_FONT_ID, UiIconComponent, UiMaterialSymbolsService };
+//# sourceMappingURL=edsis-ui-icon.mjs.map

package/fesm2022/edsis-ui-icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edsis-ui-icon.mjs","sources":["../../../library/ui/icon/material-symbols.service.ts","../../../library/ui/icon/icon.component.ts","../../../library/ui/icon/edsis-ui-icon.ts"],"sourcesContent":["import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { Injectable, PLATFORM_ID, inject } from '@angular/core';\n\nexport const UI_MATERIAL_SYMBOLS_FONT_ATTR = 'data-ui-icon-font';\nexport const UI_MATERIAL_SYMBOLS_FONT_ID = 'material-symbols-outlined';\nexport const UI_MATERIAL_SYMBOLS_FONT_HREF =\n  'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0';\n\n@Injectable({ providedIn: 'root' })\nexport class UiMaterialSymbolsService {\n  private readonly documentRef = inject(DOCUMENT, { optional: true });\n  private readonly platformId = inject(PLATFORM_ID);\n\n  ensureLoaded(): void {\n    const head = this.documentRef?.head;\n\n    if (!isPlatformBrowser(this.platformId) || !head) {\n      return;\n    }\n\n    const existing = head.querySelector(`link[${UI_MATERIAL_SYMBOLS_FONT_ATTR}=\"${UI_MATERIAL_SYMBOLS_FONT_ID}\"]`);\n    if (existing) {\n      return;\n    }\n\n    const link = this.documentRef.createElement('link');\n    link.rel = 'stylesheet';\n    link.href = UI_MATERIAL_SYMBOLS_FONT_HREF;\n    link.setAttribute(UI_MATERIAL_SYMBOLS_FONT_ATTR, UI_MATERIAL_SYMBOLS_FONT_ID);\n    head.appendChild(link);\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { UiMaterialSymbolsService } from './material-symbols.service';\n\n@Component({\n  selector: 'ui-icon',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[style.font-size.px]': 'resolvedSize()',\n    '[style.line-height.px]': 'resolvedSize()',\n    '[style.font-variation-settings]': 'fontVariationSettings()',\n    'aria-hidden': 'true',\n    translate: 'no',\n  },\n  template: `{{ name() }}`,\n})\nexport class UiIconComponent {\n  private readonly materialSymbols = inject(UiMaterialSymbolsService);\n\n  readonly name = input('');\n  readonly class = input('', { alias: 'class' });\n  readonly size = input<number | null>(null);\n  readonly fill = input(0);\n  readonly weight = input(400);\n  readonly grade = input(0);\n  readonly opticalSize = input(24);\n\n  protected readonly resolvedSize = computed(() => this.size() ?? this.opticalSize());\n  protected readonly fontVariationSettings = computed(\n    () => `\"FILL\" ${this.fill()}, \"wght\" ${this.weight()}, \"GRAD\" ${this.grade()}, \"opsz\" ${this.opticalSize()}`,\n  );\n  protected readonly classes = computed(() => {\n    const base = 'material-symbols-outlined inline-flex items-center justify-center leading-none select-none';\n    const extra = this.class();\n    return extra ? `${base} ${extra}` : base;\n  });\n\n  constructor() {\n    this.materialSymbols.ensureLoaded();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/edsis-ui-nav.mjs

@@ -4,6 +4,7 @@ import { cn } from '@edsis/ui/utils';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { UiIconComponent } from '@edsis/ui/icon';
 
 class NavIconDirective {
     template = inject(TemplateRef);
@@ -487,11 +488,8 @@ class NavItemContentComponent {
     subtitleClasses = computed(() => cn('block truncate text-xs font-normal text-muted-foreground', this.item().classes?.subtitle), ...(ngDevMode ? [{ debugName: "subtitleClasses" }] : /* istanbul ignore next */ []));
     compactFallbackClasses = computed(() => cn('inline-flex h-5 min-w-5 items-center justify-center text-xs font-semibold uppercase'), ...(ngDevMode ? [{ debugName: "compactFallbackClasses" }] : /* istanbul ignore next */ []));
     defaultBadgeClasses = computed(() => cn('ml-auto inline-flex h-5 shrink-0 items-center rounded-full px-2 text-xs font-medium', this.active() ? 'bg-background text-foreground' : 'bg-muted text-muted-foreground'), ...(ngDevMode ? [{ debugName: "defaultBadgeClasses" }] : /* istanbul ignore next */ []));
-    defaultIconClasses = computed(() => cn('inline-flex h-4 w-4 shrink-0 rounded-full border', this.usesStraightVerticalSurface()
-        ? 'border-transparent bg-transparent'
-        : this.active()
-            ? 'border-primary'
-            : 'border-border bg-muted', this.item().classes?.icon), ...(ngDevMode ? [{ debugName: "defaultIconClasses" }] : /* istanbul ignore next */ []));
+    defaultIconSize = computed(() => (this.usesStraightVerticalSurface() ? 18 : 16), ...(ngDevMode ? [{ debugName: "defaultIconSize" }] : /* istanbul ignore next */ []));
+    defaultIconClasses = computed(() => cn('text-current', this.item().classes?.icon), ...(ngDevMode ? [{ debugName: "defaultIconClasses" }] : /* istanbul ignore next */ []));
     iconContext = computed(() => this.nav.iconContext(this.item(), this.active(), this.level(), this.orientation()), ...(ngDevMode ? [{ debugName: "iconContext" }] : /* istanbul ignore next */ []));
     compactFallback() {
         return this.nav.compactFallback(this.item());
@@ -501,12 +499,12 @@ class NavItemContentComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NavItemContentComponent, isStandalone: true, selector: "ui-nav-item-content", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
-    @if (item().icon) {
+    @if (item().icon; as iconName) {
       <span data-ui-nav-icon-slot="true" [class]="iconSlotClasses()">
         @if (iconTemplate(); as customIcon) {
           <ng-container [ngTemplateOutlet]="customIcon.template" [ngTemplateOutletContext]="iconContext()" />
         } @else {
-          <span aria-hidden="true" [class]="defaultIconClasses()" [attr.data-icon]="item().icon"></span>
+          <ui-icon [name]="iconName" [class]="defaultIconClasses()" [size]="defaultIconSize()" />
         }
       </span>
     }
@@ -527,24 +525,24 @@ class NavItemContentComponent {
     @if (compact() && !item().icon) {
       <span aria-hidden="true" [class]="compactFallbackClasses()">{{ compactFallback() }}</span>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavItemContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-nav-item-content',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, UiIconComponent],
                     host: {
                         class: 'contents',
                     },
                     template: `
-    @if (item().icon) {
+    @if (item().icon; as iconName) {
       <span data-ui-nav-icon-slot="true" [class]="iconSlotClasses()">
         @if (iconTemplate(); as customIcon) {
           <ng-container [ngTemplateOutlet]="customIcon.template" [ngTemplateOutletContext]="iconContext()" />
         } @else {
-          <span aria-hidden="true" [class]="defaultIconClasses()" [attr.data-icon]="item().icon"></span>
+          <ui-icon [name]="iconName" [class]="defaultIconClasses()" [size]="defaultIconSize()" />
         }
       </span>
     }
@@ -2056,23 +2054,18 @@ class UiNavHeaderComponent {
           [attr.title]="toggleAriaLabel()"
           data-ui-nav-header-toggle="true"
           (click)="toggleCollapsed()">
-          <span
-            aria-hidden="true"
-            data-ui-nav-header-toggle-icon="true"
-            class="material-symbols-outlined leading-none"
-            style="font-size: 18px; line-height: 18px;">
-            {{ toggleIconName() }}
-          </span>
+          <ui-icon data-ui-nav-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
         </button>
       }
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-nav-header',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [UiIconComponent],
                     host: {
                         '[class]': 'hostClasses()',
                         '[attr.data-collapsed]': 'displayCollapsed()',
@@ -2091,13 +2084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           [attr.title]="toggleAriaLabel()"
           data-ui-nav-header-toggle="true"
           (click)="toggleCollapsed()">
-          <span
-            aria-hidden="true"
-            data-ui-nav-header-toggle-icon="true"
-            class="material-symbols-outlined leading-none"
-            style="font-size: 18px; line-height: 18px;">
-            {{ toggleIconName() }}
-          </span>
+          <ui-icon data-ui-nav-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
         </button>
       }
     </div>