npm - @allsorter/ui-components - Versions diffs - 0.0.376 → 0.0.378 - Mend

@allsorter/ui-components 0.0.376 → 0.0.378

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/fesm2022/allsorter-ui-components.mjs +10 -6
package/fesm2022/allsorter-ui-components.mjs.map +1 -1
package/lib/utils/image-utils.d.ts +1 -0
package/package.json +1 -1
package/src/lib/ai-apply-bar/ai-apply-bar.component.scss +38 -8
package/src/lib/ai-wrapper/ai-wrapper.component.scss +19 -11

package/fesm2022/allsorter-ui-components.mjs CHANGED Viewed

@@ -452,7 +452,7 @@ class ButtonComponent {
             'year_month_icon', 'year', 'calendar_year',
             'delete-icon', 'delete',
             'multi-drag-drop', 'arrow_downward',
-            'subrole', 'subrole_active',
+            'subrole', 'subrole_active', 'subrole_icon_white',
             'hide_section', 'unhide_section',
             'edit_icon', 'handle', 'search',
             'add-section', 'add_left-icon_section', 'add-right_icon_section',
@@ -1576,7 +1576,10 @@ const LEFT_AND_RIGHT_ICON_CONSTANTS = {
     'handle': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <circle cx="7"cy="4"r="1.5"fill="#717793"/> <circle cx="13"cy="4"r="1.5"fill="#717793"/> <circle cx="7"cy="10"r="1.5"fill="#717793"/> <circle cx="13"cy="10"r="1.5"fill="#717793"/> <circle cx="7"cy="16"r="1.5"fill="#717793"/> <circle cx="13"cy="16"r="1.5"fill="#717793"/> </svg>`,
     'search': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M13.1292 11.8791H12.4709L12.2375 11.6541C13.0542 10.7041 13.5459 9.47074 13.5459 8.12907C13.5459 5.1374 11.1209 2.7124 8.12919 2.7124C5.13752 2.7124 2.71252 5.1374 2.71252 8.12907C2.71252 11.1207 5.13752 13.5457 8.12919 13.5457C9.47086 13.5457 10.7042 13.0541 11.6542 12.2374L11.8792 12.4707V13.1291L16.0459 17.2874L17.2875 16.0457L13.1292 11.8791ZM8.12919 11.8791C6.05419 11.8791 4.37919 10.2041 4.37919 8.12907C4.37919 6.05407 6.05419 4.37907 8.12919 4.37907C10.2042 4.37907 11.8792 6.05407 11.8792 8.12907C11.8792 10.2041 10.2042 11.8791 8.12919 11.8791Z"fill="#717793"/> </svg>`,
     'multi-drag-drop': `<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"fill="none"> <path d="M13.3337 7.99996L12.3937 7.05996L8.66699 10.78V2.66663H7.33366V10.78L3.61366 7.05329L2.66699 7.99996L8.00033 13.3333L13.3337 7.99996Z"fill="white"/> </svg>`,
-    'subrole-icon-grey': `<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"fill="none"> <path d="M3.66659 14.6666C3.02214 14.6666 2.47214 14.4389 2.01659 13.9833C1.56103 13.5278 1.33325 12.9778 1.33325 12.3333C1.33325 11.6889 1.56103 11.1389 2.01659 10.6833C2.47214 10.2278 3.02214 9.99998 3.66659 9.99998C3.86659 9.99998 4.06103 10.025 4.24992 10.075C4.43881 10.125 4.61659 10.1944 4.78325 10.2833L7.33325 7.73331V5.89998C6.84436 5.75554 6.44436 5.48054 6.13325 5.07498C5.82214 4.66942 5.66658 4.19998 5.66658 3.66665C5.66658 3.0222 5.89436 2.4722 6.34992 2.01665C6.80547 1.56109 7.35547 1.33331 7.99992 1.33331C8.64436 1.33331 9.19436 1.56109 9.64992 2.01665C10.1055 2.4722 10.3333 3.0222 10.3333 3.66665C10.3333 4.19998 10.1777 4.66942 9.86658 5.07498C9.55547 5.48054 9.15547 5.75554 8.66658 5.89998V7.73331L11.2333 10.2833C11.3999 10.1944 11.5749 10.125 11.7583 10.075C11.9416 10.025 12.1333 9.99998 12.3333 9.99998C12.9777 9.99998 13.5277 10.2278 13.9833 10.6833C14.4388 11.1389 14.6666 11.6889 14.6666 12.3333C14.6666 12.9778 14.4388 13.5278 13.9833 13.9833C13.5277 14.4389 12.9777 14.6666 12.3333 14.6666C11.6888 14.6666 11.1388 14.4389 10.6833 13.9833C10.2277 13.5278 9.99992 12.9778 9.99992 12.3333C9.99992 12.1333 10.0249 11.9389 10.0749 11.75C10.1249 11.5611 10.1944 11.3833 10.2833 11.2166L7.99992 8.93331L5.71659 11.2166C5.80547 11.3833 5.87492 11.5611 5.92492 11.75C5.97492 11.9389 5.99992 12.1333 5.99992 12.3333C5.99992 12.9778 5.77214 13.5278 5.31659 13.9833C4.86103 14.4389 4.31103 14.6666 3.66659 14.6666ZM12.3333 13.3333C12.611 13.3333 12.8471 13.2361 13.0416 13.0416C13.236 12.8472 13.3333 12.6111 13.3333 12.3333C13.3333 12.0555 13.236 11.8194 13.0416 11.625C12.8471 11.4305 12.611 11.3333 12.3333 11.3333C12.0555 11.3333 11.8194 11.4305 11.6249 11.625C11.4305 11.8194 11.3333 12.0555 11.3333 12.3333C11.3333 12.6111 11.4305 12.8472 11.6249 13.0416C11.8194 13.2361 12.0555 13.3333 12.3333 13.3333ZM7.99992 4.66665C8.2777 4.66665 8.51381 4.56942 8.70825 4.37498C8.9027 4.18054 8.99992 3.94442 8.99992 3.66665C8.99992 3.38887 8.9027 3.15276 8.70825 2.95831C8.51381 2.76387 8.2777 2.66665 7.99992 2.66665C7.72214 2.66665 7.48603 2.76387 7.29158 2.95831C7.09714 3.15276 6.99992 3.38887 6.99992 3.66665C6.99992 3.94442 7.09714 4.18054 7.29158 4.37498C7.48603 4.56942 7.72214 4.66665 7.99992 4.66665ZM3.66659 13.3333C3.94436 13.3333 4.18047 13.2361 4.37492 13.0416C4.56936 12.8472 4.66658 12.6111 4.66658 12.3333C4.66658 12.0555 4.56936 11.8194 4.37492 11.625C4.18047 11.4305 3.94436 11.3333 3.66659 11.3333C3.38881 11.3333 3.1527 11.4305 2.95825 11.625C2.76381 11.8194 2.66659 12.0555 2.66659 12.3333C2.66659 12.6111 2.76381 12.8472 2.95825 13.0416C3.1527 13.2361 3.38881 13.3333 3.66659 13.3333Z"fill="#717793"/> </svg>`
+    'subrole-icon-grey': `<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"fill="none"> <path d="M3.66659 14.6666C3.02214 14.6666 2.47214 14.4389 2.01659 13.9833C1.56103 13.5278 1.33325 12.9778 1.33325 12.3333C1.33325 11.6889 1.56103 11.1389 2.01659 10.6833C2.47214 10.2278 3.02214 9.99998 3.66659 9.99998C3.86659 9.99998 4.06103 10.025 4.24992 10.075C4.43881 10.125 4.61659 10.1944 4.78325 10.2833L7.33325 7.73331V5.89998C6.84436 5.75554 6.44436 5.48054 6.13325 5.07498C5.82214 4.66942 5.66658 4.19998 5.66658 3.66665C5.66658 3.0222 5.89436 2.4722 6.34992 2.01665C6.80547 1.56109 7.35547 1.33331 7.99992 1.33331C8.64436 1.33331 9.19436 1.56109 9.64992 2.01665C10.1055 2.4722 10.3333 3.0222 10.3333 3.66665C10.3333 4.19998 10.1777 4.66942 9.86658 5.07498C9.55547 5.48054 9.15547 5.75554 8.66658 5.89998V7.73331L11.2333 10.2833C11.3999 10.1944 11.5749 10.125 11.7583 10.075C11.9416 10.025 12.1333 9.99998 12.3333 9.99998C12.9777 9.99998 13.5277 10.2278 13.9833 10.6833C14.4388 11.1389 14.6666 11.6889 14.6666 12.3333C14.6666 12.9778 14.4388 13.5278 13.9833 13.9833C13.5277 14.4389 12.9777 14.6666 12.3333 14.6666C11.6888 14.6666 11.1388 14.4389 10.6833 13.9833C10.2277 13.5278 9.99992 12.9778 9.99992 12.3333C9.99992 12.1333 10.0249 11.9389 10.0749 11.75C10.1249 11.5611 10.1944 11.3833 10.2833 11.2166L7.99992 8.93331L5.71659 11.2166C5.80547 11.3833 5.87492 11.5611 5.92492 11.75C5.97492 11.9389 5.99992 12.1333 5.99992 12.3333C5.99992 12.9778 5.77214 13.5278 5.31659 13.9833C4.86103 14.4389 4.31103 14.6666 3.66659 14.6666ZM12.3333 13.3333C12.611 13.3333 12.8471 13.2361 13.0416 13.0416C13.236 12.8472 13.3333 12.6111 13.3333 12.3333C13.3333 12.0555 13.236 11.8194 13.0416 11.625C12.8471 11.4305 12.611 11.3333 12.3333 11.3333C12.0555 11.3333 11.8194 11.4305 11.6249 11.625C11.4305 11.8194 11.3333 12.0555 11.3333 12.3333C11.3333 12.6111 11.4305 12.8472 11.6249 13.0416C11.8194 13.2361 12.0555 13.3333 12.3333 13.3333ZM7.99992 4.66665C8.2777 4.66665 8.51381 4.56942 8.70825 4.37498C8.9027 4.18054 8.99992 3.94442 8.99992 3.66665C8.99992 3.38887 8.9027 3.15276 8.70825 2.95831C8.51381 2.76387 8.2777 2.66665 7.99992 2.66665C7.72214 2.66665 7.48603 2.76387 7.29158 2.95831C7.09714 3.15276 6.99992 3.38887 6.99992 3.66665C6.99992 3.94442 7.09714 4.18054 7.29158 4.37498C7.48603 4.56942 7.72214 4.66665 7.99992 4.66665ZM3.66659 13.3333C3.94436 13.3333 4.18047 13.2361 4.37492 13.0416C4.56936 12.8472 4.66658 12.6111 4.66658 12.3333C4.66658 12.0555 4.56936 11.8194 4.37492 11.625C4.18047 11.4305 3.94436 11.3333 3.66659 11.3333C3.38881 11.3333 3.1527 11.4305 2.95825 11.625C2.76381 11.8194 2.66659 12.0555 2.66659 12.3333C2.66659 12.6111 2.76381 12.8472 2.95825 13.0416C3.1527 13.2361 3.38881 13.3333 3.66659 13.3333Z"fill="#717793"/> </svg>`,
+    'subrole_icon_white': `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.6668 14C12.2335 14 11.8446 13.875 11.5002 13.625C11.1557 13.375 10.9168 13.0556 10.7835 12.6667H7.3335C6.60016 12.6667 5.97238 12.4056 5.45016 11.8833C4.92794 11.3611 4.66683 10.7333 4.66683 10C4.66683 9.26667 4.92794 8.63889 5.45016 8.11667C5.97238 7.59444 6.60016 7.33333 7.3335 7.33333H8.66683C9.0335 7.33333 9.34738 7.20278 9.6085 6.94167C9.86961 6.68056 10.0002 6.36667 10.0002 6C10.0002 5.63333 9.86961 5.31944 9.6085 5.05833C9.34738 4.79722 9.0335 4.66667 8.66683 4.66667H5.21683C5.07238 5.05556 4.83072 5.375 4.49183 5.625C4.15294 5.875 3.76683 6 3.3335 6C2.77794 6 2.30572 5.80556 1.91683 5.41667C1.52794 5.02778 1.3335 4.55556 1.3335 4C1.3335 3.44444 1.52794 2.97222 1.91683 2.58333C2.30572 2.19444 2.77794 2 3.3335 2C3.76683 2 4.15294 2.125 4.49183 2.375C4.83072 2.625 5.07238 2.94444 5.21683 3.33333H8.66683C9.40016 3.33333 10.0279 3.59444 10.5502 4.11667C11.0724 4.63889 11.3335 5.26667 11.3335 6C11.3335 6.73333 11.0724 7.36111 10.5502 7.88333C10.0279 8.40556 9.40016 8.66667 8.66683 8.66667H7.3335C6.96683 8.66667 6.65294 8.79722 6.39183 9.05833C6.13072 9.31944 6.00016 9.63333 6.00016 10C6.00016 10.3667 6.13072 10.6806 6.39183 10.9417C6.65294 11.2028 6.96683 11.3333 7.3335 11.3333H10.7835C10.9279 10.9444 11.1696 10.625 11.5085 10.375C11.8474 10.125 12.2335 10 12.6668 10C13.2224 10 13.6946 10.1944 14.0835 10.5833C14.4724 10.9722 14.6668 11.4444 14.6668 12C14.6668 12.5556 14.4724 13.0278 14.0835 13.4167C13.6946 13.8056 13.2224 14 12.6668 14ZM3.3335 4.66667C3.52238 4.66667 3.68072 4.60278 3.8085 4.475C3.93627 4.34722 4.00016 4.18889 4.00016 4C4.00016 3.81111 3.93627 3.65278 3.8085 3.525C3.68072 3.39722 3.52238 3.33333 3.3335 3.33333C3.14461 3.33333 2.98627 3.39722 2.8585 3.525C2.73072 3.65278 2.66683 3.81111 2.66683 4C2.66683 4.18889 2.73072 4.34722 2.8585 4.475C2.98627 4.60278 3.14461 4.66667 3.3335 4.66667Z" fill="white"/>
+</svg>`
 };
 const Candidate_Section_ICON = {
     'candidate_name': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.0002 5.00004C10.9168 5.00004 11.6668 5.75004 11.6668 6.66671C11.6668 7.58337 10.9168 8.33337 10.0002 8.33337C9.0835 8.33337 8.3335 7.58337 8.3335 6.66671C8.3335 5.75004 9.0835 5.00004 10.0002 5.00004ZM10.0002 13.3334C12.2502 13.3334 14.8335 14.4084 15.0002 15H5.00016C5.19183 14.4 7.7585 13.3334 10.0002 13.3334ZM10.0002 3.33337C8.1585 3.33337 6.66683 4.82504 6.66683 6.66671C6.66683 8.50837 8.1585 10 10.0002 10C11.8418 10 13.3335 8.50837 13.3335 6.66671C13.3335 4.82504 11.8418 3.33337 10.0002 3.33337ZM10.0002 11.6667C7.77516 11.6667 3.3335 12.7834 3.3335 15V16.6667H16.6668V15C16.6668 12.7834 12.2252 11.6667 10.0002 11.6667Z" fill="#37C1CE"/></svg>`,
@@ -2936,11 +2939,11 @@ class AiApplyBarComponent {
         this.closeClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiApplyBarComponent, isStandalone: true, selector: "al-ai-apply-bar", inputs: { dataTestId: "dataTestId", showChevron: "showChevron", showChevronButton: "showChevronButton", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showClose: "showClose", iconOutlined: "iconOutlined", closeButtonTooltip: "closeButtonTooltip", closeButtonTooltipPosition: "closeButtonTooltipPosition", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { valueChange: "valueChange", applyClick: "applyClick", closeClick: "closeClick", chevronClick: "chevronClick" }, ngImport: i0, template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n  <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n  <div class=\"ai-toggle-button\">\n    <!-- AI Trigger Button - Show when bar is hidden -->\n    <al-button *ngIf=\"!isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\"\n      [color]=\"'gradient'\" [size]=\"'base'\" aria-label=\"AI Trigger\" (onClick)=\"toggleBar()\">\n    </al-button>\n\n    <!-- Close Button - Show when bar is visible -->\n    <al-button *ngIf=\"isVisible && showClose\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n      [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"toggleBar()\">\n    </al-button>\n  </div>\n\n  <!-- AI Apply Bar - Expands to the LEFT of button -->\n  <div class=\"ai-apply-wrap\" [class.visible]=\"isVisible\" [class.hidden]=\"!isVisible\">\n    <div class=\"ai-apply-rail\">\n      <div class=\"ai-apply-row\">\n        <div class=\"ai-apply-input\">\n          <al-input [labelText]=\"''\" [placeholder]=\"placeholder\" [value]=\"value\" [type]=\"'text'\" [disabled]=\"disabled\"\n            [helperText]=\"false\" [leftIcon]=\"''\" [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\"\n            [multipleSelect]=\"false\" [options]=\"options\" [size]=\"'base'\" [types]=\"'plain'\"\n            (change)=\"onValueChange($event)\">\n          </al-input>\n        </div>\n\n        <div class=\"ai-apply-button\">\n          <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n            [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n          </al-button>\n          <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\"\n            [customColour]=\"'#ffffff'\" [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n            [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\">\n          </al-icon-button>\n        </div>\n      </div>\n\n      <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n        {{ helperText }}\n      </div>\n    </div>\n  </div>\n\n</div>", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-container{position:relative;display:flex;align-items:center;justify-content:flex-end}.ai-toggle-button{position:relative;z-index:50;flex-shrink:0}.ai-apply-wrap{position:absolute;right:40px;display:flex;align-items:stretch;overflow:hidden;transform-origin:right center;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out .2s}.ai-apply-wrap.hidden{width:0;opacity:0;pointer-events:none;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}.ai-apply-wrap.visible{width:350px;opacity:1;pointer-events:auto}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .3s ease-out;white-space:nowrap}.ai-apply-wrap.hidden .ai-apply-rail{opacity:0}.ai-apply-wrap.visible .ai-apply-rail{opacity:1;transition-delay:.2s}.ai-apply-row,.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiApplyBarComponent, isStandalone: true, selector: "al-ai-apply-bar", inputs: { dataTestId: "dataTestId", showChevron: "showChevron", showChevronButton: "showChevronButton", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showClose: "showClose", iconOutlined: "iconOutlined", closeButtonTooltip: "closeButtonTooltip", closeButtonTooltipPosition: "closeButtonTooltipPosition", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { valueChange: "valueChange", applyClick: "applyClick", closeClick: "closeClick", chevronClick: "chevronClick" }, ngImport: i0, template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n  <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n  <div class=\"ai-toggle-button\">\n    <!-- AI Trigger Button - Show when bar is hidden -->\n    <al-button *ngIf=\"!isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\"\n      [color]=\"'gradient'\" [size]=\"'base'\" aria-label=\"AI Trigger\" (onClick)=\"toggleBar()\">\n    </al-button>\n\n    <!-- Close Button - Show when bar is visible -->\n    <al-button *ngIf=\"isVisible && showClose\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n      [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"toggleBar()\">\n    </al-button>\n  </div>\n\n  <!-- AI Apply Bar - Expands to the LEFT of button -->\n  <div class=\"ai-apply-wrap\" [class.visible]=\"isVisible\" [class.hidden]=\"!isVisible\">\n    <div class=\"ai-apply-rail\">\n      <div class=\"ai-apply-row\">\n        <div class=\"ai-apply-input\">\n          <al-input [labelText]=\"''\" [placeholder]=\"placeholder\" [value]=\"value\" [type]=\"'text'\" [disabled]=\"disabled\"\n            [helperText]=\"false\" [leftIcon]=\"''\" [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\"\n            [multipleSelect]=\"false\" [options]=\"options\" [size]=\"'base'\" [types]=\"'plain'\"\n            (change)=\"onValueChange($event)\">\n          </al-input>\n        </div>\n\n        <div class=\"ai-apply-button\">\n          <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n            [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n          </al-button>\n          <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\"\n            [customColour]=\"'#ffffff'\" [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n            [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\">\n          </al-icon-button>\n        </div>\n      </div>\n\n      <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n        {{ helperText }}\n      </div>\n    </div>\n  </div>\n\n</div>", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-container{position:relative;display:flex;align-items:center;justify-content:flex-end}.ai-toggle-button{position:relative;z-index:50;flex-shrink:0}.ai-apply-wrap{position:absolute;right:48px;display:flex;align-items:stretch;overflow:hidden;transform-origin:right center;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out .2s;max-width:0;white-space:nowrap}.ai-apply-wrap.hidden{max-width:0;opacity:0;pointer-events:none;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}.ai-apply-wrap.visible{max-width:600px;opacity:1;pointer-events:auto}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);white-space:nowrap;opacity:0;transform-origin:right center;transform:scaleX(0);transition:opacity .3s ease-out,transform .4s cubic-bezier(.2,.8,.2,1)}.ai-apply-wrap.hidden .ai-apply-rail{opacity:0;transform:scaleX(0)}.ai-apply-wrap.visible .ai-apply-rail{opacity:1;transform:scaleX(1);transition-delay:.2s}.ai-apply-row{display:flex;align-items:center;gap:4px;height:40px;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1)}.ai-apply-wrap.visible .ai-apply-row{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1)}.ai-apply-wrap.visible .ai-apply-helper{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'al-ai-apply-bar', standalone: true, imports: [CommonModule, InputComponent, ButtonComponent, IconButtonComponent], template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n  <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n  <div class=\"ai-toggle-button\">\n    <!-- AI Trigger Button - Show when bar is hidden -->\n    <al-button *ngIf=\"!isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\"\n      [color]=\"'gradient'\" [size]=\"'base'\" aria-label=\"AI Trigger\" (onClick)=\"toggleBar()\">\n    </al-button>\n\n    <!-- Close Button - Show when bar is visible -->\n    <al-button *ngIf=\"isVisible && showClose\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n      [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"toggleBar()\">\n    </al-button>\n  </div>\n\n  <!-- AI Apply Bar - Expands to the LEFT of button -->\n  <div class=\"ai-apply-wrap\" [class.visible]=\"isVisible\" [class.hidden]=\"!isVisible\">\n    <div class=\"ai-apply-rail\">\n      <div class=\"ai-apply-row\">\n        <div class=\"ai-apply-input\">\n          <al-input [labelText]=\"''\" [placeholder]=\"placeholder\" [value]=\"value\" [type]=\"'text'\" [disabled]=\"disabled\"\n            [helperText]=\"false\" [leftIcon]=\"''\" [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\"\n            [multipleSelect]=\"false\" [options]=\"options\" [size]=\"'base'\" [types]=\"'plain'\"\n            (change)=\"onValueChange($event)\">\n          </al-input>\n        </div>\n\n        <div class=\"ai-apply-button\">\n          <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n            [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n          </al-button>\n          <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\"\n            [customColour]=\"'#ffffff'\" [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n            [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\">\n          </al-icon-button>\n        </div>\n      </div>\n\n      <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n        {{ helperText }}\n      </div>\n    </div>\n  </div>\n\n</div>", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-container{position:relative;display:flex;align-items:center;justify-content:flex-end}.ai-toggle-button{position:relative;z-index:50;flex-shrink:0}.ai-apply-wrap{position:absolute;right:40px;display:flex;align-items:stretch;overflow:hidden;transform-origin:right center;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out .2s}.ai-apply-wrap.hidden{width:0;opacity:0;pointer-events:none;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}.ai-apply-wrap.visible{width:350px;opacity:1;pointer-events:auto}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .3s ease-out;white-space:nowrap}.ai-apply-wrap.hidden .ai-apply-rail{opacity:0}.ai-apply-wrap.visible .ai-apply-rail{opacity:1;transition-delay:.2s}.ai-apply-row,.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"] }]
+            args: [{ selector: 'al-ai-apply-bar', standalone: true, imports: [CommonModule, InputComponent, ButtonComponent, IconButtonComponent], template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n  <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n  <div class=\"ai-toggle-button\">\n    <!-- AI Trigger Button - Show when bar is hidden -->\n    <al-button *ngIf=\"!isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\"\n      [color]=\"'gradient'\" [size]=\"'base'\" aria-label=\"AI Trigger\" (onClick)=\"toggleBar()\">\n    </al-button>\n\n    <!-- Close Button - Show when bar is visible -->\n    <al-button *ngIf=\"isVisible && showClose\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n      [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"toggleBar()\">\n    </al-button>\n  </div>\n\n  <!-- AI Apply Bar - Expands to the LEFT of button -->\n  <div class=\"ai-apply-wrap\" [class.visible]=\"isVisible\" [class.hidden]=\"!isVisible\">\n    <div class=\"ai-apply-rail\">\n      <div class=\"ai-apply-row\">\n        <div class=\"ai-apply-input\">\n          <al-input [labelText]=\"''\" [placeholder]=\"placeholder\" [value]=\"value\" [type]=\"'text'\" [disabled]=\"disabled\"\n            [helperText]=\"false\" [leftIcon]=\"''\" [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\"\n            [multipleSelect]=\"false\" [options]=\"options\" [size]=\"'base'\" [types]=\"'plain'\"\n            (change)=\"onValueChange($event)\">\n          </al-input>\n        </div>\n\n        <div class=\"ai-apply-button\">\n          <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n            [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n          </al-button>\n          <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\"\n            [customColour]=\"'#ffffff'\" [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n            [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\">\n          </al-icon-button>\n        </div>\n      </div>\n\n      <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n        {{ helperText }}\n      </div>\n    </div>\n  </div>\n\n</div>", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-container{position:relative;display:flex;align-items:center;justify-content:flex-end}.ai-toggle-button{position:relative;z-index:50;flex-shrink:0}.ai-apply-wrap{position:absolute;right:48px;display:flex;align-items:stretch;overflow:hidden;transform-origin:right center;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out .2s;max-width:0;white-space:nowrap}.ai-apply-wrap.hidden{max-width:0;opacity:0;pointer-events:none;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}.ai-apply-wrap.visible{max-width:600px;opacity:1;pointer-events:auto}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);white-space:nowrap;opacity:0;transform-origin:right center;transform:scaleX(0);transition:opacity .3s ease-out,transform .4s cubic-bezier(.2,.8,.2,1)}.ai-apply-wrap.hidden .ai-apply-rail{opacity:0;transform:scaleX(0)}.ai-apply-wrap.visible .ai-apply-rail{opacity:1;transform:scaleX(1);transition-delay:.2s}.ai-apply-row{display:flex;align-items:center;gap:4px;height:40px;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1)}.ai-apply-wrap.visible .ai-apply-row{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1)}.ai-apply-wrap.visible .ai-apply-helper{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"] }]
         }], propDecorators: { dataTestId: [{
                 type: Input
             }], showChevron: [{
@@ -7054,6 +7057,7 @@ class AiWrapperComponent {
                 // Register visibility_off as alias to hide_section for backward compatibility
                 this.iconRegistry.addSvgIconLiteral('visibility_off', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['hide_section']));
                 this.iconRegistry.addSvgIconLiteral('subrole', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['subrole']));
+                this.iconRegistry.addSvgIconLiteral('subrole_icon_white', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['subrole_icon_white']));
                 this.iconRegistry.addSvgIconLiteral('year_month_icon', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['year_month_icon']));
                 this.iconRegistry.addSvgIconLiteral('year_only_icon', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['year_only_icon']));
                 this.iconRegistry.addSvgIconLiteral('multi-drag-drop', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['multi-drag-drop']));
@@ -7106,11 +7110,11 @@ class AiWrapperComponent {
         this.inputBlur.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiWrapperComponent, isStandalone: true, selector: "al-ai-wrapper", inputs: { isAI: "isAI", inputPlaceholder: "inputPlaceholder", inputOptions: "inputOptions", inputValue: "inputValue", inputDisabled: "inputDisabled", showCloseButton: "showCloseButton", showHideButton: "showHideButton", showSubRoleButton: "showSubRoleButton", showYearMonthButton: "showYearMonthButton", showMoveButton: "showMoveButton", showDeleteButton: "showDeleteButton", showApplyButton: "showApplyButton", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showChevronButton: "showChevronButton", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { closeClick: "closeClick", aiTriggerClick: "aiTriggerClick", inputValueChange: "inputValueChange", hideClick: "hideClick", subRoleClick: "subRoleClick", yearMonthClick: "yearMonthClick", moveClick: "moveClick", deleteClick: "deleteClick", applyClick: "applyClick", chevronClick: "chevronClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, ngImport: i0, template: "<div class=\"al-ai-wrapper\">\n  <div class=\"al-ai-wrapper__center\">\n    <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n        [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n        [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n        [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n    <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n      <div class=\"al-ai-wrapper__gap\">\n        <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n          <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n            <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n              <ng-content></ng-content>\n            </div>\n            <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n              <div class=\"al-ai-wrapper__ai-row\">\n                <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n                    [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n                    [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n                    [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n                    (change)=\"onInputChange($event)\"></al-input></div>\n                <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n                    [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n                    [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n                    (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n                    icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n                    [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n                    [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n              </div>\n              <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n                {{ helperText }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:400px;overflow:visible;padding:32px}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:visible;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiWrapperComponent, isStandalone: true, selector: "al-ai-wrapper", inputs: { isAI: "isAI", inputPlaceholder: "inputPlaceholder", inputOptions: "inputOptions", inputValue: "inputValue", inputDisabled: "inputDisabled", showCloseButton: "showCloseButton", showHideButton: "showHideButton", showSubRoleButton: "showSubRoleButton", showYearMonthButton: "showYearMonthButton", showMoveButton: "showMoveButton", showDeleteButton: "showDeleteButton", showApplyButton: "showApplyButton", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showChevronButton: "showChevronButton", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { closeClick: "closeClick", aiTriggerClick: "aiTriggerClick", inputValueChange: "inputValueChange", hideClick: "hideClick", subRoleClick: "subRoleClick", yearMonthClick: "yearMonthClick", moveClick: "moveClick", deleteClick: "deleteClick", applyClick: "applyClick", chevronClick: "chevronClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, ngImport: i0, template: "<div class=\"al-ai-wrapper\">\n  <div class=\"al-ai-wrapper__center\">\n    <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n        [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n        [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n        [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n    <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n      <div class=\"al-ai-wrapper__gap\">\n        <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n          <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n            <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n              <ng-content></ng-content>\n            </div>\n            <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n              <div class=\"al-ai-wrapper__ai-row\">\n                <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n                    [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n                    [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n                    [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n                    (change)=\"onInputChange($event)\"></al-input></div>\n                <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n                    [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n                    [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n                    (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n                    icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n                    [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n                    [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n              </div>\n              <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n                {{ helperText }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:400px;overflow:visible;padding:32px}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center;animation:expandFromRight 1s cubic-bezier(.4,0,.2,1)}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;flex-shrink:0}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes expandFromRight{0%{opacity:0;transform:scaleX(.2) translate(20px)}60%{opacity:.8;transform:scaleX(1.02) translate(-2px)}to{opacity:1;transform:scaleX(1) translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'al-ai-wrapper', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatTooltipModule, IconButtonComponent, ButtonComponent, InputComponent], template: "<div class=\"al-ai-wrapper\">\n  <div class=\"al-ai-wrapper__center\">\n    <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n        [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n        [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n        [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n    <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n      <div class=\"al-ai-wrapper__gap\">\n        <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n          <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n            <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n              <ng-content></ng-content>\n            </div>\n            <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n              <div class=\"al-ai-wrapper__ai-row\">\n                <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n                    [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n                    [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n                    [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n                    (change)=\"onInputChange($event)\"></al-input></div>\n                <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n                    [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n                    [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n                    (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n                    icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n                    [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n                    [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n              </div>\n              <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n                {{ helperText }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:400px;overflow:visible;padding:32px}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:visible;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"] }]
+            args: [{ selector: 'al-ai-wrapper', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatTooltipModule, IconButtonComponent, ButtonComponent, InputComponent], template: "<div class=\"al-ai-wrapper\">\n  <div class=\"al-ai-wrapper__center\">\n    <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n        [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n        [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n        [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n    <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n      <div class=\"al-ai-wrapper__gap\">\n        <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n          <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n            <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n              <ng-content></ng-content>\n            </div>\n            <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n              <div class=\"al-ai-wrapper__ai-row\">\n                <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n                    [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n                    [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n                    [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n                    (change)=\"onInputChange($event)\"></al-input></div>\n                <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n                    [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n                    [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n                    (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n                    icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n                    [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n                    [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n              </div>\n              <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n                {{ helperText }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:400px;overflow:visible;padding:32px}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center;animation:expandFromRight 1s cubic-bezier(.4,0,.2,1)}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;flex-shrink:0}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes expandFromRight{0%{opacity:0;transform:scaleX(.2) translate(20px)}60%{opacity:.8;transform:scaleX(1.02) translate(-2px)}to{opacity:1;transform:scaleX(1) translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { isAI: [{
                 type: Input
             }], inputPlaceholder: [{