carriera-intern 1.1.115 → 1.1.117

package/fesm2022/carriera-intern.mjs

@@ -4971,6 +4971,10 @@ class DropZoneDocumentsHelper {
         const newFiles = currentFiles.filter((file) => !existingFileIds.includes(file.fileId));
         return newFiles;
     }
+    static async resolveFile(fileResponse) {
+        return (fileResponse.file ??
+            (await DropZoneDocumentsHelper.fetchFileAsFile(fileResponse)));
+    }
     static async fetchFileAsFile(fileResponse) {
         if (!fileResponse.url || !fileResponse.fileName)
             return null;
@@ -5483,7 +5487,7 @@ class DropZoneComponent {
             const fileExtension = fileResp.fileName?.split('.').pop()?.toLowerCase() || 'pdf';
             let previewUrl = fileResp?.url || '';
             let pageCount;
-            const file = await DropZoneDocumentsHelper.fetchFileAsFile(fileResp);
+            const file = await DropZoneDocumentsHelper.resolveFile(fileResp);
             const supportedBase64 = this.isImagePreviewVariant();
             const base64Url = supportedBase64 && file
                 ? await DropZoneDocumentsHelper.fileToBase64(file)
@@ -5500,7 +5504,7 @@ class DropZoneComponent {
                 fileName: fileResp.fileName || '',
                 baseName: fileResp.fileName?.split('.').slice(0, -1).join('.') || '',
                 fileId: serverFileId,
-                uid: String(serverFileId),
+                uid: serverFileId ? String(serverFileId) : crypto.randomUUID(),
                 type: fileExtension,
                 size: fileResp.fileSize || 0,
                 imagePreviewUrl: previewUrl,
@@ -11055,6 +11059,8 @@ class DispatchDropdownComponent {
     optionTemplateRight = input(null, ...(ngDevMode ? [{ debugName: "optionTemplateRight" }] : []));
     noContentTemplate = input(null, ...(ngDevMode ? [{ debugName: "noContentTemplate" }] : []));
     hideDropdownMenu = input(false, ...(ngDevMode ? [{ debugName: "hideDropdownMenu" }] : []));
+    // Base value for the data-testid attributes (e.g. "add-truck-btn")
+    testId = input('', ...(ngDevMode ? [{ debugName: "testId" }] : []));
     onSelectionChange = output();
     onRemove = output();
     onAddNew = output();
@@ -11067,6 +11073,21 @@ class DispatchDropdownComponent {
     dropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : []));
     collapsedGroups = signal([], ...(ngDevMode ? [{ debugName: "collapsedGroups" }] : []));
     closeTimeout = null;
+    // Test ids - null when no testId is provided, so the attribute is not rendered
+    addButtonTestId = computed(() => this.buildTestId(), ...(ngDevMode ? [{ debugName: "addButtonTestId" }] : []));
+    containerTestId = computed(() => this.buildTestId('container'), ...(ngDevMode ? [{ debugName: "containerTestId" }] : []));
+    inputTestId = computed(() => this.buildTestId('input'), ...(ngDevMode ? [{ debugName: "inputTestId" }] : []));
+    menuTestId = computed(() => this.buildTestId('menu'), ...(ngDevMode ? [{ debugName: "menuTestId" }] : []));
+    addNewTestId = computed(() => this.buildTestId('add-new'), ...(ngDevMode ? [{ debugName: "addNewTestId" }] : []));
+    buildTestId(suffix) {
+        const testId = this.testId();
+        if (!testId) {
+            return null;
+        }
+        return suffix === undefined || suffix === null
+            ? testId
+            : `${testId}-${suffix}`;
+    }
     // Computed height styles for dropdown menu
     groupMaxHeightStyle = computed(() => {
         const groups = this.filteredGroupedOptions();
@@ -11246,7 +11267,7 @@ class DispatchDropdownComponent {
         event.preventDefault();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DispatchDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DispatchDropdownComponent, isStandalone: true, selector: "cai-dispatch-dropdown", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null }, hasNoRemoveButton: { classPropertyName: "hasNoRemoveButton", publicName: "hasNoRemoveButton", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionTemplateLeft: { classPropertyName: "optionTemplateLeft", publicName: "optionTemplateLeft", isSignal: true, isRequired: false, transformFunction: null }, optionTemplateRight: { classPropertyName: "optionTemplateRight", publicName: "optionTemplateRight", isSignal: true, isRequired: false, transformFunction: null }, noContentTemplate: { classPropertyName: "noContentTemplate", publicName: "noContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, hideDropdownMenu: { classPropertyName: "hideDropdownMenu", publicName: "hideDropdownMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange", onRemove: "onRemove", onAddNew: "onAddNew", onSearch: "onSearch", onToggleDropdown: "onToggleDropdown", onBlur: "onBlur" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let hasNoAdd = config().hasNoAdd ?? false;\n@let hasNoAddNew = config().hasNoAddNew ?? false;\n@let optionLabel = config().optionLabel ?? \"name\";\n@let groupLabel = config().groupLabel ?? \"name\";\n\n<div\n  #container\n  class=\"dispatch-dropdown\"\n  [ngClass]=\"{\n    open: dropdownOpen(),\n    'has-data': !!data(),\n    'is-locked': isLocked(),\n    'has-no-remove-button': hasNoRemoveButton(),\n    'has-no-add': hasNoAdd,\n    'has-no-content-template': noContentTemplate(),\n    editable: isEditable(),\n  }\"\n  ngbDropdown\n  #dropdown=\"ngbDropdown\"\n  dropdownClass=\"cai-dropdown\"\n  [autoClose]=\"false\"\n  [container]=\"'body'\"\n  (pointerdown)=\"handleClick($event)\"\n  (openChange)=\"handleOpenChange($event)\"\n>\n  <div class=\"main-container\">\n    <div class=\"dispatch-template\">\n      @if (data()) {\n        <ng-container\n          *ngTemplateOutlet=\"contentTemplate(); context: { $implicit: data() }\"\n        ></ng-container>\n      }\n    </div>\n\n    <div class=\"no-content\">\n      @if (noContentTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            noContentTemplate();\n            context: { $implicit: data() }\n          \"\n        ></ng-container>\n      } @else {\n        <span class=\"default-add\">ADD</span>\n      }\n    </div>\n\n    <div class=\"dropdown-input-container\">\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"dispatch-dropdown-input\"\n        [tabIndex]=\"!!data() || isLocked() ? -1 : 0\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"handleBlur()\"\n        (keydown)=\"handleKeydown($event)\"\n        [placeholder]=\"config().placeholder\"\n        [(ngModel)]=\"searchValue\"\n        (input)=\"handleSearch($event)\"\n      />\n    </div>\n  </div>\n\n  @let isButtonLocked =\n    isLocked() || (hasNoRemoveButton() && !!data() && !isEditable());\n\n  @let buttonTooltip =\n    isDisabled()\n      ? disabledTooltip()\n      : dropdownOpen()\n        ? \"Cancel\"\n        : data()\n          ? \"Remove\"\n          : \"\";\n\n  @let buttonTooltipClass =\n    isDisabled()\n      ? \"input-tooltip tooltip-m-t-4\"\n      : dropdownOpen() || !data() || isEditable()\n        ? \"input-tooltip tooltip-m-t-4 tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"input-tooltip tooltip-m-t-4 tooltip-bg-red-500\";\n\n  <div class=\"buttons-container\" [class.locked]=\"isButtonLocked\">\n    <div\n      class=\"primary-button\"\n      [class.disabled]=\"isDisabled()\"\n      (pointerdown)=\"isDisabled() ? null : handlePrimaryButtonClick($event)\"\n      [ngbTooltip]=\"buttonTooltip\"\n      [tooltipClass]=\"buttonTooltipClass\"\n      [container]=\"'body'\"\n      [autoClose]=\"true\"\n      [openDelay]=\"600\"\n      [placement]=\"'bottom'\"\n    >\n      <svg-icon name=\"cai-plus\" class=\"primary-button-icon\"></svg-icon>\n    </div>\n    <div class=\"dragging-indicator\">\n      <svg-icon name=\"cai-drag\" class=\"dragging-icon\"></svg-icon>\n    </div>\n  </div>\n\n  <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\n\n  <div\n    class=\"dropdown-menu dispatch-dropdown-menu\"\n    [class.hide-dropdown]=\"hideDropdownMenu()\"\n    #dropdownMenu\n    ngbDropdownMenu\n    (click)=\"stopEventPropagationAndPreventDefault($event)\"\n    (pointerdown)=\"stopEventPropagationAndPreventDefault($event)\"\n    [style.width.px]=\"containerWidth()\"\n    [class.closing]=\"closing()\"\n    [style.--max-height]=\"\n      config().isGrouped ? groupMaxHeightStyle() : maxHeightStyle()\n    \"\n    [style.--container-height]=\"\n      config().hasPagination || config().isGrouped\n        ? '244px'\n        : containerHeightStyle()\n    \"\n  >\n    <div class=\"dropdown-menu-content\">\n      <div class=\"dropdown-menu-separator\"></div>\n\n      @if (config().isGrouped) {\n        <ng-container *ngTemplateOutlet=\"groupedOptionsTemplate\"></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"optionsTemplate\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #optionsTemplate>\n  @if (highlightedOptions().length) {\n    @for (option of highlightedOptions(); track option?.id ?? $index) {\n      <ng-container\n        *ngTemplateOutlet=\"dropdownItemTemplate; context: { $implicit: option }\"\n      ></ng-container>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"noResultsTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #groupedOptionsTemplate>\n  @if (filteredGroupedOptions().length) {\n    @for (group of filteredGroupedOptions(); track group?.id ?? $index) {\n      <div class=\"dropdown-group-container\">\n        <div\n          class=\"dropdown-group-header\"\n          [class.collapsed]=\"group.isCollapsed\"\n          (pointerdown)=\"toggleGroup($event, group.groupName)\"\n        >\n          <p class=\"dropdown-group-label\" [innerHTML]=\"group.groupName\"></p>\n          <div class=\"header-right\">\n            <div class=\"counter\">{{ group.highlightedOptions.length }}</div>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"dropdown-icon\"\n            ></svg-icon>\n          </div>\n        </div>\n\n        @let groupHeight =\n          (group.highlightedOptions.length || (config().hasNoAddNew ? 1 : 2)) *\n            30 +\n          \"px\";\n        <div\n          class=\"dropdown-group\"\n          [class.collapsed]=\"group.isCollapsed\"\n          [style.--group-height]=\"groupHeight\"\n        >\n          @if (group.highlightedOptions.length) {\n            @for (\n              option of group.highlightedOptions;\n              track option?.id ?? $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  dropdownItemTemplate;\n                  context: { $implicit: option }\n                \"\n              ></ng-container>\n            }\n          } @else {\n            <ng-container\n              *ngTemplateOutlet=\"noResultsTemplate; context: { id: group.id }\"\n            ></ng-container>\n          }\n        </div>\n      </div>\n    }\n  } @else {\n    <ng-container\n      *ngTemplateOutlet=\"noResultsTemplate; context: { id: null }\"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #noResultsTemplate let-id=\"id\">\n  @if (!hasNoAddNew) {\n    <div class=\"dropdown-item add-new\" (pointerdown)=\"handleAddNew(id ?? null)\">\n      <p class=\"add-new-text\">ADD NEW</p>\n      <svg-icon name=\"cai-plus\" class=\"add-item-icon\"></svg-icon>\n    </div>\n  }\n  <div class=\"dropdown-item no-results\">\n    <p>No results</p>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItemTemplate let-option>\n  <div class=\"dropdown-item\" (pointerdown)=\"handleOption($event, option)\">\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplateLeft(); context: { $implicit: option }\"\n    ></ng-container>\n    <p [innerHTML]=\"option.highlighted\"></p>\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplateRight(); context: { $implicit: option }\"\n    ></ng-container>\n  </div>\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.dispatch-dropdown{height:34px;border-radius:3px;background-color:transparent;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),border-radius .1s cubic-bezier(.46,.03,.51,.95);isolation:isolate;padding:4px;display:flex;align-items:center}.dispatch-dropdown.editable{cursor:pointer}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked){cursor:pointer}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked) .no-content{opacity:1;pointer-events:auto}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover{background-color:#0b49d1}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover .primary-button-icon{color:#bed0f9}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover .default-add{color:#fff}.dispatch-dropdown.is-locked:not(.has-data) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-no-add:not(.open) .primary-button,.dispatch-dropdown.has-no-content-template:not(.open) .primary-button{opacity:0;pointer-events:none}.dispatch-dropdown.has-no-add:not(.open) .buttons-container,.dispatch-dropdown.has-no-content-template:not(.open) .buttons-container{width:0px}.dispatch-dropdown.has-no-add:not(.open) .primary-button-icon,.dispatch-dropdown.has-no-content-template:not(.open) .primary-button-icon{color:transparent!important;transform:rotate(45deg)}.dispatch-dropdown.has-no-add:not(.open):hover,.dispatch-dropdown.has-no-content-template:not(.open):hover{background-color:transparent!important}.dispatch-dropdown.has-no-content-template .no-content{margin-left:0!important}.dispatch-dropdown.has-no-add:not(.open) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-data:not(.open) .dispatch-template{opacity:1;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.dispatch-dropdown.has-data:not(.open) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-data:not(.open) .dropdown-input-container{opacity:0;pointer-events:none}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button{pointer-events:auto}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button .primary-button-icon{color:#919191;transform:rotate(45deg)}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button:hover:not(.disabled){background-color:#f4bebe!important}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button:hover:not(.disabled) .primary-button-icon{color:#c20c0c!important}.dispatch-dropdown.is-locked .buttons-container,.dispatch-dropdown.has-no-remove-button.has-data .buttons-container{width:0px}.dispatch-dropdown.open{background-color:#2f2f2f}.dispatch-dropdown.open .no-content{opacity:0;pointer-events:none}.dispatch-dropdown.open .dispatch-dropdown-input{opacity:1;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.dispatch-dropdown.open .primary-button-icon{transform:rotate(45deg);color:#919191}.dispatch-dropdown.open .dispatch-template{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.dispatch-dropdown.open .primary-button{pointer-events:auto}.dispatch-dropdown.open .primary-button:hover{background-color:#91919166!important}.dispatch-dropdown.open .primary-button:hover .primary-button-icon{color:#dadada!important}.main-container{position:relative;flex:1;height:26px}.dispatch-template{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:26px}.dispatch-template,.no-content,.dropdown-input-container{position:absolute;top:0;left:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.no-content{height:26px;display:flex;align-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:10px;-webkit-user-select:none;user-select:none}.default-add{color:#424242;font-size:11px;font-weight:500;text-transform:uppercase;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.buttons-container{position:relative;z-index:1;height:26px;-webkit-user-select:none;user-select:none;width:26px}.buttons-container.locked .primary-button{pointer-events:none!important;opacity:0}.buttons-container.dragging .dragging-indicator{opacity:1!important;pointer-events:auto}.buttons-container.dragging .primary-button{opacity:0!important;pointer-events:none}.buttons-container .primary-button{opacity:1;pointer-events:auto}.buttons-container .dragging-indicator{opacity:0;pointer-events:none}.primary-button,.dragging-indicator{position:absolute;bottom:0;right:0;z-index:1;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dragging-indicator{padding:4px;width:26px;height:26px}.primary-button{position:absolute;right:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:pointer;padding:4px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.primary-button .primary-button-icon{display:flex;align-items:center;justify-content:center;color:#6692f1;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95)}.primary-button .primary-button-icon svg{height:18px;width:18px}.primary-button.disabled{cursor:default}.primary-button.disabled .primary-button-icon{color:#ccc!important}.dropdown-input-container{padding:4px 8px 4px 6px;height:26px;display:flex;align-items:center;justify-content:flex-start}.dispatch-dropdown-input{height:18px;border:0;outline:none;background-color:transparent;color:#fff;padding:0;margin:0;width:100%;font-size:14px;font-weight:400;line-height:18px;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dispatch-dropdown-input ::placeholder{color:#6c6c6c}.dropdown-anchor{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:0;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-menu{min-width:0px!important;width:100%;background-color:transparent;border:0;padding:0!important;z-index:1100!important;height:var(--container-height);max-height:var(--container-height);transition:opacity .1s cubic-bezier(.46,.03,.51,.95)!important}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;padding:2px 0 4px 4px;background-color:#2f2f2f;max-height:var(--max-height);height:var(--max-height);overflow-y:scroll;scrollbar-gutter:stable}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:6px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{background-color:#919191;width:2px;border:2px solid #2f2f2f;border-radius:3px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:6px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.dropdown-menu .dropdown-menu-content{transition:max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s cubic-bezier(.46,.03,.51,.95)!important}@starting-style{.dropdown-menu .dropdown-menu-content{max-height:0;overflow-y:hidden}}.dropdown-menu .dropdown-menu-content{animation:dropdown-menu-opening .1s cubic-bezier(.46,.03,.51,.95)}@starting-style{.dropdown-menu{opacity:0;overflow-y:hidden}}.dropdown-menu.closing,.dropdown-menu.hide-dropdown{opacity:0}.dropdown-menu.closing .dropdown-menu-content,.dropdown-menu.hide-dropdown .dropdown-menu-content{max-height:0;overflow-y:hidden;animation:none}@keyframes dropdown-menu-opening{0%{overflow-y:hidden}99%{overflow-y:hidden}to{overflow-y:scroll}}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px 6px;width:100%;display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative;margin-top:4px}.dropdown-item:hover{background-color:#424242;color:#fff}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item p{flex-shrink:1;max-width:max-content;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-group-header{color:#fff;font-weight:700;font-size:11px;line-height:18px;height:30px;padding:8px 4px 4px;width:100%;display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);position:relative}.dropdown-group-header:hover{color:#fff!important}.dropdown-group-header:hover .dropdown-icon{opacity:1!important;color:#ffffffb3!important}.dropdown-group-header:hover .counter{opacity:0!important}.dropdown-group-header:focus-visible{border:0;outline:none}.dropdown-group-header p{flex-shrink:1;max-width:max-content;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px}.dropdown-group-header .dropdown-icon{transition:color .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);color:#ffffffb3;position:absolute;top:2px;right:2px;opacity:0}.dropdown-group-header .counter{display:flex;padding:1px 4px;flex-direction:column;justify-content:center;align-items:center;min-width:16px;color:#eee;text-align:center;font-size:11px;font-weight:600;line-height:14px;border-radius:60px;background-color:#424242;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-group-header.collapsed{color:#aaa}.dropdown-group-header.collapsed .counter{opacity:0}.dropdown-group-header.collapsed .dropdown-icon{color:#919191;transform:rotateX(180deg);opacity:1!important}.dropdown-group-container{position:relative}.dropdown-group-container:not(:nth-child(2)) .dropdown-group-header{border-top:1px solid #424242;margin-top:3px}.header-right{height:18px;padding-left:4px;position:relative;margin-left:auto}.dropdown-group{overflow:hidden;height:var(--group-height);max-height:var(--group-height);transition:height .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-group.collapsed{height:0;max-height:0}.no-results{color:#919191;font-weight:700;font-size:11px;line-height:14px;pointer-events:none}.dropdown-menu-separator{position:fixed;z-index:30;width:calc(100% - 8px);height:1px;background-color:transparent;border-bottom:1px solid #424242;margin-top:-1px}.add-new{font-size:11px;line-height:14px;font-weight:700;color:#92b1f5;border-radius:2px;background-color:transparent;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95)}.add-new:hover{background-color:#3b73ed66;color:#fff}.add-new .add-item-icon{opacity:1;color:#92b1f5;margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DispatchDropdownComponent, isStandalone: true, selector: "cai-dispatch-dropdown", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null }, hasNoRemoveButton: { classPropertyName: "hasNoRemoveButton", publicName: "hasNoRemoveButton", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionTemplateLeft: { classPropertyName: "optionTemplateLeft", publicName: "optionTemplateLeft", isSignal: true, isRequired: false, transformFunction: null }, optionTemplateRight: { classPropertyName: "optionTemplateRight", publicName: "optionTemplateRight", isSignal: true, isRequired: false, transformFunction: null }, noContentTemplate: { classPropertyName: "noContentTemplate", publicName: "noContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, hideDropdownMenu: { classPropertyName: "hideDropdownMenu", publicName: "hideDropdownMenu", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange", onRemove: "onRemove", onAddNew: "onAddNew", onSearch: "onSearch", onToggleDropdown: "onToggleDropdown", onBlur: "onBlur" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let hasNoAdd = config().hasNoAdd ?? false;\n@let hasNoAddNew = config().hasNoAddNew ?? false;\n@let optionLabel = config().optionLabel ?? \"name\";\n@let groupLabel = config().groupLabel ?? \"name\";\n\n<div\n  #container\n  class=\"dispatch-dropdown\"\n  [attr.data-testid]=\"containerTestId()\"\n  [ngClass]=\"{\n    open: dropdownOpen(),\n    'has-data': !!data(),\n    'is-locked': isLocked(),\n    'has-no-remove-button': hasNoRemoveButton(),\n    'has-no-add': hasNoAdd,\n    'has-no-content-template': noContentTemplate(),\n    editable: isEditable(),\n  }\"\n  ngbDropdown\n  #dropdown=\"ngbDropdown\"\n  dropdownClass=\"cai-dropdown\"\n  [autoClose]=\"false\"\n  [container]=\"'body'\"\n  (pointerdown)=\"handleClick($event)\"\n  (openChange)=\"handleOpenChange($event)\"\n>\n  <div class=\"main-container\">\n    <div class=\"dispatch-template\">\n      @if (data()) {\n        <ng-container\n          *ngTemplateOutlet=\"contentTemplate(); context: { $implicit: data() }\"\n        ></ng-container>\n      }\n    </div>\n\n    <div class=\"no-content\">\n      @if (noContentTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            noContentTemplate();\n            context: { $implicit: data() }\n          \"\n        ></ng-container>\n      } @else {\n        <span class=\"default-add\">ADD</span>\n      }\n    </div>\n\n    <div class=\"dropdown-input-container\">\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"dispatch-dropdown-input\"\n        [attr.data-testid]=\"inputTestId()\"\n        [tabIndex]=\"!!data() || isLocked() ? -1 : 0\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"handleBlur()\"\n        (keydown)=\"handleKeydown($event)\"\n        [placeholder]=\"config().placeholder\"\n        [(ngModel)]=\"searchValue\"\n        (input)=\"handleSearch($event)\"\n      />\n    </div>\n  </div>\n\n  @let isButtonLocked =\n    isLocked() || (hasNoRemoveButton() && !!data() && !isEditable());\n\n  @let buttonTooltip =\n    isDisabled()\n      ? disabledTooltip()\n      : dropdownOpen()\n        ? \"Cancel\"\n        : data()\n          ? \"Remove\"\n          : \"\";\n\n  @let buttonTooltipClass =\n    isDisabled()\n      ? \"input-tooltip tooltip-m-t-4\"\n      : dropdownOpen() || !data() || isEditable()\n        ? \"input-tooltip tooltip-m-t-4 tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"input-tooltip tooltip-m-t-4 tooltip-bg-red-500\";\n\n  <div class=\"buttons-container\" [class.locked]=\"isButtonLocked\">\n    <div\n      class=\"primary-button\"\n      [attr.data-testid]=\"addButtonTestId()\"\n      [class.disabled]=\"isDisabled()\"\n      (pointerdown)=\"isDisabled() ? null : handlePrimaryButtonClick($event)\"\n      [ngbTooltip]=\"buttonTooltip\"\n      [tooltipClass]=\"buttonTooltipClass\"\n      [container]=\"'body'\"\n      [autoClose]=\"true\"\n      [openDelay]=\"600\"\n      [placement]=\"'bottom'\"\n    >\n      <svg-icon name=\"cai-plus\" class=\"primary-button-icon\"></svg-icon>\n    </div>\n    <div class=\"dragging-indicator\">\n      <svg-icon name=\"cai-drag\" class=\"dragging-icon\"></svg-icon>\n    </div>\n  </div>\n\n  <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\n\n  <div\n    class=\"dropdown-menu dispatch-dropdown-menu\"\n    [attr.data-testid]=\"menuTestId()\"\n    [class.hide-dropdown]=\"hideDropdownMenu()\"\n    #dropdownMenu\n    ngbDropdownMenu\n    (click)=\"stopEventPropagationAndPreventDefault($event)\"\n    (pointerdown)=\"stopEventPropagationAndPreventDefault($event)\"\n    [style.width.px]=\"containerWidth()\"\n    [class.closing]=\"closing()\"\n    [style.--max-height]=\"\n      config().isGrouped ? groupMaxHeightStyle() : maxHeightStyle()\n    \"\n    [style.--container-height]=\"\n      config().hasPagination || config().isGrouped\n        ? '244px'\n        : containerHeightStyle()\n    \"\n  >\n    <div class=\"dropdown-menu-content\">\n      <div class=\"dropdown-menu-separator\"></div>\n\n      @if (config().isGrouped) {\n        <ng-container *ngTemplateOutlet=\"groupedOptionsTemplate\"></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"optionsTemplate\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #optionsTemplate>\n  @if (highlightedOptions().length) {\n    @for (option of highlightedOptions(); track option?.id ?? $index) {\n      <ng-container\n        *ngTemplateOutlet=\"dropdownItemTemplate; context: { $implicit: option }\"\n      ></ng-container>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"noResultsTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #groupedOptionsTemplate>\n  @if (filteredGroupedOptions().length) {\n    @for (group of filteredGroupedOptions(); track group?.id ?? $index) {\n      <div class=\"dropdown-group-container\">\n        <div\n          class=\"dropdown-group-header\"\n          [class.collapsed]=\"group.isCollapsed\"\n          (pointerdown)=\"toggleGroup($event, group.groupName)\"\n        >\n          <p class=\"dropdown-group-label\" [innerHTML]=\"group.groupName\"></p>\n          <div class=\"header-right\">\n            <div class=\"counter\">{{ group.highlightedOptions.length }}</div>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"dropdown-icon\"\n            ></svg-icon>\n          </div>\n        </div>\n\n        @let groupHeight =\n          (group.highlightedOptions.length || (config().hasNoAddNew ? 1 : 2)) *\n            30 +\n          \"px\";\n        <div\n          class=\"dropdown-group\"\n          [class.collapsed]=\"group.isCollapsed\"\n          [style.--group-height]=\"groupHeight\"\n        >\n          @if (group.highlightedOptions.length) {\n            @for (\n              option of group.highlightedOptions;\n              track option?.id ?? $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  dropdownItemTemplate;\n                  context: { $implicit: option }\n                \"\n              ></ng-container>\n            }\n          } @else {\n            <ng-container\n              *ngTemplateOutlet=\"noResultsTemplate; context: { id: group.id }\"\n            ></ng-container>\n          }\n        </div>\n      </div>\n    }\n  } @else {\n    <ng-container\n      *ngTemplateOutlet=\"noResultsTemplate; context: { id: null }\"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #noResultsTemplate let-id=\"id\">\n  @if (!hasNoAddNew) {\n    <div\n      class=\"dropdown-item add-new\"\n      [attr.data-testid]=\"id ? buildTestId('add-new-' + id) : addNewTestId()\"\n      (pointerdown)=\"handleAddNew(id ?? null)\"\n    >\n      <p class=\"add-new-text\">ADD NEW</p>\n      <svg-icon name=\"cai-plus\" class=\"add-item-icon\"></svg-icon>\n    </div>\n  }\n  <div class=\"dropdown-item no-results\">\n    <p>No results</p>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItemTemplate let-option>\n  <div\n    class=\"dropdown-item\"\n    [attr.data-testid]=\"\n      option.id != null ? buildTestId('option-' + option.id) : null\n    \"\n    (pointerdown)=\"handleOption($event, option)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplateLeft(); context: { $implicit: option }\"\n    ></ng-container>\n    <p [innerHTML]=\"option.highlighted\"></p>\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplateRight(); context: { $implicit: option }\"\n    ></ng-container>\n  </div>\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.dispatch-dropdown{height:34px;border-radius:3px;background-color:transparent;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),border-radius .1s cubic-bezier(.46,.03,.51,.95);isolation:isolate;padding:4px;display:flex;align-items:center}.dispatch-dropdown.editable{cursor:pointer}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked){cursor:pointer}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked) .no-content{opacity:1;pointer-events:auto}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover{background-color:#0b49d1}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover .primary-button-icon{color:#bed0f9}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover .default-add{color:#fff}.dispatch-dropdown.is-locked:not(.has-data) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-no-add:not(.open) .primary-button,.dispatch-dropdown.has-no-content-template:not(.open) .primary-button{opacity:0;pointer-events:none}.dispatch-dropdown.has-no-add:not(.open) .buttons-container,.dispatch-dropdown.has-no-content-template:not(.open) .buttons-container{width:0px}.dispatch-dropdown.has-no-add:not(.open) .primary-button-icon,.dispatch-dropdown.has-no-content-template:not(.open) .primary-button-icon{color:transparent!important;transform:rotate(45deg)}.dispatch-dropdown.has-no-add:not(.open):hover,.dispatch-dropdown.has-no-content-template:not(.open):hover{background-color:transparent!important}.dispatch-dropdown.has-no-content-template .no-content{margin-left:0!important}.dispatch-dropdown.has-no-add:not(.open) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-data:not(.open) .dispatch-template{opacity:1;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.dispatch-dropdown.has-data:not(.open) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-data:not(.open) .dropdown-input-container{opacity:0;pointer-events:none}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button{pointer-events:auto}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button .primary-button-icon{color:#919191;transform:rotate(45deg)}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button:hover:not(.disabled){background-color:#f4bebe!important}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button:hover:not(.disabled) .primary-button-icon{color:#c20c0c!important}.dispatch-dropdown.is-locked .buttons-container,.dispatch-dropdown.has-no-remove-button.has-data .buttons-container{width:0px}.dispatch-dropdown.open{background-color:#2f2f2f}.dispatch-dropdown.open .no-content{opacity:0;pointer-events:none}.dispatch-dropdown.open .dispatch-dropdown-input{opacity:1;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.dispatch-dropdown.open .primary-button-icon{transform:rotate(45deg);color:#919191}.dispatch-dropdown.open .dispatch-template{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.dispatch-dropdown.open .primary-button{pointer-events:auto}.dispatch-dropdown.open .primary-button:hover{background-color:#91919166!important}.dispatch-dropdown.open .primary-button:hover .primary-button-icon{color:#dadada!important}.main-container{position:relative;flex:1;height:26px}.dispatch-template{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:26px}.dispatch-template,.no-content,.dropdown-input-container{position:absolute;top:0;left:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.no-content{height:26px;display:flex;align-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:10px;-webkit-user-select:none;user-select:none}.default-add{color:#424242;font-size:11px;font-weight:500;text-transform:uppercase;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.buttons-container{position:relative;z-index:1;height:26px;-webkit-user-select:none;user-select:none;width:26px}.buttons-container.locked .primary-button{pointer-events:none!important;opacity:0}.buttons-container.dragging .dragging-indicator{opacity:1!important;pointer-events:auto}.buttons-container.dragging .primary-button{opacity:0!important;pointer-events:none}.buttons-container .primary-button{opacity:1;pointer-events:auto}.buttons-container .dragging-indicator{opacity:0;pointer-events:none}.primary-button,.dragging-indicator{position:absolute;bottom:0;right:0;z-index:1;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dragging-indicator{padding:4px;width:26px;height:26px}.primary-button{position:absolute;right:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:pointer;padding:4px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.primary-button .primary-button-icon{display:flex;align-items:center;justify-content:center;color:#6692f1;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95)}.primary-button .primary-button-icon svg{height:18px;width:18px}.primary-button.disabled{cursor:default}.primary-button.disabled .primary-button-icon{color:#ccc!important}.dropdown-input-container{padding:4px 8px 4px 6px;height:26px;display:flex;align-items:center;justify-content:flex-start}.dispatch-dropdown-input{height:18px;border:0;outline:none;background-color:transparent;color:#fff;padding:0;margin:0;width:100%;font-size:14px;font-weight:400;line-height:18px;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dispatch-dropdown-input ::placeholder{color:#6c6c6c}.dropdown-anchor{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:0;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-menu{min-width:0px!important;width:100%;background-color:transparent;border:0;padding:0!important;z-index:1100!important;height:var(--container-height);max-height:var(--container-height);transition:opacity .1s cubic-bezier(.46,.03,.51,.95)!important}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;padding:2px 0 4px 4px;background-color:#2f2f2f;max-height:var(--max-height);height:var(--max-height);overflow-y:scroll;scrollbar-gutter:stable}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:6px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{background-color:#919191;width:2px;border:2px solid #2f2f2f;border-radius:3px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:6px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.dropdown-menu .dropdown-menu-content{transition:max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s cubic-bezier(.46,.03,.51,.95)!important}@starting-style{.dropdown-menu .dropdown-menu-content{max-height:0;overflow-y:hidden}}.dropdown-menu .dropdown-menu-content{animation:dropdown-menu-opening .1s cubic-bezier(.46,.03,.51,.95)}@starting-style{.dropdown-menu{opacity:0;overflow-y:hidden}}.dropdown-menu.closing,.dropdown-menu.hide-dropdown{opacity:0}.dropdown-menu.closing .dropdown-menu-content,.dropdown-menu.hide-dropdown .dropdown-menu-content{max-height:0;overflow-y:hidden;animation:none}@keyframes dropdown-menu-opening{0%{overflow-y:hidden}99%{overflow-y:hidden}to{overflow-y:scroll}}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px 6px;width:100%;display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative;margin-top:4px}.dropdown-item:hover{background-color:#424242;color:#fff}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item p{flex-shrink:1;max-width:max-content;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-group-header{color:#fff;font-weight:700;font-size:11px;line-height:18px;height:30px;padding:8px 4px 4px;width:100%;display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);position:relative}.dropdown-group-header:hover{color:#fff!important}.dropdown-group-header:hover .dropdown-icon{opacity:1!important;color:#ffffffb3!important}.dropdown-group-header:hover .counter{opacity:0!important}.dropdown-group-header:focus-visible{border:0;outline:none}.dropdown-group-header p{flex-shrink:1;max-width:max-content;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px}.dropdown-group-header .dropdown-icon{transition:color .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);color:#ffffffb3;position:absolute;top:2px;right:2px;opacity:0}.dropdown-group-header .counter{display:flex;padding:1px 4px;flex-direction:column;justify-content:center;align-items:center;min-width:16px;color:#eee;text-align:center;font-size:11px;font-weight:600;line-height:14px;border-radius:60px;background-color:#424242;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-group-header.collapsed{color:#aaa}.dropdown-group-header.collapsed .counter{opacity:0}.dropdown-group-header.collapsed .dropdown-icon{color:#919191;transform:rotateX(180deg);opacity:1!important}.dropdown-group-container{position:relative}.dropdown-group-container:not(:nth-child(2)) .dropdown-group-header{border-top:1px solid #424242;margin-top:3px}.header-right{height:18px;padding-left:4px;position:relative;margin-left:auto}.dropdown-group{overflow:hidden;height:var(--group-height);max-height:var(--group-height);transition:height .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-group.collapsed{height:0;max-height:0}.no-results{color:#919191;font-weight:700;font-size:11px;line-height:14px;pointer-events:none}.dropdown-menu-separator{position:fixed;z-index:30;width:calc(100% - 8px);height:1px;background-color:transparent;border-bottom:1px solid #424242;margin-top:-1px}.add-new{font-size:11px;line-height:14px;font-weight:700;color:#92b1f5;border-radius:2px;background-color:transparent;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95)}.add-new:hover{background-color:#3b73ed66;color:#fff}.add-new .add-item-icon{opacity:1;color:#92b1f5;margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 // Bootstrap
                 NgbDropdownModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownAnchor, selector: "[ngbDropdownAnchor]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
                 // Components
@@ -11262,7 +11283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         NgbTooltip,
                         // Components
                         SvgIconComponent,
-                    ], template: "@let hasNoAdd = config().hasNoAdd ?? false;\n@let hasNoAddNew = config().hasNoAddNew ?? false;\n@let optionLabel = config().optionLabel ?? \"name\";\n@let groupLabel = config().groupLabel ?? \"name\";\n\n<div\n  #container\n  class=\"dispatch-dropdown\"\n  [ngClass]=\"{\n    open: dropdownOpen(),\n    'has-data': !!data(),\n    'is-locked': isLocked(),\n    'has-no-remove-button': hasNoRemoveButton(),\n    'has-no-add': hasNoAdd,\n    'has-no-content-template': noContentTemplate(),\n    editable: isEditable(),\n  }\"\n  ngbDropdown\n  #dropdown=\"ngbDropdown\"\n  dropdownClass=\"cai-dropdown\"\n  [autoClose]=\"false\"\n  [container]=\"'body'\"\n  (pointerdown)=\"handleClick($event)\"\n  (openChange)=\"handleOpenChange($event)\"\n>\n  <div class=\"main-container\">\n    <div class=\"dispatch-template\">\n      @if (data()) {\n        <ng-container\n          *ngTemplateOutlet=\"contentTemplate(); context: { $implicit: data() }\"\n        ></ng-container>\n      }\n    </div>\n\n    <div class=\"no-content\">\n      @if (noContentTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            noContentTemplate();\n            context: { $implicit: data() }\n          \"\n        ></ng-container>\n      } @else {\n        <span class=\"default-add\">ADD</span>\n      }\n    </div>\n\n    <div class=\"dropdown-input-container\">\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"dispatch-dropdown-input\"\n        [tabIndex]=\"!!data() || isLocked() ? -1 : 0\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"handleBlur()\"\n        (keydown)=\"handleKeydown($event)\"\n        [placeholder]=\"config().placeholder\"\n        [(ngModel)]=\"searchValue\"\n        (input)=\"handleSearch($event)\"\n      />\n    </div>\n  </div>\n\n  @let isButtonLocked =\n    isLocked() || (hasNoRemoveButton() && !!data() && !isEditable());\n\n  @let buttonTooltip =\n    isDisabled()\n      ? disabledTooltip()\n      : dropdownOpen()\n        ? \"Cancel\"\n        : data()\n          ? \"Remove\"\n          : \"\";\n\n  @let buttonTooltipClass =\n    isDisabled()\n      ? \"input-tooltip tooltip-m-t-4\"\n      : dropdownOpen() || !data() || isEditable()\n        ? \"input-tooltip tooltip-m-t-4 tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"input-tooltip tooltip-m-t-4 tooltip-bg-red-500\";\n\n  <div class=\"buttons-container\" [class.locked]=\"isButtonLocked\">\n    <div\n      class=\"primary-button\"\n      [class.disabled]=\"isDisabled()\"\n      (pointerdown)=\"isDisabled() ? null : handlePrimaryButtonClick($event)\"\n      [ngbTooltip]=\"buttonTooltip\"\n      [tooltipClass]=\"buttonTooltipClass\"\n      [container]=\"'body'\"\n      [autoClose]=\"true\"\n      [openDelay]=\"600\"\n      [placement]=\"'bottom'\"\n    >\n      <svg-icon name=\"cai-plus\" class=\"primary-button-icon\"></svg-icon>\n    </div>\n    <div class=\"dragging-indicator\">\n      <svg-icon name=\"cai-drag\" class=\"dragging-icon\"></svg-icon>\n    </div>\n  </div>\n\n  <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\n\n  <div\n    class=\"dropdown-menu dispatch-dropdown-menu\"\n    [class.hide-dropdown]=\"hideDropdownMenu()\"\n    #dropdownMenu\n    ngbDropdownMenu\n    (click)=\"stopEventPropagationAndPreventDefault($event)\"\n    (pointerdown)=\"stopEventPropagationAndPreventDefault($event)\"\n    [style.width.px]=\"containerWidth()\"\n    [class.closing]=\"closing()\"\n    [style.--max-height]=\"\n      config().isGrouped ? groupMaxHeightStyle() : maxHeightStyle()\n    \"\n    [style.--container-height]=\"\n      config().hasPagination || config().isGrouped\n        ? '244px'\n        : containerHeightStyle()\n    \"\n  >\n    <div class=\"dropdown-menu-content\">\n      <div class=\"dropdown-menu-separator\"></div>\n\n      @if (config().isGrouped) {\n        <ng-container *ngTemplateOutlet=\"groupedOptionsTemplate\"></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"optionsTemplate\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #optionsTemplate>\n  @if (highlightedOptions().length) {\n    @for (option of highlightedOptions(); track option?.id ?? $index) {\n      <ng-container\n        *ngTemplateOutlet=\"dropdownItemTemplate; context: { $implicit: option }\"\n      ></ng-container>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"noResultsTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #groupedOptionsTemplate>\n  @if (filteredGroupedOptions().length) {\n    @for (group of filteredGroupedOptions(); track group?.id ?? $index) {\n      <div class=\"dropdown-group-container\">\n        <div\n          class=\"dropdown-group-header\"\n          [class.collapsed]=\"group.isCollapsed\"\n          (pointerdown)=\"toggleGroup($event, group.groupName)\"\n        >\n          <p class=\"dropdown-group-label\" [innerHTML]=\"group.groupName\"></p>\n          <div class=\"header-right\">\n            <div class=\"counter\">{{ group.highlightedOptions.length }}</div>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"dropdown-icon\"\n            ></svg-icon>\n          </div>\n        </div>\n\n        @let groupHeight =\n          (group.highlightedOptions.length || (config().hasNoAddNew ? 1 : 2)) *\n            30 +\n          \"px\";\n        <div\n          class=\"dropdown-group\"\n          [class.collapsed]=\"group.isCollapsed\"\n          [style.--group-height]=\"groupHeight\"\n        >\n          @if (group.highlightedOptions.length) {\n            @for (\n              option of group.highlightedOptions;\n              track option?.id ?? $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  dropdownItemTemplate;\n                  context: { $implicit: option }\n                \"\n              ></ng-container>\n            }\n          } @else {\n            <ng-container\n              *ngTemplateOutlet=\"noResultsTemplate; context: { id: group.id }\"\n            ></ng-container>\n          }\n        </div>\n      </div>\n    }\n  } @else {\n    <ng-container\n      *ngTemplateOutlet=\"noResultsTemplate; context: { id: null }\"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #noResultsTemplate let-id=\"id\">\n  @if (!hasNoAddNew) {\n    <div class=\"dropdown-item add-new\" (pointerdown)=\"handleAddNew(id ?? null)\">\n      <p class=\"add-new-text\">ADD NEW</p>\n      <svg-icon name=\"cai-plus\" class=\"add-item-icon\"></svg-icon>\n    </div>\n  }\n  <div class=\"dropdown-item no-results\">\n    <p>No results</p>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItemTemplate let-option>\n  <div class=\"dropdown-item\" (pointerdown)=\"handleOption($event, option)\">\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplateLeft(); context: { $implicit: option }\"\n    ></ng-container>\n    <p [innerHTML]=\"option.highlighted\"></p>\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplateRight(); context: { $implicit: option }\"\n    ></ng-container>\n  </div>\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.dispatch-dropdown{height:34px;border-radius:3px;background-color:transparent;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),border-radius .1s cubic-bezier(.46,.03,.51,.95);isolation:isolate;padding:4px;display:flex;align-items:center}.dispatch-dropdown.editable{cursor:pointer}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked){cursor:pointer}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked) .no-content{opacity:1;pointer-events:auto}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover{background-color:#0b49d1}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover .primary-button-icon{color:#bed0f9}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover .default-add{color:#fff}.dispatch-dropdown.is-locked:not(.has-data) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-no-add:not(.open) .primary-button,.dispatch-dropdown.has-no-content-template:not(.open) .primary-button{opacity:0;pointer-events:none}.dispatch-dropdown.has-no-add:not(.open) .buttons-container,.dispatch-dropdown.has-no-content-template:not(.open) .buttons-container{width:0px}.dispatch-dropdown.has-no-add:not(.open) .primary-button-icon,.dispatch-dropdown.has-no-content-template:not(.open) .primary-button-icon{color:transparent!important;transform:rotate(45deg)}.dispatch-dropdown.has-no-add:not(.open):hover,.dispatch-dropdown.has-no-content-template:not(.open):hover{background-color:transparent!important}.dispatch-dropdown.has-no-content-template .no-content{margin-left:0!important}.dispatch-dropdown.has-no-add:not(.open) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-data:not(.open) .dispatch-template{opacity:1;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.dispatch-dropdown.has-data:not(.open) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-data:not(.open) .dropdown-input-container{opacity:0;pointer-events:none}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button{pointer-events:auto}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button .primary-button-icon{color:#919191;transform:rotate(45deg)}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button:hover:not(.disabled){background-color:#f4bebe!important}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button:hover:not(.disabled) .primary-button-icon{color:#c20c0c!important}.dispatch-dropdown.is-locked .buttons-container,.dispatch-dropdown.has-no-remove-button.has-data .buttons-container{width:0px}.dispatch-dropdown.open{background-color:#2f2f2f}.dispatch-dropdown.open .no-content{opacity:0;pointer-events:none}.dispatch-dropdown.open .dispatch-dropdown-input{opacity:1;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.dispatch-dropdown.open .primary-button-icon{transform:rotate(45deg);color:#919191}.dispatch-dropdown.open .dispatch-template{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.dispatch-dropdown.open .primary-button{pointer-events:auto}.dispatch-dropdown.open .primary-button:hover{background-color:#91919166!important}.dispatch-dropdown.open .primary-button:hover .primary-button-icon{color:#dadada!important}.main-container{position:relative;flex:1;height:26px}.dispatch-template{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:26px}.dispatch-template,.no-content,.dropdown-input-container{position:absolute;top:0;left:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.no-content{height:26px;display:flex;align-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:10px;-webkit-user-select:none;user-select:none}.default-add{color:#424242;font-size:11px;font-weight:500;text-transform:uppercase;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.buttons-container{position:relative;z-index:1;height:26px;-webkit-user-select:none;user-select:none;width:26px}.buttons-container.locked .primary-button{pointer-events:none!important;opacity:0}.buttons-container.dragging .dragging-indicator{opacity:1!important;pointer-events:auto}.buttons-container.dragging .primary-button{opacity:0!important;pointer-events:none}.buttons-container .primary-button{opacity:1;pointer-events:auto}.buttons-container .dragging-indicator{opacity:0;pointer-events:none}.primary-button,.dragging-indicator{position:absolute;bottom:0;right:0;z-index:1;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dragging-indicator{padding:4px;width:26px;height:26px}.primary-button{position:absolute;right:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:pointer;padding:4px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.primary-button .primary-button-icon{display:flex;align-items:center;justify-content:center;color:#6692f1;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95)}.primary-button .primary-button-icon svg{height:18px;width:18px}.primary-button.disabled{cursor:default}.primary-button.disabled .primary-button-icon{color:#ccc!important}.dropdown-input-container{padding:4px 8px 4px 6px;height:26px;display:flex;align-items:center;justify-content:flex-start}.dispatch-dropdown-input{height:18px;border:0;outline:none;background-color:transparent;color:#fff;padding:0;margin:0;width:100%;font-size:14px;font-weight:400;line-height:18px;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dispatch-dropdown-input ::placeholder{color:#6c6c6c}.dropdown-anchor{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:0;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-menu{min-width:0px!important;width:100%;background-color:transparent;border:0;padding:0!important;z-index:1100!important;height:var(--container-height);max-height:var(--container-height);transition:opacity .1s cubic-bezier(.46,.03,.51,.95)!important}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;padding:2px 0 4px 4px;background-color:#2f2f2f;max-height:var(--max-height);height:var(--max-height);overflow-y:scroll;scrollbar-gutter:stable}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:6px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{background-color:#919191;width:2px;border:2px solid #2f2f2f;border-radius:3px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:6px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.dropdown-menu .dropdown-menu-content{transition:max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s cubic-bezier(.46,.03,.51,.95)!important}@starting-style{.dropdown-menu .dropdown-menu-content{max-height:0;overflow-y:hidden}}.dropdown-menu .dropdown-menu-content{animation:dropdown-menu-opening .1s cubic-bezier(.46,.03,.51,.95)}@starting-style{.dropdown-menu{opacity:0;overflow-y:hidden}}.dropdown-menu.closing,.dropdown-menu.hide-dropdown{opacity:0}.dropdown-menu.closing .dropdown-menu-content,.dropdown-menu.hide-dropdown .dropdown-menu-content{max-height:0;overflow-y:hidden;animation:none}@keyframes dropdown-menu-opening{0%{overflow-y:hidden}99%{overflow-y:hidden}to{overflow-y:scroll}}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px 6px;width:100%;display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative;margin-top:4px}.dropdown-item:hover{background-color:#424242;color:#fff}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item p{flex-shrink:1;max-width:max-content;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-group-header{color:#fff;font-weight:700;font-size:11px;line-height:18px;height:30px;padding:8px 4px 4px;width:100%;display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);position:relative}.dropdown-group-header:hover{color:#fff!important}.dropdown-group-header:hover .dropdown-icon{opacity:1!important;color:#ffffffb3!important}.dropdown-group-header:hover .counter{opacity:0!important}.dropdown-group-header:focus-visible{border:0;outline:none}.dropdown-group-header p{flex-shrink:1;max-width:max-content;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px}.dropdown-group-header .dropdown-icon{transition:color .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);color:#ffffffb3;position:absolute;top:2px;right:2px;opacity:0}.dropdown-group-header .counter{display:flex;padding:1px 4px;flex-direction:column;justify-content:center;align-items:center;min-width:16px;color:#eee;text-align:center;font-size:11px;font-weight:600;line-height:14px;border-radius:60px;background-color:#424242;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-group-header.collapsed{color:#aaa}.dropdown-group-header.collapsed .counter{opacity:0}.dropdown-group-header.collapsed .dropdown-icon{color:#919191;transform:rotateX(180deg);opacity:1!important}.dropdown-group-container{position:relative}.dropdown-group-container:not(:nth-child(2)) .dropdown-group-header{border-top:1px solid #424242;margin-top:3px}.header-right{height:18px;padding-left:4px;position:relative;margin-left:auto}.dropdown-group{overflow:hidden;height:var(--group-height);max-height:var(--group-height);transition:height .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-group.collapsed{height:0;max-height:0}.no-results{color:#919191;font-weight:700;font-size:11px;line-height:14px;pointer-events:none}.dropdown-menu-separator{position:fixed;z-index:30;width:calc(100% - 8px);height:1px;background-color:transparent;border-bottom:1px solid #424242;margin-top:-1px}.add-new{font-size:11px;line-height:14px;font-weight:700;color:#92b1f5;border-radius:2px;background-color:transparent;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95)}.add-new:hover{background-color:#3b73ed66;color:#fff}.add-new .add-item-icon{opacity:1;color:#92b1f5;margin-left:auto}\n"] }]
+                    ], template: "@let hasNoAdd = config().hasNoAdd ?? false;\n@let hasNoAddNew = config().hasNoAddNew ?? false;\n@let optionLabel = config().optionLabel ?? \"name\";\n@let groupLabel = config().groupLabel ?? \"name\";\n\n<div\n  #container\n  class=\"dispatch-dropdown\"\n  [attr.data-testid]=\"containerTestId()\"\n  [ngClass]=\"{\n    open: dropdownOpen(),\n    'has-data': !!data(),\n    'is-locked': isLocked(),\n    'has-no-remove-button': hasNoRemoveButton(),\n    'has-no-add': hasNoAdd,\n    'has-no-content-template': noContentTemplate(),\n    editable: isEditable(),\n  }\"\n  ngbDropdown\n  #dropdown=\"ngbDropdown\"\n  dropdownClass=\"cai-dropdown\"\n  [autoClose]=\"false\"\n  [container]=\"'body'\"\n  (pointerdown)=\"handleClick($event)\"\n  (openChange)=\"handleOpenChange($event)\"\n>\n  <div class=\"main-container\">\n    <div class=\"dispatch-template\">\n      @if (data()) {\n        <ng-container\n          *ngTemplateOutlet=\"contentTemplate(); context: { $implicit: data() }\"\n        ></ng-container>\n      }\n    </div>\n\n    <div class=\"no-content\">\n      @if (noContentTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            noContentTemplate();\n            context: { $implicit: data() }\n          \"\n        ></ng-container>\n      } @else {\n        <span class=\"default-add\">ADD</span>\n      }\n    </div>\n\n    <div class=\"dropdown-input-container\">\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"dispatch-dropdown-input\"\n        [attr.data-testid]=\"inputTestId()\"\n        [tabIndex]=\"!!data() || isLocked() ? -1 : 0\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"handleBlur()\"\n        (keydown)=\"handleKeydown($event)\"\n        [placeholder]=\"config().placeholder\"\n        [(ngModel)]=\"searchValue\"\n        (input)=\"handleSearch($event)\"\n      />\n    </div>\n  </div>\n\n  @let isButtonLocked =\n    isLocked() || (hasNoRemoveButton() && !!data() && !isEditable());\n\n  @let buttonTooltip =\n    isDisabled()\n      ? disabledTooltip()\n      : dropdownOpen()\n        ? \"Cancel\"\n        : data()\n          ? \"Remove\"\n          : \"\";\n\n  @let buttonTooltipClass =\n    isDisabled()\n      ? \"input-tooltip tooltip-m-t-4\"\n      : dropdownOpen() || !data() || isEditable()\n        ? \"input-tooltip tooltip-m-t-4 tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"input-tooltip tooltip-m-t-4 tooltip-bg-red-500\";\n\n  <div class=\"buttons-container\" [class.locked]=\"isButtonLocked\">\n    <div\n      class=\"primary-button\"\n      [attr.data-testid]=\"addButtonTestId()\"\n      [class.disabled]=\"isDisabled()\"\n      (pointerdown)=\"isDisabled() ? null : handlePrimaryButtonClick($event)\"\n      [ngbTooltip]=\"buttonTooltip\"\n      [tooltipClass]=\"buttonTooltipClass\"\n      [container]=\"'body'\"\n      [autoClose]=\"true\"\n      [openDelay]=\"600\"\n      [placement]=\"'bottom'\"\n    >\n      <svg-icon name=\"cai-plus\" class=\"primary-button-icon\"></svg-icon>\n    </div>\n    <div class=\"dragging-indicator\">\n      <svg-icon name=\"cai-drag\" class=\"dragging-icon\"></svg-icon>\n    </div>\n  </div>\n\n  <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\n\n  <div\n    class=\"dropdown-menu dispatch-dropdown-menu\"\n    [attr.data-testid]=\"menuTestId()\"\n    [class.hide-dropdown]=\"hideDropdownMenu()\"\n    #dropdownMenu\n    ngbDropdownMenu\n    (click)=\"stopEventPropagationAndPreventDefault($event)\"\n    (pointerdown)=\"stopEventPropagationAndPreventDefault($event)\"\n    [style.width.px]=\"containerWidth()\"\n    [class.closing]=\"closing()\"\n    [style.--max-height]=\"\n      config().isGrouped ? groupMaxHeightStyle() : maxHeightStyle()\n    \"\n    [style.--container-height]=\"\n      config().hasPagination || config().isGrouped\n        ? '244px'\n        : containerHeightStyle()\n    \"\n  >\n    <div class=\"dropdown-menu-content\">\n      <div class=\"dropdown-menu-separator\"></div>\n\n      @if (config().isGrouped) {\n        <ng-container *ngTemplateOutlet=\"groupedOptionsTemplate\"></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"optionsTemplate\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #optionsTemplate>\n  @if (highlightedOptions().length) {\n    @for (option of highlightedOptions(); track option?.id ?? $index) {\n      <ng-container\n        *ngTemplateOutlet=\"dropdownItemTemplate; context: { $implicit: option }\"\n      ></ng-container>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"noResultsTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #groupedOptionsTemplate>\n  @if (filteredGroupedOptions().length) {\n    @for (group of filteredGroupedOptions(); track group?.id ?? $index) {\n      <div class=\"dropdown-group-container\">\n        <div\n          class=\"dropdown-group-header\"\n          [class.collapsed]=\"group.isCollapsed\"\n          (pointerdown)=\"toggleGroup($event, group.groupName)\"\n        >\n          <p class=\"dropdown-group-label\" [innerHTML]=\"group.groupName\"></p>\n          <div class=\"header-right\">\n            <div class=\"counter\">{{ group.highlightedOptions.length }}</div>\n            <svg-icon\n              name=\"cai-arrow-primary-up\"\n              class=\"dropdown-icon\"\n            ></svg-icon>\n          </div>\n        </div>\n\n        @let groupHeight =\n          (group.highlightedOptions.length || (config().hasNoAddNew ? 1 : 2)) *\n            30 +\n          \"px\";\n        <div\n          class=\"dropdown-group\"\n          [class.collapsed]=\"group.isCollapsed\"\n          [style.--group-height]=\"groupHeight\"\n        >\n          @if (group.highlightedOptions.length) {\n            @for (\n              option of group.highlightedOptions;\n              track option?.id ?? $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  dropdownItemTemplate;\n                  context: { $implicit: option }\n                \"\n              ></ng-container>\n            }\n          } @else {\n            <ng-container\n              *ngTemplateOutlet=\"noResultsTemplate; context: { id: group.id }\"\n            ></ng-container>\n          }\n        </div>\n      </div>\n    }\n  } @else {\n    <ng-container\n      *ngTemplateOutlet=\"noResultsTemplate; context: { id: null }\"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #noResultsTemplate let-id=\"id\">\n  @if (!hasNoAddNew) {\n    <div\n      class=\"dropdown-item add-new\"\n      [attr.data-testid]=\"id ? buildTestId('add-new-' + id) : addNewTestId()\"\n      (pointerdown)=\"handleAddNew(id ?? null)\"\n    >\n      <p class=\"add-new-text\">ADD NEW</p>\n      <svg-icon name=\"cai-plus\" class=\"add-item-icon\"></svg-icon>\n    </div>\n  }\n  <div class=\"dropdown-item no-results\">\n    <p>No results</p>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItemTemplate let-option>\n  <div\n    class=\"dropdown-item\"\n    [attr.data-testid]=\"\n      option.id != null ? buildTestId('option-' + option.id) : null\n    \"\n    (pointerdown)=\"handleOption($event, option)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplateLeft(); context: { $implicit: option }\"\n    ></ng-container>\n    <p [innerHTML]=\"option.highlighted\"></p>\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplateRight(); context: { $implicit: option }\"\n    ></ng-container>\n  </div>\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.dispatch-dropdown{height:34px;border-radius:3px;background-color:transparent;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),border-radius .1s cubic-bezier(.46,.03,.51,.95);isolation:isolate;padding:4px;display:flex;align-items:center}.dispatch-dropdown.editable{cursor:pointer}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked){cursor:pointer}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked) .no-content{opacity:1;pointer-events:auto}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover{background-color:#0b49d1}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover .primary-button-icon{color:#bed0f9}.dispatch-dropdown:not(.open):not(.has-data):not(.is-locked):hover .default-add{color:#fff}.dispatch-dropdown.is-locked:not(.has-data) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-no-add:not(.open) .primary-button,.dispatch-dropdown.has-no-content-template:not(.open) .primary-button{opacity:0;pointer-events:none}.dispatch-dropdown.has-no-add:not(.open) .buttons-container,.dispatch-dropdown.has-no-content-template:not(.open) .buttons-container{width:0px}.dispatch-dropdown.has-no-add:not(.open) .primary-button-icon,.dispatch-dropdown.has-no-content-template:not(.open) .primary-button-icon{color:transparent!important;transform:rotate(45deg)}.dispatch-dropdown.has-no-add:not(.open):hover,.dispatch-dropdown.has-no-content-template:not(.open):hover{background-color:transparent!important}.dispatch-dropdown.has-no-content-template .no-content{margin-left:0!important}.dispatch-dropdown.has-no-add:not(.open) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-data:not(.open) .dispatch-template{opacity:1;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.dispatch-dropdown.has-data:not(.open) .no-content{opacity:0!important;pointer-events:none!important}.dispatch-dropdown.has-data:not(.open) .dropdown-input-container{opacity:0;pointer-events:none}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button{pointer-events:auto}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button .primary-button-icon{color:#919191;transform:rotate(45deg)}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button:hover:not(.disabled){background-color:#f4bebe!important}.dispatch-dropdown.has-data:not(.open):not(.editable) .primary-button:hover:not(.disabled) .primary-button-icon{color:#c20c0c!important}.dispatch-dropdown.is-locked .buttons-container,.dispatch-dropdown.has-no-remove-button.has-data .buttons-container{width:0px}.dispatch-dropdown.open{background-color:#2f2f2f}.dispatch-dropdown.open .no-content{opacity:0;pointer-events:none}.dispatch-dropdown.open .dispatch-dropdown-input{opacity:1;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.dispatch-dropdown.open .primary-button-icon{transform:rotate(45deg);color:#919191}.dispatch-dropdown.open .dispatch-template{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.dispatch-dropdown.open .primary-button{pointer-events:auto}.dispatch-dropdown.open .primary-button:hover{background-color:#91919166!important}.dispatch-dropdown.open .primary-button:hover .primary-button-icon{color:#dadada!important}.main-container{position:relative;flex:1;height:26px}.dispatch-template{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:26px}.dispatch-template,.no-content,.dropdown-input-container{position:absolute;top:0;left:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.no-content{height:26px;display:flex;align-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:10px;-webkit-user-select:none;user-select:none}.default-add{color:#424242;font-size:11px;font-weight:500;text-transform:uppercase;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.buttons-container{position:relative;z-index:1;height:26px;-webkit-user-select:none;user-select:none;width:26px}.buttons-container.locked .primary-button{pointer-events:none!important;opacity:0}.buttons-container.dragging .dragging-indicator{opacity:1!important;pointer-events:auto}.buttons-container.dragging .primary-button{opacity:0!important;pointer-events:none}.buttons-container .primary-button{opacity:1;pointer-events:auto}.buttons-container .dragging-indicator{opacity:0;pointer-events:none}.primary-button,.dragging-indicator{position:absolute;bottom:0;right:0;z-index:1;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dragging-indicator{padding:4px;width:26px;height:26px}.primary-button{position:absolute;right:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:pointer;padding:4px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.primary-button .primary-button-icon{display:flex;align-items:center;justify-content:center;color:#6692f1;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95)}.primary-button .primary-button-icon svg{height:18px;width:18px}.primary-button.disabled{cursor:default}.primary-button.disabled .primary-button-icon{color:#ccc!important}.dropdown-input-container{padding:4px 8px 4px 6px;height:26px;display:flex;align-items:center;justify-content:flex-start}.dispatch-dropdown-input{height:18px;border:0;outline:none;background-color:transparent;color:#fff;padding:0;margin:0;width:100%;font-size:14px;font-weight:400;line-height:18px;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dispatch-dropdown-input ::placeholder{color:#6c6c6c}.dropdown-anchor{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:0;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-menu{min-width:0px!important;width:100%;background-color:transparent;border:0;padding:0!important;z-index:1100!important;height:var(--container-height);max-height:var(--container-height);transition:opacity .1s cubic-bezier(.46,.03,.51,.95)!important}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;padding:2px 0 4px 4px;background-color:#2f2f2f;max-height:var(--max-height);height:var(--max-height);overflow-y:scroll;scrollbar-gutter:stable}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:6px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{background-color:#919191;width:2px;border:2px solid #2f2f2f;border-radius:3px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:6px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.dropdown-menu .dropdown-menu-content{transition:max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s cubic-bezier(.46,.03,.51,.95)!important}@starting-style{.dropdown-menu .dropdown-menu-content{max-height:0;overflow-y:hidden}}.dropdown-menu .dropdown-menu-content{animation:dropdown-menu-opening .1s cubic-bezier(.46,.03,.51,.95)}@starting-style{.dropdown-menu{opacity:0;overflow-y:hidden}}.dropdown-menu.closing,.dropdown-menu.hide-dropdown{opacity:0}.dropdown-menu.closing .dropdown-menu-content,.dropdown-menu.hide-dropdown .dropdown-menu-content{max-height:0;overflow-y:hidden;animation:none}@keyframes dropdown-menu-opening{0%{overflow-y:hidden}99%{overflow-y:hidden}to{overflow-y:scroll}}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px 6px;width:100%;display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative;margin-top:4px}.dropdown-item:hover{background-color:#424242;color:#fff}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item p{flex-shrink:1;max-width:max-content;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-group-header{color:#fff;font-weight:700;font-size:11px;line-height:18px;height:30px;padding:8px 4px 4px;width:100%;display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);position:relative}.dropdown-group-header:hover{color:#fff!important}.dropdown-group-header:hover .dropdown-icon{opacity:1!important;color:#ffffffb3!important}.dropdown-group-header:hover .counter{opacity:0!important}.dropdown-group-header:focus-visible{border:0;outline:none}.dropdown-group-header p{flex-shrink:1;max-width:max-content;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px}.dropdown-group-header .dropdown-icon{transition:color .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);color:#ffffffb3;position:absolute;top:2px;right:2px;opacity:0}.dropdown-group-header .counter{display:flex;padding:1px 4px;flex-direction:column;justify-content:center;align-items:center;min-width:16px;color:#eee;text-align:center;font-size:11px;font-weight:600;line-height:14px;border-radius:60px;background-color:#424242;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-group-header.collapsed{color:#aaa}.dropdown-group-header.collapsed .counter{opacity:0}.dropdown-group-header.collapsed .dropdown-icon{color:#919191;transform:rotateX(180deg);opacity:1!important}.dropdown-group-container{position:relative}.dropdown-group-container:not(:nth-child(2)) .dropdown-group-header{border-top:1px solid #424242;margin-top:3px}.header-right{height:18px;padding-left:4px;position:relative;margin-left:auto}.dropdown-group{overflow:hidden;height:var(--group-height);max-height:var(--group-height);transition:height .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-group.collapsed{height:0;max-height:0}.no-results{color:#919191;font-weight:700;font-size:11px;line-height:14px;pointer-events:none}.dropdown-menu-separator{position:fixed;z-index:30;width:calc(100% - 8px);height:1px;background-color:transparent;border-bottom:1px solid #424242;margin-top:-1px}.add-new{font-size:11px;line-height:14px;font-weight:700;color:#92b1f5;border-radius:2px;background-color:transparent;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95)}.add-new:hover{background-color:#3b73ed66;color:#fff}.add-new .add-item-icon{opacity:1;color:#92b1f5;margin-left:auto}\n"] }]
         }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: ['dropdown']
@@ -11272,7 +11293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
-            }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], isLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocked", required: false }] }], hasNoRemoveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNoRemoveButton", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], disabledTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledTooltip", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }], optionTemplateLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplateLeft", required: false }] }], optionTemplateRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplateRight", required: false }] }], noContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noContentTemplate", required: false }] }], hideDropdownMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDropdownMenu", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onAddNew: [{ type: i0.Output, args: ["onAddNew"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onToggleDropdown: [{ type: i0.Output, args: ["onToggleDropdown"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
+            }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], isLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocked", required: false }] }], hasNoRemoveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNoRemoveButton", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], disabledTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledTooltip", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }], optionTemplateLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplateLeft", required: false }] }], optionTemplateRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplateRight", required: false }] }], noContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noContentTemplate", required: false }] }], hideDropdownMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDropdownMenu", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onAddNew: [{ type: i0.Output, args: ["onAddNew"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onToggleDropdown: [{ type: i0.Output, args: ["onToggleDropdown"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
 
 // Angular
 /**
@@ -11658,7 +11679,7 @@ class DispatchLocationComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DispatchLocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DispatchLocationComponent, isStandalone: true, selector: "cai-dispatch-location", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, locationData: { classPropertyName: "locationData", publicName: "locationData", isSignal: true, isRequired: false, transformFunction: null }, highlightedLocationString: { classPropertyName: "highlightedLocationString", publicName: "highlightedLocationString", isSignal: true, isRequired: false, transformFunction: null }, lastStatusData: { classPropertyName: "lastStatusData", publicName: "lastStatusData", isSignal: true, isRequired: false, transformFunction: null }, isParking: { classPropertyName: "isParking", publicName: "isParking", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, parkingName: { classPropertyName: "parkingName", publicName: "parkingName", isSignal: true, isRequired: false, transformFunction: null }, receivedAddressData: { classPropertyName: "receivedAddressData", publicName: "receivedAddressData", isSignal: false, isRequired: false, transformFunction: null }, receivedAddressList: { classPropertyName: "receivedAddressList", publicName: "receivedAddressList", isSignal: false, isRequired: false, transformFunction: null }, parkingList: { classPropertyName: "parkingList", publicName: "parkingList", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectedAddress: "selectedAddress", sentAddressData: "sentAddressData", sentAddressValue: "sentAddressValue", onClear: "onClear", onToggleDropdown: "onToggleDropdown", onBlur: "onBlur" }, viewQueries: [{ propertyName: "dispatchDropdown", first: true, predicate: ["dispatchDropdown"], descendants: true }], ngImport: i0, template: "<cai-dispatch-dropdown\n  #dispatchDropdown\n  [hasNoRemoveButton]=\"true\"\n  [isLocked]=\"false\"\n  [data]=\"locationData()\"\n  [options]=\"options\"\n  [config]=\"config\"\n  [hideDropdownMenu]=\"hideDropdownMenu()\"\n  [optionTemplateRight]=\"rightOptionTemplate\"\n  [contentTemplate]=\"contentTemplate\"\n  [isEditable]=\"isEditable()\"\n  (onSearch)=\"handleSearch($event)\"\n  (onSelectionChange)=\"handleAddressSelect($event)\"\n  (onToggleDropdown)=\"handleToggleDropdown($event)\"\n  (onBlur)=\"handleBlur()\"\n>\n</cai-dispatch-dropdown>\n\n<ng-template #contentTemplate let-data>\n  @let city = data?.city;\n  @let stateShortName = data?.stateShortName;\n\n  @let fullAddress =\n    city && stateShortName\n      ? city + \", \" + stateShortName\n      : city || stateShortName;\n\n  <div\n    class=\"content-wrapper\"\n    [ngbTooltip]=\"isEditable() ? 'Update Location' : null\"\n    [tooltipClass]=\"'input-tooltip tooltip-m-t-4'\"\n    [container]=\"'body'\"\n    [autoClose]=\"true\"\n    [openDelay]=\"600\"\n    [placement]=\"'bottom'\"\n  >\n    <div class=\"content-container\">\n      <div class=\"address-text-container\">\n        <div class=\"address-text\" [innerHTML]=\"highlightedLocationString()\">\n          {{ fullAddress }}\n        </div>\n      </div>\n      <div class=\"status-text\">\n        <span class=\"last-status-text\">\n          {{ lastStatusData() | lastStatusFormat }}\n        </span>\n        <span class=\"parking-name-text\">\n          {{ parkingName() }}\n        </span>\n      </div>\n    </div>\n    @if (showParkingIcon()) {\n      <div class=\"parking-icon-container\">\n        <svg-icon name=\"cai-parking\" class=\"parking-icon\"></svg-icon>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #rightOptionTemplate let-option>\n  @if (option?.parkingAddress?.length) {\n    <div\n      class=\"parking-icon-container\"\n      [ngbTooltip]=\"option?.parkingAddress?.[0]?.name\"\n      [tooltipClass]=\"\n        'input-tooltip tooltip-m-t-4 tooltip-bg-white-700 tooltip-text-black-500'\n      \"\n      [container]=\"'body'\"\n      [autoClose]=\"true\"\n      [openDelay]=\"600\"\n      [placement]=\"'bottom'\"\n    >\n      <svg-icon name=\"cai-parking\" class=\"parking-icon\"></svg-icon>\n    </div>\n  }\n</ng-template>\n", styles: [":host:hover .address-text-container{margin-bottom:-2px}:host:hover .status-text{height:14px;opacity:1}.content-wrapper{display:flex;align-items:center;justify-content:space-between;height:26px}.content-wrapper .parking-icon-container{width:26px;min-width:26px;height:26px;margin-left:2px}.content-wrapper .parking-icon-container .parking-icon svg{width:18px;height:18px}.content-wrapper .parking-icon-container:hover .parking-icon{color:#6c6c6c}.content-wrapper:has(.parking-icon-container:hover) .parking-name-text{display:block}.content-wrapper:has(.parking-icon-container:hover) .last-status-text{display:none}.parking-name-text{display:none}.parking-name-text::selection{background-color:#91919133!important}.last-status-text::selection{background-color:#91919133!important}.content-container{padding-left:6px;display:flex;flex-direction:column;flex-shrink:1;min-width:0}.status-text{color:#919191;font-size:11px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:0px;opacity:0;transition:height .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.status-text::selection{background-color:#91919133!important}.address-text-container{overflow-y:visible;height:14px;display:flex;align-items:center;margin-bottom:0;transition:margin-bottom .1s cubic-bezier(.46,.03,.51,.95)}.address-text{color:#2f2f2f;font-size:14px;line-height:18px;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.address-text::selection{background-color:#91919133}.parking-icon-container{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;width:18px;height:18px}.parking-icon-container:hover .parking-icon{color:#dadada}.parking-icon-container .parking-icon{color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.parking-icon-container .parking-icon svg{display:flex;align-items:center;justify-content:center;width:14px;height:14px}\n"], dependencies: [{ kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
                 // Components
-                DispatchDropdownComponent, selector: "cai-dispatch-dropdown", inputs: ["selectedOption", "options", "config", "isEditable", "data", "isLocked", "hasNoRemoveButton", "isDisabled", "disabledTooltip", "contentTemplate", "optionTemplateLeft", "optionTemplateRight", "noContentTemplate", "hideDropdownMenu"], outputs: ["onSelectionChange", "onRemove", "onAddNew", "onSearch", "onToggleDropdown", "onBlur"] }, { kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "pipe", type: 
+                DispatchDropdownComponent, selector: "cai-dispatch-dropdown", inputs: ["selectedOption", "options", "config", "isEditable", "data", "isLocked", "hasNoRemoveButton", "isDisabled", "disabledTooltip", "contentTemplate", "optionTemplateLeft", "optionTemplateRight", "noContentTemplate", "hideDropdownMenu", "testId"], outputs: ["onSelectionChange", "onRemove", "onAddNew", "onSearch", "onToggleDropdown", "onBlur"] }, { kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "pipe", type: 
                 // Pipes
                 LastStatusFormatPipe, name: "lastStatusFormat" }] });
 }