@cqa-lib/cqa-ui 1.1.364 → 1.1.366

package/esm2020/lib/test-case-details/element-popup/element-popup.component.mjs

@@ -221,7 +221,7 @@ export class ElementPopupComponent {
     }
 }
 ElementPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupComponent, deps: [{ token: CUSTOM_ELEMENT_POPUP_REF, optional: true }, { token: ELEMENT_POPUP_DATA, optional: true }, { token: i0.ChangeDetectorRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ElementPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementPopupComponent, selector: "cqa-element-popup", inputs: { value: "value", helpUrl: "helpUrl", labels: "labels", element: "element", elements: "elements", enableForm: "enableForm", isOnRecord: "isOnRecord", hasMoreElements: "hasMoreElements", elementId: "elementId", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", suggestedTags: "suggestedTags", isElementLoading: "isElementLoading", recentSearchedItems: "recentSearchedItems" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", searchElement: "searchElement", recentItemClick: "recentItemClick", loadMoreElements: "loadMoreElements", createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", formOpenRequest: "formOpenRequest", elementSelect: "elementSelect", toggleRecord: "toggleRecord" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "elementFormComponent", first: true, predicate: ElementFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\" style=\"width: 100%;\">\n  <!-- Header: title left; Need help? + close icon right -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Element\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <!-- Need help? with custom tooltip (works inside overlay) -->\n      <div class=\"cqa-relative cqa-inline-flex\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n        <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <ng-container *ngIf=\"enableForm && !isOnRecord\">\n    <cqa-element-form\n      #elementForm\n      [elementId]=\"elementId\"\n      [element]=\"element\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [isElementLoading]=\"isElementLoading\"\n      [isEditMode]=\"isEditMode\"\n      [isCreateMode]=\"isCreateMode\"\n      (createElement)=\"onElementFormCreate($event)\"\n      (updateElement)=\"onElementFormUpdate($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (cancel)=\"onElementFormCancel()\"\n      (editInDepth)=\"onEditInDepth()\">\n    </cqa-element-form>\n  </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n    <!-- Video Icon -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n      <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        \n    </div>\n\n    <!-- Title -->\n    <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n      Recording Mode Active\n    </h4>\n\n    <!-- Subtitle -->\n    <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n      Click on any element in the browser to capture it\n    </p>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n    <cqa-button\n      variant=\"outlined\"\n      btnSize=\"lg\"\n      [text]=\"'Cancel Recording'\"\n      (clicked)=\"onToggleRecordClick()\"\n      [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n    </cqa-button>\n  </div>\n</ng-container>\n\n\n  <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n  <!-- Selected -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-between\n             cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n             cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n      <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-min-w-0\">\n          <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827] cqa-min-w-0 cqa-flex-1\"\n          style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n          [matTooltip]=\"element.title\"\n          matTooltipPosition=\"above\">\n          {{element.title}}\n        </span>\n\n        <div class=\"cqa-flex cqa-gap-2 cqa-max-w-[80px] cqa-justify-end cqa-flex-wrap\">\n          <span *ngFor=\"let l of element.labels\"\n            class=\"cqa-text-[10px] cqa-px-1.5 cqa-py-0.5\n                  cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\"\n            style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n            [matTooltip]=\"l\"\n            matTooltipPosition=\"above\">\n            {{l}}\n          </span>\n        </div>\n      </div>\n\n      <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n          {{element.selector}}\n        </span>\n      </div>\n      <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Recent -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n    <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n      <div *ngFor=\"let item of recentSearchedItems\" \n        class=\"cqa-cursor-pointer cqa-inline-block\"\n        (click)=\"onRecentItemClick(item)\">\n        <cqa-badge  \n          class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n          [label]=\"item\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n\n  <!-- Element Library -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n    <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar>        \n  </div>\n\n  <cqa-element-list \n    [items]=\"elements\"\n    [selectedItem]=\"element\"\n    [titleKey]=\"'title'\"\n    [selectorKey]=\"'selector'\"\n    [labelsKey]=\"'labels'\"\n    [maxHeight]=\"'200px'\"\n    [hasMore]=\"hasMoreElements\"\n    (itemClick)=\"onElementClick($event)\"\n    (loadMore)=\"onLoadMoreElements()\">\n  </cqa-element-list>\n</div>\n\n\n      <!-- Footer: Cancel, Apply (full width in one row) -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n        </div>\n      </div>\n  </ng-container>\n\n</div>\n", components: [{ type: i1.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i2.ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }, { type: i3.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent"] }, { type: i4.SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i5.ElementListComponent, selector: "cqa-element-list", inputs: ["items", "titleKey", "selectorKey", "labelsKey", "screenNameObjectKey", "maxHeight", "selectedItem", "hasMore"], outputs: ["itemClick", "loadMore"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElementPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementPopupComponent, selector: "cqa-element-popup", inputs: { value: "value", helpUrl: "helpUrl", labels: "labels", element: "element", elements: "elements", enableForm: "enableForm", isOnRecord: "isOnRecord", hasMoreElements: "hasMoreElements", elementId: "elementId", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", suggestedTags: "suggestedTags", isElementLoading: "isElementLoading", recentSearchedItems: "recentSearchedItems" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", searchElement: "searchElement", recentItemClick: "recentItemClick", loadMoreElements: "loadMoreElements", createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", formOpenRequest: "formOpenRequest", elementSelect: "elementSelect", toggleRecord: "toggleRecord" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "elementFormComponent", first: true, predicate: ElementFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\" style=\"width: 100%;\">\n  <!-- Header: title left; Need help? + close icon right -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Element\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <!-- Need help? with custom tooltip (works inside overlay) -->\n      <div class=\"cqa-relative cqa-inline-flex\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n        <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <ng-container *ngIf=\"enableForm && !isOnRecord\">\n    <cqa-element-form\n      #elementForm\n      [elementId]=\"elementId\"\n      [element]=\"element\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [isElementLoading]=\"isElementLoading\"\n      [isEditMode]=\"isEditMode\"\n      [isCreateMode]=\"isCreateMode\"\n      (createElement)=\"onElementFormCreate($event)\"\n      (updateElement)=\"onElementFormUpdate($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (cancel)=\"onElementFormCancel()\"\n      (editInDepth)=\"onEditInDepth()\">\n    </cqa-element-form>\n  </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n    <!-- Video Icon -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n      <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        \n    </div>\n\n    <!-- Title -->\n    <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n      Recording Mode Active\n    </h4>\n\n    <!-- Subtitle -->\n    <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n      Click on any element in the browser to capture it\n    </p>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n    <cqa-button\n      variant=\"outlined\"\n      btnSize=\"lg\"\n      [text]=\"'Cancel Recording'\"\n      (clicked)=\"onToggleRecordClick()\"\n      [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n    </cqa-button>\n  </div>\n</ng-container>\n\n\n  <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n  <!-- Selected -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-between\n             cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n             cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n      <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-min-w-0\">\n          <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827] cqa-min-w-0 cqa-flex-1\"\n          style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n          [matTooltip]=\"element.title\"\n          matTooltipPosition=\"above\">\n          {{element.title}}\n        </span>\n\n        <div class=\"cqa-flex cqa-gap-2 cqa-max-w-[80px] cqa-justify-end cqa-flex-wrap\">\n          <span *ngFor=\"let l of element.labels\"\n            class=\"cqa-text-[10px] cqa-px-1.5 cqa-py-0.5\n                  cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\"\n            style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n            [matTooltip]=\"l\"\n            matTooltipPosition=\"above\">\n            {{l}}\n          </span>\n        </div>\n      </div>\n\n      <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n          {{element.selector}}\n        </span>\n      </div>\n      <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Recent -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n    <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n      <div *ngFor=\"let item of recentSearchedItems\" \n        class=\"cqa-cursor-pointer cqa-inline-block\"\n        (click)=\"onRecentItemClick(item)\">\n        <cqa-badge  \n          class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n          [label]=\"item\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n\n  <!-- Element Library -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n    <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar>        \n  </div>\n\n  <cqa-element-list \n    [items]=\"elements\"\n    [selectedItem]=\"element\"\n    [titleKey]=\"'title'\"\n    [selectorKey]=\"'selector'\"\n    [labelsKey]=\"'labels'\"\n    [maxHeight]=\"'200px'\"\n    [hasMore]=\"hasMoreElements\"\n    (itemClick)=\"onElementClick($event)\"\n    (loadMore)=\"onLoadMoreElements()\">\n  </cqa-element-list>\n</div>\n\n\n      <!-- Footer: Cancel, Apply (full width in one row) -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n        </div>\n      </div>\n  </ng-container>\n\n</div>\n", components: [{ type: i1.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i2.ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }, { type: i3.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: i4.SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i5.ElementListComponent, selector: "cqa-element-list", inputs: ["items", "titleKey", "selectorKey", "labelsKey", "screenNameObjectKey", "maxHeight", "selectedItem", "hasMore"], outputs: ["itemClick", "loadMore"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-element-popup', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\" style=\"width: 100%;\">\n  <!-- Header: title left; Need help? + close icon right -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Element\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <!-- Need help? with custom tooltip (works inside overlay) -->\n      <div class=\"cqa-relative cqa-inline-flex\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n        <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <ng-container *ngIf=\"enableForm && !isOnRecord\">\n    <cqa-element-form\n      #elementForm\n      [elementId]=\"elementId\"\n      [element]=\"element\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [isElementLoading]=\"isElementLoading\"\n      [isEditMode]=\"isEditMode\"\n      [isCreateMode]=\"isCreateMode\"\n      (createElement)=\"onElementFormCreate($event)\"\n      (updateElement)=\"onElementFormUpdate($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (cancel)=\"onElementFormCancel()\"\n      (editInDepth)=\"onEditInDepth()\">\n    </cqa-element-form>\n  </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n    <!-- Video Icon -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n      <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        \n    </div>\n\n    <!-- Title -->\n    <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n      Recording Mode Active\n    </h4>\n\n    <!-- Subtitle -->\n    <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n      Click on any element in the browser to capture it\n    </p>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n    <cqa-button\n      variant=\"outlined\"\n      btnSize=\"lg\"\n      [text]=\"'Cancel Recording'\"\n      (clicked)=\"onToggleRecordClick()\"\n      [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n    </cqa-button>\n  </div>\n</ng-container>\n\n\n  <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n  <!-- Selected -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-between\n             cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n             cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n      <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-min-w-0\">\n          <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827] cqa-min-w-0 cqa-flex-1\"\n          style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n          [matTooltip]=\"element.title\"\n          matTooltipPosition=\"above\">\n          {{element.title}}\n        </span>\n\n        <div class=\"cqa-flex cqa-gap-2 cqa-max-w-[80px] cqa-justify-end cqa-flex-wrap\">\n          <span *ngFor=\"let l of element.labels\"\n            class=\"cqa-text-[10px] cqa-px-1.5 cqa-py-0.5\n                  cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\"\n            style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n            [matTooltip]=\"l\"\n            matTooltipPosition=\"above\">\n            {{l}}\n          </span>\n        </div>\n      </div>\n\n      <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n          {{element.selector}}\n        </span>\n      </div>\n      <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Recent -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n    <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n      <div *ngFor=\"let item of recentSearchedItems\" \n        class=\"cqa-cursor-pointer cqa-inline-block\"\n        (click)=\"onRecentItemClick(item)\">\n        <cqa-badge  \n          class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n          [label]=\"item\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n\n  <!-- Element Library -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n    <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar>        \n  </div>\n\n  <cqa-element-list \n    [items]=\"elements\"\n    [selectedItem]=\"element\"\n    [titleKey]=\"'title'\"\n    [selectorKey]=\"'selector'\"\n    [labelsKey]=\"'labels'\"\n    [maxHeight]=\"'200px'\"\n    [hasMore]=\"hasMoreElements\"\n    (itemClick)=\"onElementClick($event)\"\n    (loadMore)=\"onLoadMoreElements()\">\n  </cqa-element-list>\n</div>\n\n\n      <!-- Footer: Cancel, Apply (full width in one row) -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n        </div>\n      </div>\n  </ng-container>\n\n</div>\n" }]