@allsorter/ui-components 0.0.367 → 0.0.370

package/lib/shared-popup-modal/shared-popup-modal.component.d.ts

@@ -54,6 +54,23 @@ export declare class ModalComponent implements AfterContentInit {
     onSubmit(): void;
     onRequestTemplate(): void;
     onClose(): void;
+    /**
+     * Dynamically determines the base path for assets
+     * Handles both root deployment and subdirectory deployment (e.g., /allsorter-lib/)
+     */
+    private getBasePath;
+    /**
+     * Gets the image path for warning icon
+     */
+    getWarningIconPath(): string;
+    /**
+     * Gets the image path for error icon
+     */
+    getErrorIconPath(): string;
+    /**
+     * Gets the image path for success icon
+     */
+    getSuccessIconPath(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, [{ optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "al-modal", never, { "titleText": { "alias": "titleText"; "required": false; }; "userMessage": { "alias": "userMessage"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "closeIcon": { "alias": "closeIcon"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "submitLabel": { "alias": "submitLabel"; "required": false; }; "cancelCategory": { "alias": "cancelCategory"; "required": false; }; "submitCategory": { "alias": "submitCategory"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "cancelIcon": { "alias": "cancelIcon"; "required": false; }; "submitIcon": { "alias": "submitIcon"; "required": false; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; }; "showSubmitButton": { "alias": "showSubmitButton"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "buttonAlignment": { "alias": "buttonAlignment"; "required": false; }; "messageAlignment": { "alias": "messageAlignment"; "required": false; }; "useCustomHeader": { "alias": "useCustomHeader"; "required": false; }; "customHeaderTitle": { "alias": "customHeaderTitle"; "required": false; }; "customHeaderDescription": { "alias": "customHeaderDescription"; "required": false; }; "customHeaderIcon": { "alias": "customHeaderIcon"; "required": false; }; "customActionLabel": { "alias": "customActionLabel"; "required": false; }; "customActionIcon": { "alias": "customActionIcon"; "required": false; }; "customActionRightIcon": { "alias": "customActionRightIcon"; "required": false; }; "templatingGuidePrefix": { "alias": "templatingGuidePrefix"; "required": false; }; "templatingGuideLabel": { "alias": "templatingGuideLabel"; "required": false; }; "templatingGuideHref": { "alias": "templatingGuideHref"; "required": false; }; "modalType": { "alias": "modalType"; "required": false; }; "feedbackVariant": { "alias": "feedbackVariant"; "required": false; }; "feedbackIcon": { "alias": "feedbackIcon"; "required": false; }; }, { "cancel": "cancel"; "submit": "submit"; "close": "close"; "requestTemplate": "requestTemplate"; "onHover": "onHover"; "onMouseLeave": "onMouseLeave"; "optionSelect": "optionSelect"; }, never, ["*"], true, never>;
 }

package/lib/side-action-bar-wrapper/side-action-bar-wrapper.component.d.ts

@@ -0,0 +1,34 @@
+import { AfterContentInit, EventEmitter, QueryList, OnInit } from '@angular/core';
+import { ButtonComponent } from '../button/button.component';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class SideActionBarWrapperComponent implements AfterContentInit, OnInit {
+    private iconRegistry;
+    private sanitizer;
+    actionButtons: QueryList<ButtonComponent>;
+    showClose: boolean;
+    visible: boolean;
+    position: 'left' | 'right';
+    iconOutlined: boolean;
+    closeButtonTooltip: string;
+    closeButtonTooltipPosition: 'above' | 'below' | 'left' | 'right';
+    closeClick: EventEmitter<void>;
+    buttons: ButtonComponent[];
+    constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    private registerIcons;
+    ngAfterContentInit(): void;
+    /**
+     * Enforce wrapper defaults on projected buttons:
+     * - buttonType = 'icon-circle'
+     * - color = 'white' (unless explicitly set to gradient, grey, etc.)
+     * - outline = true (unless explicitly set to false for non-white colors)
+     * - size = 'sm' (unless explicitly set)
+     * - iconOnly = true (unless explicitly set to false)
+     * - iconOutlined = false (unless explicitly set to true)
+     */
+    private applyDefaultsToButtons;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideActionBarWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideActionBarWrapperComponent, "al-side-action-bar", never, { "showClose": { "alias": "showClose"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "position": { "alias": "position"; "required": false; }; "iconOutlined": { "alias": "iconOutlined"; "required": false; }; "closeButtonTooltip": { "alias": "closeButtonTooltip"; "required": false; }; "closeButtonTooltipPosition": { "alias": "closeButtonTooltipPosition"; "required": false; }; }, { "closeClick": "closeClick"; }, ["actionButtons"], ["*"], true, never>;
+}

package/lib/side-action-bar-wrapper/side-action-bar-wrapper.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./side-action-bar-wrapper.component";
+/**
+ * Module for Side Action Bar Wrapper Component
+ * Note: This component is standalone, so this module is optional.
+ * It can be used if you need to import the component in a non-standalone module.
+ */
+export declare class SideActionBarWrapperModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideActionBarWrapperModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SideActionBarWrapperModule, never, [typeof i1.SideActionBarWrapperComponent], [typeof i1.SideActionBarWrapperComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SideActionBarWrapperModule>;
+}

package/lib/styles/border-radius.scss

@@ -0,0 +1,11 @@
+// Border radius design tokens
+// Aligns with Foundations/Round Corners story: 4px, 8px, 16px
+
+$radius-4: 4px;  // Small
+$radius-8: 8px;  // Medium
+$radius-16: 16px; // Large
+
+// Aliases (optional)
+$radius-sm: $radius-4;
+$radius-md: $radius-8;
+$radius-lg: $radius-16;

package/lib/styles/button-mixins.scss

@@ -0,0 +1,41 @@
+@mixin button-theme($bg, $color, $hover, $active) {
+    background-color: $bg;
+    color: $color;
+  
+    &:hover {
+      background-color: $hover;
+    }
+  
+    &:active {
+      background-color: $active;
+    }
+  }
+  
+  @mixin button-outline($color) {
+    background-color: #fff;
+    color: $color;
+    border: 1px solid $color;
+  
+    &:hover {
+      background-color: $color;
+      color: #fff;
+    }
+  
+    &:active {
+      background-color: darken($color, 10%);
+      color: #fff;
+    }
+  }
+  
+  @mixin gradient-button($bg, $hover, $active) {
+    background: $bg;
+    color: #fff;
+  
+    &:hover {
+      background: $hover;
+    }
+  
+    &:active {
+      background: $active;
+    }
+  }

package/lib/styles/button.scss

@@ -0,0 +1,117 @@
+@import './colors.scss';
+
+// Base Colors
+$color-blue: #5473E8;
+$color-blue-hover: #6581EA;
+$color-blue-active: #1E46DF;
+
+$color-green: #37C1CE;
+$color-green-hover: #4BC7D3;
+$color-green-active: #299DA8;
+
+$color-grey: $color-grey-600;
+$color-grey-hover: #4B4F62;
+$color-grey-active: #252831;
+
+$color-error: #E854A4;
+$color-error-hover: #EF87BF;
+$color-error-active: #E22A8E;
+
+$color-gradient: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);
+$color-gradient-hover: linear-gradient(0deg, rgba(250, 250, 253, 0.3), rgba(250, 250, 253, 0.3)),
+linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
+$color-gradient-active: linear-gradient(0deg, rgba(56, 59, 74, 0.5), rgba(56, 59, 74, 0.5)),
+linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
+
+// Outline variants
+$color-outline-blue: #5473E8;
+$color-outline-green: #37C1CE;
+$color-outline-grey: #383B4A;
+$color-outline-error: #E854A4;
+
+$color-disabled-bg: #D1D3DB;
+$color-disabled-text: #666;
+
+@mixin button-theme($bg, $color, $hover, $active) {
+  background-color: $bg;
+  color: $color;
+
+  &:hover {
+    background-color: $hover;
+  }
+
+  &:active {
+    background-color: $active;
+  }
+}
+
+@mixin button-outline($color) {
+  background-color: #fff;
+  color: $color;
+  border: 1px solid $color;
+
+  &:hover {
+    background-color: $color;
+    color: #fff;
+  }
+
+  &:active {
+    background-color: darken($color, 10%);
+    color: #fff;
+  }
+}
+
+@mixin gradient-button($bg, $hover, $active) {
+  background: $bg;
+  color: #fff;
+
+  &:hover {
+    background: $hover;
+  }
+
+  &:active {
+    background: $active;
+  }
+}
+
+.btn-blue {
+  @include button-theme($color-blue, #fff, $color-blue-hover, $color-blue-active);
+}
+
+.btn-green {
+  @include button-theme($color-green, #fff, $color-green-hover, $color-green-active);
+}
+
+.btn-grey {
+  @include button-theme($color-grey, #fff, $color-grey-hover, $color-grey-active);
+}
+
+.btn-error {
+  @include button-theme($color-error, #fff, $color-error-hover, $color-error-active);
+}
+
+.btn-blue-no-outline {
+  @include button-outline($color-outline-blue);
+}
+
+.btn-green-no-outline {
+  @include button-outline($color-outline-green);
+}
+
+.btn-grey-no-outline {
+  @include button-outline($color-outline-grey);
+}
+
+.btn-error-no-outline {
+  @include button-outline($color-outline-error);
+}
+
+.btn-gradient {
+  @include gradient-button($color-gradient, $color-gradient-hover, $color-gradient-active);
+}
+
+.btn-disabled {
+  background-color: $color-disabled-bg !important;
+  color: $color-disabled-text !important;
+  cursor: not-allowed !important;
+}

package/lib/styles/colors.scss

@@ -0,0 +1,221 @@
+// ============================================
+// PRIMARY COLOR SCALE
+// ============================================
+
+// Primary Blue - Complete Scale
+$color-blue-50: #E5E9FC;   // Tints-50
+$color-blue-100: #BBC7F6;  // Tints-100
+$color-blue-200: #98ABF1;  // Tints-200
+$color-blue-300: #768FED;  // Tints-300
+$color-blue-400: #6581EA;  // Tints-400
+$color-blue-500: #5473E8;  // Base-Blue
+$color-blue-600: #1E46DF;  // Shades-600
+$color-blue-700: #0F236F;  // Shades-700
+$color-blue-800: #071238;  // Shades-800
+$color-blue-900: #04091C;  // Shades-900
+
+// Primary Blue - Semantic Names (for backward compatibility)
+$color-blue: $color-blue-500;
+$color-blue-hover: $color-blue-400;
+$color-blue-active: $color-blue-600;
+
+// ============================================
+// SECONDARY COLOR SCALE
+// ============================================
+
+// Primary Green - Complete Scale
+$color-green-50: #D7F3F5;   // Tints-50
+$color-green-100: #AFE6EB;  // Tints-100
+$color-green-200: #87DAE2;  // Tints-200
+$color-green-300: #5FCDD8;  // Tints-300
+$color-green-400: #4BC7D3;  // Tints-400
+$color-green-500: #37C1CE;  // Base-Green
+$color-green-600: #299DA8;  // Shades-600
+$color-green-700: #1F767E;  // Shades-700
+$color-green-800: #154E54;  // Shades-800
+$color-green-900: #0A272A;  // Shades-900
+
+// Primary Green - Semantic Names (for backward compatibility)
+$color-green: $color-green-500;
+$color-green-hover: $color-green-400;
+$color-green-active: $color-green-600;
+
+// ============================================
+// NEUTRAL COLOR SCALE
+// ============================================
+
+// Primary Grey - Complete Scale
+$color-grey-50: #FAFBFB;   // Tints-50
+$color-grey-100: #ECEDF1;  // Tints-100
+$color-grey-200: #DEE0E6;  // Tints-200
+$color-grey-300: #D1D3DB;  // Tints-300
+$color-grey-400: #C3C5D1;  // Tints-400
+$color-grey-500: #A2A6B8;  // Base-Grey
+$color-grey-600: #717793;  // Shades-600
+$color-grey-700: #4B4F62;  // Shades-700
+$color-grey-800: #383B4A;  // Shades-800
+$color-grey-900: #252831;  // Shades-900
+
+// Primary Grey - Semantic Names (for backward compatibility)
+$color-grey: $color-grey-800;
+$color-grey-hover: $color-grey-700;
+$color-grey-active: $color-grey-900;
+
+// ============================================
+// SEMANTIC COLOR SCALE
+// ============================================
+
+// Primary Error - Complete Scale
+$color-error-50: #FDEEF6;   // Tints-50
+$color-error-100: #F9D4E8;  // Tints-100
+$color-error-200: #F6BBDB;  // Tints-200
+$color-error-300: #F2A1CD;  // Tints-300
+$color-error-400: #EF87BF;  // Tints-400
+$color-error-500: #E854A4;  // Base-Error
+$color-error-600: #E22A8E;  // Shades-600
+$color-error-700: #C31A75;  // Shades-700
+$color-error-800: #99155C;  // Shades-800
+$color-error-900: #6F0F43;  // Shades-900
+
+// Primary Error - Semantic Names (for backward compatibility)
+$color-error: $color-error-500;
+$color-error-hover: $color-error-400;
+$color-error-active: $color-error-600;
+
+// Primary Success - Complete Scale
+$color-success-50: #E9F9F3;   // Tints-50
+$color-success-100: #C8F1E3;  // Tints-100
+$color-success-200: #9EE7CE;  // Tints-200
+$color-success-300: #6EDDB7;  // Tints-300
+$color-success-400: #3DD3A0;  // Tints-400
+$color-success-500: #00AD83;  // Base-Success
+$color-success-600: #009873;  // Shades-600
+$color-success-700: #007F61;  // Shades-700
+$color-success-800: #00654F;  // Shades-800
+$color-success-900: #003D30;  // Shades-900
+
+// Primary Success - Semantic Names (for backward compatibility)
+$color-success: $color-success-500;
+$color-success-hover: $color-success-600;
+$color-success-active: $color-success-700;
+
+$color-white-500: #fff;
+
+// ============================================
+// GRADIENTS
+// ============================================
+
+$color-gradient: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);
+$color-gradient-hover: linear-gradient(0deg, rgba(250, 250, 253, 0.3), rgba(250, 250, 253, 0.3)),
+                       linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
+$color-gradient-active: linear-gradient(0deg, rgba(56, 59, 74, 0.5), rgba(56, 59, 74, 0.5)),
+                        linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
+
+// ============================================
+// OUTLINE VARIANTS
+// ============================================
+
+$color-outline-blue: $color-blue-500;
+$color-outline-green: $color-green-500;
+$color-outline-grey: $color-grey-800;
+$color-outline-error: $color-error-500;
+$color-outline-success: $color-success-500;
+$color-outline-white: $color-white-500;
+
+// ============================================
+// UTILITY COLORS
+// ============================================
+
+$color-disabled-bg: $color-grey-300;
+$color-disabled-text: $color-grey-500;
+
+// ============================================
+// CSS CUSTOM PROPERTIES
+// ============================================
+
+:root {
+  // Primary Blue Scale
+  --color-blue-50: #{$color-blue-50};
+  --color-blue-100: #{$color-blue-100};
+  --color-blue-200: #{$color-blue-200};
+  --color-blue-300: #{$color-blue-300};
+  --color-blue-400: #{$color-blue-400};
+  --color-blue-500: #{$color-blue-500};
+  --color-blue-600: #{$color-blue-600};
+  --color-blue-700: #{$color-blue-700};
+  --color-blue-800: #{$color-blue-800};
+  --color-blue-900: #{$color-blue-900};
+
+  // Primary Green Scale
+  --color-green-50: #{$color-green-50};
+  --color-green-100: #{$color-green-100};
+  --color-green-200: #{$color-green-200};
+  --color-green-300: #{$color-green-300};
+  --color-green-400: #{$color-green-400};
+  --color-green-500: #{$color-green-500};
+  --color-green-600: #{$color-green-600};
+  --color-green-700: #{$color-green-700};
+  --color-green-800: #{$color-green-800};
+  --color-green-900: #{$color-green-900};
+
+  // Primary Grey Scale
+  --color-grey-50: #{$color-grey-50};
+  --color-grey-100: #{$color-grey-100};
+  --color-grey-200: #{$color-grey-200};
+  --color-grey-300: #{$color-grey-300};
+  --color-grey-400: #{$color-grey-400};
+  --color-grey-500: #{$color-grey-500};
+  --color-grey-600: #{$color-grey-600};
+  --color-grey-700: #{$color-grey-700};
+  --color-grey-800: #{$color-grey-800};
+  --color-grey-900: #{$color-grey-900};
+
+  // Primary Error Scale
+  --color-error-50: #{$color-error-50};
+  --color-error-100: #{$color-error-100};
+  --color-error-200: #{$color-error-200};
+  --color-error-300: #{$color-error-300};
+  --color-error-400: #{$color-error-400};
+  --color-error-500: #{$color-error-500};
+  --color-error-600: #{$color-error-600};
+  --color-error-700: #{$color-error-700};
+  --color-error-800: #{$color-error-800};
+  --color-error-900: #{$color-error-900};
+
+  // Primary Success Scale
+  --color-success-50: #{$color-success-50};
+  --color-success-100: #{$color-success-100};
+  --color-success-200: #{$color-success-200};
+  --color-success-300: #{$color-success-300};
+  --color-success-400: #{$color-success-400};
+  --color-success-500: #{$color-success-500};
+  --color-success-600: #{$color-success-600};
+  --color-success-700: #{$color-success-700};
+  --color-success-800: #{$color-success-800};
+  --color-success-900: #{$color-success-900};
+
+  // Semantic Names
+  --color-blue: #{$color-blue};
+  --color-blue-hover: #{$color-blue-hover};
+  --color-blue-active: #{$color-blue-active};
+
+  --color-green: #{$color-green};
+  --color-green-hover: #{$color-green-hover};
+  --color-green-active: #{$color-green-active};
+
+  --color-grey: #{$color-grey};
+  --color-grey-hover: #{$color-grey-hover};
+  --color-grey-active: #{$color-grey-active};
+
+  --color-error: #{$color-error};
+  --color-error-hover: #{$color-error-hover};
+  --color-error-active: #{$color-error-active};
+
+  --color-success: #{$color-success};
+  --color-success-hover: #{$color-success-hover};
+  --color-success-active: #{$color-success-active};
+
+  // Utility Colors
+  --color-disabled-bg: #{$color-disabled-bg};
+  --color-disabled-text: #{$color-disabled-text};
+}

package/lib/styles/elevation.scss

@@ -0,0 +1,46 @@
+// Elevation System
+// Drop shadows for creating depth and hierarchy in the UI
+
+:root {
+  // Elevation Level 1 - Subtle elevation for small components
+  --elevation-1: 0 1px 5px 1px rgba(113, 119, 147, 0.10);
+  
+  // Elevation Level 2 - Light elevation for cards and panels
+  --elevation-2: 0 2px 10px 2px rgba(113, 119, 147, 0.10);
+  
+  // Elevation Level 3 - Medium elevation for modals and overlays
+  --elevation-3: 0 4px 15px 3px rgba(113, 119, 147, 0.12);
+  
+  // Elevation Level 4 - High elevation for dropdowns and popups
+  --elevation-4: 0 6px 10px 4px rgba(113, 119, 147, 0.15);
+  
+  // Elevation Level 5 - Maximum elevation for tooltips and alerts
+  --elevation-5: 0 5px 15px 5px rgba(113, 119, 147, 0.20);
+  
+  // Elevation Level 6 - Special elevation for borders and dividers
+  --elevation-6: 0 2px 4px 0 rgba(24, 43, 125, 0.15);
+}
+
+// SCSS Variables for use in components
+$elevation-1: 0 1px 5px 1px rgba(113, 119, 147, 0.10);
+$elevation-2: 0 2px 10px 2px rgba(113, 119, 147, 0.10);
+$elevation-3: 0 4px 15px 3px rgba(113, 119, 147, 0.12);
+$elevation-4: 0 6px 10px 4px rgba(113, 119, 147, 0.15);
+$elevation-5: 0 5px 15px 5px rgba(113, 119, 147, 0.20);
+$elevation-6: 0 2px 4px 0 rgba(24, 43, 125, 0.15);
+
+// Utility Classes
+.elevation-1 { box-shadow: var(--elevation-1); }
+.elevation-2 { box-shadow: var(--elevation-2); }
+.elevation-3 { box-shadow: var(--elevation-3); }
+.elevation-4 { box-shadow: var(--elevation-4); }
+.elevation-5 { box-shadow: var(--elevation-5); }
+.elevation-6 { box-shadow: var(--elevation-6); }
+
+// Mixins for easy use in SCSS
+@mixin elevation-1 { box-shadow: $elevation-1; }
+@mixin elevation-2 { box-shadow: $elevation-2; }
+@mixin elevation-3 { box-shadow: $elevation-3; }
+@mixin elevation-4 { box-shadow: $elevation-4; }
+@mixin elevation-5 { box-shadow: $elevation-5; }
+@mixin elevation-6 { box-shadow: $elevation-6; }