@educarehq/solaris-ui 0.2.0 → 0.3.0

package/lib/components/overlay/dialog/container/dialog-container.component.d.ts

@@ -0,0 +1,32 @@
+import { ViewContainerRef, type Type } from '@angular/core';
+import type { SolarisDialogOptions, SolarisDialogComponentConfig } from '../model/dialog.types';
+import * as i0 from "@angular/core";
+export declare class SolarisDialogContainerComponent {
+    private readonly dialogRef;
+    private readonly injector;
+    readonly externalComponent: import("@angular/core").InputSignal<Type<unknown> | null>;
+    readonly simpleOptions: import("@angular/core").InputSignal<SolarisDialogOptions<unknown> | null>;
+    readonly externalComponentConfig: import("@angular/core").InputSignal<SolarisDialogComponentConfig<unknown> | null>;
+    set componentHostRef(vcr: ViewContainerRef | undefined);
+    private readonly _componentHost;
+    private componentRef;
+    protected get hostAppearance(): string;
+    protected get hostSize(): string;
+    protected get hostVariant(): string | undefined | null;
+    protected get panelWidth(): string;
+    protected get panelHeight(): string;
+    protected get panelMinWidth(): string;
+    protected get panelMaxWidth(): string;
+    protected get panelMinHeight(): string;
+    protected get panelMaxHeight(): string;
+    protected get isSimpleMode(): boolean;
+    protected get closeOnBackdrop(): boolean;
+    protected get closeOnEscapeEnabled(): boolean;
+    protected get dialogRole(): string;
+    constructor();
+    private createComponentInHost;
+    protected onEscapePress(): void;
+    protected onBackdropClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SolarisDialogContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SolarisDialogContainerComponent, "solaris-dialog-container", never, { "externalComponent": { "alias": "externalComponent"; "required": false; "isSignal": true; }; "simpleOptions": { "alias": "simpleOptions"; "required": false; "isSignal": true; }; "externalComponentConfig": { "alias": "externalComponentConfig"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/overlay/dialog/flow/dialog-flow.component.d.ts

@@ -0,0 +1,19 @@
+import { QueryList, AfterContentInit } from '@angular/core';
+import { SolarisDialogStepComponent } from './dialog-step.component';
+import * as i0 from "@angular/core";
+export declare class SolarisDialogFlowComponent implements AfterContentInit {
+    readonly activeIndex: import("@angular/core").ModelSignal<number>;
+    readonly transition: import("@angular/core").InputSignal<"none" | "slide" | "fade">;
+    steps?: QueryList<SolarisDialogStepComponent>;
+    protected readonly stepTemplates: import("@angular/core").WritableSignal<{
+        template: import("@angular/core").TemplateRef<unknown>;
+        index: number;
+    }[]>;
+    protected readonly animationDirection: import("@angular/core").WritableSignal<"forward" | "backward" | null>;
+    private previousIndex;
+    private hasNavigated;
+    constructor();
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SolarisDialogFlowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SolarisDialogFlowComponent, "solaris-dialog-flow", never, { "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "transition": { "alias": "transition"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; }, ["steps"], ["[solaris-dialog-flow-footer]"], true, never>;
+}

package/lib/components/overlay/dialog/flow/dialog-step.component.d.ts

@@ -0,0 +1,7 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SolarisDialogStepComponent {
+    templateRef: TemplateRef<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SolarisDialogStepComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SolarisDialogStepComponent, "solaris-dialog-step", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/components/overlay/dialog/model/dialog.types.d.ts

@@ -0,0 +1,87 @@
+export type SolarisDialogAppearance = 'surface' | 'outline';
+export type SolarisDialogVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export type SolarisDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+export type SolarisDialogActionsAlign = 'start' | 'center' | 'end' | 'space-between';
+export type SolarisDialogActionsStack = 'auto' | 'horizontal' | 'vertical';
+export type SolarisDialogAutoFocus = 'first-tabbable' | 'panel' | false;
+export type SolarisDialogRole = 'dialog' | 'alertdialog';
+export type SolarisDialogButtonAppearance = 'solid' | 'outline' | 'ghost' | 'tonal' | 'surface';
+export type SolarisDialogButtonColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'custom';
+export interface SolarisDialogAction<TResult = unknown> {
+    label: string;
+    labelKey?: string;
+    appearance?: SolarisDialogButtonAppearance;
+    color?: SolarisDialogButtonColor;
+    disabled?: boolean;
+    close?: boolean;
+    result?: TResult;
+    action?: (dialogRef: SolarisDialogRefInterface<TResult>) => void | Promise<void>;
+    autoFocus?: boolean;
+}
+export interface SolarisDialogOptions<TResult = unknown> {
+    title?: string;
+    titleKey?: string;
+    description?: string;
+    descriptionKey?: string;
+    icon?: string;
+    iconDecorative?: boolean;
+    variant?: SolarisDialogVariant;
+    appearance?: SolarisDialogAppearance;
+    size?: SolarisDialogSize;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    closeable?: boolean;
+    closeLabel?: string;
+    closeLabelKey?: string;
+    closeOnEscape?: boolean;
+    closeOnBackdropClick?: boolean;
+    autoFocus?: SolarisDialogAutoFocus;
+    restoreFocus?: boolean;
+    role?: SolarisDialogRole;
+    ariaLabel?: string;
+    ariaLabelKey?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    actions?: SolarisDialogAction<TResult>[];
+    actionsAlign?: SolarisDialogActionsAlign;
+    actionsStack?: SolarisDialogActionsStack;
+    data?: unknown;
+}
+export interface SolarisDialogComponentConfig<TData = unknown> {
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    data?: TData;
+    closeable?: boolean;
+    closeOnEscape?: boolean;
+    closeOnBackdropClick?: boolean;
+    autoFocus?: SolarisDialogAutoFocus;
+    restoreFocus?: boolean;
+    role?: SolarisDialogRole;
+    appearance?: SolarisDialogAppearance;
+    size?: SolarisDialogSize;
+}
+export interface SolarisDialogConfig {
+    appearance?: SolarisDialogAppearance;
+    size?: SolarisDialogSize;
+    closeable?: boolean;
+    closeOnEscape?: boolean;
+    closeOnBackdropClick?: boolean;
+    autoFocus?: SolarisDialogAutoFocus;
+    restoreFocus?: boolean;
+    role?: SolarisDialogRole;
+    actionsAlign?: SolarisDialogActionsAlign;
+    actionsStack?: SolarisDialogActionsStack;
+}
+export interface SolarisDialogRefInterface<TResult = unknown> {
+    id: string;
+    close(result?: TResult): void;
+    afterClosed(): import('rxjs').Observable<TResult | undefined>;
+}

package/lib/components/overlay/dialog/provider/provide-solaris-dialog.d.ts

@@ -0,0 +1,3 @@
+import type { Provider } from '@angular/core';
+import type { SolarisDialogConfig } from '../model/dialog.types';
+export declare function provideSolarisDialog(config?: Partial<SolarisDialogConfig>): Provider[];

package/lib/components/overlay/dialog/service/dialog-ref.d.ts

@@ -0,0 +1,11 @@
+import { Observable } from 'rxjs';
+export declare class SolarisDialogRef<TResult = unknown> {
+    readonly id: string;
+    private readonly afterClosedSubject;
+    private _componentInstance;
+    constructor(id: string);
+    get componentInstance(): unknown;
+    set componentInstance(value: unknown);
+    close(result?: TResult): void;
+    afterClosed(): Observable<TResult | undefined>;
+}

package/lib/components/overlay/dialog/service/dialog.service.d.ts

@@ -0,0 +1,20 @@
+import { Type } from '@angular/core';
+import { SolarisDialogRef } from './dialog-ref';
+import type { SolarisDialogOptions, SolarisDialogComponentConfig } from '../model/dialog.types';
+import * as i0 from "@angular/core";
+export declare class SolarisDialogService {
+    private readonly injector;
+    private readonly overlay;
+    private readonly config;
+    private readonly openDialogs;
+    constructor();
+    open<TResult = unknown>(options: SolarisDialogOptions<TResult>): SolarisDialogRef<TResult>;
+    openComponent<TComponent, TResult = unknown, TData = unknown>(component: Type<TComponent>, config?: SolarisDialogComponentConfig<TData>): SolarisDialogRef<TResult>;
+    private createOverlay;
+    private createInjector;
+    private trackDialog;
+    private resolveOptions;
+    closeAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SolarisDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SolarisDialogService>;
+}

package/lib/components/overlay/dialog/token/dialog-data.token.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import type { SolarisDialogRef } from '../service/dialog-ref';
+export declare const SOLARIS_DIALOG_DATA: InjectionToken<unknown>;
+export declare const SOLARIS_DIALOG_REF: InjectionToken<SolarisDialogRef<unknown>>;

package/lib/components/overlay/dialog/token/dialog.tokens.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import type { SolarisDialogConfig } from '../model/dialog.types';
+export declare const SOLARIS_DIALOG_CONFIG: InjectionToken<SolarisDialogConfig>;
+export declare const SOLARIS_DIALOG_DEFAULT_CONFIG: SolarisDialogConfig;

package/lib/services/icon/icons/groups/actions.d.ts

@@ -0,0 +1,2 @@
+import type { SolarisIconDefinition } from '../../model/solaris-icon-definition.interface';
+export declare const ACTIONS_ICONS: SolarisIconDefinition[];

package/lib/services/icon/icons/groups/data.d.ts

@@ -0,0 +1,2 @@
+import type { SolarisIconDefinition } from '../../model/solaris-icon-definition.interface';
+export declare const DATA_ICONS: SolarisIconDefinition[];

package/lib/services/icon/icons/groups/layout.d.ts

@@ -0,0 +1,2 @@
+import type { SolarisIconDefinition } from '../../model/solaris-icon-definition.interface';
+export declare const LAYOUT_ICONS: SolarisIconDefinition[];

package/lib/services/icon/icons/groups/navigation.d.ts

@@ -0,0 +1,2 @@
+import type { SolarisIconDefinition } from '../../model/solaris-icon-definition.interface';
+export declare const NAVIGATION_ICONS: SolarisIconDefinition[];

package/lib/services/icon/icons/groups/status.d.ts

@@ -0,0 +1,2 @@
+import type { SolarisIconDefinition } from '../../model/solaris-icon-definition.interface';
+export declare const STATUS_ICONS: SolarisIconDefinition[];

package/lib/services/icon/icons/groups/theme.d.ts

@@ -0,0 +1,2 @@
+import type { SolarisIconDefinition } from '../../model/solaris-icon-definition.interface';
+export declare const THEME_ICONS: SolarisIconDefinition[];

package/lib/services/icon/model/solaris-icon-definition.interface.d.ts

@@ -23,7 +23,16 @@ export interface SvgCircleElement {
     cy: number;
     r: number;
 }
-export type SvgElement = SvgPathElement | SvgLineElement | SvgPolylineElement | SvgPolygonElement | SvgCircleElement;
+export interface SvgRectElement {
+    type: 'rect';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx?: number;
+    ry?: number;
+}
+export type SvgElement = SvgPathElement | SvgLineElement | SvgPolylineElement | SvgPolygonElement | SvgCircleElement | SvgRectElement;
 export interface SolarisIconDefinition {
     name: string;
     viewBox: string;

package/lib/services/icon/model/solaris-icon.types.d.ts

@@ -1,4 +1,4 @@
-export type SolarisBuiltInIcon = 'check' | 'x' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-forward' | 'chevron-backward' | 'chevron-first' | 'chevron-last' | 'info' | 'warning' | 'danger' | 'caution' | 'success' | 'shield-check' | 'sun' | 'moon' | 'globe';
+export type SolarisBuiltInIcon = 'check' | 'x' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-forward' | 'chevron-backward' | 'chevron-first' | 'chevron-last' | 'info' | 'warning' | 'danger' | 'caution' | 'success' | 'shield-check' | 'sun' | 'moon' | 'monitor' | 'globe' | 'ellipses' | 'edit' | 'trash' | 'move' | 'gear' | 'settings' | 'wrench' | 'unlink' | 'unlock' | 'lock';
 export type SolarisIconName = string & {
     __brand?: never;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@educarehq/solaris-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "peerDependencies": {
     "@angular/cdk": "^21.2.0",
     "@angular/common": "^21.2.0",

package/styles/_dropdown-menu.scss

@@ -0,0 +1,72 @@
+.solaris-dropdown-menu-overlay {
+  --solaris-dropdown-menu-min-width: calc(
+    var(--solaris-spacing-24) + var(--solaris-spacing-10) +
+      var(--solaris-spacing-1)
+  );
+  --solaris-dropdown-menu-max-width: calc(
+    var(--solaris-spacing-24) * 2 + var(--solaris-spacing-10) +
+      var(--solaris-spacing-2)
+  );
+
+  .solaris-popover-panel__container {
+    padding: 0;
+    overflow: hidden;
+  }
+}
+
+.solaris-dropdown-menu__wrapper {
+  --solaris-dropdown-menu-gap: var(--solaris-spacing-2);
+  --solaris-dropdown-menu-padding: var(--solaris-spacing-2);
+
+  display: flex;
+  outline: none;
+  user-select: none;
+  flex-direction: column;
+  box-sizing: border-box;
+  gap: var(--solaris-dropdown-menu-gap);
+  padding: var(--solaris-dropdown-menu-padding);
+  min-width: var(--solaris-dropdown-menu-min-width);
+  max-width: var(--solaris-dropdown-menu-max-width);
+
+  solaris-divider {
+    margin-inline: calc(-1 * var(--solaris-dropdown-menu-padding));
+    width: calc(100% + 2 * var(--solaris-dropdown-menu-padding));
+  }
+}
+
+solaris-dropdown-menu-group {
+  display: flex;
+  flex-direction: column;
+  padding-block: var(--solaris-spacing-1);
+
+  &:first-child {
+    padding-block-start: 0;
+  }
+
+  &:last-child {
+    padding-block-end: 0;
+  }
+}
+
+solaris-dropdown-menu-label {
+  display: flex;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--solaris-text-muted);
+  font-weight: var(--solaris-font-weight-semibold);
+  font-size: var(--solaris-font-size-xs);
+  line-height: var(--solaris-line-height-xs);
+  padding: var(--solaris-spacing-2) var(--solaris-spacing-3);
+}
+
+solaris-dropdown-submenu {
+  display: flex;
+  flex-direction: column;
+}
+
+solaris-dropdown-submenu-trigger {
+  display: flex;
+}

package/styles/_popover.scss

@@ -1,34 +1,39 @@
 .solaris-popover-panel-overlay {
-  z-index: var(--solaris-z-index-popover, 1000);
+  z-index: var(--solaris-z-index-popover);
 }
 
 .solaris-popover-panel {
-  display: block;
+  --solaris-popover-border-width: 0;
+  --solaris-popover-min-width: auto;
+  --solaris-popover-max-width: none;
+  --solaris-popover-border-color: transparent;
+  --solaris-popover-radius: var(--solaris-radius-md);
+  --solaris-popover-shadow: var(--solaris-shadow-lg);
+  --solaris-popover-padding: var(--solaris-spacing-3);
+  --solaris-popover-color: var(--solaris-text-default);
+  --solaris-popover-background: var(--solaris-surface-raised);
+
   outline: none;
+  display: block;
 }
 
 .solaris-popover-panel__container {
-  box-sizing: border-box;
-  background: var(--solaris-popover-background, var(--solaris-surface-raised));
-  color: var(--solaris-popover-color, var(--solaris-text-default));
-  border: var(--solaris-popover-border-width, 0) solid
-    var(--solaris-popover-border-color, transparent);
-  border-radius: var(--solaris-popover-radius, var(--solaris-radius-md));
-  box-shadow: var(--solaris-popover-shadow, var(--solaris-shadow-lg));
-  padding: var(--solaris-popover-padding, var(--solaris-spacing-3));
-  min-width: var(--solaris-popover-min-width, auto);
-  max-width: var(--solaris-popover-max-width, none);
   outline: none;
+  box-sizing: border-box;
+  color: var(--solaris-popover-color);
+  padding: var(--solaris-popover-padding);
+  box-shadow: var(--solaris-popover-shadow);
+  min-width: var(--solaris-popover-min-width);
+  max-width: var(--solaris-popover-max-width);
+  border-radius: var(--solaris-popover-radius);
+  background: var(--solaris-popover-background);
+  border: var(--solaris-popover-border-width) solid
+    var(--solaris-popover-border-color);
 }
 
 .solaris-popover-panel__container[data-appearance='outline'] {
-  background: var(--solaris-popover-background, var(--solaris-surface-raised));
-  border: var(--solaris-popover-border-width, var(--solaris-border-width-sm))
-    solid
-    var(
-      --solaris-popover-border-color,
-      var(--solaris-popover-outline-border-color, var(--solaris-border-default))
-    );
+  background: var(--solaris-surface-base);
+  border: var(--solaris-border-width-sm) solid var(--solaris-border-subtle);
 }
 
 .solaris-popover-panel__container[data-padding='none'] {

package/styles/_toast.scss

@@ -0,0 +1,9 @@
+.solaris-toast-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: var(--solaris-z-index-toast, 500);
+}

package/styles/_tooltip.scss

@@ -1,3 +1,3 @@
-.solaris-tooltip-panel-overlay {
-  z-index: var(--solaris-tooltip-z-index, var(--solaris-z-index-tooltip));
-}
+.solaris-tooltip-panel-overlay {
+  z-index: var(--solaris-tooltip-z-index, var(--solaris-z-index-tooltip));
+}