orbiq-neural-ui-kit 1.2.42 → 1.2.44

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -4558,6 +4558,7 @@ class NeuralDropdownComponent {
     ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
     hasTriggerSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasTriggerSlot" }] : /* istanbul ignore next */ []));
+    openChange = new EventEmitter();
     handleItemClick(option, event, popover) {
         if ('separator' in option)
             return;
@@ -4569,8 +4570,8 @@ class NeuralDropdownComponent {
         popover.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDropdownComponent, isStandalone: true, selector: "neural-dropdown", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, hasTriggerSlot: { classPropertyName: "hasTriggerSlot", publicName: "hasTriggerSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <neural-popover [side]="side()" [align]="align()" [offset]="offset()" [triggerContainerClass]="triggerClass()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDropdownComponent, isStandalone: true, selector: "neural-dropdown", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, hasTriggerSlot: { classPropertyName: "hasTriggerSlot", publicName: "hasTriggerSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, ngImport: i0, template: `
+    <neural-popover [side]="side()" [align]="align()" [offset]="offset()" [triggerContainerClass]="triggerClass()" (openChange)="openChange.emit($event)">
       <div neuralPopoverTrigger class="contents">
         <ng-content select="[trigger]"></ng-content>
         @if (!hasTriggerSlot()) {
@@ -4666,7 +4667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     standalone: true,
                     imports: [CommonModule, RouterModule, NeuralPopoverComponent, NeuralPopoverTriggerDirective, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralButtonComponent],
                     template: `
-    <neural-popover [side]="side()" [align]="align()" [offset]="offset()" [triggerContainerClass]="triggerClass()">
+    <neural-popover [side]="side()" [align]="align()" [offset]="offset()" [triggerContainerClass]="triggerClass()" (openChange)="openChange.emit($event)">
       <div neuralPopoverTrigger class="contents">
         <ng-content select="[trigger]"></ng-content>
         @if (!hasTriggerSlot()) {
@@ -4755,7 +4756,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     </ng-template>
   `
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], hasTriggerSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTriggerSlot", required: false }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], hasTriggerSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTriggerSlot", required: false }] }], openChange: [{
+                type: Output
+            }] } });
 
 class NeuralBreadcrumbsComponent {
     router;
@@ -4890,7 +4893,7 @@ class NeuralBreadcrumbsComponent {
         }
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "triggerClass", "hasTriggerSlot"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly", "shape"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "triggerClass", "hasTriggerSlot"], outputs: ["openChange"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly", "shape"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -8802,7 +8805,7 @@ class NeuralAwesomeBarComponent {
 
       </div>
     </neural-dialog>
-  `, isInline: true, styles: [".no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "triggerClass", "hasTriggerSlot"] }] });
+  `, isInline: true, styles: [".no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "triggerClass", "hasTriggerSlot"], outputs: ["openChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAwesomeBarComponent, decorators: [{
             type: Component,
@@ -13024,7 +13027,7 @@ class NeuralDataTableComponent {
         </div>
       </neural-dialog>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly", "shape"], outputs: ["clicked"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralSwitchComponent, selector: "neural-switch", inputs: ["valueModel", "size", "padded", "disabled", "required", "controlPosition", "icon", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["valueModelChange"] }, { kind: "component", type: NeuralCheckboxComponent, selector: "neural-checkbox", inputs: ["checkedModel", "size", "padded", "indeterminate", "disabled", "required", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["checkedModelChange"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "triggerClass", "hasTriggerSlot"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly", "shape"], outputs: ["clicked"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralSwitchComponent, selector: "neural-switch", inputs: ["valueModel", "size", "padded", "disabled", "required", "controlPosition", "icon", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["valueModelChange"] }, { kind: "component", type: NeuralCheckboxComponent, selector: "neural-checkbox", inputs: ["checkedModel", "size", "padded", "indeterminate", "disabled", "required", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["checkedModelChange"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "triggerClass", "hasTriggerSlot"], outputs: ["openChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, decorators: [{
             type: Component,
@@ -14669,6 +14672,7 @@ class NeuralSidebarHeaderComponent {
     ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
     menuOptions = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "menuOptions" }] : /* istanbul ignore next */ []));
+    isOpen = false;
     sidebar = inject(NeuralSidebarComponent, { optional: true });
     isCollapsed = computed(() => {
         return this.sidebar ? this.sidebar.shouldCollapse() : false;
@@ -14676,11 +14680,12 @@ class NeuralSidebarHeaderComponent {
     ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSidebarHeaderComponent, isStandalone: true, selector: "neural-sidebar-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, appIcon: { classPropertyName: "appIcon", publicName: "appIcon", isSignal: true, isRequired: true, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, menuOptions: { classPropertyName: "menuOptions", publicName: "menuOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block w-full" }, ngImport: i0, template: `
-    <neural-dropdown class="block w-full" [options]="menuOptions()" [hasTriggerSlot]="true" align="start" [offset]="8" [triggerClass]="isCollapsed() ? 'block w-10 mx-auto' : 'block mx-2'">
+    <neural-dropdown class="block w-full" [options]="menuOptions()" [hasTriggerSlot]="true" align="start" [offset]="4" [triggerClass]="isCollapsed() ? 'block w-10 mx-auto' : 'block mx-2'" (openChange)="isOpen = $event">
       <div trigger
-        class="flex items-center gap-2 p-2 rounded-md transition-colors cursor-pointer hover:bg-surface-gray-2 w-full"
+        class="flex items-center gap-2 p-2 rounded-md transition-all duration-200 cursor-pointer w-full"
         [class.justify-center]="isCollapsed()"
         [class.h-10]="isCollapsed()"
+        [ngClass]="isOpen && !isCollapsed() ? 'bg-surface-elevation-2 shadow-sm ring-1 ring-black/5' : 'hover:bg-surface-gray-2'"
         [attr.aria-label]="title()"
         [title]="isCollapsed() ? title() : null"
       >
@@ -14703,11 +14708,11 @@ class NeuralSidebarHeaderComponent {
         <div class="shrink-0 transition-all duration-200"
           [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
         >
-          <i class="lucide-chevron-down size-4 text-ink-gray-5"></i>
+          <i class="lucide-chevron-down size-4 text-ink-gray-5 transition-transform duration-200" [class.rotate-180]="isOpen"></i>
         </div>
       </div>
     </neural-dropdown>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "triggerClass", "hasTriggerSlot"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "triggerClass", "hasTriggerSlot"], outputs: ["openChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSidebarHeaderComponent, decorators: [{
             type: Component,
@@ -14717,11 +14722,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     imports: [CommonModule, NeuralDropdownComponent],
                     host: { class: 'block w-full' },
                     template: `
-    <neural-dropdown class="block w-full" [options]="menuOptions()" [hasTriggerSlot]="true" align="start" [offset]="8" [triggerClass]="isCollapsed() ? 'block w-10 mx-auto' : 'block mx-2'">
+    <neural-dropdown class="block w-full" [options]="menuOptions()" [hasTriggerSlot]="true" align="start" [offset]="4" [triggerClass]="isCollapsed() ? 'block w-10 mx-auto' : 'block mx-2'" (openChange)="isOpen = $event">
       <div trigger
-        class="flex items-center gap-2 p-2 rounded-md transition-colors cursor-pointer hover:bg-surface-gray-2 w-full"
+        class="flex items-center gap-2 p-2 rounded-md transition-all duration-200 cursor-pointer w-full"
         [class.justify-center]="isCollapsed()"
         [class.h-10]="isCollapsed()"
+        [ngClass]="isOpen && !isCollapsed() ? 'bg-surface-elevation-2 shadow-sm ring-1 ring-black/5' : 'hover:bg-surface-gray-2'"
         [attr.aria-label]="title()"
         [title]="isCollapsed() ? title() : null"
       >
@@ -14744,7 +14750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <div class="shrink-0 transition-all duration-200"
           [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
         >
-          <i class="lucide-chevron-down size-4 text-ink-gray-5"></i>
+          <i class="lucide-chevron-down size-4 text-ink-gray-5 transition-transform duration-200" [class.rotate-180]="isOpen"></i>
         </div>
       </div>
     </neural-dropdown>