@dso-design-system/ui 0.0.1 → 0.1.0

package/fesm2022/dso-design-system-ui.mjs

@@ -1,7 +1,13 @@
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output } from '@angular/core';
+import { Component, Input, EventEmitter, Output, ViewChild, HostListener, Directive, Injectable, ContentChildren } from '@angular/core';
+import * as i2$1 from '@angular/router';
+import { RouterLink, RouterModule } from '@angular/router';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import lottie from 'lottie-web';
+import { ReplaySubject } from 'rxjs';
 
 class IconComponent {
     /** Name of the icon to display (matches sprite ID) */
@@ -122,9 +128,2056 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+class AlertComponent {
+    type = 'info';
+    message = '';
+    showActions = false;
+    isDismissable = true;
+    actions = [];
+    isVisible = true;
+    isHiding = false;
+    close() {
+        this.isHiding = true;
+        // Wait for fadeOut animation to finish before removing the alert
+        setTimeout(() => {
+            this.isVisible = false;
+        }, 300); // match duration in CSS
+    }
+    // Pick the icon name based on alert type
+    get iconName() {
+        switch (this.type) {
+            case 'success': return 'icon-slanted-check';
+            case 'error': return 'icon-left-align';
+            case 'warning': return 'icon-van';
+            default: return 'icon-notification';
+        }
+    }
+    /** Handle when a button inside the alert is clicked */
+    handleAction(action) {
+        if (action.onClick) {
+            action.onClick();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AlertComponent, isStandalone: true, selector: "dso-alert", inputs: { type: "type", message: "message", showActions: "showActions", isDismissable: "isDismissable", actions: "actions" }, ngImport: i0, template: "\r\n<div\r\n*ngIf=\"isVisible\"\r\nclass=\"alert\"\r\n[ngClass]=\"[type, isHiding ? 'hide' : '']\">  \r\n        <div class=\"positioning\">\r\n        <dso-icon [iconName]=\"iconName\" [size]=\"'medium'\"></dso-icon>\r\n    </div>\r\n    <span [innerHTML]=\"message\"></span>\r\n\r\n    <div class=\"positioning\" *ngIf=\"actions && actions.length > 0 || isDismissable\">\r\n        <div class=\"button-wrapper\">\r\n        <dso-button\r\n            *ngFor=\"let action of actions\"\r\n            [btnLabel]=\"action.btnLabel\"\r\n            [btnType]=\"action.btnType || 'contrast'\" \r\n            [btnSize]=\"action.btnSize || 'mdBtn'\"\r\n            [btnIconName]=\"action.btnIconName ?? null\"\r\n            [isDisabled]=\"action.isDisabled || false\"\r\n            (click)=\"handleAction(action)\">\r\n        </dso-button>\r\n        </div>\r\n        <button (click)=\"close()\" *ngIf=\"isDismissable\" class=\"close-btn\">&times;</button>\r\n    </div>\r\n    \r\n</div>", styles: ["@charset \"UTF-8\";@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.alert{padding:12px 16px;border-radius:5px;gap:16px;display:flex;align-items:stretch;font-size:16px;animation:fadeIn .4s ease-in}.alert.hide{animation:fadeOut .4s ease-out forwards}.success{background-color:#77c98a;color:#fff}.error{background-color:#dc3545;color:#fff}.info{background-color:#17a2b8;color:#fff}.warning{background-color:#ffc107;color:#000}.close-btn{width:24px;height:24px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:24px;line-height:1;color:inherit;cursor:pointer}.close-btn:hover{opacity:.7}.content-wrapper{display:flex;align-items:center;flex:1;gap:12px}.positioning{display:flex;align-items:flex-start;align-self:stretch}span{flex-grow:1;line-height:1.4;max-height:7em;overflow-y:auto}.button-wrapper{display:flex;flex-direction:column;gap:8px;padding-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "dso-button", inputs: ["btnLabel", "btnType", "btnSize", "btnIconName", "isDisabled", "isActive"], outputs: ["onClick"] }, { kind: "component", type: IconComponent, selector: "dso-icon", inputs: ["iconName", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-alert', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent], template: "\r\n<div\r\n*ngIf=\"isVisible\"\r\nclass=\"alert\"\r\n[ngClass]=\"[type, isHiding ? 'hide' : '']\">  \r\n        <div class=\"positioning\">\r\n        <dso-icon [iconName]=\"iconName\" [size]=\"'medium'\"></dso-icon>\r\n    </div>\r\n    <span [innerHTML]=\"message\"></span>\r\n\r\n    <div class=\"positioning\" *ngIf=\"actions && actions.length > 0 || isDismissable\">\r\n        <div class=\"button-wrapper\">\r\n        <dso-button\r\n            *ngFor=\"let action of actions\"\r\n            [btnLabel]=\"action.btnLabel\"\r\n            [btnType]=\"action.btnType || 'contrast'\" \r\n            [btnSize]=\"action.btnSize || 'mdBtn'\"\r\n            [btnIconName]=\"action.btnIconName ?? null\"\r\n            [isDisabled]=\"action.isDisabled || false\"\r\n            (click)=\"handleAction(action)\">\r\n        </dso-button>\r\n        </div>\r\n        <button (click)=\"close()\" *ngIf=\"isDismissable\" class=\"close-btn\">&times;</button>\r\n    </div>\r\n    \r\n</div>", styles: ["@charset \"UTF-8\";@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.alert{padding:12px 16px;border-radius:5px;gap:16px;display:flex;align-items:stretch;font-size:16px;animation:fadeIn .4s ease-in}.alert.hide{animation:fadeOut .4s ease-out forwards}.success{background-color:#77c98a;color:#fff}.error{background-color:#dc3545;color:#fff}.info{background-color:#17a2b8;color:#fff}.warning{background-color:#ffc107;color:#000}.close-btn{width:24px;height:24px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:24px;line-height:1;color:inherit;cursor:pointer}.close-btn:hover{opacity:.7}.content-wrapper{display:flex;align-items:center;flex:1;gap:12px}.positioning{display:flex;align-items:flex-start;align-self:stretch}span{flex-grow:1;line-height:1.4;max-height:7em;overflow-y:auto}.button-wrapper{display:flex;flex-direction:column;gap:8px;padding-right:8px}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], showActions: [{
+                type: Input
+            }], isDismissable: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }] } });
+
+class BadgeComponent {
+    label = null;
+    color = 'primary';
+    get isDot() {
+        return this.label === null || this.label === '' || this.label === undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BadgeComponent, isStandalone: true, selector: "dso-badge", inputs: { label: "label", color: "color" }, ngImport: i0, template: "<span class=\"badge\" [ngClass]=\"[color, isDot ? 'dot' : '']\">\r\n  <ng-container *ngIf=\"!isDot\">{{ label }}</ng-container>\r\n</span>", styles: [".badge{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;color:#fff;line-height:1;min-width:1.25rem}.primary{background-color:#007bff}.success{background-color:#28a745}.warning{background-color:#ffc107;color:#000}.danger{background-color:#dc3545}.badge.dot{padding:0;width:.5rem;height:.5rem;min-width:0;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-badge', standalone: true, imports: [CommonModule], template: "<span class=\"badge\" [ngClass]=\"[color, isDot ? 'dot' : '']\">\r\n  <ng-container *ngIf=\"!isDot\">{{ label }}</ng-container>\r\n</span>", styles: [".badge{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;color:#fff;line-height:1;min-width:1.25rem}.primary{background-color:#007bff}.success{background-color:#28a745}.warning{background-color:#ffc107;color:#000}.danger{background-color:#dc3545}.badge.dot{padding:0;width:.5rem;height:.5rem;min-width:0;border-radius:50%}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class BreadcrumbComponent {
+    items = [];
+    itemSelected = new EventEmitter();
+    // Default separator → you can allow this to be set via @Input() later
+    separator = '/';
+    onItemClicked(item) {
+        this.itemSelected.emit(item);
+        console.log('breadcrumb emitted -> ', item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BreadcrumbComponent, isStandalone: true, selector: "dso-breadcrumb", inputs: { items: "items", separator: "separator" }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<nav aria-label=\"Breadcrumb\" class=\"breadcrumb\">\r\n  <ol>\r\n    <li *ngFor=\"let item of items; let last = last\" class=\"crumb\">\r\n\r\n      <!-- Normal breadcrumb link -->\r\n      <ng-container *ngIf=\"!last && item.url; else lastItem\">\r\n\r\n        <dso-button\r\n          btnType=\"text\"\r\n          btnSize=\"smBtn\"\r\n          [btnLabel]=\"item.label\"\r\n          [isDisabled]=\"false\"\r\n          (onClick)=\"onItemClicked(item)\"\r\n          [routerLink]=\"item.url\">\r\n        </dso-button>\r\n\r\n      </ng-container>\r\n\r\n      <!-- Last breadcrumb item (non-clickable) -->\r\n      <ng-template #lastItem>\r\n        <span class=\"current\" aria-current=\"page\">\r\n          {{ item.label }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <!-- Separator -->\r\n      <span class=\"separator\" *ngIf=\"!last\">{{ separator }}</span>\r\n\r\n    </li>\r\n  </ol>\r\n  <!-- <dso-button btnType=\"text\" btnLabel=\"Go Home\" [routerLink]=\"['/page1']\"></dso-button> -->\r\n\r\n</nav>\r\n\r\n\r\n", styles: [".breadcrumb{font-size:14px;color:var(--ui-text-muted, #666)}.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;align-items:center;flex-wrap:wrap}.breadcrumb .crumb{display:flex;align-items:center}.breadcrumb .crumb a{color:var(--ui-primary, #4a5cff);text-decoration:none;font-weight:500}.breadcrumb .crumb a:hover{text-decoration:underline}.breadcrumb .crumb .current{color:var(--ui-text, #222);font-weight:600;padding:0 8px}.breadcrumb .crumb .separator{margin:0 8px;color:var(--ui-text-muted, #999);font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "dso-button", inputs: ["btnLabel", "btnType", "btnSize", "btnIconName", "isDisabled", "isActive"], outputs: ["onClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-breadcrumb', standalone: true, imports: [CommonModule, RouterLink, ButtonComponent], template: "<nav aria-label=\"Breadcrumb\" class=\"breadcrumb\">\r\n  <ol>\r\n    <li *ngFor=\"let item of items; let last = last\" class=\"crumb\">\r\n\r\n      <!-- Normal breadcrumb link -->\r\n      <ng-container *ngIf=\"!last && item.url; else lastItem\">\r\n\r\n        <dso-button\r\n          btnType=\"text\"\r\n          btnSize=\"smBtn\"\r\n          [btnLabel]=\"item.label\"\r\n          [isDisabled]=\"false\"\r\n          (onClick)=\"onItemClicked(item)\"\r\n          [routerLink]=\"item.url\">\r\n        </dso-button>\r\n\r\n      </ng-container>\r\n\r\n      <!-- Last breadcrumb item (non-clickable) -->\r\n      <ng-template #lastItem>\r\n        <span class=\"current\" aria-current=\"page\">\r\n          {{ item.label }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <!-- Separator -->\r\n      <span class=\"separator\" *ngIf=\"!last\">{{ separator }}</span>\r\n\r\n    </li>\r\n  </ol>\r\n  <!-- <dso-button btnType=\"text\" btnLabel=\"Go Home\" [routerLink]=\"['/page1']\"></dso-button> -->\r\n\r\n</nav>\r\n\r\n\r\n", styles: [".breadcrumb{font-size:14px;color:var(--ui-text-muted, #666)}.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;align-items:center;flex-wrap:wrap}.breadcrumb .crumb{display:flex;align-items:center}.breadcrumb .crumb a{color:var(--ui-primary, #4a5cff);text-decoration:none;font-weight:500}.breadcrumb .crumb a:hover{text-decoration:underline}.breadcrumb .crumb .current{color:var(--ui-text, #222);font-weight:600;padding:0 8px}.breadcrumb .crumb .separator{margin:0 8px;color:var(--ui-text-muted, #999);font-size:12px}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], itemSelected: [{
+                type: Output
+            }], separator: [{
+                type: Input
+            }] } });
+
+/**
+ * Reusable Checkbox Component
+ *
+ * Features:
+ * - Optional label
+ * - Configurable size, error state, and disabled state
+ * - Emits changes to parent component
+ * - Supports custom icons
+ */
+class CheckboxComponent {
+    /** Text label displayed next to the checkbox */
+    label;
+    /** Whether the checkbox is checked */
+    isChecked = true;
+    /** Whether the checkbox is disabled */
+    disabled = false;
+    /** Size of the checkbox: small, medium, or large */
+    size = 'medium';
+    /** Error state for styling purposes */
+    error = false;
+    /** Whether the checkbox is required */
+    required = false;
+    /** Error message to display when error is true */
+    errorMessage = '';
+    /** Icon name for the checkbox (default is a checkmark) */
+    iconName = 'icon-slanted-check';
+    /** Emits the updated checked state whenever the checkbox is toggled */
+    change = new EventEmitter();
+    /**
+     * Toggles the checked state of the checkbox
+     * and emits the new value to the parent component
+     */
+    toggleCheckbox() {
+        if (!this.disabled) {
+            this.isChecked = !this.isChecked;
+            this.change.emit(this.isChecked);
+        }
+    }
+    /**
+     * Maps the checkbox size to icon size
+     */
+    getIconSize() {
+        switch (this.size) {
+            case 'large': return 'large';
+            case 'medium': return 'medium';
+            case 'small': return 'small';
+            default: return 'medium'; // fallback to medium
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CheckboxComponent, isStandalone: true, selector: "dso-checkbox", inputs: { label: "label", isChecked: "isChecked", disabled: "disabled", size: "size", error: "error", required: "required", errorMessage: "errorMessage", iconName: "iconName" }, outputs: { change: "change" }, ngImport: i0, template: "<!--\r\n  Checkbox Component Template\r\n  --------------------------\r\n  Features:\r\n  - Clickable wrapper to toggle checkbox (disabled-safe)\r\n  - Custom checkbox with icon\r\n  - Label support\r\n  - Error state styling\r\n  - Size-based styling: small, medium, large\r\n-->\r\n\r\n<div \r\n  class=\"checkbox-wrapper\"\r\n  (click)=\"!disabled && toggleCheckbox()\"\r\n  [ngClass]=\"{\r\n    'small': size === 'small', \r\n    'medium': size === 'medium', \r\n    'large': size === 'large',\r\n    'disabled': disabled\r\n  }\">\r\n\r\n  <!-- Hidden native checkbox for accessibility and form integration -->\r\n  <input\r\n    class=\"checkbox-input\"\r\n    type=\"checkbox\"\r\n    [ngModel]=\"isChecked\"\r\n    [disabled]=\"disabled\"/>\r\n\r\n  <!-- Custom checkbox UI -->\r\n  <span \r\n    class=\"custom-checkbox\" \r\n    [class.checked]=\"isChecked\" \r\n    [class.error]=\"error\">\r\n    \r\n    <!-- Display check icon only when checked -->\r\n    <dso-icon \r\n      *ngIf=\"isChecked\" \r\n      [iconName]=\"iconName\" \r\n      [size]=\"getIconSize()\">\r\n    </dso-icon>\r\n\r\n  </span>     \r\n\r\n  <!-- Optional label -->\r\n  <span class=\"checkbox-label\">\r\n    {{ label }}\r\n  </span>\r\n\r\n</div>\r\n", styles: [".checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;cursor:pointer;vertical-align:middle}.checkbox-wrapper.error .custom-checkbox{border-color:red}.checkbox-wrapper.disabled{cursor:not-allowed}.checkbox-wrapper.disabled .custom-checkbox{pointer-events:none;background-color:#f0f0f0;border-color:#d0d0d0}.checkbox-wrapper.disabled .custom-checkbox.checked{background-color:#00f;border-color:#00f;opacity:.3}.checkbox-input{width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(100%);overflow:hidden;white-space:nowrap}.custom-checkbox{display:inline-flex;justify-content:center;border:1px solid #ccc;border-radius:4px;cursor:pointer;width:24px;height:24px}.custom-checkbox.checked{border-color:#00f;background-color:#00f;color:#fff}.checkbox-wrapper:not(.disabled):hover .custom-checkbox{background-color:#eeeff9;border-color:#0000ffc0;cursor:pointer}.checkbox-wrapper:not(.disabled):hover .custom-checkbox.checked{background-color:#0000ffa9;border-color:#0000ffc0}.custom-checkbox.small .checkbox-custom{width:12px;height:12px}.custom-checkbox.medium .checkbox-custom{width:16px;height:16px}.custom-checkbox.large .checkbox-custom{width:24px;height:24px}.checkbox-label{font-size:14px;font-weight:400}.error-message{color:red;font-size:12px;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "dso-icon", inputs: ["iconName", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-checkbox', standalone: true, imports: [CommonModule, IconComponent, FormsModule], template: "<!--\r\n  Checkbox Component Template\r\n  --------------------------\r\n  Features:\r\n  - Clickable wrapper to toggle checkbox (disabled-safe)\r\n  - Custom checkbox with icon\r\n  - Label support\r\n  - Error state styling\r\n  - Size-based styling: small, medium, large\r\n-->\r\n\r\n<div \r\n  class=\"checkbox-wrapper\"\r\n  (click)=\"!disabled && toggleCheckbox()\"\r\n  [ngClass]=\"{\r\n    'small': size === 'small', \r\n    'medium': size === 'medium', \r\n    'large': size === 'large',\r\n    'disabled': disabled\r\n  }\">\r\n\r\n  <!-- Hidden native checkbox for accessibility and form integration -->\r\n  <input\r\n    class=\"checkbox-input\"\r\n    type=\"checkbox\"\r\n    [ngModel]=\"isChecked\"\r\n    [disabled]=\"disabled\"/>\r\n\r\n  <!-- Custom checkbox UI -->\r\n  <span \r\n    class=\"custom-checkbox\" \r\n    [class.checked]=\"isChecked\" \r\n    [class.error]=\"error\">\r\n    \r\n    <!-- Display check icon only when checked -->\r\n    <dso-icon \r\n      *ngIf=\"isChecked\" \r\n      [iconName]=\"iconName\" \r\n      [size]=\"getIconSize()\">\r\n    </dso-icon>\r\n\r\n  </span>     \r\n\r\n  <!-- Optional label -->\r\n  <span class=\"checkbox-label\">\r\n    {{ label }}\r\n  </span>\r\n\r\n</div>\r\n", styles: [".checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;cursor:pointer;vertical-align:middle}.checkbox-wrapper.error .custom-checkbox{border-color:red}.checkbox-wrapper.disabled{cursor:not-allowed}.checkbox-wrapper.disabled .custom-checkbox{pointer-events:none;background-color:#f0f0f0;border-color:#d0d0d0}.checkbox-wrapper.disabled .custom-checkbox.checked{background-color:#00f;border-color:#00f;opacity:.3}.checkbox-input{width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(100%);overflow:hidden;white-space:nowrap}.custom-checkbox{display:inline-flex;justify-content:center;border:1px solid #ccc;border-radius:4px;cursor:pointer;width:24px;height:24px}.custom-checkbox.checked{border-color:#00f;background-color:#00f;color:#fff}.checkbox-wrapper:not(.disabled):hover .custom-checkbox{background-color:#eeeff9;border-color:#0000ffc0;cursor:pointer}.checkbox-wrapper:not(.disabled):hover .custom-checkbox.checked{background-color:#0000ffa9;border-color:#0000ffc0}.custom-checkbox.small .checkbox-custom{width:12px;height:12px}.custom-checkbox.medium .checkbox-custom{width:16px;height:16px}.custom-checkbox.large .checkbox-custom{width:24px;height:24px}.checkbox-label{font-size:14px;font-weight:400}.error-message{color:red;font-size:12px;margin-top:4px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], isChecked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class DatepickerComponent {
+    /** Label displayed above the input */
+    inputTextLabel = 'Datepicker Title';
+    /** Disable the datepicker input */
+    isDisabled = false;
+    /** Currently selected date */
+    selectedDate = null;
+    /** Whether the calendar popup is visible */
+    calendarVisible = false;
+    /** Current month displayed in the calendar */
+    currentMonth = new Date();
+    /** View mode: day, month, or year */
+    viewMode = 'day';
+    /** Minimum and maximum year range */
+    minYear = 1990;
+    maxYear = 2099;
+    /** Month names for display */
+    months = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+    ];
+    yearListRef;
+    calendarWrapper;
+    // --------------------------
+    // Calendar Visibility & Toggle
+    // --------------------------
+    /** Toggle the calendar popup */
+    toggleCalendar() {
+        this.calendarVisible = !this.calendarVisible;
+        this.viewMode = 'day';
+    }
+    /** Close calendar if clicking outside */
+    handleClickOutside(event) {
+        if (!this.calendarWrapper)
+            return;
+        const target = event.target;
+        if (this.calendarVisible && !this.calendarWrapper.nativeElement.contains(target)) {
+            this.calendarVisible = false;
+        }
+    }
+    // --------------------------
+    // View Switching
+    // --------------------------
+    switchToMonthView() {
+        this.viewMode = 'month';
+    }
+    switchToYearView() {
+        this.viewMode = 'year';
+        setTimeout(() => this.scrollToCurrentYear(), 50);
+    }
+    // --------------------------
+    // Navigation (Month / Year)
+    // --------------------------
+    changeMonth(direction) {
+        this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + direction, 1);
+    }
+    changeYear(direction) {
+        const newYear = this.currentMonth.getFullYear() + direction;
+        if (newYear >= this.minYear && newYear <= this.maxYear) {
+            this.currentMonth = new Date(newYear, this.currentMonth.getMonth(), 1);
+            setTimeout(() => this.scrollToCurrentYear(), 0);
+        }
+    }
+    // --------------------------
+    // Helpers
+    // --------------------------
+    /** Returns array of days in the current month, with leading nulls for empty grid cells */
+    getDaysInMonth() {
+        const month = this.currentMonth.getMonth();
+        const year = this.currentMonth.getFullYear();
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysArray = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+        return Array(firstDay).fill(null).concat(daysArray);
+    }
+    /** Returns array of years in the defined range */
+    getYearsRange() {
+        const years = [];
+        for (let y = this.minYear; y <= this.maxYear; y++)
+            years.push(y);
+        return years;
+    }
+    /** Scroll the year list to show the current year */
+    scrollToCurrentYear() {
+        if (!this.yearListRef)
+            return;
+        const container = this.yearListRef.nativeElement;
+        const currentYear = this.currentMonth.getFullYear();
+        const yearIndex = currentYear - this.minYear;
+        const columns = 4; // 4 columns grid layout
+        const rowIndex = Math.floor(yearIndex / columns);
+        const yearCell = container.querySelector('.year-cell');
+        if (!yearCell)
+            return;
+        const scrollTop = rowIndex * yearCell.offsetHeight;
+        container.scrollTop = scrollTop;
+    }
+    // --------------------------
+    // Selection Handlers
+    // --------------------------
+    selectDate(day) {
+        if (day === null)
+            return;
+        this.selectedDate = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth(), day);
+        this.calendarVisible = false;
+    }
+    selectMonth(monthIndex) {
+        this.currentMonth = new Date(this.currentMonth.getFullYear(), monthIndex, 1);
+        this.viewMode = 'day';
+    }
+    selectYear(year) {
+        this.currentMonth = new Date(year, this.currentMonth.getMonth(), 1);
+        this.viewMode = 'month';
+    }
+    /** Check if a day is currently selected */
+    isSelected(day) {
+        if (!this.selectedDate || day === null)
+            return false;
+        return (this.selectedDate.getDate() === day &&
+            this.selectedDate.getMonth() === this.currentMonth.getMonth() &&
+            this.selectedDate.getFullYear() === this.currentMonth.getFullYear());
+    }
+    // --------------------------
+    // Footer Actions
+    // --------------------------
+    /** Set today’s date */
+    setToday() {
+        const today = new Date();
+        this.selectedDate = today;
+        this.currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+        this.calendarVisible = false;
+    }
+    /** Clear the selected date */
+    clearDate() {
+        this.selectedDate = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatepickerComponent, isStandalone: true, selector: "dso-datepicker", inputs: { inputTextLabel: "inputTextLabel", isDisabled: "isDisabled" }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "yearListRef", first: true, predicate: ["yearList"], descendants: true }, { propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"datepicker-wrapper\" #calendarWrapper>\r\n  \r\n  <!-- Label above the input -->\r\n  <div *ngIf=\"inputTextLabel\" class=\"datepicker-label\">{{ inputTextLabel }}</div>\r\n\r\n  <!-- Input field (readonly) -->\r\n  <input\r\n    type=\"text\"\r\n    class=\"datepicker-input\"\r\n    [value]=\"selectedDate ? (selectedDate | date:'MMM d, y') : ''\"\r\n    placeholder=\"Select a date\"\r\n    readonly\r\n    (click)=\"toggleCalendar()\"\r\n    [disabled]=\"isDisabled\"\r\n    [class.disabled]=\"isDisabled\"\r\n  />\r\n\r\n  <!-- Calendar popup -->\r\n  <div class=\"calendar\" *ngIf=\"calendarVisible\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"calendar-header\">\r\n      <div class=\"header-row\">\r\n\r\n        <!-- Year & Month Navigation Buttons -->\r\n        <button *ngIf=\"viewMode === 'day' || viewMode === 'month'\" \r\n                (click)=\"changeYear(-1)\" class=\"nav-btn\">\u00AB</button>\r\n        <button *ngIf=\"viewMode === 'day'\" \r\n                (click)=\"changeMonth(-1)\" class=\"nav-btn\">\u2039</button>\r\n\r\n        <!-- Calendar Title (Month / Year display) -->\r\n        <span class=\"calendar-title\">\r\n\r\n          <!-- Day view: show Month + Year -->\r\n          <ng-container *ngIf=\"viewMode === 'day'\">\r\n            <span class=\"month-label\" (click)=\"switchToMonthView()\">\r\n              {{ currentMonth | date:'MMMM' }}\r\n            </span>\r\n            <span class=\"year-label\" (click)=\"switchToYearView()\">\r\n              {{ currentMonth | date:'yyyy' }}\r\n            </span>\r\n          </ng-container>\r\n\r\n          <!-- Month view: show Year -->\r\n          <ng-container *ngIf=\"viewMode === 'month'\">\r\n            <span class=\"year-label\" (click)=\"switchToYearView()\">\r\n              {{ currentMonth | date:'yyyy' }}\r\n            </span>\r\n          </ng-container>\r\n\r\n          <!-- Year view: show Year only -->\r\n          <ng-container *ngIf=\"viewMode === 'year'\">\r\n            {{ currentMonth | date:'yyyy' }}\r\n          </ng-container>\r\n\r\n        </span>\r\n\r\n        <!-- Forward navigation buttons -->\r\n        <button *ngIf=\"viewMode === 'day'\" (click)=\"changeMonth(1)\" class=\"nav-btn\">\u203A</button>\r\n        <button *ngIf=\"viewMode === 'day' || viewMode === 'month'\" \r\n                (click)=\"changeYear(1)\" class=\"nav-btn\">\u00BB</button>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ----------------------\r\n         DAY VIEW\r\n         ---------------------- -->\r\n    <div *ngIf=\"viewMode === 'day'\">\r\n\r\n      <!-- Weekday Labels -->\r\n      <div class=\"calendar-weekdays\">\r\n        <div *ngFor=\"let day of ['S','M','T','W','T','F','S']\">{{ day }}</div>\r\n      </div>\r\n\r\n      <!-- Days Grid -->\r\n      <div class=\"calendar-grid days-grid\">\r\n        <div\r\n          *ngFor=\"let day of getDaysInMonth()\"\r\n          [class.empty]=\"day === null\"\r\n          [class.selected]=\"isSelected(day)\"\r\n          (click)=\"selectDate(day)\"\r\n        >\r\n          {{ day }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ----------------------\r\n         MONTH VIEW\r\n         ---------------------- -->\r\n    <div *ngIf=\"viewMode === 'month'\" class=\"calendar-grid months-grid\">\r\n      <div *ngFor=\"let m of months; let i = index\" \r\n           (click)=\"selectMonth(i)\" \r\n           class=\"month-cell\">\r\n        {{ m }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ----------------------\r\n         YEAR VIEW\r\n         ---------------------- -->\r\n    <div *ngIf=\"viewMode === 'year'\" \r\n         class=\"calendar-grid years-grid scrollable\" \r\n         #yearList>\r\n      <div\r\n        *ngFor=\"let y of getYearsRange()\"\r\n        (click)=\"selectYear(y)\"\r\n        class=\"year-cell\"\r\n        [class.current-year]=\"y === currentMonth.getFullYear()\"\r\n      >\r\n        {{ y }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ----------------------\r\n         Footer Buttons\r\n         ---------------------- -->\r\n    <div class=\"calendar-footer\">\r\n      <button class=\"footer-btn clear-btn\" (click)=\"clearDate()\">Clear</button>\r\n      <button class=\"footer-btn today-btn\" (click)=\"setToday()\">Today</button>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".datepicker-wrapper{position:relative;display:flex;flex-direction:column;gap:8px}.datepicker-input{padding:10px;font-size:15px;width:190px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#fff}.datepicker-input:hover{border:1px solid #071d35}.datepicker-input.disabled{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.datepicker-input.disabled .selected-option{pointer-events:none;color:#aaa}.calendar{position:absolute;top:0;left:100px;width:280px;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 10px #0000001a;padding:10px;z-index:100;animation:fadeIn .2s ease-in-out}.calendar-header{margin-bottom:8px}.header-row{display:flex;justify-content:center;align-items:center;gap:4px}.nav-btn{background:none;border:none;font-size:16px;cursor:pointer;padding:4px 6px;color:#333;border-radius:4px;transition:background-color .2s}.nav-btn:hover{background-color:#f0f0f0}.calendar-title{font-weight:600;font-size:16px;min-width:90px;text-align:center;display:flex;flex:1;gap:4px;align-items:center;justify-content:center}.month-label,.year-label{cursor:pointer;transition:color .2s}.month-label:hover,.year-label:hover{color:#007bff}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;margin-bottom:4px;color:#666}.calendar-grid{display:grid;gap:4px;text-align:center;min-height:200px}.days-grid{grid-template-columns:repeat(7,1fr)}.months-grid{grid-template-columns:repeat(3,1fr)}.years-grid{grid-template-columns:repeat(4,1fr)}.scrollable{max-height:160px;overflow-y:auto;padding-right:5px}.scrollable::-webkit-scrollbar{width:6px}.scrollable::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:3px}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#999}.calendar-grid div{padding:8px 0;border-radius:4px;cursor:pointer;transition:background-color .2s}.calendar-grid div:hover{background-color:#f0f0f0}.selected{background-color:#007bff;color:#fff!important}.current-year{background-color:#007bff1a;font-weight:700}.empty{visibility:hidden}.calendar-footer{display:flex;justify-content:space-between;margin-top:8px;border-top:1px solid #eee;padding-top:8px}.footer-btn{flex:1;padding:6px 0;font-size:14px;border-radius:4px;cursor:pointer;transition:background .2s;border:none}.clear-btn{background-color:#f8f9fa;color:#333;margin-right:5px}.clear-btn:hover{background-color:#e9ecef}.today-btn{background-color:#007bff;color:#fff}.today-btn:hover{background-color:#0069d9}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-datepicker', standalone: true, imports: [CommonModule, DatePipe], template: "<div class=\"datepicker-wrapper\" #calendarWrapper>\r\n  \r\n  <!-- Label above the input -->\r\n  <div *ngIf=\"inputTextLabel\" class=\"datepicker-label\">{{ inputTextLabel }}</div>\r\n\r\n  <!-- Input field (readonly) -->\r\n  <input\r\n    type=\"text\"\r\n    class=\"datepicker-input\"\r\n    [value]=\"selectedDate ? (selectedDate | date:'MMM d, y') : ''\"\r\n    placeholder=\"Select a date\"\r\n    readonly\r\n    (click)=\"toggleCalendar()\"\r\n    [disabled]=\"isDisabled\"\r\n    [class.disabled]=\"isDisabled\"\r\n  />\r\n\r\n  <!-- Calendar popup -->\r\n  <div class=\"calendar\" *ngIf=\"calendarVisible\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"calendar-header\">\r\n      <div class=\"header-row\">\r\n\r\n        <!-- Year & Month Navigation Buttons -->\r\n        <button *ngIf=\"viewMode === 'day' || viewMode === 'month'\" \r\n                (click)=\"changeYear(-1)\" class=\"nav-btn\">\u00AB</button>\r\n        <button *ngIf=\"viewMode === 'day'\" \r\n                (click)=\"changeMonth(-1)\" class=\"nav-btn\">\u2039</button>\r\n\r\n        <!-- Calendar Title (Month / Year display) -->\r\n        <span class=\"calendar-title\">\r\n\r\n          <!-- Day view: show Month + Year -->\r\n          <ng-container *ngIf=\"viewMode === 'day'\">\r\n            <span class=\"month-label\" (click)=\"switchToMonthView()\">\r\n              {{ currentMonth | date:'MMMM' }}\r\n            </span>\r\n            <span class=\"year-label\" (click)=\"switchToYearView()\">\r\n              {{ currentMonth | date:'yyyy' }}\r\n            </span>\r\n          </ng-container>\r\n\r\n          <!-- Month view: show Year -->\r\n          <ng-container *ngIf=\"viewMode === 'month'\">\r\n            <span class=\"year-label\" (click)=\"switchToYearView()\">\r\n              {{ currentMonth | date:'yyyy' }}\r\n            </span>\r\n          </ng-container>\r\n\r\n          <!-- Year view: show Year only -->\r\n          <ng-container *ngIf=\"viewMode === 'year'\">\r\n            {{ currentMonth | date:'yyyy' }}\r\n          </ng-container>\r\n\r\n        </span>\r\n\r\n        <!-- Forward navigation buttons -->\r\n        <button *ngIf=\"viewMode === 'day'\" (click)=\"changeMonth(1)\" class=\"nav-btn\">\u203A</button>\r\n        <button *ngIf=\"viewMode === 'day' || viewMode === 'month'\" \r\n                (click)=\"changeYear(1)\" class=\"nav-btn\">\u00BB</button>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ----------------------\r\n         DAY VIEW\r\n         ---------------------- -->\r\n    <div *ngIf=\"viewMode === 'day'\">\r\n\r\n      <!-- Weekday Labels -->\r\n      <div class=\"calendar-weekdays\">\r\n        <div *ngFor=\"let day of ['S','M','T','W','T','F','S']\">{{ day }}</div>\r\n      </div>\r\n\r\n      <!-- Days Grid -->\r\n      <div class=\"calendar-grid days-grid\">\r\n        <div\r\n          *ngFor=\"let day of getDaysInMonth()\"\r\n          [class.empty]=\"day === null\"\r\n          [class.selected]=\"isSelected(day)\"\r\n          (click)=\"selectDate(day)\"\r\n        >\r\n          {{ day }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ----------------------\r\n         MONTH VIEW\r\n         ---------------------- -->\r\n    <div *ngIf=\"viewMode === 'month'\" class=\"calendar-grid months-grid\">\r\n      <div *ngFor=\"let m of months; let i = index\" \r\n           (click)=\"selectMonth(i)\" \r\n           class=\"month-cell\">\r\n        {{ m }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ----------------------\r\n         YEAR VIEW\r\n         ---------------------- -->\r\n    <div *ngIf=\"viewMode === 'year'\" \r\n         class=\"calendar-grid years-grid scrollable\" \r\n         #yearList>\r\n      <div\r\n        *ngFor=\"let y of getYearsRange()\"\r\n        (click)=\"selectYear(y)\"\r\n        class=\"year-cell\"\r\n        [class.current-year]=\"y === currentMonth.getFullYear()\"\r\n      >\r\n        {{ y }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ----------------------\r\n         Footer Buttons\r\n         ---------------------- -->\r\n    <div class=\"calendar-footer\">\r\n      <button class=\"footer-btn clear-btn\" (click)=\"clearDate()\">Clear</button>\r\n      <button class=\"footer-btn today-btn\" (click)=\"setToday()\">Today</button>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".datepicker-wrapper{position:relative;display:flex;flex-direction:column;gap:8px}.datepicker-input{padding:10px;font-size:15px;width:190px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#fff}.datepicker-input:hover{border:1px solid #071d35}.datepicker-input.disabled{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.datepicker-input.disabled .selected-option{pointer-events:none;color:#aaa}.calendar{position:absolute;top:0;left:100px;width:280px;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 10px #0000001a;padding:10px;z-index:100;animation:fadeIn .2s ease-in-out}.calendar-header{margin-bottom:8px}.header-row{display:flex;justify-content:center;align-items:center;gap:4px}.nav-btn{background:none;border:none;font-size:16px;cursor:pointer;padding:4px 6px;color:#333;border-radius:4px;transition:background-color .2s}.nav-btn:hover{background-color:#f0f0f0}.calendar-title{font-weight:600;font-size:16px;min-width:90px;text-align:center;display:flex;flex:1;gap:4px;align-items:center;justify-content:center}.month-label,.year-label{cursor:pointer;transition:color .2s}.month-label:hover,.year-label:hover{color:#007bff}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;margin-bottom:4px;color:#666}.calendar-grid{display:grid;gap:4px;text-align:center;min-height:200px}.days-grid{grid-template-columns:repeat(7,1fr)}.months-grid{grid-template-columns:repeat(3,1fr)}.years-grid{grid-template-columns:repeat(4,1fr)}.scrollable{max-height:160px;overflow-y:auto;padding-right:5px}.scrollable::-webkit-scrollbar{width:6px}.scrollable::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:3px}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#999}.calendar-grid div{padding:8px 0;border-radius:4px;cursor:pointer;transition:background-color .2s}.calendar-grid div:hover{background-color:#f0f0f0}.selected{background-color:#007bff;color:#fff!important}.current-year{background-color:#007bff1a;font-weight:700}.empty{visibility:hidden}.calendar-footer{display:flex;justify-content:space-between;margin-top:8px;border-top:1px solid #eee;padding-top:8px}.footer-btn{flex:1;padding:6px 0;font-size:14px;border-radius:4px;cursor:pointer;transition:background .2s;border:none}.clear-btn{background-color:#f8f9fa;color:#333;margin-right:5px}.clear-btn:hover{background-color:#e9ecef}.today-btn{background-color:#007bff;color:#fff}.today-btn:hover{background-color:#0069d9}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
+        }], propDecorators: { inputTextLabel: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], yearListRef: [{
+                type: ViewChild,
+                args: ['yearList']
+            }], calendarWrapper: [{
+                type: ViewChild,
+                args: ['calendarWrapper', { static: false }]
+            }], handleClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class DialogComponent {
+    visible = false;
+    title = 'Dialog Title';
+    close = new EventEmitter();
+    onClose() {
+        this.close.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DialogComponent, isStandalone: true, selector: "dso-dialog", inputs: { visible: "visible", title: "title" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"dialog-overlay\" *ngIf=\"visible\" (click)=\"onClose()\">\r\n  <div class=\"dialog\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"dialog-header\">{{ title }}</div>\r\n    <div class=\"dialog-body\">\r\n      <ng-content></ng-content> <!-- Projected content -->\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dialog-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;padding:24px;border-radius:8px;width:400px;max-width:90%;box-shadow:0 2px 8px #00000040;position:relative;display:flex;flex-direction:column;gap:12px}.dialog-header{font-size:20px;font-weight:700}.dialog-close{background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer}.dialog-body{display:flex;flex-direction:column;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-dialog', standalone: true, imports: [CommonModule], template: "<div class=\"dialog-overlay\" *ngIf=\"visible\" (click)=\"onClose()\">\r\n  <div class=\"dialog\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"dialog-header\">{{ title }}</div>\r\n    <div class=\"dialog-body\">\r\n      <ng-content></ng-content> <!-- Projected content -->\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dialog-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;padding:24px;border-radius:8px;width:400px;max-width:90%;box-shadow:0 2px 8px #00000040;position:relative;display:flex;flex-direction:column;gap:12px}.dialog-header{font-size:20px;font-weight:700}.dialog-close{background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer}.dialog-body{display:flex;flex-direction:column;gap:16px}\n"] }]
+        }], propDecorators: { visible: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
+
+class DsoTruncateDirective {
+    el;
+    /**
+     * Enable or disable truncation.
+     * Can be used as `<div dsoTruncate>` (enabled by default) or `[dsoTruncate]="false"`.
+     */
+    enableTruncate = true;
+    /** Optional: override tooltip text when text is truncated */
+    truncateTooltipText;
+    constructor(el) {
+        this.el = el;
+    }
+    /** Initialize truncation after the view is loaded */
+    ngAfterViewInit() {
+        if (this.enableTruncate) {
+            this.applyTruncationStyles();
+            this.updateTooltip();
+        }
+    }
+    /** Re-check overflow and update tooltip on window resize */
+    onResize() {
+        if (this.enableTruncate) {
+            this.updateTooltip();
+        }
+    }
+    // -------------------------
+    // PRIVATE METHODS
+    // -------------------------
+    /** Apply CSS styles necessary for truncation */
+    applyTruncationStyles() {
+        const element = this.el.nativeElement;
+        element.style.whiteSpace = 'nowrap';
+        element.style.overflow = 'hidden';
+        element.style.textOverflow = 'ellipsis';
+        element.style.display = 'inline-block';
+        element.style.maxWidth = '100%';
+    }
+    /** Update tooltip based on overflow state */
+    updateTooltip() {
+        const el = this.el.nativeElement;
+        const isOverflowing = el.scrollWidth > el.clientWidth;
+        if (isOverflowing) {
+            // Add or update tooltip with either the provided text or element content
+            el.setAttribute('dsoDirectiveTooltip', this.truncateTooltipText || el.textContent || '');
+        }
+        else {
+            // Remove tooltip if content fits
+            el.removeAttribute('dsoDirectiveTooltip');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DsoTruncateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DsoTruncateDirective, isStandalone: true, selector: "[dsoTruncate]", inputs: { enableTruncate: ["dsoTruncate", "enableTruncate"], truncateTooltipText: "truncateTooltipText" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DsoTruncateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dsoTruncate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enableTruncate: [{
+                type: Input,
+                args: ['dsoTruncate']
+            }], truncateTooltipText: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class DropdownListComponent {
+    // -------------------------------
+    // ELEMENT REFERENCE
+    // -------------------------------
+    /** Reference to the root <div> to detect clicks inside/outside dropdown */
+    root;
+    // -------------------------------
+    // INPUT PROPERTIES
+    // -------------------------------
+    /** Options to display in the dropdown. Each option has a label and a value */
+    options = [];
+    /** Placeholder text when no option is selected */
+    placeholder = 'Select';
+    /** Currently selected value */
+    value = null;
+    /** Disable dropdown interaction */
+    disabled = false;
+    // -------------------------------
+    // OUTPUT EVENTS
+    // -------------------------------
+    /** Emits the selected value when user clicks an option */
+    selectionChange = new EventEmitter();
+    // -------------------------------
+    // INTERNAL STATE
+    // -------------------------------
+    /** Tracks whether the dropdown list is open or closed */
+    isOpen = false;
+    // -------------------------------
+    // METHODS
+    // -------------------------------
+    /** Toggle dropdown open/close when trigger is clicked */
+    toggle() {
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+        }
+    }
+    /** Handle option selection */
+    select(option) {
+        this.value = option.value; // Update internal state
+        this.selectionChange.emit(this.value); // Notify parent component
+        this.isOpen = false; // Close dropdown
+    }
+    // -------------------------------
+    // HANDLE CLICKS OUTSIDE DROPDOWN
+    // -------------------------------
+    handleOutsideClick(event) {
+        if (!this.isOpen)
+            return;
+        const target = event.target;
+        if (!this.root.nativeElement.contains(target)) {
+            this.isOpen = false;
+        }
+    }
+    // -------------------------------
+    // HELPER GETTER
+    // -------------------------------
+    /** Returns label of selected value or placeholder if none selected */
+    get selectedLabel() {
+        const found = this.options.find(o => o.value === this.value);
+        return found ? found.label : this.placeholder;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownListComponent, isStandalone: true, selector: "dso-dropdown-list", inputs: { options: "options", placeholder: "placeholder", value: "value", disabled: "disabled" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"dropdown\" #root [class.disabled]=\"disabled\">\r\n  <!--\r\n    #root: Linked to ViewChild in TS for detecting outside clicks\r\n    [class.disabled]: Adds CSS class when dropdown is disabled\r\n  -->\r\n\r\n  <!-- Trigger area: clicking toggles dropdown open/close -->\r\n  <div class=\"dropdown-trigger\" (click)=\"toggle()\">\r\n    <!-- Display selected label or placeholder -->\r\n    <span>{{ selectedLabel }}</span>\r\n    <!-- Arrow icon that rotates when dropdown is open -->\r\n    <span class=\"icon\" [class.open]=\"isOpen\">\u25BE</span>\r\n  </div>\r\n\r\n  <!-- Dropdown menu: visible only when isOpen is true -->\r\n  <ul class=\"dropdown-menu\" *ngIf=\"isOpen\">\r\n    <!-- Render each option -->\r\n    <li \r\n      *ngFor=\"let option of options\"\r\n      (click)=\"select(option)\"\r\n      [class.selected]=\"option.value === value\"> <!-- Highlight selected option -->\r\n      {{ option.label }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{position:relative;display:inline-flex;font-family:inherit}.dropdown.disabled{opacity:.5;pointer-events:none}.dropdown-trigger{border:1px solid #ccc;padding:8px 12px;background:#fff;cursor:pointer;display:inline-flex;gap:8px;align-items:center;border-radius:4px}.dropdown-trigger:hover{border-color:#888}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;list-style:none;padding:4px 0;margin:0;max-height:200px;overflow-y:auto;z-index:100}.dropdown-menu li{padding:8px 12px;cursor:pointer}.dropdown-menu li:hover{background:#f2f2f2}.dropdown-menu li.selected{background:#e6e6e6;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-dropdown-list', standalone: true, imports: [CommonModule], template: "<div class=\"dropdown\" #root [class.disabled]=\"disabled\">\r\n  <!--\r\n    #root: Linked to ViewChild in TS for detecting outside clicks\r\n    [class.disabled]: Adds CSS class when dropdown is disabled\r\n  -->\r\n\r\n  <!-- Trigger area: clicking toggles dropdown open/close -->\r\n  <div class=\"dropdown-trigger\" (click)=\"toggle()\">\r\n    <!-- Display selected label or placeholder -->\r\n    <span>{{ selectedLabel }}</span>\r\n    <!-- Arrow icon that rotates when dropdown is open -->\r\n    <span class=\"icon\" [class.open]=\"isOpen\">\u25BE</span>\r\n  </div>\r\n\r\n  <!-- Dropdown menu: visible only when isOpen is true -->\r\n  <ul class=\"dropdown-menu\" *ngIf=\"isOpen\">\r\n    <!-- Render each option -->\r\n    <li \r\n      *ngFor=\"let option of options\"\r\n      (click)=\"select(option)\"\r\n      [class.selected]=\"option.value === value\"> <!-- Highlight selected option -->\r\n      {{ option.label }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{position:relative;display:inline-flex;font-family:inherit}.dropdown.disabled{opacity:.5;pointer-events:none}.dropdown-trigger{border:1px solid #ccc;padding:8px 12px;background:#fff;cursor:pointer;display:inline-flex;gap:8px;align-items:center;border-radius:4px}.dropdown-trigger:hover{border-color:#888}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;list-style:none;padding:4px 0;margin:0;max-height:200px;overflow-y:auto;z-index:100}.dropdown-menu li{padding:8px 12px;cursor:pointer}.dropdown-menu li:hover{background:#f2f2f2}.dropdown-menu li.selected{background:#e6e6e6;font-weight:500}\n"] }]
+        }], propDecorators: { root: [{
+                type: ViewChild,
+                args: ['root', { static: true }]
+            }], options: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], handleOutsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class ProgressBarComponent {
+    /** Progress value (0–100). If null, shows indeterminate animation. */
+    value = null;
+    /** Color variants */
+    color = 'primary';
+    /** Optional animation toggle */
+    animated = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProgressBarComponent, isStandalone: true, selector: "dso-progress-bar", inputs: { value: "value", color: "color", animated: "animated" }, ngImport: i0, template: "<div class=\"progress-bar-container\">\r\n  <div\r\n    class=\"progress-bar-fill\"\r\n    [ngClass]=\"[\r\n      color,\r\n      animated ? 'animated' : '',\r\n      value === null ? 'indeterminate' : ''\r\n    ]\"\r\n    [style.width.%]=\"value !== null ? value : 50\"\r\n  ></div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.progress-bar-container{width:100%;height:8px;background-color:#e9ecef;border-radius:4px;overflow:hidden;position:relative;min-width:240px}.progress-bar-fill{position:absolute;height:100%;border-radius:4px;transition:width .4s ease}.progress-bar-fill.primary{background-color:#007bff}.progress-bar-fill.success{background-color:#28a745}.progress-bar-fill.warning{background-color:#ffc107}.progress-bar-fill.danger{background-color:#dc3545}.progress-bar-fill.animated{transition:width .4s ease-in-out}.progress-bar-fill.indeterminate{width:30%;animation:scrollLoop 1.5s linear infinite}@keyframes scrollLoop{0%{transform:translate(-100%)}to{transform:translate(400%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-progress-bar', standalone: true, imports: [CommonModule], template: "<div class=\"progress-bar-container\">\r\n  <div\r\n    class=\"progress-bar-fill\"\r\n    [ngClass]=\"[\r\n      color,\r\n      animated ? 'animated' : '',\r\n      value === null ? 'indeterminate' : ''\r\n    ]\"\r\n    [style.width.%]=\"value !== null ? value : 50\"\r\n  ></div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.progress-bar-container{width:100%;height:8px;background-color:#e9ecef;border-radius:4px;overflow:hidden;position:relative;min-width:240px}.progress-bar-fill{position:absolute;height:100%;border-radius:4px;transition:width .4s ease}.progress-bar-fill.primary{background-color:#007bff}.progress-bar-fill.success{background-color:#28a745}.progress-bar-fill.warning{background-color:#ffc107}.progress-bar-fill.danger{background-color:#dc3545}.progress-bar-fill.animated{transition:width .4s ease-in-out}.progress-bar-fill.indeterminate{width:30%;animation:scrollLoop 1.5s linear infinite}@keyframes scrollLoop{0%{transform:translate(-100%)}to{transform:translate(400%)}}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], animated: [{
+                type: Input
+            }] } });
+
+class FileUploadItemComponent {
+    /** The file upload item to display */
+    item;
+    /** Emitted when the user retries a failed upload */
+    retry = new EventEmitter();
+    /** Emitted when the user removes the file from the list */
+    remove = new EventEmitter();
+    /** Emitted when the user cancels an ongoing upload */
+    cancel = new EventEmitter();
+    /**
+     * Format the file size into a human-readable string
+     * @param size - size in bytes
+     * @returns formatted string like '12.3 KB', '1.5 MB'
+     */
+    formatSize(size) {
+        if (size < 1024)
+            return size + ' B';
+        if (size < 1024 * 1024)
+            return (size / 1024).toFixed(1) + ' KB';
+        return (size / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+    /**
+     * Get an icon name for the file based on its type or extension
+     * @param item - the UploadItem
+     * @returns icon name string
+     */
+    getFileIcon(item) {
+        const file = item.file;
+        const type = file.type.toLowerCase();
+        const name = file.name.toLowerCase();
+        // Image MIME types
+        if (type.startsWith('image/')) {
+            return 'icon-gallery';
+        }
+        // Image file extensions fallback
+        const imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp', '.svg'];
+        if (imageExtensions.some(ext => name.endsWith(ext))) {
+            return 'icon-gallery';
+        }
+        // Default icon for non-image files
+        return 'icon-van';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileUploadItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileUploadItemComponent, isStandalone: true, selector: "dso-file-item", inputs: { item: "item" }, outputs: { retry: "retry", remove: "remove", cancel: "cancel" }, ngImport: i0, template: "<div class=\"file-row\">\r\n\r\n  <!-- LEFT SECTION: Thumbnail + filename -->\r\n  <div class=\"thumbnail-filename-wrapper\">\r\n    <div class=\"file-thumb\">\r\n      <dso-icon \r\n        [iconName]=\"getFileIcon(item)\"\r\n        size=\"small\"\r\n        class=\"thumb-icon\">\r\n      </dso-icon>\r\n    </div>\r\n\r\n    <div class=\"file-info\">\r\n      <div class=\"file-name\">{{ item.file.name }}</div>\r\n      <div class=\"file-size\">{{ formatSize(item.file.size) }}</div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- MIDDLE SECTION: Progress or status -->\r\n  <div class=\"filecontent-loader-wrapper\">\r\n    \r\n    <!-- Progress bar -->\r\n    <div class=\"file-progress\" *ngIf=\"!item.hideProgressBar\">\r\n      <dso-progress-bar\r\n        [value]=\"\r\n          item.status === 'uploading' ? item.progress :\r\n          item.status === 'completed' ? 100 :\r\n          null\r\n        \"\r\n        [color]=\"item.status === 'completed' ? 'success' : 'primary'\"\r\n      ></dso-progress-bar>\r\n    </div>\r\n\r\n    <!-- Status text -->\r\n    <div class=\"file-status\" *ngIf=\"item.hideProgressBar\">\r\n\r\n      <!-- Success -->\r\n      <div *ngIf=\"item.status === 'completed'\" class=\"status success\">\r\n        <dso-icon iconName=\"icon-van\" size=\"small\"></dso-icon>\r\n        <span>Uploaded</span>\r\n      </div>\r\n\r\n      <!-- Failed -->\r\n      <div *ngIf=\"item.status === 'failed'\" class=\"status error\">\r\n        <dso-icon iconName=\"icon-center-align\" size=\"small\"></dso-icon>\r\n        <span>Upload failed</span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  <!-- RIGHT SECTION: Action buttons -->\r\n  <div class=\"file-actions\">\r\n\r\n    <!-- Uploading -->\r\n    <ng-container *ngIf=\"item.status === 'uploading'\">\r\n      <dso-button\r\n        btnLabel=\"Cancel\"\r\n        btnType=\"text\"\r\n        (onClick)=\"cancel.emit()\">\r\n      </dso-button>\r\n    </ng-container>\r\n\r\n    <!-- Failed -->\r\n    <ng-container *ngIf=\"item.status === 'failed'\">\r\n      <dso-button\r\n        btnLabel=\"Retry\"\r\n        btnType=\"text\"\r\n        (onClick)=\"retry.emit()\">\r\n      </dso-button>\r\n\r\n      <dso-button\r\n        btnLabel=\"Remove\"\r\n        btnType=\"text\"\r\n        (onClick)=\"remove.emit()\">\r\n      </dso-button>\r\n    </ng-container>\r\n\r\n    <!-- Completed -->\r\n    <ng-container *ngIf=\"item.status === 'completed'\">\r\n      <dso-button\r\n        btnLabel=\"Remove\"\r\n        btnType=\"text\"\r\n        (onClick)=\"remove.emit()\">\r\n      </dso-button>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [".file-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#fafafa;border-radius:4px}.file-info{display:flex;flex-direction:column}.file-info .file-name{font-weight:300}.file-info .file-size{font-size:.85rem;color:#666}.file-progress{padding-right:1rem;flex:1 0 0;display:flex;justify-content:center;align-items:center;min-width:260px;max-width:320px}.file-actions{display:flex;width:160px;gap:.5rem;justify-content:flex-end}.file-status{display:flex;align-items:center;font-size:14px;flex:1 0 0;min-width:260px;max-width:320px}.file-status .status{display:flex;align-items:center;gap:6px;font-weight:500}.file-status .status.success{color:#16a34a}.file-status .status.error{color:#dc2626}.file-status .status .status-icon{width:16px;height:16px}.file-thumb{width:40px;height:40px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center}.file-thumb img{width:100%;height:100%;object-fit:cover}.thumbnail-filename-wrapper{display:flex;gap:24px}.filecontent-loader-wrapper{display:flex;gap:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "dso-button", inputs: ["btnLabel", "btnType", "btnSize", "btnIconName", "isDisabled", "isActive"], outputs: ["onClick"] }, { kind: "component", type: IconComponent, selector: "dso-icon", inputs: ["iconName", "size"] }, { kind: "component", type: ProgressBarComponent, selector: "dso-progress-bar", inputs: ["value", "color", "animated"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileUploadItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-file-item', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ProgressBarComponent], template: "<div class=\"file-row\">\r\n\r\n  <!-- LEFT SECTION: Thumbnail + filename -->\r\n  <div class=\"thumbnail-filename-wrapper\">\r\n    <div class=\"file-thumb\">\r\n      <dso-icon \r\n        [iconName]=\"getFileIcon(item)\"\r\n        size=\"small\"\r\n        class=\"thumb-icon\">\r\n      </dso-icon>\r\n    </div>\r\n\r\n    <div class=\"file-info\">\r\n      <div class=\"file-name\">{{ item.file.name }}</div>\r\n      <div class=\"file-size\">{{ formatSize(item.file.size) }}</div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- MIDDLE SECTION: Progress or status -->\r\n  <div class=\"filecontent-loader-wrapper\">\r\n    \r\n    <!-- Progress bar -->\r\n    <div class=\"file-progress\" *ngIf=\"!item.hideProgressBar\">\r\n      <dso-progress-bar\r\n        [value]=\"\r\n          item.status === 'uploading' ? item.progress :\r\n          item.status === 'completed' ? 100 :\r\n          null\r\n        \"\r\n        [color]=\"item.status === 'completed' ? 'success' : 'primary'\"\r\n      ></dso-progress-bar>\r\n    </div>\r\n\r\n    <!-- Status text -->\r\n    <div class=\"file-status\" *ngIf=\"item.hideProgressBar\">\r\n\r\n      <!-- Success -->\r\n      <div *ngIf=\"item.status === 'completed'\" class=\"status success\">\r\n        <dso-icon iconName=\"icon-van\" size=\"small\"></dso-icon>\r\n        <span>Uploaded</span>\r\n      </div>\r\n\r\n      <!-- Failed -->\r\n      <div *ngIf=\"item.status === 'failed'\" class=\"status error\">\r\n        <dso-icon iconName=\"icon-center-align\" size=\"small\"></dso-icon>\r\n        <span>Upload failed</span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  <!-- RIGHT SECTION: Action buttons -->\r\n  <div class=\"file-actions\">\r\n\r\n    <!-- Uploading -->\r\n    <ng-container *ngIf=\"item.status === 'uploading'\">\r\n      <dso-button\r\n        btnLabel=\"Cancel\"\r\n        btnType=\"text\"\r\n        (onClick)=\"cancel.emit()\">\r\n      </dso-button>\r\n    </ng-container>\r\n\r\n    <!-- Failed -->\r\n    <ng-container *ngIf=\"item.status === 'failed'\">\r\n      <dso-button\r\n        btnLabel=\"Retry\"\r\n        btnType=\"text\"\r\n        (onClick)=\"retry.emit()\">\r\n      </dso-button>\r\n\r\n      <dso-button\r\n        btnLabel=\"Remove\"\r\n        btnType=\"text\"\r\n        (onClick)=\"remove.emit()\">\r\n      </dso-button>\r\n    </ng-container>\r\n\r\n    <!-- Completed -->\r\n    <ng-container *ngIf=\"item.status === 'completed'\">\r\n      <dso-button\r\n        btnLabel=\"Remove\"\r\n        btnType=\"text\"\r\n        (onClick)=\"remove.emit()\">\r\n      </dso-button>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [".file-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#fafafa;border-radius:4px}.file-info{display:flex;flex-direction:column}.file-info .file-name{font-weight:300}.file-info .file-size{font-size:.85rem;color:#666}.file-progress{padding-right:1rem;flex:1 0 0;display:flex;justify-content:center;align-items:center;min-width:260px;max-width:320px}.file-actions{display:flex;width:160px;gap:.5rem;justify-content:flex-end}.file-status{display:flex;align-items:center;font-size:14px;flex:1 0 0;min-width:260px;max-width:320px}.file-status .status{display:flex;align-items:center;gap:6px;font-weight:500}.file-status .status.success{color:#16a34a}.file-status .status.error{color:#dc2626}.file-status .status .status-icon{width:16px;height:16px}.file-thumb{width:40px;height:40px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center}.file-thumb img{width:100%;height:100%;object-fit:cover}.thumbnail-filename-wrapper{display:flex;gap:24px}.filecontent-loader-wrapper{display:flex;gap:20px}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], retry: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+// upload-simulator.service.ts
+/**
+ * UploadSimulatorService
+ * -----------------------
+ * This service simulates an upload process.
+ * It is ONLY for demo and UI development. Later, it can
+ * be replaced with a real HTTP upload service without
+ * changing the UI components.
+ *
+ * How it works:
+ * - Every 300ms, a timer increases the upload progress.
+ * - Progress increases by a random amount (to look realistic).
+ * - When it reaches 100%, the upload is marked complete.
+ * - There is a 10% chance the upload "fails" to simulate errors.
+ * - If an upload is cancelled, the interval stops immediately.
+ *
+ * This pattern mimics:
+ * - progress events (like HttpClient upload events)
+ * - cancellation (AbortController / unsubscribe)
+ */
+class UploadSimulatorService {
+    /**
+     * Simulates uploading a single file.
+     *
+     * @param item        The UploadItem being uploaded
+     * @param onProgress  Callback fired whenever progress changes
+     * @param onComplete  Callback fired when upload reaches 100%
+     * @param onError     Callback fired when upload "fails"
+     */
+    simulateUpload(item, onProgress, onComplete, onError) {
+        console.log('%c[SIMULATOR] Starting upload:', 'color: green;', item.file.name);
+        let progress = 0;
+        // This interval simulates a real upload stream
+        const interval = setInterval(() => {
+            // If cancelled externally, we stop updating
+            if (item.status === 'cancelled') {
+                console.log('%c[SIMULATOR] Upload CANCELLED:', 'color: orange;', item.file.name);
+                clearInterval(interval);
+                return;
+            }
+            // 🔼 Simulate uploading by adding random progress increments
+            const increment = Math.random() * 15 + 5;
+            progress += increment;
+            console.log(`%c[SIMULATOR] ${item.file.name} +${increment.toFixed(1)}% → ${progress.toFixed(1)}%`, 'color: #1e90ff;');
+            // 🟦 If progress reaches 100%, finalize upload
+            if (progress >= 100) {
+                progress = 100;
+                onProgress(progress);
+                clearInterval(interval);
+                console.log('%c[SIMULATOR] Upload reached 100% for ' + item.file.name, 'color: green; font-weight: bold;');
+                // 🔥 50% chance to simulate failure
+                const randomFail = Math.random() < 0.5;
+                if (randomFail) {
+                    console.log('%c[SIMULATOR] Simulated FAILURE for ' + item.file.name, 'color: red; font-weight: bold;');
+                    onError();
+                }
+                else {
+                    console.log('%c[SIMULATOR] Upload SUCCESS for ' + item.file.name, 'color: limegreen; font-weight: bold;');
+                    onComplete();
+                }
+                return;
+            }
+            // Emit progress update
+            onProgress(progress);
+        }, 300); // runs every 300ms like a real upload tick
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadSimulatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadSimulatorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadSimulatorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// file-upload-multi.component.ts
+/**
+ * FileUploadMultiComponent
+ * -------------------------
+ * This component handles:
+ * - Drag & drop file uploads
+ * - Selecting multiple files through <input type="file">
+ * - Upload progress per file
+ * - Cancelling an upload
+ * - Retrying failed uploads
+ * - Removing items from the queue
+ *
+ * UploadSimulatorService is used to mimic real upload behavior.
+ * Later, you can replace it with a real HTTP upload service.
+ */
+class FileUploadMultiComponent {
+    sim;
+    //   ngOnInit() {
+    //   // Fake completed file
+    //   this.uploadQueue.push({
+    //     file: new File([""], "example-image.jpg", { type: "image/jpeg" }),
+    //     progress: 100,
+    //     status: "completed",
+    //     hideProgressBar: true
+    //   });
+    //   // Fake failed file
+    //   this.uploadQueue.push({
+    //     file: new File([""], "broken-file.pdf", { type: "application/pdf" }),
+    //     progress: null,
+    //     status: "failed",
+    //     hideProgressBar: true
+    //   });
+    //   // Fake uploading file
+    //   this.uploadQueue.push({
+    //     file: new File([""], "uploading.png", { type: "image/png" }),
+    //     progress: 40,
+    //     status: "uploading",
+    //     hideProgressBar: false
+    //   });
+    // }
+    /** All files being managed (uploaded, uploading, failed, completed). */
+    uploadQueue = [];
+    /** True while user drags a file over the drop zone. */
+    isDragOver = false;
+    constructor(sim) {
+        this.sim = sim;
+        // console.log('%c[COMPONENT] FileUploadMultiComponent initialized', 'color: purple;');
+    }
+    /* ===========================================================
+     *                     DRAG & DROP EVENTS
+     * =========================================================== */
+    onDragOver(event) {
+        event.preventDefault();
+        this.isDragOver = true;
+        // console.log('%c[DRAG] Dragging over drop zone...', 'color: #00aaff;');
+    }
+    onDragLeave(event) {
+        this.isDragOver = false;
+        // console.log('%c[DRAG] Drag left drop zone', 'color: #888;');
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.isDragOver = false;
+        // console.log('%c[DRAG] Files dropped', 'color: #00cc66;');
+        if (event.dataTransfer?.files) {
+            // console.log('[DRAG] Dropped files:', event.dataTransfer.files);
+            this.handleFiles(event.dataTransfer.files);
+        }
+    }
+    /* ===========================================================
+     *                     FILE INPUT SELECT
+     * =========================================================== */
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files) {
+            // console.log('%c[INPUT] Files selected:', 'color: #0099ff;', input.files);
+            this.handleFiles(input.files);
+            // Clears <input> so user can re-select same file
+            input.value = '';
+        }
+    }
+    /* ===========================================================
+     *                PROCESSING NEWLY ADDED FILES
+     * =========================================================== */
+    handleFiles(fileList) {
+        // console.log('%c[FILES] Processing new files...', 'color: #ffaa00;');
+        Array.from(fileList).forEach(file => {
+            // console.log(`%c[FILES] Added: ${file.name} (${file.size} bytes)`, 'color: #ffaa00;');
+            const item = {
+                file,
+                progress: 0,
+                status: 'queued'
+            };
+            this.uploadQueue.push(item);
+            this.startUpload(item);
+        });
+    }
+    /* ===========================================================
+     *                        UPLOAD LOGIC
+     * =========================================================== */
+    startUpload(item) {
+        // console.log(`%c[UPLOAD] Starting upload for ${item.file.name}`, 'color: #00cc99;');
+        item.status = 'uploading';
+        item.progress = 0;
+        this.sim.simulateUpload(item, 
+        // ---- onProgress callback ----
+        (progress) => {
+            item.progress = progress;
+            // console.log(`%c[UPLOAD] ${item.file.name}: ${progress.toFixed(1)}%`, 'color: #0099ff;');
+        }, 
+        // ---- onComplete callback ----
+        () => {
+            item.status = 'completed';
+            item.progress = 100;
+            // Hide progress bar after a very small delay (100–300ms)
+            setTimeout(() => item.hideProgressBar = true, 300);
+            // console.log(`%c[UPLOAD] COMPLETED: ${item.file.name}`, 'color: green; font-weight: bold;');
+        }, 
+        // ---- onError callback ----
+        () => {
+            item.status = 'failed';
+            item.progress = null;
+            // Hide progress bar so status text can show
+            setTimeout(() => item.hideProgressBar = true, 300);
+            // console.log(`%c[UPLOAD] FAILED: ${item.file.name}`, 'color: red; font-weight: bold;');
+        });
+    }
+    onDropZoneClick(fileInput) {
+        // Prevent click if user is dragging files over the drop-zone
+        if (this.isDragOver)
+            return;
+        console.log('%c[CLICK] Drop zone clicked → opening file dialog', 'color: #0077ff;');
+        fileInput.click();
+    }
+    onBrowseButtonClick(event, fileInput) {
+        event.stopPropagation(); // stops click from bubbling to drop-zone
+        // console.log('%c[BUTTON] Browse clicked → opening file dialog', 'color: #8844ff;');
+        fileInput.click();
+    }
+    /* ===========================================================
+     *                BUTTON ACTIONS (CANCEL / RETRY / REMOVE)
+     * =========================================================== */
+    cancelUpload(item) {
+        // console.log(`%c[CANCEL] Cancelling ${item.file.name}`, 'color: orange; font-weight: bold;');
+        // item.status = 'cancelled';
+        // item.progress = null;
+        this.removeItem(item);
+    }
+    retryUpload(item) {
+        // console.log('[RETRY] Restarting upload for', item.file.name);
+        // Reset state
+        item.status = 'queued';
+        item.progress = 0;
+        item.hideProgressBar = false; // <-- IMPORTANT
+        // Start upload again
+        this.startUpload(item);
+    }
+    removeItem(item) {
+        // console.log(`%c[REMOVE] Removing ${item.file.name}`, 'color: gray;');
+        this.uploadQueue = this.uploadQueue.filter(i => i !== item);
+    }
+    /* ===========================================================
+     *                     UTILITY FUNCTIONS
+     * =========================================================== */
+    /**
+     * Converts bytes → human readable sizes.
+     */
+    formatSize(size) {
+        if (size < 1024)
+            return size + ' B';
+        if (size < 1024 * 1024)
+            return (size / 1024).toFixed(1) + ' KB';
+        return (size / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+    // getThumbnail(item: UploadItem): string | null {
+    //   const file = item.file;
+    //   // If actual image → return preview URL
+    //   if (file.type.startsWith('image/')) {
+    //     return URL.createObjectURL(file);
+    //   }
+    //   // Otherwise return an icon path depending on type
+    //   if (file.type === 'application/pdf') return 'assets/icons/pdf.svg';
+    //   if (file.type.includes('word')) return 'assets/icons/doc.svg';
+    //   if (file.type.includes('spreadsheet')) return 'assets/icons/xlsx.svg';
+    //   // default icon
+    //   return 'assets/icons/file.svg';
+    // }
+    getThumbnail(item) {
+        const file = item.file;
+        // Image preview for image file types
+        if (file.type.startsWith('image/')) {
+            return URL.createObjectURL(file);
+        }
+        // Not an image → no thumbnail
+        return null;
+    }
+    getFileIcon(item) {
+        const file = item.file;
+        const type = file.type.toLowerCase();
+        const name = file.name.toLowerCase();
+        console.log('%c[DEBUG] File name:', 'color: blue;', file.name);
+        console.log('%c[DEBUG] File type:', 'color: green;', file.type);
+        // Check MIME type first
+        if (type.startsWith('image/')) {
+            console.log('%c[DEBUG] Detected as image by MIME type', 'color: purple;');
+            return 'icon-gallery';
+        }
+        // Fallback: check extension for image types including SVG
+        const imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp', '.svg'];
+        if (imageExtensions.some(ext => name.endsWith(ext))) {
+            console.log('%c[DEBUG] Detected as image by extension', 'color: orange;');
+            return 'icon-gallery';
+        }
+        console.log('%c[DEBUG] Defaulting to document icon', 'color: red;');
+        return 'icon-van';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileUploadMultiComponent, deps: [{ token: UploadSimulatorService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileUploadMultiComponent, isStandalone: true, selector: "dso-file-upload-multi", ngImport: i0, template: "<div class=\"upload-container\">\r\n\r\n  <!-- DRAG & DROP AREA -->\r\n  <div\r\n    class=\"drop-zone\"\r\n    [class.drag-over]=\"isDragOver\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    (click)=\"onDropZoneClick(fileInput)\"\r\n  >\r\n\r\n    <dso-button \r\n    style=\"padding: 0; \"\r\n    btnLabel=\"Select files\"\r\n    btnType=\"link\"\r\n    (onClick)=\"onBrowseButtonClick($event, fileInput)\">\r\n    </dso-button>\r\n    or drag & drop files \r\n    <input \r\n      type=\"file\" \r\n      multiple \r\n      hidden \r\n      #fileInput \r\n      (change)=\"onFileSelected($event)\"\r\n    />\r\n  </div>\r\n\r\n  <!-- FILE LIST -->\r\n  <div class=\"file-list\" *ngIf=\"uploadQueue.length > 0\">\r\n\r\n    <dso-file-item\r\n    *ngFor=\"let item of uploadQueue\"\r\n    [item]=\"item\"\r\n    (retry)=\"retryUpload(item)\"\r\n    (remove)=\"removeItem(item)\"\r\n    (cancel)=\"cancelUpload(item)\"\r\n    ></dso-file-item>\r\n\r\n\r\n  </div>\r\n</div>\r\n", styles: [".upload-container{display:flex;flex-direction:column;gap:8px}.drop-zone{border:2px dashed #ccc;padding:2rem;text-align:center;border-radius:6px;transition:border-color .2s,background-color .2s;cursor:pointer}.drop-zone.drag-over{border-color:#007bff;background-color:#f0f7ff}.file-list{display:flex;flex-direction:column;gap:.75rem;max-height:360px;overflow-y:auto;padding-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "dso-button", inputs: ["btnLabel", "btnType", "btnSize", "btnIconName", "isDisabled", "isActive"], outputs: ["onClick"] }, { kind: "component", type: FileUploadItemComponent, selector: "dso-file-item", inputs: ["item"], outputs: ["retry", "remove", "cancel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileUploadMultiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-file-upload-multi', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, FileUploadItemComponent], template: "<div class=\"upload-container\">\r\n\r\n  <!-- DRAG & DROP AREA -->\r\n  <div\r\n    class=\"drop-zone\"\r\n    [class.drag-over]=\"isDragOver\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    (click)=\"onDropZoneClick(fileInput)\"\r\n  >\r\n\r\n    <dso-button \r\n    style=\"padding: 0; \"\r\n    btnLabel=\"Select files\"\r\n    btnType=\"link\"\r\n    (onClick)=\"onBrowseButtonClick($event, fileInput)\">\r\n    </dso-button>\r\n    or drag & drop files \r\n    <input \r\n      type=\"file\" \r\n      multiple \r\n      hidden \r\n      #fileInput \r\n      (change)=\"onFileSelected($event)\"\r\n    />\r\n  </div>\r\n\r\n  <!-- FILE LIST -->\r\n  <div class=\"file-list\" *ngIf=\"uploadQueue.length > 0\">\r\n\r\n    <dso-file-item\r\n    *ngFor=\"let item of uploadQueue\"\r\n    [item]=\"item\"\r\n    (retry)=\"retryUpload(item)\"\r\n    (remove)=\"removeItem(item)\"\r\n    (cancel)=\"cancelUpload(item)\"\r\n    ></dso-file-item>\r\n\r\n\r\n  </div>\r\n</div>\r\n", styles: [".upload-container{display:flex;flex-direction:column;gap:8px}.drop-zone{border:2px dashed #ccc;padding:2rem;text-align:center;border-radius:6px;transition:border-color .2s,background-color .2s;cursor:pointer}.drop-zone.drag-over{border-color:#007bff;background-color:#f0f7ff}.file-list{display:flex;flex-direction:column;gap:.75rem;max-height:360px;overflow-y:auto;padding-right:4px}\n"] }]
+        }], ctorParameters: () => [{ type: UploadSimulatorService }] });
+
+class FileUploadSingleComponent {
+    sim;
+    /** Button label text */
+    btnLabel = 'Choose File';
+    /** Allowed file types, e.g. ".png,.jpg,.pdf" */
+    accept = '';
+    /** Emit the selected file to parent component */
+    fileSelected = new EventEmitter();
+    /** The currently uploaded file shown in the UI */
+    item = null;
+    constructor(sim) {
+        this.sim = sim;
+    }
+    /** Trigger the hidden file input click */
+    onButtonClick(input) {
+        input.click();
+    }
+    /** Handle file selection from input */
+    onFileChange(event) {
+        const input = event.target;
+        if (!input.files || input.files.length === 0)
+            return;
+        const file = input.files[0];
+        // Wrap file in UploadItem structure (same as multi-upload)
+        this.item = {
+            file,
+            progress: 0,
+            status: 'queued',
+            hideProgressBar: false
+        };
+        // Emit file to parent
+        this.fileSelected.emit(file);
+        // Start simulated upload
+        this.startUpload();
+        // Reset input so user can pick same file again
+        input.value = '';
+    }
+    /** Start upload simulation */
+    startUpload() {
+        if (!this.item)
+            return;
+        const item = this.item;
+        item.status = 'uploading';
+        item.progress = 0;
+        this.sim.simulateUpload(item, 
+        // onProgress callback
+        (progress) => {
+            item.progress = progress;
+        }, 
+        // onComplete callback
+        () => {
+            item.status = 'completed';
+            item.progress = 100;
+            setTimeout(() => item.hideProgressBar = true, 300);
+        }, 
+        // onError callback
+        () => {
+            item.status = 'failed';
+            item.progress = null;
+            setTimeout(() => item.hideProgressBar = true, 300);
+        });
+    }
+    /** Retry failed upload */
+    retry() {
+        if (!this.item)
+            return;
+        this.item.status = 'queued';
+        this.item.progress = 0;
+        this.item.hideProgressBar = false;
+        this.startUpload();
+    }
+    /** Cancel or remove the file from UI */
+    clearFile() {
+        this.item = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileUploadSingleComponent, deps: [{ token: UploadSimulatorService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileUploadSingleComponent, isStandalone: true, selector: "dso-file-upload-single", inputs: { btnLabel: "btnLabel", accept: "accept" }, outputs: { fileSelected: "fileSelected" }, ngImport: i0, template: "<div class=\"file-upload-single\">\r\n\r\n  <!-- Hidden file input -->\r\n  <input\r\n    type=\"file\"\r\n    #fileInput\r\n    [accept]=\"accept\"\r\n    (change)=\"onFileChange($event)\"\r\n    hidden\r\n  />\r\n\r\n  <!-- Main button -->\r\n  <dso-button\r\n    [btnLabel]=\"btnLabel\"\r\n    btnType=\"filled\"\r\n    (onClick)=\"onButtonClick(fileInput)\"\r\n  ></dso-button>\r\n\r\n  <!-- Render file info using shared reusable component -->\r\n  <dso-file-item\r\n    *ngIf=\"item\"\r\n    [item]=\"item\"\r\n    (cancel)=\"clearFile()\"\r\n    (remove)=\"clearFile()\"\r\n    (retry)=\"retry()\"\r\n  ></dso-file-item>\r\n\r\n</div>\r\n", styles: [".file-upload-single{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "dso-button", inputs: ["btnLabel", "btnType", "btnSize", "btnIconName", "isDisabled", "isActive"], outputs: ["onClick"] }, { kind: "component", type: FileUploadItemComponent, selector: "dso-file-item", inputs: ["item"], outputs: ["retry", "remove", "cancel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileUploadSingleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-file-upload-single', standalone: true, imports: [
+                        CommonModule,
+                        ButtonComponent,
+                        FileUploadItemComponent
+                    ], template: "<div class=\"file-upload-single\">\r\n\r\n  <!-- Hidden file input -->\r\n  <input\r\n    type=\"file\"\r\n    #fileInput\r\n    [accept]=\"accept\"\r\n    (change)=\"onFileChange($event)\"\r\n    hidden\r\n  />\r\n\r\n  <!-- Main button -->\r\n  <dso-button\r\n    [btnLabel]=\"btnLabel\"\r\n    btnType=\"filled\"\r\n    (onClick)=\"onButtonClick(fileInput)\"\r\n  ></dso-button>\r\n\r\n  <!-- Render file info using shared reusable component -->\r\n  <dso-file-item\r\n    *ngIf=\"item\"\r\n    [item]=\"item\"\r\n    (cancel)=\"clearFile()\"\r\n    (remove)=\"clearFile()\"\r\n    (retry)=\"retry()\"\r\n  ></dso-file-item>\r\n\r\n</div>\r\n", styles: [".file-upload-single{display:flex;flex-direction:column;gap:8px}\n"] }]
+        }], ctorParameters: () => [{ type: UploadSimulatorService }], propDecorators: { btnLabel: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], fileSelected: [{
+                type: Output
+            }] } });
+
+class TextInputComponent {
+    // -------------------------------
+    // INPUT PROPERTIES
+    // -------------------------------
+    inputLabel = ''; // Optional label displayed above input
+    value = ''; // Two-way bound input value
+    placeholder = 'Input value'; // Placeholder text
+    type = ''; // Input type (text, email, etc.)
+    isDisabled = false; // Disable the input
+    helperText = ''; // Optional helper text below input
+    errorText = ''; // Optional error message
+    enableValidation = true; // Flag to enable/disable validation
+    maxLength = 80; // Maximum characters allowed
+    // -------------------------------
+    // OUTPUT EVENTS
+    // -------------------------------
+    valueChange = new EventEmitter(); // Emit input changes to parent
+    // -------------------------------
+    // INTERNAL STATE
+    // -------------------------------
+    isTouched = false; // Tracks if user has interacted with input
+    isInvalid = false; // True if validation fails
+    charCount = 0; // Tracks current character count
+    isExceeded = false; // True if charCount exceeds maxLength
+    // -------------------------------
+    // EVENT HANDLERS
+    // -------------------------------
+    onInputChange(event) {
+        this.value = event.target.value; // Update value
+        const inputValue = event.target.value;
+        const charCount = inputValue.length;
+        // Track if max length exceeded
+        this.isExceeded = charCount > this.maxLength;
+        this.isTouched = true; // Mark input as touched
+        this.valueChange.emit(this.value); // Notify parent
+        this.checkValidity(); // Validate input
+    }
+    onBlur() {
+        this.isTouched = true; // Input lost focus → mark as touched
+        this.checkValidity(); // Validate when blurred
+    }
+    // -------------------------------
+    // HELPER METHODS
+    // -------------------------------
+    getCharCountStyle() {
+        const charCount = this.value.length;
+        if (this.isExceeded) {
+            return 'char-count-error'; // Apply error style if limit exceeded
+        }
+        // Optional: style differently if more than 50% of maxLength used
+        if (charCount > this.maxLength / 2) {
+            return '';
+        }
+        return ''; // Default style
+    }
+    checkValidity() {
+        // If touched and value is empty, mark as invalid
+        this.isInvalid = this.isTouched && !this.value.trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextInputComponent, isStandalone: true, selector: "dso-input-text", inputs: { inputLabel: "inputLabel", value: "value", placeholder: "placeholder", type: "type", isDisabled: "isDisabled", helperText: "helperText", errorText: "errorText", enableValidation: "enableValidation", maxLength: "maxLength" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"input-container\">\r\n  <!-- Optional label -->\r\n    <div class=\"text-wrapper\">\r\n        <!-- Optional label -->\r\n        <label *ngIf=\"inputLabel\">\r\n            {{ inputLabel }}\r\n        </label>  \r\n        <!-- Character count inside the container -->\r\n        <div class=\"char-count\" [ngClass]=\"getCharCountStyle()\" *ngIf=\"maxLength\">\r\n            <span>\r\n                {{ value.length }}  \r\n            </span>\r\n            / {{ maxLength }}\r\n        </div>\r\n    </div> \r\n  <input\r\n    [type]=\"type\" \r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"value\"\r\n    (input)=\"onInputChange($event)\" \r\n    (blur)=\"onBlur()\"\r\n    [disabled]=\"isDisabled\"\r\n    [class.disabled]=\"isDisabled\"\r\n    [class.invalid]=\"(isInvalid && isTouched && enableValidation) || isExceeded\" \r\n    />\r\n\r\n    <!-- Helper Text \r\n        This condition checks if the helper text should be displayed:\r\n          - If the character limit is **not exceeded** and validation is **not enabled**, show the helper text.\r\n          - If validation **is enabled**, show the helper text only if the input is **not invalid** and `helperText` is provided.\r\n          - If the character limit is exceeded, the helper text will be replaced with an error message. -->\r\n    <div *ngIf=\"!isExceeded && !enableValidation || ((!isInvalid && helperText) && !isExceeded)\" class=\"helper-text\">\r\n      {{ helperText }}\r\n    </div>\r\n\r\n    <!-- Specified Error Text -->\r\n    <div *ngIf=\"isInvalid && isTouched && enableValidation\" class=\"error-message\">\r\n      {{ errorText }}\r\n    </div>\r\n\r\n    <!-- Error message if character limit exceeded -->\r\n    <div *ngIf=\"isExceeded\" class=\"error-message\">\r\n        Character limit exceeded.\r\n    </div>\r\n</div>\r\n\r\n", styles: [":host{display:inline-block}.input-container{width:500px;display:flex;flex-direction:column;gap:8px}.text-wrapper{display:flex;justify-content:space-between}input{width:100%;height:48px;padding:12px 8px;font-size:16px;border:1px solid #ccc;border-radius:4px}input:hover{border:1px solid #071d35}input:focus{border-color:#007bff;outline:none}input.invalid{border-color:red}.error-message{color:red;font-size:16px}input.disabled{cursor:not-allowed;background-color:#f0f0f0;border:1px solid #ddd;color:#000}.helper-text{font-size:16px;color:#6c757d}.error-message{font-size:16px;color:red}.char-count{font-size:12px;color:#666;align-self:flex-end}.char-count span,.char-count-error{font-size:12px;color:#666}.char-count-error span{font-size:12px;color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-input-text', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"input-container\">\r\n  <!-- Optional label -->\r\n    <div class=\"text-wrapper\">\r\n        <!-- Optional label -->\r\n        <label *ngIf=\"inputLabel\">\r\n            {{ inputLabel }}\r\n        </label>  \r\n        <!-- Character count inside the container -->\r\n        <div class=\"char-count\" [ngClass]=\"getCharCountStyle()\" *ngIf=\"maxLength\">\r\n            <span>\r\n                {{ value.length }}  \r\n            </span>\r\n            / {{ maxLength }}\r\n        </div>\r\n    </div> \r\n  <input\r\n    [type]=\"type\" \r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"value\"\r\n    (input)=\"onInputChange($event)\" \r\n    (blur)=\"onBlur()\"\r\n    [disabled]=\"isDisabled\"\r\n    [class.disabled]=\"isDisabled\"\r\n    [class.invalid]=\"(isInvalid && isTouched && enableValidation) || isExceeded\" \r\n    />\r\n\r\n    <!-- Helper Text \r\n        This condition checks if the helper text should be displayed:\r\n          - If the character limit is **not exceeded** and validation is **not enabled**, show the helper text.\r\n          - If validation **is enabled**, show the helper text only if the input is **not invalid** and `helperText` is provided.\r\n          - If the character limit is exceeded, the helper text will be replaced with an error message. -->\r\n    <div *ngIf=\"!isExceeded && !enableValidation || ((!isInvalid && helperText) && !isExceeded)\" class=\"helper-text\">\r\n      {{ helperText }}\r\n    </div>\r\n\r\n    <!-- Specified Error Text -->\r\n    <div *ngIf=\"isInvalid && isTouched && enableValidation\" class=\"error-message\">\r\n      {{ errorText }}\r\n    </div>\r\n\r\n    <!-- Error message if character limit exceeded -->\r\n    <div *ngIf=\"isExceeded\" class=\"error-message\">\r\n        Character limit exceeded.\r\n    </div>\r\n</div>\r\n\r\n", styles: [":host{display:inline-block}.input-container{width:500px;display:flex;flex-direction:column;gap:8px}.text-wrapper{display:flex;justify-content:space-between}input{width:100%;height:48px;padding:12px 8px;font-size:16px;border:1px solid #ccc;border-radius:4px}input:hover{border:1px solid #071d35}input:focus{border-color:#007bff;outline:none}input.invalid{border-color:red}.error-message{color:red;font-size:16px}input.disabled{cursor:not-allowed;background-color:#f0f0f0;border:1px solid #ddd;color:#000}.helper-text{font-size:16px;color:#6c757d}.error-message{font-size:16px;color:red}.char-count{font-size:12px;color:#666;align-self:flex-end}.char-count span,.char-count-error{font-size:12px;color:#666}.char-count-error span{font-size:12px;color:red}\n"] }]
+        }], propDecorators: { inputLabel: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], enableValidation: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class PaginationComponent {
+    /* =======================
+       Inputs (controlled state)
+       ======================= */
+    page = 1;
+    pageSize = 10;
+    totalItems = 0;
+    pageSizes = [10, 20, 50, 100];
+    /* =======================
+       Outputs (user intent)
+       ======================= */
+    pageChange = new EventEmitter();
+    pageSizeChange = new EventEmitter();
+    /* =======================
+       Internal UI state
+       ======================= */
+    pageNumbers = [];
+    jumpPageNumber = null;
+    pageSizeOptions = [];
+    /* =======================
+       Lifecycle
+       ======================= */
+    ngOnChanges() {
+        this.buildPageSizeOptions();
+        this.generatePageNumbers();
+    }
+    /* =======================
+       Derived values
+       ======================= */
+    get totalPages() {
+        return Math.max(Math.ceil(this.totalItems / this.pageSize), 1);
+    }
+    get startItem() {
+        return this.totalItems === 0 ? 0 : (this.page - 1) * this.pageSize + 1;
+    }
+    get endItem() {
+        return Math.min(this.page * this.pageSize, this.totalItems);
+    }
+    /* =======================
+       UI helpers
+       ======================= */
+    buildPageSizeOptions() {
+        this.pageSizeOptions = this.pageSizes.map(size => ({
+            label: `${size} per page`,
+            value: size
+        }));
+    }
+    generatePageNumbers() {
+        const total = this.totalPages;
+        let start = Math.max(this.page - 2, 1);
+        let end = Math.min(start + 4, total);
+        start = Math.max(end - 4, 1);
+        this.pageNumbers = [];
+        for (let i = start; i <= end; i++) {
+            this.pageNumbers.push(i);
+        }
+    }
+    /* =======================
+       Navigation (emit only)
+       ======================= */
+    goToPage(page) {
+        if (page >= 1 && page <= this.totalPages && page !== this.page) {
+            this.pageChange.emit(page);
+        }
+    }
+    goFirst() {
+        this.goToPage(1);
+    }
+    goPrevious() {
+        this.goToPage(this.page - 1);
+    }
+    goNext() {
+        this.goToPage(this.page + 1);
+    }
+    goLast() {
+        this.goToPage(this.totalPages);
+    }
+    onPageSizeChange(newSize) {
+        this.pageSizeChange.emit(newSize);
+    }
+    jumpToPage() {
+        if (!this.jumpPageNumber)
+            return;
+        const page = Math.max(1, Math.min(this.jumpPageNumber, this.totalPages));
+        this.pageChange.emit(page);
+        this.jumpPageNumber = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PaginationComponent, isStandalone: true, selector: "dso-pagination", inputs: { page: "page", pageSize: "pageSize", totalItems: "totalItems", pageSizes: "pageSizes" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-container\">\r\n\r\n  <!-- First / Previous -->\r\n  <dso-button\r\n    btnLabel=\"\u00AB\"\r\n    btnType=\"outlined\"\r\n    [isDisabled]=\"page === 1\"\r\n    (onClick)=\"goFirst()\">\r\n  </dso-button>\r\n\r\n  <dso-button\r\n    btnLabel=\"\u2039\"\r\n    btnType=\"outlined\"\r\n    [isDisabled]=\"page === 1\"\r\n    (onClick)=\"goPrevious()\">\r\n  </dso-button>\r\n\r\n  <!-- Page numbers -->\r\n  <div class=\"page-buttons\">\r\n    <ng-container *ngFor=\"let p of pageNumbers\">\r\n      <dso-button\r\n        [btnLabel]=\"p.toString()\"\r\n        btnType=\"ghost\"\r\n        btnSize=\"mdBtn\"\r\n        [isDisabled]=\"page === p\"\r\n        [isActive]=\"page === p\"\r\n        (onClick)=\"goToPage(p)\">\r\n      </dso-button>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Next / Last -->\r\n  <dso-button\r\n    btnLabel=\"\u203A\"\r\n    btnType=\"outlined\"\r\n    [isDisabled]=\"page === totalPages\"\r\n    (onClick)=\"goNext()\">\r\n  </dso-button>\r\n\r\n  <dso-button\r\n    btnLabel=\"\u00BB\"\r\n    btnType=\"outlined\"\r\n    [isDisabled]=\"page === totalPages\"\r\n    (onClick)=\"goLast()\">\r\n  </dso-button>\r\n\r\n  <!-- Page size -->\r\n  <dso-dropdown-list\r\n    [options]=\"pageSizeOptions\"\r\n    [value]=\"pageSize\"\r\n    (selectionChange)=\"onPageSizeChange($event)\">\r\n  </dso-dropdown-list>\r\n\r\n  <!-- Range info -->\r\n  <span class=\"range-info\">\r\n    Showing {{ startItem }}\u2013{{ endItem }} of {{ totalItems }} results\r\n  </span>\r\n\r\n  <!-- Jump to page -->\r\n  <div class=\"jump-to-page\">\r\n    <input\r\n      type=\"number\"\r\n      min=\"1\"\r\n      [(ngModel)]=\"jumpPageNumber\"\r\n      (keydown.enter)=\"jumpToPage()\" />\r\n\r\n    <dso-button\r\n      btnLabel=\"Go\"\r\n      btnType=\"ghost\"\r\n      btnSize=\"mdBtn\"\r\n      [isDisabled]=\"!jumpPageNumber\"\r\n      (onClick)=\"jumpToPage()\">\r\n    </dso-button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".pagination-container{display:flex;align-items:center;gap:8px;font-size:14px}.range-info{margin-right:12px}button{padding:6px 10px;border-radius:4px;border:1px solid #ccc;background:#f0f0f0;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button.page-number.active{background-color:#007bff;color:#fff;font-weight:700}.page-buttons{display:flex;gap:4px}.page-buttons dso-button{flex:0 0 44px;text-align:center}.jump-to-page{display:flex;align-items:center;gap:4px}.jump-to-page input{width:48px;padding:6px 8px;border-radius:4px;border:1px solid #ccc;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "dso-button", inputs: ["btnLabel", "btnType", "btnSize", "btnIconName", "isDisabled", "isActive"], outputs: ["onClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DropdownListComponent, selector: "dso-dropdown-list", inputs: ["options", "placeholder", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-pagination', standalone: true, imports: [ButtonComponent, CommonModule, DropdownListComponent, FormsModule], template: "<div class=\"pagination-container\">\r\n\r\n  <!-- First / Previous -->\r\n  <dso-button\r\n    btnLabel=\"\u00AB\"\r\n    btnType=\"outlined\"\r\n    [isDisabled]=\"page === 1\"\r\n    (onClick)=\"goFirst()\">\r\n  </dso-button>\r\n\r\n  <dso-button\r\n    btnLabel=\"\u2039\"\r\n    btnType=\"outlined\"\r\n    [isDisabled]=\"page === 1\"\r\n    (onClick)=\"goPrevious()\">\r\n  </dso-button>\r\n\r\n  <!-- Page numbers -->\r\n  <div class=\"page-buttons\">\r\n    <ng-container *ngFor=\"let p of pageNumbers\">\r\n      <dso-button\r\n        [btnLabel]=\"p.toString()\"\r\n        btnType=\"ghost\"\r\n        btnSize=\"mdBtn\"\r\n        [isDisabled]=\"page === p\"\r\n        [isActive]=\"page === p\"\r\n        (onClick)=\"goToPage(p)\">\r\n      </dso-button>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Next / Last -->\r\n  <dso-button\r\n    btnLabel=\"\u203A\"\r\n    btnType=\"outlined\"\r\n    [isDisabled]=\"page === totalPages\"\r\n    (onClick)=\"goNext()\">\r\n  </dso-button>\r\n\r\n  <dso-button\r\n    btnLabel=\"\u00BB\"\r\n    btnType=\"outlined\"\r\n    [isDisabled]=\"page === totalPages\"\r\n    (onClick)=\"goLast()\">\r\n  </dso-button>\r\n\r\n  <!-- Page size -->\r\n  <dso-dropdown-list\r\n    [options]=\"pageSizeOptions\"\r\n    [value]=\"pageSize\"\r\n    (selectionChange)=\"onPageSizeChange($event)\">\r\n  </dso-dropdown-list>\r\n\r\n  <!-- Range info -->\r\n  <span class=\"range-info\">\r\n    Showing {{ startItem }}\u2013{{ endItem }} of {{ totalItems }} results\r\n  </span>\r\n\r\n  <!-- Jump to page -->\r\n  <div class=\"jump-to-page\">\r\n    <input\r\n      type=\"number\"\r\n      min=\"1\"\r\n      [(ngModel)]=\"jumpPageNumber\"\r\n      (keydown.enter)=\"jumpToPage()\" />\r\n\r\n    <dso-button\r\n      btnLabel=\"Go\"\r\n      btnType=\"ghost\"\r\n      btnSize=\"mdBtn\"\r\n      [isDisabled]=\"!jumpPageNumber\"\r\n      (onClick)=\"jumpToPage()\">\r\n    </dso-button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".pagination-container{display:flex;align-items:center;gap:8px;font-size:14px}.range-info{margin-right:12px}button{padding:6px 10px;border-radius:4px;border:1px solid #ccc;background:#f0f0f0;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button.page-number.active{background-color:#007bff;color:#fff;font-weight:700}.page-buttons{display:flex;gap:4px}.page-buttons dso-button{flex:0 0 44px;text-align:center}.jump-to-page{display:flex;align-items:center;gap:4px}.jump-to-page input{width:48px;padding:6px 8px;border-radius:4px;border:1px solid #ccc;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { page: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], pageSizes: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }] } });
+
+class RadioComponent {
+    label = 'Radio label';
+    value;
+    name; // for grouping radios
+    disabled = false;
+    error = false;
+    isChecked = false;
+    change = new EventEmitter();
+    // Method to handle change in radio state
+    toggleRadio(event) {
+        // console.log(this.value);
+        event.stopPropagation();
+        this.change.emit(this.value); // Emit the updated value to the parent
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RadioComponent, isStandalone: true, selector: "dso-radio", inputs: { label: "label", value: "value", name: "name", disabled: "disabled", error: "error", isChecked: "isChecked" }, outputs: { change: "change" }, ngImport: i0, template: "<label class=\"radio-wrapper\" \r\n[class.disabled]=\"disabled\" \r\n[class.error]=\"error\">\r\n  <input\r\n    class=\"radio-input\"\r\n    type=\"radio\"\r\n    [attr.name]=\"name\"\r\n    [value]=\"value\"\r\n    [checked]=\"isChecked\"\r\n    [disabled]=\"disabled\"\r\n    (change)=\"toggleRadio($event)\"\r\n  />\r\n  <span class=\"custom-radio\"></span>\r\n  <span *ngIf=\"label\" class=\"radio-label\">{{ label }}</span>\r\n</label>\r\n", styles: [".radio-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer}.radio-wrapper.disabled{cursor:not-allowed}.radio-wrapper.disabled .custom-radio{background-color:#f0f0f0;border-color:#d0d0d0}.radio-wrapper.disabled .radio-input:checked~.custom-radio{border:1px solid rgba(0,0,255,.5)}.radio-wrapper.disabled .custom-radio:after{opacity:.5}.radio-input{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(100%);overflow:hidden;white-space:nowrap}.custom-radio{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #666666;border-radius:50%}.radio-input:checked~.custom-radio{border:1px solid blue}input[type=radio]:checked+.custom-radio:after{display:block;content:\"\";width:100%;height:100%;background:#00f;border:5px solid blue;background:transparent;box-sizing:border-box;border-radius:50%}.radio-label{font-size:14px}.error .custom-radio{border-color:red}.radio-wrapper:not(.disabled):hover .custom-radio{background-color:#eef5f9;border-color:#0000ffc0;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-radio', standalone: true, imports: [FormsModule, CommonModule], template: "<label class=\"radio-wrapper\" \r\n[class.disabled]=\"disabled\" \r\n[class.error]=\"error\">\r\n  <input\r\n    class=\"radio-input\"\r\n    type=\"radio\"\r\n    [attr.name]=\"name\"\r\n    [value]=\"value\"\r\n    [checked]=\"isChecked\"\r\n    [disabled]=\"disabled\"\r\n    (change)=\"toggleRadio($event)\"\r\n  />\r\n  <span class=\"custom-radio\"></span>\r\n  <span *ngIf=\"label\" class=\"radio-label\">{{ label }}</span>\r\n</label>\r\n", styles: [".radio-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer}.radio-wrapper.disabled{cursor:not-allowed}.radio-wrapper.disabled .custom-radio{background-color:#f0f0f0;border-color:#d0d0d0}.radio-wrapper.disabled .radio-input:checked~.custom-radio{border:1px solid rgba(0,0,255,.5)}.radio-wrapper.disabled .custom-radio:after{opacity:.5}.radio-input{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(100%);overflow:hidden;white-space:nowrap}.custom-radio{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #666666;border-radius:50%}.radio-input:checked~.custom-radio{border:1px solid blue}input[type=radio]:checked+.custom-radio:after{display:block;content:\"\";width:100%;height:100%;background:#00f;border:5px solid blue;background:transparent;box-sizing:border-box;border-radius:50%}.radio-label{font-size:14px}.error .custom-radio{border-color:red}.radio-wrapper:not(.disabled):hover .custom-radio{background-color:#eef5f9;border-color:#0000ffc0;cursor:pointer}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], isChecked: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class SingleSelectComponent {
+    elementRef;
+    // Reference to the dropdown <ul> for scroll management
+    dropdownListRef;
+    // Inputs for configuration & data binding
+    options = [];
+    dropdownPosition = 'bottom';
+    placeholder = 'Select an option';
+    inputTextLabel = 'Dropdown Title'; // Optional input label
+    isDisabled = false; // Controls disabled state
+    enableValidation = true; // Enables validation checks
+    helperText; // Optional helper text
+    selectIconName = null; // Icon name/class for clear button
+    errorText = 'This field is required'; // Validation error text
+    // Output event emitter to notify selection changes
+    selectionChange = new EventEmitter();
+    // Internal state properties
+    selectedOption = null; // Currently selected option object
+    searchQuery = ''; // Search input value
+    filteredOptions = []; // Options filtered based on search
+    isOpen = false; // Dropdown open/close state
+    isInvalid = false; // Validation invalid flag
+    isExceeded = false; // (Optional) exceeded limit flag, currently unused
+    hasOpened = false;
+    hasInteracted = false; // (Optional) touched flag, currently unused
+    lastScrollTop = 0; // Stores last scroll position of dropdown list
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    /**
+     * //Handles dropdown scroll events to persist scroll position
+     */
+    onDropdownScroll() {
+        if (this.dropdownListRef) {
+            this.lastScrollTop = this.dropdownListRef.nativeElement.scrollTop;
+            console.log(`Dropdown scrollTop updated to: ${this.lastScrollTop}`);
+        }
+        else {
+            console.warn('dropdownListRef is undefined on scroll');
+        }
+    }
+    /**
+     * Detects clicks outside of the component to close the dropdown if open
+     */
+    onOutsideClick(event) {
+        const clickedInside = this.elementRef.nativeElement.contains(event.target);
+        if (!clickedInside) {
+            if (this.isOpen) {
+                this.isOpen = false; // Close dropdown if clicked outside
+                console.log('Dropdown closed via outside click');
+                this.hasInteracted = true;
+                // Validate only if nothing is selected
+                if (this.enableValidation && !this.selectedOption) {
+                    this.isInvalid = true;
+                    console.log('Validation failed: no option selected after outside click');
+                }
+                else {
+                    this.isInvalid = false;
+                }
+            }
+        }
+    }
+    /**
+     * Initialize component data on creation
+     */
+    ngOnInit() {
+        // Sample hardcoded options (can be overridden via @Input)
+        this.options = [
+            { value: '1', label: 'Apple' },
+            { value: '2', label: 'Banana' },
+            { value: '3', label: 'Cherry' },
+            { value: '4', label: 'Date' },
+            { value: '5', label: 'Grapes' },
+            { value: '6', label: 'AAAA' },
+            { value: '7', label: 'BBBB' },
+            { value: '8', label: 'CCCC' },
+            { value: '9', label: 'DDDD' },
+        ];
+        // Show all options initially
+        this.filteredOptions = this.options;
+    }
+    ngOnDestroy() {
+        // Placeholder for any cleanup logic if needed
+    }
+    /**
+     * Handles click on the main select box
+     * Prevents opening if disabled
+     */
+    onSelectClick(event) {
+        event.stopPropagation();
+        if (this.isDisabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+        this.toggleDropdown(event);
+    }
+    /**
+     * Toggles dropdown open/close state and restores scroll position if opening
+     */
+    toggleDropdown(event) {
+        if (this.isDisabled) {
+            event.stopPropagation();
+            // console.warn('Dropdown is disabled, toggle prevented.');
+            return;
+        }
+        this.isOpen = !this.isOpen;
+        this.hasInteracted = true;
+        // console.log(`Dropdown toggled. isOpen: ${this.isOpen}`);
+        if (this.isOpen) {
+            this.hasOpened = true;
+            setTimeout(() => {
+                if (this.dropdownListRef) {
+                    // console.log(`Restoring scrollTop to: ${this.lastScrollTop}`);
+                    this.dropdownListRef.nativeElement.scrollTop = this.lastScrollTop;
+                    console.log('Scroll Restored');
+                }
+            });
+        }
+        else {
+            // Validate on close
+            this.hasInteracted = true;
+            console.log('User has interacted and closed the dropdown');
+            if (this.enableValidation && !this.selectedOption) {
+                this.isInvalid = true;
+                console.log('No option selected — validation failed');
+            }
+            else {
+                this.isInvalid = false;
+            }
+        }
+    }
+    /**
+     * Filters dropdown options based on current search query
+     */
+    filterOptions() {
+        const query = this.searchQuery.toLowerCase();
+        this.filteredOptions = this.options.filter((option) => option.label.toLowerCase().includes(query));
+    }
+    /**
+     * Handles option selection:
+     * - Updates selected option
+     * - Validates
+     * - Emits selection change event
+     * - Closes dropdown
+     */
+    selectOption(event, option) {
+        event.stopPropagation();
+        this.selectedOption = option;
+        this.isInvalid = false;
+        this.selectionChange.emit(this.selectedOption);
+        this.isOpen = false;
+    }
+    /**
+     * Clears the selected option and resets validation and scroll
+     */
+    clearSelection(event) {
+        // console.log('Clear selection triggered');
+        // this.hasInteracted = false;
+        this.selectedOption = null;
+        this.searchQuery = ''; // Clear the search input field as well
+        this.filteredOptions = this.options; // Show all options again
+        this.isInvalid = false;
+        this.lastScrollTop = 0;
+        this.selectionChange.emit(this.selectedOption);
+    }
+    /**
+     * Checks validity based on current selection if validation is enabled
+     */
+    checkValidity() {
+        if (this.enableValidation) {
+            this.isInvalid = !this.selectedOption;
+        }
+    }
+    /**
+     * Returns the icon path if icon name is provided
+     */
+    getIconPath() {
+        if (this.selectIconName) {
+            return `./assets/icons/${this.selectIconName}.svg`;
+        }
+        return '';
+    }
+    showError() {
+        return this.enableValidation && this.hasInteracted && !this.selectedOption;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SingleSelectComponent, isStandalone: true, selector: "dso-single-select", inputs: { options: "options", dropdownPosition: "dropdownPosition", placeholder: "placeholder", inputTextLabel: "inputTextLabel", isDisabled: "isDisabled", enableValidation: "enableValidation", helperText: "helperText", selectIconName: "selectIconName", errorText: "errorText" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onOutsideClick($event)" } }, viewQueries: [{ propertyName: "dropdownListRef", first: true, predicate: ["dropdownList"], descendants: true }], ngImport: i0, template: "<div class=\"select-wrapper\">\r\n<!-- Label (optional) -->\r\n<div *ngIf=\"inputTextLabel\" class=\"select-label\">{{ inputTextLabel }}</div>\r\n  \r\n<!-- <div class=\"select-container\" (click)=\"toggleDropdown($event)\" [class.disabled]=\"isDisabled\">     -->\r\n<div class=\"select-container\" [class.disabled]=\"isDisabled\" [class.error]=\"enableValidation && hasInteracted && isInvalid\" [class.focused]=\"isOpen\"\r\n >    \r\n  <div class=\"selected-option\"\r\n      (click)=\"onSelectClick($event)\"     \r\n      [ngClass]=\"{'placeholder': !selectedOption, \r\n                  'selected': selectedOption }\">\r\n    <span>{{ selectedOption?.label || placeholder }}</span>\r\n    <div class=\"clearbtn-wrapper\">  \r\n      <dso-button \r\n      btnLabel=\"Clear\" \r\n      btnType=\"ghost\" \r\n      btnSize='smBtn'\r\n      *ngIf=\"selectedOption && !isDisabled\" \r\n      (click)=\"clearSelection($event)\"></dso-button>\r\n      <dso-icon *ngIf=\"selectIconName\" [iconName]=\"selectIconName\" [size]=\"'small'\"></dso-icon>\r\n    </div>\r\n  </div>\r\n\r\n    <!-- Dropdown -->\r\n  <div class=\"dropdown\" *ngIf=\"isOpen\" \r\n    (click)=\"$event.stopPropagation()\" \r\n    [ngClass]=\"{'dropdown-bottom': dropdownPosition === 'bottom', 'dropdown-top': dropdownPosition === 'top'}\" >\r\n    <input type=\"text\" \r\n      [(ngModel)]=\"searchQuery\" \r\n      (input)=\"filterOptions()\" \r\n      placeholder=\"Search...\" />\r\n    <ul #dropdownList \r\n      (scroll)=\"onDropdownScroll()\" \r\n      class=\"dropdown-list\">\r\n      <li *ngFor=\"let option of filteredOptions\" (click)=\"selectOption($event, option)\" [ngClass]=\"{'active': option.value === selectedOption?.value}\">\r\n        {{ option.label }}\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- Helper Text (when validation is disabled) -->\r\n<div *ngIf=\"enableValidation && helperText && !(hasInteracted && isInvalid)\" class=\"helper-text\">\r\n  {{ helperText }}\r\n</div>\r\n\r\n<!-- Error Message (when validation is enabled) -->\r\n<div *ngIf=\"enableValidation && hasInteracted && isInvalid\" class=\"error-message\">\r\n  {{ errorText }}\r\n</div>\r\n</div>", styles: [":host{display:inline-block;font-family:inherit}.select-label{font-size:16px;color:#333;display:block}.select-wrapper{display:flex;flex-direction:column;gap:8px}.select-container{position:relative;width:300px;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:4px;background-color:#fff;box-sizing:border-box}.select-container:hover{border:1px solid #071d35}.select-container.disabled{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.select-container.disabled .selected-option{pointer-events:none;color:#aaa}.select-container.error{border-color:red}.select-container.focused{border-color:#007bff}.dropdown-list{max-height:150px;overflow-y:auto}.selected-option{padding:12px 8px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.selected-option.placeholder{color:#aaa}.selected-option.selected{color:#000}img.button-icon{width:20px;height:20px}.clearbtn-wrapper{display:flex;gap:4px;justify-content:space-between;align-items:center}.dropdown{width:300px;position:absolute;background-color:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;box-shadow:0 4px 6px #0000000d}.dropdown input{width:100%;padding:10px;box-sizing:border-box;border:none;border-bottom:1px solid #eee;outline:none}.dropdown ul{list-style:none;padding:0;margin:0}.dropdown ul li{padding:8px 12px;cursor:pointer;transition:background-color .2s}.dropdown ul li:hover{background-color:#f0f0f0}.dropdown ul li.active{background-color:#3784d6;color:#fff;font-weight:700}.dropdown-bottom{top:100%}.dropdown-top{bottom:100%}.helper-text,.error-message{font-size:16px}.helper-text{color:#888}.error-message{color:red}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "dso-button", inputs: ["btnLabel", "btnType", "btnSize", "btnIconName", "isDisabled", "isActive"], outputs: ["onClick"] }, { kind: "component", type: IconComponent, selector: "dso-icon", inputs: ["iconName", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SingleSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-single-select', standalone: true, imports: [FormsModule, CommonModule, ButtonComponent, IconComponent], template: "<div class=\"select-wrapper\">\r\n<!-- Label (optional) -->\r\n<div *ngIf=\"inputTextLabel\" class=\"select-label\">{{ inputTextLabel }}</div>\r\n  \r\n<!-- <div class=\"select-container\" (click)=\"toggleDropdown($event)\" [class.disabled]=\"isDisabled\">     -->\r\n<div class=\"select-container\" [class.disabled]=\"isDisabled\" [class.error]=\"enableValidation && hasInteracted && isInvalid\" [class.focused]=\"isOpen\"\r\n >    \r\n  <div class=\"selected-option\"\r\n      (click)=\"onSelectClick($event)\"     \r\n      [ngClass]=\"{'placeholder': !selectedOption, \r\n                  'selected': selectedOption }\">\r\n    <span>{{ selectedOption?.label || placeholder }}</span>\r\n    <div class=\"clearbtn-wrapper\">  \r\n      <dso-button \r\n      btnLabel=\"Clear\" \r\n      btnType=\"ghost\" \r\n      btnSize='smBtn'\r\n      *ngIf=\"selectedOption && !isDisabled\" \r\n      (click)=\"clearSelection($event)\"></dso-button>\r\n      <dso-icon *ngIf=\"selectIconName\" [iconName]=\"selectIconName\" [size]=\"'small'\"></dso-icon>\r\n    </div>\r\n  </div>\r\n\r\n    <!-- Dropdown -->\r\n  <div class=\"dropdown\" *ngIf=\"isOpen\" \r\n    (click)=\"$event.stopPropagation()\" \r\n    [ngClass]=\"{'dropdown-bottom': dropdownPosition === 'bottom', 'dropdown-top': dropdownPosition === 'top'}\" >\r\n    <input type=\"text\" \r\n      [(ngModel)]=\"searchQuery\" \r\n      (input)=\"filterOptions()\" \r\n      placeholder=\"Search...\" />\r\n    <ul #dropdownList \r\n      (scroll)=\"onDropdownScroll()\" \r\n      class=\"dropdown-list\">\r\n      <li *ngFor=\"let option of filteredOptions\" (click)=\"selectOption($event, option)\" [ngClass]=\"{'active': option.value === selectedOption?.value}\">\r\n        {{ option.label }}\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- Helper Text (when validation is disabled) -->\r\n<div *ngIf=\"enableValidation && helperText && !(hasInteracted && isInvalid)\" class=\"helper-text\">\r\n  {{ helperText }}\r\n</div>\r\n\r\n<!-- Error Message (when validation is enabled) -->\r\n<div *ngIf=\"enableValidation && hasInteracted && isInvalid\" class=\"error-message\">\r\n  {{ errorText }}\r\n</div>\r\n</div>", styles: [":host{display:inline-block;font-family:inherit}.select-label{font-size:16px;color:#333;display:block}.select-wrapper{display:flex;flex-direction:column;gap:8px}.select-container{position:relative;width:300px;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:4px;background-color:#fff;box-sizing:border-box}.select-container:hover{border:1px solid #071d35}.select-container.disabled{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.select-container.disabled .selected-option{pointer-events:none;color:#aaa}.select-container.error{border-color:red}.select-container.focused{border-color:#007bff}.dropdown-list{max-height:150px;overflow-y:auto}.selected-option{padding:12px 8px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.selected-option.placeholder{color:#aaa}.selected-option.selected{color:#000}img.button-icon{width:20px;height:20px}.clearbtn-wrapper{display:flex;gap:4px;justify-content:space-between;align-items:center}.dropdown{width:300px;position:absolute;background-color:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;box-shadow:0 4px 6px #0000000d}.dropdown input{width:100%;padding:10px;box-sizing:border-box;border:none;border-bottom:1px solid #eee;outline:none}.dropdown ul{list-style:none;padding:0;margin:0}.dropdown ul li{padding:8px 12px;cursor:pointer;transition:background-color .2s}.dropdown ul li:hover{background-color:#f0f0f0}.dropdown ul li.active{background-color:#3784d6;color:#fff;font-weight:700}.dropdown-bottom{top:100%}.dropdown-top{bottom:100%}.helper-text,.error-message{font-size:16px}.helper-text{color:#888}.error-message{color:red}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dropdownListRef: [{
+                type: ViewChild,
+                args: ['dropdownList']
+            }], options: [{
+                type: Input
+            }], dropdownPosition: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], inputTextLabel: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], enableValidation: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], selectIconName: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], onOutsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * DSO Side Navigation Component
+ *
+ * Features:
+ * - Configurable title/logo area.
+ * - Dynamic menu items with icons and routing.
+ * - Supports default active item by route or index.
+ * - Click-outside detection to close the sidebar.
+ * - Optional overlay for dimming the background.
+ */
+class SideNavComponent {
+    host;
+    /** Title displayed next to the logo */
+    title = '';
+    /** List of navigation items */
+    items = [];
+    /** Controls whether the sidebar is visible */
+    open = true;
+    /** Enable/disable background overlay when sidebar is open */
+    overlay = true;
+    /** Optional: default active menu item by route */
+    defaultActiveRoute;
+    /** Optional: default active menu item by index */
+    defaultActiveIndex;
+    /** Event emitted when sidebar is closed */
+    closed = new EventEmitter();
+    /**
+     * ElementRef to the component host element.
+     * Used for detecting click-outside events.
+     */
+    constructor(host) {
+        this.host = host;
+    }
+    /**
+     * Lifecycle hook: initialize default active menu item.
+     */
+    ngOnInit() {
+        // Reset all items to inactive first
+        this.items.forEach(item => item.isActive = false);
+        // Set default active item
+        const defaultItem = this.defaultActiveRoute
+            ? this.items.find(item => item.route === this.defaultActiveRoute)
+            : this.items[this.defaultActiveIndex ?? 0]; // fallback to first item if no index
+        if (defaultItem) {
+            defaultItem.isActive = true;
+        }
+    }
+    /**
+     * Close the sidebar and emit the `closed` event.
+     * Can be called manually or via click-outside detection.
+     */
+    closeSidebar() {
+        this.open = false;
+        this.closed.emit();
+    }
+    /**
+     * HostListener to detect clicks anywhere in the document.
+     * If the click happens outside the sidebar while it's open, it triggers closeSidebar().
+     *
+     * @param event MouseEvent triggered on document click
+     */
+    onDocumentClick(event) {
+        if (!this.open)
+            return;
+        // Check if click was inside the sidebar
+        const clickedInside = this.host.nativeElement.contains(event.target);
+        if (!clickedInside) {
+            this.closeSidebar();
+        }
+    }
+    /**
+     * Called when a sidebar menu item is clicked.
+     * - Marks the clicked item as active.
+     * - Optionally, navigation can be handled via `[routerLink]`.
+     *
+     * @param item The menu item that was clicked
+     */
+    onItemClick(item) {
+        this.items.forEach(i => i.isActive = false);
+        item.isActive = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SideNavComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SideNavComponent, isStandalone: true, selector: "dso-side-nav", inputs: { title: "title", items: "items", open: "open", overlay: "overlay", defaultActiveRoute: "defaultActiveRoute", defaultActiveIndex: "defaultActiveIndex" }, outputs: { closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Optional overlay -->\r\n<div \r\n  class=\"sidebar-overlay\" \r\n  *ngIf=\"open && overlay\"\r\n  (click)=\"closeSidebar()\">\r\n</div>\r\n\r\n<nav class=\"dso-side-nav\" [class.open]=\"open\">\r\n\r\n  <!-- Logo and Title -->\r\n  <div class=\"side-nav-header\">\r\n    <ng-content select=\"[dso-side-logo]\"></ng-content>\r\n    <span class=\"side-nav-title\">{{ title }}</span>\r\n  </div>\r\n\r\n  <!-- Navigation list -->\r\n  <ul class=\"side-nav-list\">\r\n    <li *ngFor=\"let item of items\" [class.active]=\"item.isActive\">\r\n      <a\r\n        class=\"nav-item\"\r\n        [routerLink]=\"item.route\"\r\n        routerLinkActive=\"active\"\r\n        (click)=\"onItemClick(item)\"\r\n      >\r\n        <!-- <i class=\"nav-icon\" [class]=\"item.icon\"></i> -->\r\n      <dso-icon *ngIf=\"item.iconName\" [iconName]=\"item.iconName\" size=\"small\"></dso-icon>\r\n\r\n        <span class=\"nav-label\">{{ item.label }}</span>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n\r\n  <!-- Footer slot (optional) -->\r\n  <div class=\"side-nav-footer\">\r\n    <ng-content select=\"[dso-side-footer]\"></ng-content>\r\n  </div>\r\n\r\n</nav>\r\n", styles: [".dso-side-nav{position:fixed;left:0;top:0;width:240px;height:100vh;background:#fff;border-right:1px solid #e5e5e5;display:flex;flex-direction:column;transform:translate(-100%);transition:transform .25s ease-in-out;z-index:1000}.dso-side-nav.open{transform:translate(0)}.dso-side-nav .side-nav-header{display:flex;align-items:center;gap:.75rem;padding:1rem;white-space:nowrap}.dso-side-nav .side-nav-title{font-size:1rem;font-weight:600}.dso-side-nav .side-nav-list{flex:1;list-style:none;padding:0 4px;margin:.5rem 0}.dso-side-nav .side-nav-list li{margin:.25rem 0}.dso-side-nav .side-nav-list li a.nav-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-radius:4px;text-decoration:none;color:#333}.dso-side-nav .side-nav-list li a.nav-item:hover{background:#f4f4f4}.dso-side-nav .side-nav-list li.active a.nav-item,.dso-side-nav .side-nav-list li a.nav-item.active{background:#e6f0ff;border-left:3px solid #007bff}.dso-side-nav .side-nav-list li.active a.nav-item .nav-label,.dso-side-nav .side-nav-list li a.nav-item.active .nav-label{font-weight:600}.dso-side-nav .side-nav-footer{padding:1rem;border-top:1px solid #e5e5e5}.sidebar-overlay{position:fixed;inset:0;background:#00000059;z-index:900}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "dso-icon", inputs: ["iconName", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SideNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-side-nav', standalone: true, imports: [CommonModule, RouterModule, IconComponent], template: "<!-- Optional overlay -->\r\n<div \r\n  class=\"sidebar-overlay\" \r\n  *ngIf=\"open && overlay\"\r\n  (click)=\"closeSidebar()\">\r\n</div>\r\n\r\n<nav class=\"dso-side-nav\" [class.open]=\"open\">\r\n\r\n  <!-- Logo and Title -->\r\n  <div class=\"side-nav-header\">\r\n    <ng-content select=\"[dso-side-logo]\"></ng-content>\r\n    <span class=\"side-nav-title\">{{ title }}</span>\r\n  </div>\r\n\r\n  <!-- Navigation list -->\r\n  <ul class=\"side-nav-list\">\r\n    <li *ngFor=\"let item of items\" [class.active]=\"item.isActive\">\r\n      <a\r\n        class=\"nav-item\"\r\n        [routerLink]=\"item.route\"\r\n        routerLinkActive=\"active\"\r\n        (click)=\"onItemClick(item)\"\r\n      >\r\n        <!-- <i class=\"nav-icon\" [class]=\"item.icon\"></i> -->\r\n      <dso-icon *ngIf=\"item.iconName\" [iconName]=\"item.iconName\" size=\"small\"></dso-icon>\r\n\r\n        <span class=\"nav-label\">{{ item.label }}</span>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n\r\n  <!-- Footer slot (optional) -->\r\n  <div class=\"side-nav-footer\">\r\n    <ng-content select=\"[dso-side-footer]\"></ng-content>\r\n  </div>\r\n\r\n</nav>\r\n", styles: [".dso-side-nav{position:fixed;left:0;top:0;width:240px;height:100vh;background:#fff;border-right:1px solid #e5e5e5;display:flex;flex-direction:column;transform:translate(-100%);transition:transform .25s ease-in-out;z-index:1000}.dso-side-nav.open{transform:translate(0)}.dso-side-nav .side-nav-header{display:flex;align-items:center;gap:.75rem;padding:1rem;white-space:nowrap}.dso-side-nav .side-nav-title{font-size:1rem;font-weight:600}.dso-side-nav .side-nav-list{flex:1;list-style:none;padding:0 4px;margin:.5rem 0}.dso-side-nav .side-nav-list li{margin:.25rem 0}.dso-side-nav .side-nav-list li a.nav-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-radius:4px;text-decoration:none;color:#333}.dso-side-nav .side-nav-list li a.nav-item:hover{background:#f4f4f4}.dso-side-nav .side-nav-list li.active a.nav-item,.dso-side-nav .side-nav-list li a.nav-item.active{background:#e6f0ff;border-left:3px solid #007bff}.dso-side-nav .side-nav-list li.active a.nav-item .nav-label,.dso-side-nav .side-nav-list li a.nav-item.active .nav-label{font-weight:600}.dso-side-nav .side-nav-footer{padding:1rem;border-top:1px solid #e5e5e5}.sidebar-overlay{position:fixed;inset:0;background:#00000059;z-index:900}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], overlay: [{
+                type: Input
+            }], defaultActiveRoute: [{
+                type: Input
+            }], defaultActiveIndex: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class SpinnerComponent {
+    el;
+    /** Size presets */
+    size = 'medium';
+    /** Color variants */
+    color = 'primary';
+    /** Overlay background toggle */
+    overlay = false;
+    /** Custom overlay background color */
+    overlayColor = 'rgba(0,0,0,0.4)';
+    /** Optional illustration (inside spinner) */
+    illustrationSrc;
+    /** Optional label text (below spinner) */
+    label;
+    // NEW: optional Lottie animation
+    animationSrc;
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterViewInit() {
+        if (this.animationSrc) {
+            lottie.loadAnimation({
+                container: this.el.nativeElement.querySelector('.spinner-lottie'),
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                path: this.animationSrc, // path to your JSON animation
+            });
+        }
+    }
+    get isIllustrated() {
+        return !!this.illustrationSrc;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpinnerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpinnerComponent, isStandalone: true, selector: "dso-spinner", inputs: { size: "size", color: "color", overlay: "overlay", overlayColor: "overlayColor", illustrationSrc: "illustrationSrc", label: "label", animationSrc: "animationSrc" }, ngImport: i0, template: "<div *ngIf=\"overlay\" class=\"spinner-overlay\" [ngStyle]=\"{'background-color': overlayColor}\">\r\n  <div class=\"spinner-wrapper\">\r\n    \r\n    <!-- Static spinner / illustration -->\r\n    <div \r\n      class=\"spinner\" \r\n      *ngIf=\"!animationSrc\"\r\n      [ngClass]=\"[isIllustrated ? 'illustrated' : size, color]\">\r\n      <img *ngIf=\"illustrationSrc\" [src]=\"illustrationSrc\" class=\"spinner-illustration\" alt=\"Loading illustration\" />\r\n    </div>\r\n\r\n    <!-- Lottie animation -->\r\n    <div *ngIf=\"animationSrc\" class=\"spinner-lottie\"></div>\r\n\r\n    <!-- Optional label -->\r\n    <p *ngIf=\"label\" class=\"spinner-label\">{{ label }}</p>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"!overlay\" class=\"spinner-wrapper\">\r\n  \r\n  <!-- Static spinner / illustration -->\r\n  <div \r\n    class=\"spinner\" \r\n    *ngIf=\"!animationSrc\"\r\n    [ngClass]=\"[isIllustrated ? 'illustrated' : size, color]\">\r\n    <img *ngIf=\"illustrationSrc\" [src]=\"illustrationSrc\" class=\"spinner-illustration\" alt=\"Loading illustration\" />\r\n  </div>\r\n\r\n  <!-- Lottie animation -->\r\n  <div *ngIf=\"animationSrc\" class=\"spinner-lottie\"></div>\r\n\r\n  <!-- Optional label -->\r\n  <p *ngIf=\"label\" class=\"spinner-label\">{{ label }}</p>\r\n</div>\r\n", styles: [".spinner-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}.spinner{position:relative;display:flex;justify-content:center;align-items:center}.spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(0,0,0,.1);border-top-color:#007bff;animation:spin .8s linear infinite}.spinner.small{width:32px;height:32px}.spinner.small:before{border-width:2px}.spinner.medium{width:48px;height:48px}.spinner.medium:before{border-width:3px}.spinner.large{width:72px;height:72px}.spinner.large:before{border-width:4px}.spinner.illustrated{width:240px;height:240px}.spinner.illustrated:before{border-width:6px}.spinner.illustrated .spinner-illustration{width:180px;height:180px}.spinner.primary:before{border-top-color:#007bff}.spinner.success:before{border-top-color:#28a745}.spinner.warning:before{border-top-color:#ffc107}.spinner.danger:before{border-top-color:#dc3545}.spinner-illustration{object-fit:contain;z-index:1}.spinner-label{font-size:14px;color:#fff;text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.spinner-lottie{width:80px;height:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-spinner', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"overlay\" class=\"spinner-overlay\" [ngStyle]=\"{'background-color': overlayColor}\">\r\n  <div class=\"spinner-wrapper\">\r\n    \r\n    <!-- Static spinner / illustration -->\r\n    <div \r\n      class=\"spinner\" \r\n      *ngIf=\"!animationSrc\"\r\n      [ngClass]=\"[isIllustrated ? 'illustrated' : size, color]\">\r\n      <img *ngIf=\"illustrationSrc\" [src]=\"illustrationSrc\" class=\"spinner-illustration\" alt=\"Loading illustration\" />\r\n    </div>\r\n\r\n    <!-- Lottie animation -->\r\n    <div *ngIf=\"animationSrc\" class=\"spinner-lottie\"></div>\r\n\r\n    <!-- Optional label -->\r\n    <p *ngIf=\"label\" class=\"spinner-label\">{{ label }}</p>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"!overlay\" class=\"spinner-wrapper\">\r\n  \r\n  <!-- Static spinner / illustration -->\r\n  <div \r\n    class=\"spinner\" \r\n    *ngIf=\"!animationSrc\"\r\n    [ngClass]=\"[isIllustrated ? 'illustrated' : size, color]\">\r\n    <img *ngIf=\"illustrationSrc\" [src]=\"illustrationSrc\" class=\"spinner-illustration\" alt=\"Loading illustration\" />\r\n  </div>\r\n\r\n  <!-- Lottie animation -->\r\n  <div *ngIf=\"animationSrc\" class=\"spinner-lottie\"></div>\r\n\r\n  <!-- Optional label -->\r\n  <p *ngIf=\"label\" class=\"spinner-label\">{{ label }}</p>\r\n</div>\r\n", styles: [".spinner-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}.spinner{position:relative;display:flex;justify-content:center;align-items:center}.spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(0,0,0,.1);border-top-color:#007bff;animation:spin .8s linear infinite}.spinner.small{width:32px;height:32px}.spinner.small:before{border-width:2px}.spinner.medium{width:48px;height:48px}.spinner.medium:before{border-width:3px}.spinner.large{width:72px;height:72px}.spinner.large:before{border-width:4px}.spinner.illustrated{width:240px;height:240px}.spinner.illustrated:before{border-width:6px}.spinner.illustrated .spinner-illustration{width:180px;height:180px}.spinner.primary:before{border-top-color:#007bff}.spinner.success:before{border-top-color:#28a745}.spinner.warning:before{border-top-color:#ffc107}.spinner.danger:before{border-top-color:#dc3545}.spinner-illustration{object-fit:contain;z-index:1}.spinner-label{font-size:14px;color:#fff;text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.spinner-lottie{width:80px;height:80px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], overlay: [{
+                type: Input
+            }], overlayColor: [{
+                type: Input
+            }], illustrationSrc: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], animationSrc: [{
+                type: Input
+            }] } });
+
+class TooltipDirective {
+    el;
+    renderer;
+    tooltipElement = null;
+    // Make input reactive so it updates dynamically
+    _tooltipText = '';
+    set dsoDirectiveTooltip(value) {
+        this._tooltipText = value;
+        if (this.tooltipElement) {
+            this.tooltipElement.textContent = value;
+        }
+    }
+    get dsoDirectiveTooltip() {
+        return this._tooltipText;
+    }
+    position = 'top';
+    tooltipWidth = 'auto';
+    gap = 4; // distance from the element
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    onMouseEnter() {
+        if (!this.dsoDirectiveTooltip)
+            return;
+        // Create tooltip element if not exists
+        if (!this.tooltipElement) {
+            this.tooltipElement = this.renderer.createElement('div');
+            this.renderer.addClass(this.tooltipElement, 'tooltip-directive');
+            // Style
+            this.renderer.setStyle(this.tooltipElement, 'position', 'fixed'); // fixed so it won't be clipped
+            this.renderer.setStyle(this.tooltipElement, 'background', '#333');
+            this.renderer.setStyle(this.tooltipElement, 'color', '#fff');
+            this.renderer.setStyle(this.tooltipElement, 'padding', '4px 8px');
+            this.renderer.setStyle(this.tooltipElement, 'border-radius', '4px');
+            this.renderer.setStyle(this.tooltipElement, 'font-size', '12px');
+            this.renderer.setStyle(this.tooltipElement, 'z-index', '1000');
+            this.renderer.setStyle(this.tooltipElement, 'max-width', this.tooltipWidth);
+            this.renderer.setStyle(this.tooltipElement, 'white-space', 'normal'); // allow wrapping
+            this.renderer.setStyle(this.tooltipElement, 'word-break', 'break-word'); // break long words
+            this.renderer.appendChild(document.body, this.tooltipElement);
+        }
+        // Step 3: set tooltip text
+        if (this.tooltipElement) {
+            this.tooltipElement.textContent = this.dsoDirectiveTooltip;
+            const rect = this.el.nativeElement.getBoundingClientRect();
+            const tooltipHeight = this.tooltipElement.offsetHeight;
+            const tooltipWidth = this.tooltipElement.offsetWidth;
+            // Step 4: position tooltip based on input
+            switch (this.position) {
+                case 'top':
+                    this.renderer.setStyle(this.tooltipElement, 'top', `${rect.top - tooltipHeight - this.gap}px`);
+                    this.renderer.setStyle(this.tooltipElement, 'left', `${rect.left + (rect.width - tooltipWidth) / 2}px`);
+                    break;
+                case 'bottom':
+                    this.renderer.setStyle(this.tooltipElement, 'top', `${rect.bottom + this.gap}px`);
+                    this.renderer.setStyle(this.tooltipElement, 'left', `${rect.left + (rect.width - tooltipWidth) / 2}px`);
+                    break;
+                case 'left':
+                    this.renderer.setStyle(this.tooltipElement, 'top', `${rect.top + (rect.height - tooltipHeight) / 2}px`);
+                    this.renderer.setStyle(this.tooltipElement, 'left', `${rect.left - tooltipWidth - this.gap}px`);
+                    break;
+                case 'right':
+                    this.renderer.setStyle(this.tooltipElement, 'top', `${rect.top + (rect.height - tooltipHeight) / 2}px`);
+                    this.renderer.setStyle(this.tooltipElement, 'left', `${rect.right + this.gap}px`);
+                    break;
+            }
+            this.renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
+        }
+    }
+    onMouseLeave() {
+        if (this.tooltipElement) {
+            this.renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
+        }
+    }
+    ngOnDestroy() {
+        if (this.tooltipElement) {
+            this.renderer.removeChild(document.body, this.tooltipElement);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TooltipDirective, isStandalone: true, selector: "[dsoDirectiveTooltip]", inputs: { dsoDirectiveTooltip: "dsoDirectiveTooltip", position: "position", tooltipWidth: "tooltipWidth" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dsoDirectiveTooltip]', // This directive will be used with the attribute dsoTooltip
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { dsoDirectiveTooltip: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], tooltipWidth: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class TableComponent {
+    /* =====================
+       Inputs
+       ===================== */
+    columns = [];
+    rows = [];
+    defaultSortColumn;
+    defaultSortDirection = 'asc';
+    stickyHeader = false;
+    maxTableHeight;
+    /* =====================
+       Outputs
+       ===================== */
+    sortChange = new EventEmitter();
+    /* =====================
+       UI state only
+       ===================== */
+    sortColumn = null;
+    sortDirection = 'asc';
+    /* =====================
+       Lifecycle
+       ===================== */
+    ngOnChanges() {
+        // Initialize visual sort state ONLY
+        if (this.defaultSortColumn && !this.sortColumn) {
+            this.sortColumn = this.defaultSortColumn;
+            this.sortDirection = this.defaultSortDirection;
+            // Emit once so parent applies default sort
+            this.sortChange.emit({
+                column: this.sortColumn,
+                direction: this.sortDirection
+            });
+        }
+    }
+    /* =====================
+       Sorting (emit only)
+       ===================== */
+    sort(colKey) {
+        let direction = 'asc';
+        if (this.sortColumn === colKey) {
+            direction = this.sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        this.sortColumn = colKey;
+        this.sortDirection = direction;
+        this.sortChange.emit({ column: colKey, direction });
+    }
+    /* =====================
+       Column sizing
+       ===================== */
+    getColumnStyle(col) {
+        return {
+            'min-width': col.minWidth || null,
+            'max-width': col.maxWidth || null,
+            'width': !col.minWidth && !col.maxWidth ? 'auto' : null,
+        };
+    }
+    /* =====================
+       Truncation
+       ===================== */
+    shouldTruncateNative(cell) {
+        if (!cell)
+            return false;
+        const content = cell.querySelector('.cell-text');
+        if (!content)
+            return false;
+        return content.scrollWidth > content.clientWidth;
+    }
+    /* =====================
+       Selection (unchanged)
+       ===================== */
+    selectedRows = new Set();
+    toggleRow(row) {
+        if (this.selectedRows.has(row)) {
+            this.selectedRows.delete(row);
+        }
+        else {
+            this.selectedRows.add(row);
+        }
+    }
+    isRowSelected(row) {
+        return this.selectedRows.has(row);
+    }
+    get allSelected() {
+        return this.rows.length > 0 &&
+            this.selectedRows.size === this.rows.length;
+    }
+    toggleSelectAll() {
+        if (this.allSelected) {
+            this.selectedRows.clear();
+        }
+        else {
+            this.rows.forEach(row => this.selectedRows.add(row));
+        }
+    }
+    onEditRow(row) {
+        console.log('Edit clicked for row:', row);
+    }
+    onDeleteRow(row) {
+        console.log('Delete clicked for row:', row);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TableComponent, isStandalone: true, selector: "dso-table", inputs: { columns: "columns", rows: "rows", defaultSortColumn: "defaultSortColumn", defaultSortDirection: "defaultSortDirection", stickyHeader: "stickyHeader", maxTableHeight: "maxTableHeight" }, outputs: { sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"dso-table-container\" [class.sticky-header]=\"stickyHeader\" [style.max-height]=\"maxTableHeight\">\r\n  <table class=\"dso-table\">\r\n<thead>\r\n  <tr>\r\n    <th *ngFor=\"let col of columns\"\r\n        [class.sticky]=\"stickyHeader || col.sticky\"\r\n        [class.sticky-left]=\"stickyHeader && col.type === 'checkbox'\"\r\n        [class.sticky-right]=\"stickyHeader && col.type === 'action'\"\r\n        [ngStyle]=\"getColumnStyle(col)\"\r\n        [class.active]=\"sortColumn === col.key\"\r\n        class=\"sortable\"\r\n        (click)=\"col.sortable !== false && col.type !== 'checkbox' && sort(col.key)\">\r\n\r\n      <!-- If this column is a checkbox column -->\r\n      <ng-container *ngIf=\"col.type === 'checkbox'; else normalHeader\">\r\n        <dso-checkbox\r\n          size=\"small\"\r\n          [isChecked]=\"allSelected\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"toggleSelectAll()\">\r\n        </dso-checkbox>\r\n      </ng-container>\r\n\r\n      <!-- Your original header stays EXACTLY as-is -->\r\n      <ng-template #normalHeader>\r\n        <div class=\"header-content\">\r\n          {{ col.label }}\r\n\r\n          <dso-icon\r\n            *ngIf=\"col.sortable !== false && sortColumn === col.key\"\r\n            [iconName]=\"sortDirection === 'asc'\r\n                ? 'icon-van'\r\n                : 'icon-chevron_down'\"\r\n            size=\"small\"\r\n            class=\"sort-icon\">\r\n          </dso-icon>\r\n\r\n          <dso-icon\r\n            *ngIf=\"col.sortable !== false && sortColumn !== col.key\"\r\n            iconName=\"icon-chevron_up\"\r\n            size=\"small\"\r\n            class=\"hover-indicator\">\r\n          </dso-icon>\r\n        </div>\r\n      </ng-template>\r\n\r\n    </th>\r\n  </tr>\r\n</thead>\r\n\r\n\r\n<tbody>\r\n  <tr *ngFor=\"let row of rows\">\r\n    <td\r\n    #cell\r\n    *ngFor=\"let col of columns\"\r\n        [class.sticky-left]=\"stickyHeader && col.type === 'checkbox'\"\r\n        [class.sticky-right]=\"stickyHeader && col.type === 'action'\"\r\n    [ngStyle]=\"getColumnStyle(col)\"\r\n    [dsoDirectiveTooltip]=\"shouldTruncateNative(cell) ? row[col.key] : ''\">\r\n    <div class=\"cell-wrapper\" style=\"display:flex; align-items:center;\">\r\n    <dso-checkbox\r\n      *ngIf=\"col.type==='checkbox'\"\r\n      size=\"small\"\r\n      [isChecked]=\"isRowSelected(row)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"toggleRow(row)\">\r\n    </dso-checkbox>\r\n\r\n        <!-- Action button cell -->\r\n        <ng-container *ngIf=\"col.type==='action'\">\r\n          <dso-button\r\n            btnType=\"filled\"\r\n            btnSize=\"smBtn\"\r\n            btnLabel=\"Edit\"\r\n            (click)=\"onEditRow(row)\">\r\n          </dso-button>\r\n          <dso-button\r\n            btnType=\"outlined\"\r\n            btnSize=\"smBtn\"\r\n            btnLabel=\"Delete\"\r\n            (click)=\"onDeleteRow(row)\">\r\n          </dso-button>\r\n        </ng-container>\r\n\r\n        <!-- Normal text cell -->\r\n        <span *ngIf=\"!col.type || (col.type !== 'checkbox' && col.type !== 'action')\" class=\"cell-text\">\r\n          {{ row[col.key] }}\r\n        </span>\r\n    </div>\r\n    </td>\r\n  </tr>\r\n</tbody>\r\n\r\n  </table>\r\n</div>\r\n", styles: [".dso-table-container{overflow:auto;border:1px solid #ddd;position:relative}.dso-table{width:100%;border-collapse:collapse}.dso-table th,.dso-table td{padding:8px 12px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dso-table thead th{background:#2c2f36;color:#fff;font-weight:600}.dso-table-container.sticky-header .dso-table th.sticky{position:sticky;top:0}.dso-table th.sticky{top:0;z-index:20;box-shadow:0 2px 2px -1px #00000040}.dso-table thead th.sortable:hover{background:#3a3e46;cursor:pointer}.dso-table thead th.active{background:#464b54!important}.dso-table thead th:last-child{border-right:none}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}td .cell-text{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell-wrapper{display:inline-flex;align-items:center;margin:0;padding:0;gap:8px}.sticky-left{position:sticky;left:0;z-index:15;background:#fff}.sticky-right{position:sticky;right:0;z-index:15;background:#fff}.dso-table thead th.sticky-left,.dso-table thead th.sticky-right{z-index:25}.sticky-left.scroll-shadow{box-shadow:4px 0 6px -3px #00000040}.sticky-right.scroll-shadow{box-shadow:-4px 0 6px -3px #00000040}.dso-table tbody tr:hover{background:#f5f7fa}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "dso-button", inputs: ["btnLabel", "btnType", "btnSize", "btnIconName", "isDisabled", "isActive"], outputs: ["onClick"] }, { kind: "component", type: CheckboxComponent, selector: "dso-checkbox", inputs: ["label", "isChecked", "disabled", "size", "error", "required", "errorMessage", "iconName"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "dso-icon", inputs: ["iconName", "size"] }, { kind: "directive", type: TooltipDirective, selector: "[dsoDirectiveTooltip]", inputs: ["dsoDirectiveTooltip", "position", "tooltipWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-table', standalone: true, imports: [
+                        ButtonComponent,
+                        CheckboxComponent,
+                        CommonModule,
+                        IconComponent,
+                        TooltipDirective
+                    ], template: "<div #tableContainer class=\"dso-table-container\" [class.sticky-header]=\"stickyHeader\" [style.max-height]=\"maxTableHeight\">\r\n  <table class=\"dso-table\">\r\n<thead>\r\n  <tr>\r\n    <th *ngFor=\"let col of columns\"\r\n        [class.sticky]=\"stickyHeader || col.sticky\"\r\n        [class.sticky-left]=\"stickyHeader && col.type === 'checkbox'\"\r\n        [class.sticky-right]=\"stickyHeader && col.type === 'action'\"\r\n        [ngStyle]=\"getColumnStyle(col)\"\r\n        [class.active]=\"sortColumn === col.key\"\r\n        class=\"sortable\"\r\n        (click)=\"col.sortable !== false && col.type !== 'checkbox' && sort(col.key)\">\r\n\r\n      <!-- If this column is a checkbox column -->\r\n      <ng-container *ngIf=\"col.type === 'checkbox'; else normalHeader\">\r\n        <dso-checkbox\r\n          size=\"small\"\r\n          [isChecked]=\"allSelected\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"toggleSelectAll()\">\r\n        </dso-checkbox>\r\n      </ng-container>\r\n\r\n      <!-- Your original header stays EXACTLY as-is -->\r\n      <ng-template #normalHeader>\r\n        <div class=\"header-content\">\r\n          {{ col.label }}\r\n\r\n          <dso-icon\r\n            *ngIf=\"col.sortable !== false && sortColumn === col.key\"\r\n            [iconName]=\"sortDirection === 'asc'\r\n                ? 'icon-van'\r\n                : 'icon-chevron_down'\"\r\n            size=\"small\"\r\n            class=\"sort-icon\">\r\n          </dso-icon>\r\n\r\n          <dso-icon\r\n            *ngIf=\"col.sortable !== false && sortColumn !== col.key\"\r\n            iconName=\"icon-chevron_up\"\r\n            size=\"small\"\r\n            class=\"hover-indicator\">\r\n          </dso-icon>\r\n        </div>\r\n      </ng-template>\r\n\r\n    </th>\r\n  </tr>\r\n</thead>\r\n\r\n\r\n<tbody>\r\n  <tr *ngFor=\"let row of rows\">\r\n    <td\r\n    #cell\r\n    *ngFor=\"let col of columns\"\r\n        [class.sticky-left]=\"stickyHeader && col.type === 'checkbox'\"\r\n        [class.sticky-right]=\"stickyHeader && col.type === 'action'\"\r\n    [ngStyle]=\"getColumnStyle(col)\"\r\n    [dsoDirectiveTooltip]=\"shouldTruncateNative(cell) ? row[col.key] : ''\">\r\n    <div class=\"cell-wrapper\" style=\"display:flex; align-items:center;\">\r\n    <dso-checkbox\r\n      *ngIf=\"col.type==='checkbox'\"\r\n      size=\"small\"\r\n      [isChecked]=\"isRowSelected(row)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"toggleRow(row)\">\r\n    </dso-checkbox>\r\n\r\n        <!-- Action button cell -->\r\n        <ng-container *ngIf=\"col.type==='action'\">\r\n          <dso-button\r\n            btnType=\"filled\"\r\n            btnSize=\"smBtn\"\r\n            btnLabel=\"Edit\"\r\n            (click)=\"onEditRow(row)\">\r\n          </dso-button>\r\n          <dso-button\r\n            btnType=\"outlined\"\r\n            btnSize=\"smBtn\"\r\n            btnLabel=\"Delete\"\r\n            (click)=\"onDeleteRow(row)\">\r\n          </dso-button>\r\n        </ng-container>\r\n\r\n        <!-- Normal text cell -->\r\n        <span *ngIf=\"!col.type || (col.type !== 'checkbox' && col.type !== 'action')\" class=\"cell-text\">\r\n          {{ row[col.key] }}\r\n        </span>\r\n    </div>\r\n    </td>\r\n  </tr>\r\n</tbody>\r\n\r\n  </table>\r\n</div>\r\n", styles: [".dso-table-container{overflow:auto;border:1px solid #ddd;position:relative}.dso-table{width:100%;border-collapse:collapse}.dso-table th,.dso-table td{padding:8px 12px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dso-table thead th{background:#2c2f36;color:#fff;font-weight:600}.dso-table-container.sticky-header .dso-table th.sticky{position:sticky;top:0}.dso-table th.sticky{top:0;z-index:20;box-shadow:0 2px 2px -1px #00000040}.dso-table thead th.sortable:hover{background:#3a3e46;cursor:pointer}.dso-table thead th.active{background:#464b54!important}.dso-table thead th:last-child{border-right:none}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}td .cell-text{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell-wrapper{display:inline-flex;align-items:center;margin:0;padding:0;gap:8px}.sticky-left{position:sticky;left:0;z-index:15;background:#fff}.sticky-right{position:sticky;right:0;z-index:15;background:#fff}.dso-table thead th.sticky-left,.dso-table thead th.sticky-right{z-index:25}.sticky-left.scroll-shadow{box-shadow:4px 0 6px -3px #00000040}.sticky-right.scroll-shadow{box-shadow:-4px 0 6px -3px #00000040}.dso-table tbody tr:hover{background:#f5f7fa}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], defaultSortColumn: [{
+                type: Input
+            }], defaultSortDirection: [{
+                type: Input
+            }], stickyHeader: [{
+                type: Input
+            }], maxTableHeight: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }] } });
+
+// tab.component.ts
+class TabComponent {
+    /** Label for the tab shown in the tabs header */
+    label = '';
+    /** Is this tab currently active? Controlled by TabsComponent */
+    active = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "dso-tab", inputs: { label: "label" }, ngImport: i0, template: "<!-- tab.component.html -->\r\n<!-- Only display the tab content if it is active -->\r\n<div *ngIf=\"active\" class=\"tab-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-tab', imports: [CommonModule], standalone: true, template: "<!-- tab.component.html -->\r\n<!-- Only display the tab content if it is active -->\r\n<div *ngIf=\"active\" class=\"tab-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
+
+// tabs.component.ts
+class TabsComponent {
+    /** Query all child tabs inside <dso-tabs> */
+    tabs;
+    /** Optional: two-way binding for active tab index */
+    tabIndex = 0;
+    tabIndexChange = new EventEmitter();
+    ngAfterContentInit() {
+        // Activate the default tab
+        this.selectTab(this.tabIndex);
+    }
+    /** When a tab header is clicked */
+    selectTab(index) {
+        if (!this.tabs)
+            return;
+        this.tabs.forEach((tab, i) => tab.active = i === index);
+        // Update internal tabIndex and emit event for two-way binding
+        this.tabIndex = index;
+        this.tabIndexChange.emit(this.tabIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TabsComponent, isStandalone: true, selector: "dso-tabs", inputs: { tabIndex: "tabIndex" }, outputs: { tabIndexChange: "tabIndexChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<!-- tabs.component.html -->\r\n<div class=\"tabs-container\">\r\n  <!-- Tab headers -->\r\n  <div class=\"tab-headers\">\r\n    <button\r\n      *ngFor=\"let tab of tabs; let i = index\"\r\n      [class.active]=\"tab.active\"\r\n      (click)=\"selectTab(i)\">\r\n      {{ tab.label }}\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Tab content will render via ng-content inside TabComponent -->\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".tabs-container{border:1px solid #ccc;border-radius:4px}.tab-headers{display:flex;border-bottom:1px solid #ccc}.tab-headers button{flex:1;padding:8px 12px;background:none;border:none;cursor:pointer;font-weight:500}.tab-headers button.active{border-bottom:2px solid #007bff;font-weight:700}.tab-headers button:hover{background-color:#f5f5f5}.tab-content{padding:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-tabs', standalone: true, imports: [CommonModule, TabComponent], template: "<!-- tabs.component.html -->\r\n<div class=\"tabs-container\">\r\n  <!-- Tab headers -->\r\n  <div class=\"tab-headers\">\r\n    <button\r\n      *ngFor=\"let tab of tabs; let i = index\"\r\n      [class.active]=\"tab.active\"\r\n      (click)=\"selectTab(i)\">\r\n      {{ tab.label }}\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Tab content will render via ng-content inside TabComponent -->\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".tabs-container{border:1px solid #ccc;border-radius:4px}.tab-headers{display:flex;border-bottom:1px solid #ccc}.tab-headers button{flex:1;padding:8px 12px;background:none;border:none;cursor:pointer;font-weight:500}.tab-headers button.active{border-bottom:2px solid #007bff;font-weight:700}.tab-headers button:hover{background-color:#f5f5f5}.tab-content{padding:12px}\n"] }]
+        }], propDecorators: { tabs: [{
+                type: ContentChildren,
+                args: [TabComponent]
+            }], tabIndex: [{
+                type: Input
+            }], tabIndexChange: [{
+                type: Output
+            }] } });
+
+class TagComponent {
+    variant = 'neutral';
+    removable = false;
+    label = '';
+    removed = false;
+    removeTag() {
+        this.removed = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TagComponent, isStandalone: true, selector: "dso-tag", inputs: { variant: "variant", removable: "removable", label: "label" }, ngImport: i0, template: "<div\r\n  *ngIf=\"!removed\"\r\n  class=\"tag\"\r\n  [ngClass]=\"'tag-' + variant\"\r\n>\r\n  <span class=\"tag-label\">{{ label }}</span>\r\n  <!-- <dso-button></dso-button> -->\r\n  <button \r\n    *ngIf=\"removable\" \r\n    class=\"tag-remove-btn\" \r\n    (click)=\"removeTag()\"\r\n    aria-label=\"Remove tag\"\r\n  >\r\n    &times;\r\n  </button>\r\n</div>\r\n\r\n", styles: [".tag{display:inline-flex;align-items:center;padding:4px 12px;font-size:.875rem;border-radius:16px;font-weight:500;white-space:nowrap;background-color:#e0e0e0;color:#333;gap:2px}.tag-success{background-color:#d4edda;color:#155724}.tag-info{background-color:#d1ecf1;color:#0c5460}.tag-warning{background-color:#fff3cd;color:#856404}.tag-danger{background-color:#f8d7da;color:#721c24}.tag-neutral{background-color:#e2e3e5;color:#383d41}.tag-remove-btn{background:transparent;border:none;font-size:1rem;line-height:1;cursor:pointer;color:inherit}.tag-remove-btn:hover{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-tag', standalone: true, imports: [CommonModule, ButtonComponent], template: "<div\r\n  *ngIf=\"!removed\"\r\n  class=\"tag\"\r\n  [ngClass]=\"'tag-' + variant\"\r\n>\r\n  <span class=\"tag-label\">{{ label }}</span>\r\n  <!-- <dso-button></dso-button> -->\r\n  <button \r\n    *ngIf=\"removable\" \r\n    class=\"tag-remove-btn\" \r\n    (click)=\"removeTag()\"\r\n    aria-label=\"Remove tag\"\r\n  >\r\n    &times;\r\n  </button>\r\n</div>\r\n\r\n", styles: [".tag{display:inline-flex;align-items:center;padding:4px 12px;font-size:.875rem;border-radius:16px;font-weight:500;white-space:nowrap;background-color:#e0e0e0;color:#333;gap:2px}.tag-success{background-color:#d4edda;color:#155724}.tag-info{background-color:#d1ecf1;color:#0c5460}.tag-warning{background-color:#fff3cd;color:#856404}.tag-danger{background-color:#f8d7da;color:#721c24}.tag-neutral{background-color:#e2e3e5;color:#383d41}.tag-remove-btn{background:transparent;border:none;font-size:1rem;line-height:1;cursor:pointer;color:inherit}.tag-remove-btn:hover{opacity:.6}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+class TextAreaComponent {
+    inputLabel = ''; // Optional label for the textarea
+    placeholder = '';
+    value = ''; // Two-way binding for value
+    helperText = 'helpering '; // Optional helper text
+    errorText = 'tes test'; // Optional error text
+    isDisabled = false; // Optional disabled state
+    enableValidation = true; // Toggle validation
+    maxLength = 300; // Maximum character length (for example)
+    isTouched = false;
+    isInvalid = false; // Error state
+    charCount = 0; // To track character count
+    isExceeded = false; // To track if the limit is exceeded
+    onInputChange(event) {
+        const inputValue = event.target.value;
+        console.log(inputValue);
+        const charCount = inputValue.length;
+        // Check if the limit has been exceeded
+        this.isExceeded = charCount > this.maxLength;
+        this.isTouched = true;
+        this.checkValidity();
+    }
+    // Method to determine the style of the character count
+    getCharCountStyle() {
+        const charCount = this.value.length;
+        if (this.isExceeded) {
+            // this.isExceeded = true;
+            return 'char-count-error';
+        }
+        // If character count exceeds 50% of maxLength, change color to black
+        if (charCount > this.maxLength / 2) {
+            return '';
+        }
+        // Otherwise, keep it grey
+        return '';
+    }
+    onBlur() {
+        this.isTouched = true;
+        this.checkValidity();
+    }
+    checkValidity() {
+        // Set to invalid if it's required and empty
+        this.isInvalid = this.isTouched && !this.value.trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextAreaComponent, isStandalone: true, selector: "dso-text-area", inputs: { inputLabel: "inputLabel", placeholder: "placeholder", value: "value", helperText: "helperText", errorText: "errorText", isDisabled: "isDisabled", enableValidation: "enableValidation", maxLength: "maxLength" }, ngImport: i0, template: "<div class=\"text-area-container\">\r\n    <div class=\"text-wrapper\">\r\n        <!-- Optional label -->\r\n        <label *ngIf=\"inputLabel\">\r\n            {{ inputLabel }}\r\n        </label>  \r\n        <!-- Character count inside the container -->\r\n        <div class=\"char-count\" [ngClass]=\"getCharCountStyle()\" *ngIf=\"maxLength\">\r\n            <span>\r\n                {{ value.length }}\r\n            </span>\r\n            / {{ maxLength }}\r\n        </div>\r\n    </div>\r\n\r\n    <textarea\r\n        [placeholder]=\"placeholder\"\r\n        [(ngModel)]=\"value\"\r\n        (input)=\"onInputChange($event)\"\r\n        (blur)=\"onBlur()\"\r\n        [disabled]=\"isDisabled\"\r\n        [class.invalid]=\"(isInvalid && isTouched && enableValidation) || isExceeded\"\r\n        [class.disabled]=\"isDisabled\"\r\n        >\r\n    </textarea>\r\n\r\n     <!-- Helper Text \r\n          This condition checks if the helper text should be displayed:\r\n            - If the character limit is **not exceeded** and validation is **not enabled**, show the helper text.\r\n            - If validation **is enabled**, show the helper text only if the input is **not invalid** and `helperText` is provided.\r\n            - If the character limit is exceeded, the helper text will be replaced with an error message. -->\r\n    <div *ngIf=\"!isExceeded && !enableValidation || ((!isInvalid && helperText) && !isExceeded)\" class=\"helper-text\">\r\n        {{ helperText }}\r\n    </div>\r\n\r\n    <!-- Specified Error Text -->\r\n    <div *ngIf=\"isInvalid && isTouched && enableValidation\" class=\"error-message\">\r\n        {{ errorText }}\r\n    </div>\r\n\r\n    <!-- Error message if character limit exceeded -->\r\n    <div *ngIf=\"isExceeded\" class=\"error-message\">\r\n        Character limit exceeded.\r\n    </div>\r\n</div>\r\n", styles: [".text-area-container{display:flex;flex-direction:column;width:500px;gap:8px}.text-wrapper{display:flex;justify-content:space-between}textarea{width:100%;height:160px;padding:12px 8px;font-size:1rem;resize:vertical;border:1px solid #ccc;border-radius:4px}textarea:hover{border:1px solid #071d35}textarea:focus{border-color:#007bff;outline:none}.char-count{font-size:12px;color:#666;align-self:flex-end}.char-count span,.char-count-error{font-size:12px;color:#666}.char-count-error span{font-size:12px;color:red}.helper-text{font-size:16px;color:#555}.error-message{font-size:16px;color:red}span .error-message{color:red;font-size:12px}textarea.invalid{border-color:red}textarea.disabled{background-color:#f0f0f0;cursor:not-allowed;border-color:#ccc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-text-area', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"text-area-container\">\r\n    <div class=\"text-wrapper\">\r\n        <!-- Optional label -->\r\n        <label *ngIf=\"inputLabel\">\r\n            {{ inputLabel }}\r\n        </label>  \r\n        <!-- Character count inside the container -->\r\n        <div class=\"char-count\" [ngClass]=\"getCharCountStyle()\" *ngIf=\"maxLength\">\r\n            <span>\r\n                {{ value.length }}\r\n            </span>\r\n            / {{ maxLength }}\r\n        </div>\r\n    </div>\r\n\r\n    <textarea\r\n        [placeholder]=\"placeholder\"\r\n        [(ngModel)]=\"value\"\r\n        (input)=\"onInputChange($event)\"\r\n        (blur)=\"onBlur()\"\r\n        [disabled]=\"isDisabled\"\r\n        [class.invalid]=\"(isInvalid && isTouched && enableValidation) || isExceeded\"\r\n        [class.disabled]=\"isDisabled\"\r\n        >\r\n    </textarea>\r\n\r\n     <!-- Helper Text \r\n          This condition checks if the helper text should be displayed:\r\n            - If the character limit is **not exceeded** and validation is **not enabled**, show the helper text.\r\n            - If validation **is enabled**, show the helper text only if the input is **not invalid** and `helperText` is provided.\r\n            - If the character limit is exceeded, the helper text will be replaced with an error message. -->\r\n    <div *ngIf=\"!isExceeded && !enableValidation || ((!isInvalid && helperText) && !isExceeded)\" class=\"helper-text\">\r\n        {{ helperText }}\r\n    </div>\r\n\r\n    <!-- Specified Error Text -->\r\n    <div *ngIf=\"isInvalid && isTouched && enableValidation\" class=\"error-message\">\r\n        {{ errorText }}\r\n    </div>\r\n\r\n    <!-- Error message if character limit exceeded -->\r\n    <div *ngIf=\"isExceeded\" class=\"error-message\">\r\n        Character limit exceeded.\r\n    </div>\r\n</div>\r\n", styles: [".text-area-container{display:flex;flex-direction:column;width:500px;gap:8px}.text-wrapper{display:flex;justify-content:space-between}textarea{width:100%;height:160px;padding:12px 8px;font-size:1rem;resize:vertical;border:1px solid #ccc;border-radius:4px}textarea:hover{border:1px solid #071d35}textarea:focus{border-color:#007bff;outline:none}.char-count{font-size:12px;color:#666;align-self:flex-end}.char-count span,.char-count-error{font-size:12px;color:#666}.char-count-error span{font-size:12px;color:red}.helper-text{font-size:16px;color:#555}.error-message{font-size:16px;color:red}span .error-message{color:red;font-size:12px}textarea.invalid{border-color:red}textarea.disabled{background-color:#f0f0f0;cursor:not-allowed;border-color:#ccc}\n"] }]
+        }], propDecorators: { inputLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], enableValidation: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }] } });
+
+class ToastService {
+    // private toastSubject = new Subject<ToastMessage>();
+    toastSubject = new ReplaySubject; // keep last message
+    toast$ = this.toastSubject.asObservable();
+    show(header, message, variant = 'neutral', duration) {
+        this.toastSubject.next({ header, message, variant, duration });
+        console.log('Toast Service Broadcasting:', { header, message, variant, duration }); // <-- debug
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ToastComponent {
+    toastService;
+    toasts = [];
+    position = 'top-right';
+    toastData; // Stores the current toast being displayed
+    constructor(toastService) {
+        this.toastService = toastService;
+    } // Inject toast service
+    ngOnInit() {
+        // Subscribe to toast messages from the service
+        this.toastService.toast$.subscribe((toast) => {
+            console.log('Toast Child Listening:', toast); // Add this debug log!
+            this.toasts.push(toast); // Add the new toast to the array for display
+            // Auto-hide after specified duration (default 3000ms)
+            setTimeout(() => {
+                // this.visible = false;  // Hide toast
+                this.toasts.shift(); // Remove first toast from the array
+            }, toast.duration || 3000);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToastComponent, isStandalone: true, selector: "dso-toast", inputs: { position: "position" }, ngImport: i0, template: "<div class=\"toast-wrapper\" \r\n  [ngClass]=\"['toast-' + (position || 'top-right')]\">\r\n  <div\r\n    *ngFor=\"let toast of toasts; let i = index\"\r\n    class=\"toast-container\"\r\n    [ngClass]=\"['toast-' + (toast.variant || 'neutral')]\"\r\n    >\r\n    \r\n    <div class=\"toast-header\" *ngIf=\"toast.header\">{{ toast.header }}</div>\r\n    <div class=\"toast-body\">\r\n      <div class=\"toast-message\">{{ toast.message }}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n[ngStyle]=\"{\r\n      animation: 'fadeInOut ' + (toast.duration || 3000) + 'ms ease forwards'}\"> -->", styles: [".toast-wrapper{position:fixed;display:flex;flex-direction:column;z-index:1000;gap:16px}.toast-container{padding:12px 16px;border-radius:8px;box-shadow:0 4px 12px #0003;color:#fff;width:280px;font-family:sans-serif;animation:fadeIn .3s ease forwards}.toast-top-right{top:20px;right:20px;align-items:flex-end}.toast-top-left{top:20px;left:20px;align-items:flex-start}.toast-bottom-right{bottom:20px;right:20px;align-items:flex-end}.toast-bottom-left{bottom:20px;left:20px;align-items:flex-start}.toast-top-center{top:20px;left:50%;transform:translate(-50%)}.toast-bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.toast-success{background-color:#28a745}.toast-info{background-color:#17a2b8}.toast-warning{background-color:#ffc107;color:#333}.toast-danger{background-color:#dc3545}.toast-neutral{background-color:#6c757d}.toast-header{font-weight:600;margin-bottom:4px}.toast-subtext{font-size:.85rem;opacity:.8}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-toast', standalone: true, imports: [CommonModule] // Import CommonModule for ngIf, ngFor etc.
+                    , template: "<div class=\"toast-wrapper\" \r\n  [ngClass]=\"['toast-' + (position || 'top-right')]\">\r\n  <div\r\n    *ngFor=\"let toast of toasts; let i = index\"\r\n    class=\"toast-container\"\r\n    [ngClass]=\"['toast-' + (toast.variant || 'neutral')]\"\r\n    >\r\n    \r\n    <div class=\"toast-header\" *ngIf=\"toast.header\">{{ toast.header }}</div>\r\n    <div class=\"toast-body\">\r\n      <div class=\"toast-message\">{{ toast.message }}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n[ngStyle]=\"{\r\n      animation: 'fadeInOut ' + (toast.duration || 3000) + 'ms ease forwards'}\"> -->", styles: [".toast-wrapper{position:fixed;display:flex;flex-direction:column;z-index:1000;gap:16px}.toast-container{padding:12px 16px;border-radius:8px;box-shadow:0 4px 12px #0003;color:#fff;width:280px;font-family:sans-serif;animation:fadeIn .3s ease forwards}.toast-top-right{top:20px;right:20px;align-items:flex-end}.toast-top-left{top:20px;left:20px;align-items:flex-start}.toast-bottom-right{bottom:20px;right:20px;align-items:flex-end}.toast-bottom-left{bottom:20px;left:20px;align-items:flex-start}.toast-top-center{top:20px;left:50%;transform:translate(-50%)}.toast-bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.toast-success{background-color:#28a745}.toast-info{background-color:#17a2b8}.toast-warning{background-color:#ffc107;color:#333}.toast-danger{background-color:#dc3545}.toast-neutral{background-color:#6c757d}.toast-header{font-weight:600;margin-bottom:4px}.toast-subtext{font-size:.85rem;opacity:.8}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}\n"] }]
+        }], ctorParameters: () => [{ type: ToastService }], propDecorators: { position: [{
+                type: Input
+            }] } });
+
+class TooltipComponent {
+    el;
+    text; // Tooltip text to display
+    position = 'top'; // Position of the tooltip (default is 'top')
+    tooltipWidth = '300px'; // Default width, can be overridden
+    constructor(el) {
+        this.el = el;
+    }
+    showTooltip = false; // This flag controls the visibility of the tooltip
+    isHovered = false; // This flag checks if the mouse is over the tooltip
+    // Triggered when the mouse enters the wrapper area (button + tooltip)
+    onMouseEnter() {
+        // console.log('Mouse entered');
+        this.showTooltip = true; // Show tooltip
+    }
+    // Triggered when the mouse leaves the wrapper area (button + tooltip)
+    onMouseLeave() {
+        // console.log('Mouse left');
+        this.showTooltip = false; // Hide tooltip
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TooltipComponent, isStandalone: true, selector: "dso-tooltip", inputs: { text: "text", position: "position", tooltipWidth: "tooltipWidth" }, ngImport: i0, template: "<!-- Tooltip wrapper: listens for mouse enter/leave -->\r\n<div class=\"tooltip-wrapper\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <ng-content></ng-content>  <!-- This will allow the button or other content to be passed inside -->\r\n\r\n  <!-- Tooltip box -->\r\n  <div \r\n    class=\"tooltip\" \r\n    *ngIf=\"showTooltip\" \r\n    [ngClass]=\"position\"\r\n    [ngStyle]=\"{ 'width': tooltipWidth }\"\r\n  >\r\n  {{ text }}\r\n  </div>\r\n</div>", styles: [".tooltip-wrapper{position:relative}.tooltip{position:absolute;background-color:#000;color:#fff;display:block;white-space:normal;word-break:break-word;border-radius:4px;pointer-events:auto;padding:12px;font-size:12px;z-index:100}.tooltip.top{bottom:calc(100% + 4px);transform:translate(-25%)}.tooltip.bottom{top:calc(100% + 4px);transform:translate(-25%)}.tooltip.left{top:0%;right:calc(100% + 4px);transform:translateY(-25%)}.tooltip.right{bottom:0%;left:calc(100% + 4px);transform:translateY(25%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-tooltip', standalone: true, imports: [CommonModule], template: "<!-- Tooltip wrapper: listens for mouse enter/leave -->\r\n<div class=\"tooltip-wrapper\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <ng-content></ng-content>  <!-- This will allow the button or other content to be passed inside -->\r\n\r\n  <!-- Tooltip box -->\r\n  <div \r\n    class=\"tooltip\" \r\n    *ngIf=\"showTooltip\" \r\n    [ngClass]=\"position\"\r\n    [ngStyle]=\"{ 'width': tooltipWidth }\"\r\n  >\r\n  {{ text }}\r\n  </div>\r\n</div>", styles: [".tooltip-wrapper{position:relative}.tooltip{position:absolute;background-color:#000;color:#fff;display:block;white-space:normal;word-break:break-word;border-radius:4px;pointer-events:auto;padding:12px;font-size:12px;z-index:100}.tooltip.top{bottom:calc(100% + 4px);transform:translate(-25%)}.tooltip.bottom{top:calc(100% + 4px);transform:translate(-25%)}.tooltip.left{top:0%;right:calc(100% + 4px);transform:translateY(-25%)}.tooltip.right{bottom:0%;left:calc(100% + 4px);transform:translateY(25%)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { text: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], tooltipWidth: [{
+                type: Input
+            }] } });
+
+class TopNavComponent {
+    /** App name displayed next to logo */
+    appName = '';
+    /** Dynamic menu items */
+    menuItems = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TopNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TopNavComponent, isStandalone: true, selector: "dso-top-nav", inputs: { appName: "appName", menuItems: "menuItems" }, ngImport: i0, template: "<nav class=\"dso-top-nav\">\r\n\r\n  <!-- Left section: menu+logo -->\r\n  <div class=\"nav-left\">\r\n    <div class=\"nav-left-group menu-logo\">\r\n      <ng-content select=\"[dso-menu-logo]\"></ng-content>\r\n      <span class=\"top-nav-app-name\" *ngIf=\"appName\">{{ appName }}</span>\r\n    </div>\r\n\r\n    <div class=\"nav-left-group menu-buttons\">\r\n      <ng-container *ngFor=\"let item of menuItems\">\r\n        <!-- Router link item -->\r\n        <a \r\n          *ngIf=\"item.route; else clickItem\" \r\n          [routerLink]=\"item.route\" \r\n          class=\"top-nav-item\"\r\n        >\r\n          <dso-icon *ngIf=\"item.iconName\" [iconName]=\"item.iconName\" size=\"small\"></dso-icon>\r\n          <span>{{ item.label }}</span>\r\n        </a>\r\n\r\n        <!-- Click handler item -->\r\n        <ng-template #clickItem>\r\n          <button class=\"top-nav-item\" (click)=\"item.click?.()\">\r\n            <dso-icon *ngIf=\"item.iconName\" [iconName]=\"item.iconName\" size=\"small\"></dso-icon>\r\n            <span>{{ item.label }}</span>\r\n          </button>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right section -->\r\n  <div class=\"nav-right\">\r\n    <!-- \u2705 Project each element individually with dso-nav-right -->\r\n    <ng-content select=\"[dso-nav-right]\"></ng-content>\r\n  </div>\r\n\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";.dso-top-nav{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 1rem;background-color:#fff;border:1px solid #e5e5e5}.dso-top-nav .nav-left{display:flex;align-items:center;gap:2rem}.dso-top-nav .nav-left .nav-left-group{display:flex;align-items:center}.dso-top-nav .nav-left .menu-logo{gap:.5rem}.dso-top-nav .nav-left .menu-buttons{gap:1rem}.dso-top-nav .nav-right{display:flex;align-items:center;gap:1rem;flex-direction:row;justify-content:flex-end}.dso-top-nav .nav-right dso-button{margin:0}.dso-top-nav .nav-right p{margin:0;font-weight:500}.top-nav-item{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;background:none;border:none;cursor:pointer;font:inherit;color:inherit;text-decoration:none}.top-nav-item:hover{background-color:#f2f2f2;border-radius:4px}.top-nav-app-name{font-weight:700;font-size:1rem;margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "dso-icon", inputs: ["iconName", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TopNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dso-top-nav', standalone: true, imports: [CommonModule, RouterModule, IconComponent], template: "<nav class=\"dso-top-nav\">\r\n\r\n  <!-- Left section: menu+logo -->\r\n  <div class=\"nav-left\">\r\n    <div class=\"nav-left-group menu-logo\">\r\n      <ng-content select=\"[dso-menu-logo]\"></ng-content>\r\n      <span class=\"top-nav-app-name\" *ngIf=\"appName\">{{ appName }}</span>\r\n    </div>\r\n\r\n    <div class=\"nav-left-group menu-buttons\">\r\n      <ng-container *ngFor=\"let item of menuItems\">\r\n        <!-- Router link item -->\r\n        <a \r\n          *ngIf=\"item.route; else clickItem\" \r\n          [routerLink]=\"item.route\" \r\n          class=\"top-nav-item\"\r\n        >\r\n          <dso-icon *ngIf=\"item.iconName\" [iconName]=\"item.iconName\" size=\"small\"></dso-icon>\r\n          <span>{{ item.label }}</span>\r\n        </a>\r\n\r\n        <!-- Click handler item -->\r\n        <ng-template #clickItem>\r\n          <button class=\"top-nav-item\" (click)=\"item.click?.()\">\r\n            <dso-icon *ngIf=\"item.iconName\" [iconName]=\"item.iconName\" size=\"small\"></dso-icon>\r\n            <span>{{ item.label }}</span>\r\n          </button>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right section -->\r\n  <div class=\"nav-right\">\r\n    <!-- \u2705 Project each element individually with dso-nav-right -->\r\n    <ng-content select=\"[dso-nav-right]\"></ng-content>\r\n  </div>\r\n\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";.dso-top-nav{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 1rem;background-color:#fff;border:1px solid #e5e5e5}.dso-top-nav .nav-left{display:flex;align-items:center;gap:2rem}.dso-top-nav .nav-left .nav-left-group{display:flex;align-items:center}.dso-top-nav .nav-left .menu-logo{gap:.5rem}.dso-top-nav .nav-left .menu-buttons{gap:1rem}.dso-top-nav .nav-right{display:flex;align-items:center;gap:1rem;flex-direction:row;justify-content:flex-end}.dso-top-nav .nav-right dso-button{margin:0}.dso-top-nav .nav-right p{margin:0;font-weight:500}.top-nav-item{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;background:none;border:none;cursor:pointer;font:inherit;color:inherit;text-decoration:none}.top-nav-item:hover{background-color:#f2f2f2;border-radius:4px}.top-nav-app-name{font-weight:700;font-size:1rem;margin-left:.5rem}\n"] }]
+        }], propDecorators: { appName: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, IconComponent };
+export { AlertComponent, BadgeComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, DatepickerComponent, DialogComponent, DropdownListComponent, DsoTruncateDirective, FileUploadItemComponent, FileUploadMultiComponent, FileUploadSingleComponent, IconComponent, PaginationComponent, ProgressBarComponent, RadioComponent, SideNavComponent, SingleSelectComponent, SpinnerComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextInputComponent, ToastComponent, TooltipComponent, TopNavComponent };
 //# sourceMappingURL=dso-design-system-ui.mjs.map