@yuuvis/client-framework 3.23.0 → 3.24.0

package/fesm2022/yuuvis-client-framework-smart-search.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Injectable, input, ChangeDetectionStrategy, Component, ElementRef, output, viewChild, effect, NgModule } from '@angular/core';
+import { inject, signal, computed, Injectable, input, ChangeDetectionStrategy, Component, ElementRef, Injector, output, viewChild, effect, afterNextRender, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -1710,10 +1710,12 @@ const IME_KEY_CODE = 229;
  */
 class SmartSearchComponent {
     #host;
+    #injector;
     /** Previous activeContainer value — used to detect transitions for focus management. */
     #prevActiveContainer;
     constructor() {
         this.#host = inject((ElementRef));
+        this.#injector = inject(Injector);
         this.ctrl = inject(SmartSearchEditController);
         /**
          * Object-type ids that may be searched — the scope of the whole search. Restricts
@@ -2008,7 +2010,14 @@ class SmartSearchComponent {
     }
     /** Mark/unmark a committed condition as dynamic (surfaced in the fill-out form). */
     toggleDynamic(container, condition) {
+        // Toggling replaces the condition object, and the chip list tracks by identity, so the
+        // chip is re-created and a focused toggle would drop focus to <body>. Chips keep their
+        // order, so hand focus to the toggle at the same position once the new chip is rendered.
+        const toggles = () => Array.from(this.#host.nativeElement.querySelectorAll('.condition-chip__dynamic'));
+        const index = toggles().indexOf(document.activeElement);
         this.ctrl.setConditionDynamic(container, condition, !condition.dynamic);
+        if (index >= 0)
+            afterNextRender(() => toggles()[index]?.focus(), { injector: this.#injector });
     }
     /**
      * Set the top-level combinator joining the query units (the full-text unit and
@@ -2366,7 +2375,15 @@ class SmartSearchComponent {
     }
     /** Remove a committed condition from its container. */
     removeCondition(container, condition) {
+        // Removing the chip that holds focus would drop it to <body>. Remember where the chip sat
+        // in its block so focus can land on its successor (or predecessor) once it is gone.
+        const chip = document.activeElement?.closest('.condition-chip');
+        const blockId = chip?.closest('.block')?.dataset['blockId'];
+        const index = chip && blockId ? this.#blockChips(blockId).indexOf(chip) : -1;
         this.ctrl.removeCondition(container, condition);
+        if (blockId && index >= 0) {
+            afterNextRender(() => this.#focusAfterRemoval(blockId, index), { injector: this.#injector });
+        }
     }
     /**
      * Renderer input for a committed condition's value, or `null` when the value
@@ -2501,12 +2518,27 @@ class SmartSearchComponent {
         // the Enter that submits the search. Typing reopens it.
         this.trigger()?.closePanel();
     }
+    /** The condition chips of a block, in DOM (reading) order. */
+    #blockChips(blockId) {
+        return Array.from(this.#host.nativeElement.querySelectorAll(`.block[data-block-id="${blockId}"] .condition-chip`));
+    }
+    /**
+     * Focus the chip that took the removed chip's place, the new last chip when the last one
+     * was removed, or the block's "Add condition" button once the block has no chips left.
+     */
+    #focusAfterRemoval(blockId, index) {
+        const chips = this.#blockChips(blockId);
+        if (chips.length)
+            chips[Math.min(index, chips.length - 1)].focus();
+        else
+            this.#focusAddCondition(blockId);
+    }
     /** Focus the "Add condition" (+) button of a block — used after confirming its types. */
     #focusAddCondition(blockId) {
         this.#host.nativeElement.querySelector(`.block[data-block-id="${blockId}"] .add-condition-btn`)?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SmartSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SmartSearchComponent, isStandalone: true, selector: "yuv-smart-search", inputs: { types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: false, transformFunction: null }, ignoreTypePermissions: { classPropertyName: "ignoreTypePermissions", publicName: "ignoreTypePermissions", isSignal: true, isRequired: false, transformFunction: null }, skipProperties: { classPropertyName: "skipProperties", publicName: "skipProperties", isSignal: true, isRequired: false, transformFunction: null }, fulltextOnly: { classPropertyName: "fulltextOnly", publicName: "fulltextOnly", isSignal: true, isRequired: false, transformFunction: null }, supportDynamicConditions: { classPropertyName: "supportDynamicConditions", publicName: "supportDynamicConditions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryChange: "queryChange", querySubmit: "querySubmit" }, host: { listeners: { "keydown.enter": "onHostEnter($event)" } }, providers: [SmartSearchEditController], viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"smart-search\" halo-container halo-container-skip=\"true\">\n  <!-- Condition chip template \u2014 passed down into the recursive group component. -->\n  <ng-template #chipTpl let-condition let-container=\"container\" let-i=\"index\">\n    <div\n      class=\"condition-chip\"\n      [class.condition-chip--unset]=\"isUnset(condition)\"\n      [class.condition-chip--dynamic]=\"condition.dynamic\"\n      tabindex=\"0\"\n      role=\"button\"\n      [attr.aria-label]=\"'yuv.smart-search.condition.edit-aria' | translate: { label: condition.conditionLabel }\"\n      (click)=\"editCondition(container, condition, i)\"\n      (keydown.space)=\"$event.preventDefault(); editCondition(container, condition, i)\"\n      (keydown.enter)=\"$event.preventDefault(); editCondition(container, condition, i)\"\n    >\n      @if (supportDynamicConditions() && !isValueless(condition.operator)) {\n        <button\n          ymtIconButton\n          icon-button-size=\"extra-small\"\n          class=\"condition-chip__dynamic\"\n          tabindex=\"-1\"\n          [attr.aria-pressed]=\"!!condition.dynamic\"\n          [matTooltip]=\"\n            (condition.dynamic\n              ? 'yuv.smart-search.condition.unmark-dynamic'\n              : 'yuv.smart-search.condition.mark-dynamic'\n            ) | translate\n          \"\n          (click)=\"$event.stopPropagation(); toggleDynamic(container, condition)\"\n        >\n          <mat-icon>bolt</mat-icon>\n        </button>\n      }\n\n      <span class=\"condition-chip__part condition-chip__field\">\n        <!-- <mat-icon>tune</mat-icon> -->\n        {{ condition.fieldLabel }}\n      </span>\n      <span class=\"condition-chip__part condition-chip__op\">{{ condition.operatorLabel }}</span>\n      <!-- A valueless operator states the whole condition on its own (`is empty`, or a date\n           preset whose label already reads \u201CThis year\u201D), so it gets no value segment: the\n           stored value is an internal marker (`thisYear`), not something to show the user. -->\n      @if (!isValueless(condition.operator)) {\n        <span class=\"condition-chip__part condition-chip__value\">\n          @if (isUnset(condition)) {\n            <span class=\"condition-chip__placeholder\">{{ 'yuv.smart-search.condition.unset-value' | translate }}</span>\n          } @else if (valueRendererInput(condition); as rendererInput) {\n            <ng-container *yuvRenderer=\"rendererInput\" />\n          } @else {\n            {{ condition.value }}\n          }\n        </span>\n      }\n      <!-- @if (supportDynamicConditions() && !isValueless(condition.operator)) {\n        <button\n          ymtIconButton\n          icon-button-size=\"extra-small\"\n          class=\"condition-chip__dynamic\"\n          tabindex=\"-1\"\n          [attr.aria-pressed]=\"!!condition.dynamic\"\n          [matTooltip]=\"\n            (condition.dynamic\n              ? 'yuv.smart-search.condition.unmark-dynamic'\n              : 'yuv.smart-search.condition.mark-dynamic'\n            ) | translate\n          \"\n          (click)=\"$event.stopPropagation(); toggleDynamic(container, condition)\"\n        >\n          <mat-icon>bolt</mat-icon>\n        </button>\n      } -->\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"condition-chip__remove\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'yuv.smart-search.condition.remove' | translate\"\n        (click)=\"$event.stopPropagation(); removeCondition(container, condition)\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <!-- Inline editor template \u2014 rendered inside whichever container is active. -->\n  <ng-template #editorTpl>\n    <!-- Enter is bound on the wrapper, not per input, so it also covers the value step's\n         real metadata widget and runs after each widget's own key handling. -->\n    <div\n      class=\"inline-input\"\n      tabindex=\"-1\"\n      (focusout)=\"onInlineBlur($event)\"\n      (keydown.enter)=\"onEnter($event)\"\n      (keydown.escape)=\"cancelPending()\"\n    >\n      @if (ctrl.step() !== 'field' && ctrl.pendingField()) {\n        <button\n          class=\"part-pill\"\n          [class.part-pill--active]=\"ctrl.step() === 'field'\"\n          (click)=\"editField()\"\n          [matTooltip]=\"'yuv.smart-search.field.change' | translate\"\n        >\n          {{ ctrl.pendingField()?.label }}\n        </button>\n      }\n\n      <!-- The operator is always a pill, never editable text: at the value step it is the\n           way back to the operator picker, and at the operator step it shows what is\n           currently set while the (empty) input below filters the replacement list. -->\n      @if (ctrl.step() !== 'field' && ctrl.pendingOperatorLabel()) {\n        <button\n          class=\"part-pill\"\n          [class.part-pill--active]=\"ctrl.step() === 'operator'\"\n          (click)=\"editOperator()\"\n          [matTooltip]=\"'yuv.smart-search.operator.change' | translate\"\n        >\n          {{ ctrl.pendingOperatorLabel() }}\n        </button>\n      }\n\n      @if (ctrl.step() === 'field') {\n        <input\n          [formControl]=\"ctrl.fieldCtrl\"\n          [matAutocomplete]=\"auto\"\n          [placeholder]=\"'yuv.smart-search.field.pick' | translate\"\n        />\n      } @else if (ctrl.step() === 'operator') {\n        <input\n          [formControl]=\"ctrl.operatorCtrl\"\n          [matAutocomplete]=\"auto\"\n          [placeholder]=\"'yuv.smart-search.operator.select' | translate\"\n        />\n      } @else if (ctrl.step() === 'value') {\n        @let otf = valueFieldDef();\n        @if (otf) {\n          <yuv-metadata-form-field variant=\"raw\" [field]=\"otf\" situation=\"EDIT\" [formControl]=\"ctrl.valueCtrl\" />\n        } @else {\n          <input\n            [formControl]=\"ctrl.valueCtrl\"\n            [matAutocomplete]=\"auto\"\n            [placeholder]=\"'yuv.smart-search.value.enter' | translate\"\n          />\n        }\n      }\n\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"confirm-btn\"\n        [disabled]=\"!ctrl.isConditionComplete()\"\n        (click)=\"onEnter()\"\n        [matTooltip]=\"'yuv.smart-search.confirm' | translate\"\n      >\n        <mat-icon>check</mat-icon>\n      </button>\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"cancel-btn\"\n        (click)=\"cancelPending()\"\n        [matTooltip]=\"'yuv.smart-search.cancel' | translate\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <!-- \u2500\u2500 Toolbar: Essentials \u21C4 Full Form mode switch (only when the dynamic feature is enabled) \u2500\u2500 -->\n  @if (!fulltextOnly() && supportDynamicConditions() && (hasDynamicConditions() || formMode())) {\n    <div class=\"toolbar\">\n      <div class=\"toolbar__mode\" role=\"group\" [attr.aria-label]=\"'yuv.smart-search.mode.label' | translate\">\n        <button\n          type=\"button\"\n          class=\"toolbar__mode-btn\"\n          [class.toolbar__mode-btn--active]=\"formMode()\"\n          [attr.aria-pressed]=\"formMode()\"\n          (click)=\"enterFormMode()\"\n        >\n          {{ 'yuv.smart-search.mode.essentials' | translate }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"toolbar__mode-btn\"\n          [class.toolbar__mode-btn--active]=\"!formMode()\"\n          [attr.aria-pressed]=\"!formMode()\"\n          (click)=\"exitFormMode()\"\n        >\n          {{ 'yuv.smart-search.mode.full' | translate }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Generated fill-out form of the dynamic conditions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (formMode()) {\n    <div class=\"dynamic-form\">\n      @for (grp of formBlocks(); track grp.block.id; let last = $last) {\n        <div class=\"dynamic-form__block\">\n          <!-- Muted header listing the block's target types (a block matches any of them). -->\n          <div class=\"dynamic-form__block-header\">\n            @for (t of grp.block.types; track t.id) {\n              @if (!$first) {\n                <span class=\"dynamic-form__type-sep\">{{ 'yuv.smart-search.combinator.or' | translate }}</span>\n              }\n              <span class=\"dynamic-form__type\">{{ t.label }}</span>\n            }\n          </div>\n\n          <div class=\"dynamic-form__rows\">\n            @for (f of grp.fields; track f.condition) {\n              <div class=\"dynamic-form__row\">\n                <span class=\"dynamic-form__label\">{{ f.condition.fieldLabel }}</span>\n                <span class=\"dynamic-form__op\">{{ f.condition.operatorLabel }}</span>\n                <div class=\"dynamic-form__value\">\n                  @if (f.def) {\n                    <yuv-metadata-form-field variant=\"raw\" [field]=\"f.def\" situation=\"EDIT\" [formControl]=\"f.control\" />\n                  } @else {\n                    <input [formControl]=\"f.control\" [placeholder]=\"'yuv.smart-search.value.enter' | translate\" />\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Blocks are type-scoped and always combine with OR (\"this type as well as that type\"). -->\n        @if (!last) {\n          <div class=\"combinator\">\n            <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n          </div>\n        }\n      } @empty {\n        <span class=\"dynamic-form__empty\">{{ 'yuv.smart-search.mode.empty' | translate }}</span>\n      }\n    </div>\n  } @else {\n    <!-- \u2500\u2500 Full-text search bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <!-- Muting hints \"the blocks carry the search, not me\" \u2014 with the blocks hidden there\n         is nothing to defer to, so the only visible control never greys out. -->\n    <div class=\"fulltext\" [class.muted]=\"!fulltextOnly() && !fulltextActive() && ctrl.blocks().length\">\n      <!-- Row 1: full-width term -->\n      <div class=\"fulltext__term\">\n        <mat-icon class=\"fulltext__icon\">search</mat-icon>\n        <input\n          class=\"fulltext__input\"\n          [formControl]=\"fulltextTermCtrl\"\n          [placeholder]=\"'yuv.smart-search.fulltext.placeholder' | translate\"\n        />\n      </div>\n\n      <!-- Row 2: scope (single) + types (multiple) -->\n      <div class=\"fulltext__filters\">\n        <mat-select\n          class=\"fulltext__scope\"\n          [panelWidth]=\"null\"\n          panelClass=\"smart-search-select-panel\"\n          [value]=\"fulltext().scope\"\n          (selectionChange)=\"setFulltextScope($event.value)\"\n          [aria-label]=\"'yuv.smart-search.fulltext.scope.label' | translate\"\n        >\n          <mat-option value=\"all\">{{ 'yuv.smart-search.fulltext.scope.all' | translate }}</mat-option>\n          <mat-option value=\"metadata\">{{ 'yuv.smart-search.fulltext.scope.metadata' | translate }}</mat-option>\n          <mat-option value=\"content\">{{ 'yuv.smart-search.fulltext.scope.content' | translate }}</mat-option>\n        </mat-select>\n\n        <mat-select\n          class=\"fulltext__types\"\n          multiple\n          [panelWidth]=\"null\"\n          panelClass=\"smart-search-select-panel\"\n          [value]=\"fulltextTypeSelection()\"\n          (selectionChange)=\"onFulltextTypesChange($event.value)\"\n          [aria-label]=\"'yuv.smart-search.fulltext.types.label' | translate\"\n        >\n          <mat-option [value]=\"ALL_TYPES\">{{ 'yuv.smart-search.fulltext.types.all' | translate }}</mat-option>\n          @for (t of objectTypes(); track t.id) {\n            <mat-option [value]=\"t.id\">{{ t.label ?? t.id }}</mat-option>\n          }\n        </mat-select>\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Condition builder (hidden in full-text-only mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (!fulltextOnly()) {\n      <!-- Joiner between the full-text unit and the condition blocks. Top-level units\n           always combine with OR (\"looking for this as well as that\"), so this is a\n           static label rather than a toggle. -->\n      @if (fulltextActive() && ctrl.blocks().length) {\n        <div class=\"combinator\">\n          <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Step 1: Type blocks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @for (block of ctrl.blocks(); track block.id) {\n        <div class=\"block\" [attr.data-block-id]=\"block.id\" [class.block--active]=\"ctrl.activeBlock() === block\">\n          <div class=\"block__header\">\n            <div class=\"block__types\">\n              @for (t of block.types; track t.id) {\n                @if (!$first) {\n                  <span class=\"block__type-sep\">{{ 'yuv.smart-search.combinator.or' | translate }}</span>\n                }\n                <span class=\"block__type\">\n                  <span class=\"block__type-label\">{{ t.label }}</span>\n                </span>\n              }\n            </div>\n            <button\n              ymtIconButton\n              icon-button-size=\"extra-small\"\n              class=\"block__remove\"\n              (click)=\"removeBlock(block)\"\n              [matTooltip]=\"'yuv.smart-search.type.remove' | translate\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n\n          <div class=\"block__conditions\">\n            <yuv-smart-search-group [group]=\"block\" [bare]=\"true\" [chipTpl]=\"chipTpl\" [editorTpl]=\"editorTpl\" />\n          </div>\n        </div>\n\n        <!-- Static joiner between blocks \u2014 blocks are type-scoped, so they always\n             combine with OR (\"this type as well as that type\"). -->\n        @if (!$last && ctrl.showCombinator()) {\n          <div class=\"combinator\">\n            <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n          </div>\n        }\n      }\n\n      <!-- \u2500\u2500 Step 1 input: add a type block (multi-select) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (ctrl.step() === 'type') {\n        <div class=\"add-type-row\">\n          <button\n            type=\"button\"\n            ymtIconButton\n            icon-button-size=\"extra-small\"\n            class=\"add-type-row__icon\"\n            (click)=\"typeInput.focus()\"\n            [attr.aria-label]=\"'yuv.smart-search.add-type' | translate\"\n            [matTooltip]=\"'yuv.smart-search.type.add-type.tooltip' | translate\"\n          >\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n\n          <!-- Staged draft types as removable Material chips -->\n          <mat-chip-grid\n            #typeChipGrid\n            class=\"add-type-row__chips\"\n            [attr.aria-label]=\"'yuv.smart-search.add-type' | translate\"\n          >\n            @for (t of ctrl.draftTypes(); track t.id) {\n              <mat-chip-row (removed)=\"ctrl.removeDraftType(t.id)\">\n                {{ t.label }}\n                <button matChipRemove [attr.aria-label]=\"'yuv.smart-search.type.remove-draft' | translate\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </mat-chip-row>\n            }\n            <input\n              #typeInput\n              [formControl]=\"ctrl.fieldCtrl\"\n              [placeholder]=\"'yuv.smart-search.add-type' | translate\"\n              [matAutocomplete]=\"auto\"\n              [matChipInputFor]=\"typeChipGrid\"\n              [matChipInputSeparatorKeyCodes]=\"NO_SEPARATOR_KEYS\"\n              (keydown.enter)=\"onTypeEnter($event)\"\n              (keydown.escape)=\"cancelPending()\"\n            />\n          </mat-chip-grid>\n\n          @if (ctrl.draftTypes().length) {\n            <button\n              ymtIconButton\n              icon-button-size=\"extra-small\"\n              class=\"add-type-row__confirm\"\n              (click)=\"confirmTypes()\"\n              [matTooltip]=\"'yuv.smart-search.type.confirm' | translate\"\n            >\n              <mat-icon>check</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- \u2500\u2500 Shared autocomplete panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <mat-autocomplete\n    #auto\n    panelWidth=\"auto\"\n    [displayWith]=\"displayFn\"\n    (optionSelected)=\"onSuggestionSelected($event)\"\n    (closed)=\"onPickerClosed()\"\n  >\n    @for (s of ctrl.suggestions(); track s.id) {\n      <mat-option [value]=\"s\">\n        <div class=\"suggestion\">\n          @if (s.kind !== 'type') {\n            <mat-icon class=\"suggestion__icon\">\n              @switch (s.kind) {\n                @case ('field') {\n                  tune\n                }\n                @case ('date-preset') {\n                  calendar_today\n                }\n                @default {\n                  manage_search\n                }\n              }\n            </mat-icon>\n          }\n          <span class=\"suggestion__label\">{{ s.label }}</span>\n        </div>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</div>\n", styles: [":host{display:block;--outline: rgb(from var(--ymt-text-color) r g b / .5);--focus-visible-border-color: var(--ymt-primary);--focus-visible-border-shadow-color: rgb(from var(--ymt-primary) r g b / .3)}::ng-deep .smart-search-select-panel.mat-mdc-select-panel{min-width:max-content}::ng-deep .smart-search-select-panel.mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{white-space:nowrap}.smart-search{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs)}.fulltext{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);border:1px solid var(--outline);border-radius:var(--ymt-corner-s);transition:opacity .15s}.fulltext.muted{opacity:.7}.fulltext.muted:hover,.fulltext.muted:focus-within{opacity:1}.fulltext__term{display:flex;align-items:center;gap:var(--ymt-spacing-xs)}.fulltext__icon{color:var(--ymt-text-color-subtle)}.fulltext__input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font:inherit;color:var(--ymt-text-color)}.fulltext__input::placeholder{color:var(--ymt-text-color-subtle);opacity:.7}.fulltext__filters{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--ymt-spacing-s)}.fulltext__scope,.fulltext__types{width:auto;font-size:.9em;color:var(--ymt-text-color-subtle);border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding-inline:var(--ymt-spacing-xs)}.fulltext__scope:focus-visible,.fulltext__types:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.block{border:1px solid var(--outline);border-radius:var(--ymt-corner-s);overflow:hidden;transition:border-color .15s;padding:var(--ymt-spacing-2xs)}.block:focus-within{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 3px var(--focus-visible-border-shadow-color)}.block__header{border-radius:var(--ymt-corner-xs);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);background:var(--ymt-surface-container-high)}.block__types{flex:1;display:flex;align-items:center;flex-wrap:wrap}.block__type{display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}.block__type-sep{font:var(--ymt-font-body-subtle);text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-xs)}.block__remove{margin-inline-start:auto;opacity:.7}.block__conditions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ymt-spacing-2xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);min-height:44px}.condition-chip{display:flex;flex:1;align-items:center;gap:0;border-radius:var(--ymt-corner-xs);border:1px solid var(--outline);cursor:pointer;overflow:hidden;outline:none;gap:var(--ymt-spacing-2xs)}.condition-chip:hover{border-color:var(--ymt-outline)}.condition-chip:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.condition-chip__part{display:inline-flex;align-items:center;gap:var(--ymt-spacing-4xs);padding:0 var(--ymt-spacing-xs);height:100%;white-space:nowrap;color:var(--ymt-text-color)}.condition-chip__part:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.condition-chip__op{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0}.condition-chip__value{flex:1;overflow:hidden;text-overflow:ellipsis;min-height:24px;--tile-slot-padding: 0;--yuv-renderer-display: inline-flex}.condition-chip__remove{--mat-icon-button-container-shape: 0;color:var(--ymt-text-color-subtle)}.condition-chip__remove:hover{color:var(--ymt-text-color)}.condition-chip__placeholder{font:var(--ymt-font-body-subtle);font-style:italic;color:var(--ymt-text-color-subtle);opacity:.8}.condition-chip__dynamic{--mat-icon-button-container-shape: 0;color:var(--ymt-text-color-subtle)}.condition-chip__dynamic:hover{color:var(--ymt-text-color)}.condition-chip--dynamic{outline:2px solid var(--ymt-inverse-surface);outline-offset:1px}.condition-chip--dynamic .condition-chip__dynamic{border-radius:0;background-color:var(--ymt-inverse-surface);color:var(--ymt-on-inverse-surface)}.toolbar{display:flex;justify-content:flex-end;align-items:center;background:var(--ymt-surface-container-high);border-radius:var(--ymt-corner-xs);border:1px solid var(--ymt-outline);padding:var(--ymt-spacing-3xs)}.toolbar__mode{display:inline-flex;gap:0}.toolbar__mode-btn{--bg: transparent;--fg: var(--ymt-text-color);--mdc-shape-small: var(--ymt-corner-xs);font-size:.82em;background-color:var(--bg);color:var(--fg);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);border:1px solid var(--ymt-inverse-surface);cursor:pointer}.toolbar__mode-btn:focus-visible{box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.toolbar__mode-btn:first-child{border-radius:var(--mdc-shape-small) 0 0 var(--mdc-shape-small)}.toolbar__mode-btn:last-child{border-radius:0 var(--mdc-shape-small) var(--mdc-shape-small) 0}.toolbar__mode-btn--active{--bg: var(--ymt-inverse-surface);--fg: var(--ymt-on-inverse-surface)}.dynamic-form{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs)}.dynamic-form__block{container-type:inline-size;border:1px solid var(--outline);border-radius:var(--ymt-corner-s);overflow:hidden}.dynamic-form__block-header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s);font:var(--ymt-font-body-subtle)}.dynamic-form__type-sep{text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-2xs)}.dynamic-form__rows{display:grid;grid-template-columns:max-content max-content 1fr;row-gap:var(--ymt-spacing-s);column-gap:var(--ymt-spacing-xs);overflow:auto;padding:var(--ymt-spacing-s)}.dynamic-form__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center}.dynamic-form__label{color:var(--ymt-text-color)}.dynamic-form__op{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);border:1px solid var(--outline);padding-inline:var(--ymt-spacing-2xs);border-radius:var(--ymt-corner-xs)}.dynamic-form__value{flex:1;padding:var(--ymt-spacing-xs);border:1px solid var(--outline);border-radius:var(--ymt-corner-xs)}.dynamic-form__value input{width:100%;border:none;outline:none;background:transparent;font:inherit;color:var(--ymt-text-color)}.dynamic-form__empty{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}@container (max-width: 499px){.dynamic-form__rows{grid-template-columns:1fr auto}.dynamic-form__row{grid-template-columns:subgrid;grid-column:1/-1;row-gap:var(--ymt-spacing-2xs)}.dynamic-form__value{grid-column:1/-1}}.inline-input{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);flex:1;border:1px dashed var(--outline);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-2xs);background:var(--ymt-surface)}.inline-input yuv-metadata-form-field{border-radius:var(--ymt-corner-xs)}.inline-input yuv-metadata-form-field:focus-within{outline:1px solid var(--focus-visible-border-color)}.inline-input .part-pill{display:inline-flex;align-items:center;gap:var(--ymt-spacing-4xs);white-space:nowrap;font:inherit;font-size:var(--ymt-font-body-subtle-size);color:var(--ymt-text-color);background:var(--ymt-surface-container);border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-4xs) var(--ymt-spacing-xs);cursor:pointer;transition:border-color .1s,background .1s}.inline-input .part-pill:hover{background:var(--ymt-surface-container-high)}.inline-input .part-pill:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.inline-input .part-pill--active{border-color:var(--ymt-primary);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.inline-input .part-pill mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}.inline-input yuv-metadata-form-field{flex:1;min-width:150px}.inline-input input{flex:1;border:none;outline:none;background:transparent}.inline-input .confirm-btn:not(:disabled){opacity:1;color:var(--ymt-color-accent)}.combinator{display:flex;justify-content:center;gap:0}.combinator__label{font:var(--ymt-font-body-subtle);text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}.add-type-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);border:1px dashed var(--ymt-outline);border-radius:var(--ymt-corner-s);color:var(--ymt-text-color-subtle)}.add-type-row__icon{display:inline-flex;align-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.add-type-row__icon mat-icon{font-size:var(--ymt-sizing-m);width:var(--ymt-sizing-m);height:var(--ymt-sizing-m);opacity:.5}.add-type-row__icon:hover mat-icon{opacity:.8}.add-type-row__confirm{color:var(--ymt-primary)}.add-type-row__chips{flex:1;min-width:120px}.add-type-row input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font:inherit;font-size:.9em;color:inherit}.add-type-row input::placeholder{color:var(--ymt-text-color-subtle);opacity:.7}.condition-combinator{display:flex;align-self:center}.suggestion{display:flex;align-items:center;gap:var(--ymt-spacing-xs)}.suggestion__icon{font-size:var(--ymt-sizing-s);width:var(--ymt-sizing-s);height:var(--ymt-sizing-s);--icon-size: var(--ymt-sizing-s);opacity:.6}.suggestion__label{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MetadataFormFieldComponent, selector: "yuv-metadata-form-field", inputs: ["formChangedSubject", "field", "variant", "situation"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "component", type: SmartSearchGroupComponent, selector: "yuv-smart-search-group", inputs: ["group", "bare", "chipTpl", "editorTpl"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SmartSearchComponent, isStandalone: true, selector: "yuv-smart-search", inputs: { types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: false, transformFunction: null }, ignoreTypePermissions: { classPropertyName: "ignoreTypePermissions", publicName: "ignoreTypePermissions", isSignal: true, isRequired: false, transformFunction: null }, skipProperties: { classPropertyName: "skipProperties", publicName: "skipProperties", isSignal: true, isRequired: false, transformFunction: null }, fulltextOnly: { classPropertyName: "fulltextOnly", publicName: "fulltextOnly", isSignal: true, isRequired: false, transformFunction: null }, supportDynamicConditions: { classPropertyName: "supportDynamicConditions", publicName: "supportDynamicConditions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryChange: "queryChange", querySubmit: "querySubmit" }, host: { listeners: { "keydown.enter": "onHostEnter($event)" } }, providers: [SmartSearchEditController], viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"smart-search\" halo-container halo-container-skip=\"true\">\n  <!-- Condition chip template \u2014 passed down into the recursive group component. -->\n  <ng-template #chipTpl let-condition let-container=\"container\" let-i=\"index\">\n    <div\n      class=\"condition-chip\"\n      [class.condition-chip--unset]=\"isUnset(condition)\"\n      [class.condition-chip--dynamic]=\"condition.dynamic\"\n      tabindex=\"0\"\n      role=\"button\"\n      [attr.aria-label]=\"'yuv.smart-search.condition.edit-aria' | translate: { label: condition.conditionLabel }\"\n      (click)=\"editCondition(container, condition, i)\"\n      (keydown.space)=\"$event.preventDefault(); editCondition(container, condition, i)\"\n      (keydown.enter)=\"$event.preventDefault(); editCondition(container, condition, i)\"\n    >\n      @if (supportDynamicConditions() && !isValueless(condition.operator)) {\n        <!-- The name stays put and `aria-pressed` carries the state; the tooltip, which `matTooltip`\n             exposes as `aria-describedby`, is what names the action. The keydown guards stop the\n             chip's own enter/space handler from also opening the editor on the same keystroke. -->\n        <button\n          type=\"button\"\n          ymtIconButton\n          icon-button-size=\"extra-small\"\n          class=\"condition-chip__dynamic\"\n          [attr.aria-pressed]=\"!!condition.dynamic\"\n          [attr.aria-label]=\"'yuv.smart-search.condition.dynamic-aria' | translate: { label: condition.conditionLabel }\"\n          [matTooltip]=\"\n            (condition.dynamic\n              ? 'yuv.smart-search.condition.unmark-dynamic'\n              : 'yuv.smart-search.condition.mark-dynamic'\n            ) | translate\n          \"\n          (click)=\"$event.stopPropagation(); toggleDynamic(container, condition)\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n        >\n          <mat-icon>bolt</mat-icon>\n        </button>\n      }\n\n      <span class=\"condition-chip__part condition-chip__field\">\n        <!-- <mat-icon>tune</mat-icon> -->\n        {{ condition.fieldLabel }}\n      </span>\n      <span class=\"condition-chip__part condition-chip__op\">{{ condition.operatorLabel }}</span>\n      <!-- A valueless operator states the whole condition on its own (`is empty`, or a date\n           preset whose label already reads \u201CThis year\u201D), so it gets no value segment: the\n           stored value is an internal marker (`thisYear`), not something to show the user. -->\n      @if (!isValueless(condition.operator)) {\n        <span class=\"condition-chip__part condition-chip__value\">\n          @if (isUnset(condition)) {\n            <span class=\"condition-chip__placeholder\">{{ 'yuv.smart-search.condition.unset-value' | translate }}</span>\n          } @else if (valueRendererInput(condition); as rendererInput) {\n            <ng-container *yuvRenderer=\"rendererInput\" />\n          } @else {\n            {{ condition.value }}\n          }\n        </span>\n      }\n      <!-- @if (supportDynamicConditions() && !isValueless(condition.operator)) {\n        <button\n          type=\"button\"\n          ymtIconButton\n          icon-button-size=\"extra-small\"\n          class=\"condition-chip__dynamic\"\n          tabindex=\"-1\"\n          [attr.aria-pressed]=\"!!condition.dynamic\"\n          [matTooltip]=\"\n            (condition.dynamic\n              ? 'yuv.smart-search.condition.unmark-dynamic'\n              : 'yuv.smart-search.condition.mark-dynamic'\n            ) | translate\n          \"\n          (click)=\"$event.stopPropagation(); toggleDynamic(container, condition)\"\n        >\n          <mat-icon>bolt</mat-icon>\n        </button>\n      } -->\n      <button\n        type=\"button\"\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"condition-chip__remove\"\n        [attr.aria-label]=\"'yuv.smart-search.condition.remove' | translate\"\n        (click)=\"$event.stopPropagation(); removeCondition(container, condition)\"\n        (keydown.enter)=\"$event.stopPropagation()\"\n        (keydown.space)=\"$event.stopPropagation()\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <!-- Inline editor template \u2014 rendered inside whichever container is active. -->\n  <ng-template #editorTpl>\n    <!-- Enter is bound on the wrapper, not per input, so it also covers the value step's\n         real metadata widget and runs after each widget's own key handling. -->\n    <div\n      class=\"inline-input\"\n      tabindex=\"-1\"\n      (focusout)=\"onInlineBlur($event)\"\n      (keydown.enter)=\"onEnter($event)\"\n      (keydown.escape)=\"cancelPending()\"\n    >\n      @if (ctrl.step() !== 'field' && ctrl.pendingField()) {\n        <button\n          class=\"part-pill\"\n          [class.part-pill--active]=\"ctrl.step() === 'field'\"\n          (click)=\"editField()\"\n          [matTooltip]=\"'yuv.smart-search.field.change' | translate\"\n        >\n          {{ ctrl.pendingField()?.label }}\n        </button>\n      }\n\n      <!-- The operator is always a pill, never editable text: at the value step it is the\n           way back to the operator picker, and at the operator step it shows what is\n           currently set while the (empty) input below filters the replacement list. -->\n      @if (ctrl.step() !== 'field' && ctrl.pendingOperatorLabel()) {\n        <button\n          class=\"part-pill\"\n          [class.part-pill--active]=\"ctrl.step() === 'operator'\"\n          (click)=\"editOperator()\"\n          [matTooltip]=\"'yuv.smart-search.operator.change' | translate\"\n        >\n          {{ ctrl.pendingOperatorLabel() }}\n        </button>\n      }\n\n      @if (ctrl.step() === 'field') {\n        <input\n          [formControl]=\"ctrl.fieldCtrl\"\n          [matAutocomplete]=\"auto\"\n          [placeholder]=\"'yuv.smart-search.field.pick' | translate\"\n        />\n      } @else if (ctrl.step() === 'operator') {\n        <input\n          [formControl]=\"ctrl.operatorCtrl\"\n          [matAutocomplete]=\"auto\"\n          [placeholder]=\"'yuv.smart-search.operator.select' | translate\"\n        />\n      } @else if (ctrl.step() === 'value') {\n        @let otf = valueFieldDef();\n        @if (otf) {\n          <yuv-metadata-form-field variant=\"raw\" [field]=\"otf\" situation=\"EDIT\" [formControl]=\"ctrl.valueCtrl\" />\n        } @else {\n          <input\n            [formControl]=\"ctrl.valueCtrl\"\n            [matAutocomplete]=\"auto\"\n            [placeholder]=\"'yuv.smart-search.value.enter' | translate\"\n          />\n        }\n      }\n\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"confirm-btn\"\n        [disabled]=\"!ctrl.isConditionComplete()\"\n        (click)=\"onEnter()\"\n        [matTooltip]=\"'yuv.smart-search.confirm' | translate\"\n      >\n        <mat-icon>check</mat-icon>\n      </button>\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"cancel-btn\"\n        (click)=\"cancelPending()\"\n        [matTooltip]=\"'yuv.smart-search.cancel' | translate\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <!-- \u2500\u2500 Toolbar: Essentials \u21C4 Full Form mode switch (only when the dynamic feature is enabled) \u2500\u2500 -->\n  @if (!fulltextOnly() && supportDynamicConditions() && (hasDynamicConditions() || formMode())) {\n    <div class=\"toolbar\">\n      <div class=\"toolbar__mode\" role=\"group\" [attr.aria-label]=\"'yuv.smart-search.mode.label' | translate\">\n        <button\n          type=\"button\"\n          class=\"toolbar__mode-btn\"\n          [class.toolbar__mode-btn--active]=\"formMode()\"\n          [attr.aria-pressed]=\"formMode()\"\n          (click)=\"enterFormMode()\"\n        >\n          {{ 'yuv.smart-search.mode.essentials' | translate }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"toolbar__mode-btn\"\n          [class.toolbar__mode-btn--active]=\"!formMode()\"\n          [attr.aria-pressed]=\"!formMode()\"\n          (click)=\"exitFormMode()\"\n        >\n          {{ 'yuv.smart-search.mode.full' | translate }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Generated fill-out form of the dynamic conditions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (formMode()) {\n    <div class=\"dynamic-form\">\n      @for (grp of formBlocks(); track grp.block.id; let last = $last) {\n        <div class=\"dynamic-form__block\">\n          <!-- Muted header listing the block's target types (a block matches any of them). -->\n          <div class=\"dynamic-form__block-header\">\n            @for (t of grp.block.types; track t.id) {\n              @if (!$first) {\n                <span class=\"dynamic-form__type-sep\">{{ 'yuv.smart-search.combinator.or' | translate }}</span>\n              }\n              <span class=\"dynamic-form__type\">{{ t.label }}</span>\n            }\n          </div>\n\n          <div class=\"dynamic-form__rows\">\n            @for (f of grp.fields; track f.condition) {\n              <div class=\"dynamic-form__row\">\n                <span class=\"dynamic-form__label\">{{ f.condition.fieldLabel }}</span>\n                <span class=\"dynamic-form__op\">{{ f.condition.operatorLabel }}</span>\n                <div class=\"dynamic-form__value\">\n                  @if (f.def) {\n                    <yuv-metadata-form-field variant=\"raw\" [field]=\"f.def\" situation=\"EDIT\" [formControl]=\"f.control\" />\n                  } @else {\n                    <input [formControl]=\"f.control\" [placeholder]=\"'yuv.smart-search.value.enter' | translate\" />\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Blocks are type-scoped and always combine with OR (\"this type as well as that type\"). -->\n        @if (!last) {\n          <div class=\"combinator\">\n            <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n          </div>\n        }\n      } @empty {\n        <span class=\"dynamic-form__empty\">{{ 'yuv.smart-search.mode.empty' | translate }}</span>\n      }\n    </div>\n  } @else {\n    <!-- \u2500\u2500 Full-text search bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <!-- Muting hints \"the blocks carry the search, not me\" \u2014 with the blocks hidden there\n         is nothing to defer to, so the only visible control never greys out. -->\n    <div class=\"fulltext\" [class.muted]=\"!fulltextOnly() && !fulltextActive() && ctrl.blocks().length\">\n      <!-- Row 1: full-width term -->\n      <div class=\"fulltext__term\">\n        <mat-icon class=\"fulltext__icon\">search</mat-icon>\n        <input\n          class=\"fulltext__input\"\n          [formControl]=\"fulltextTermCtrl\"\n          [placeholder]=\"'yuv.smart-search.fulltext.placeholder' | translate\"\n        />\n      </div>\n\n      <!-- Row 2: scope (single) + types (multiple) -->\n      <div class=\"fulltext__filters\">\n        <mat-select\n          class=\"fulltext__scope\"\n          [panelWidth]=\"null\"\n          panelClass=\"smart-search-select-panel\"\n          [value]=\"fulltext().scope\"\n          (selectionChange)=\"setFulltextScope($event.value)\"\n          [aria-label]=\"'yuv.smart-search.fulltext.scope.label' | translate\"\n        >\n          <mat-option value=\"all\">{{ 'yuv.smart-search.fulltext.scope.all' | translate }}</mat-option>\n          <mat-option value=\"metadata\">{{ 'yuv.smart-search.fulltext.scope.metadata' | translate }}</mat-option>\n          <mat-option value=\"content\">{{ 'yuv.smart-search.fulltext.scope.content' | translate }}</mat-option>\n        </mat-select>\n\n        <mat-select\n          class=\"fulltext__types\"\n          multiple\n          [panelWidth]=\"null\"\n          panelClass=\"smart-search-select-panel\"\n          [value]=\"fulltextTypeSelection()\"\n          (selectionChange)=\"onFulltextTypesChange($event.value)\"\n          [aria-label]=\"'yuv.smart-search.fulltext.types.label' | translate\"\n        >\n          <mat-option [value]=\"ALL_TYPES\">{{ 'yuv.smart-search.fulltext.types.all' | translate }}</mat-option>\n          @for (t of objectTypes(); track t.id) {\n            <mat-option [value]=\"t.id\">{{ t.label ?? t.id }}</mat-option>\n          }\n        </mat-select>\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Condition builder (hidden in full-text-only mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (!fulltextOnly()) {\n      <!-- Joiner between the full-text unit and the condition blocks. Top-level units\n           always combine with OR (\"looking for this as well as that\"), so this is a\n           static label rather than a toggle. -->\n      @if (fulltextActive() && ctrl.blocks().length) {\n        <div class=\"combinator\">\n          <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Step 1: Type blocks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @for (block of ctrl.blocks(); track block.id) {\n        <div class=\"block\" [attr.data-block-id]=\"block.id\" [class.block--active]=\"ctrl.activeBlock() === block\">\n          <div class=\"block__header\">\n            <div class=\"block__types\">\n              @for (t of block.types; track t.id) {\n                @if (!$first) {\n                  <span class=\"block__type-sep\">{{ 'yuv.smart-search.combinator.or' | translate }}</span>\n                }\n                <span class=\"block__type\">\n                  <span class=\"block__type-label\">{{ t.label }}</span>\n                </span>\n              }\n            </div>\n            <button\n              ymtIconButton\n              icon-button-size=\"extra-small\"\n              class=\"block__remove\"\n              (click)=\"removeBlock(block)\"\n              [matTooltip]=\"'yuv.smart-search.type.remove' | translate\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n\n          <div class=\"block__conditions\">\n            <yuv-smart-search-group [group]=\"block\" [bare]=\"true\" [chipTpl]=\"chipTpl\" [editorTpl]=\"editorTpl\" />\n          </div>\n        </div>\n\n        <!-- Static joiner between blocks \u2014 blocks are type-scoped, so they always\n             combine with OR (\"this type as well as that type\"). -->\n        @if (!$last && ctrl.showCombinator()) {\n          <div class=\"combinator\">\n            <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n          </div>\n        }\n      }\n\n      <!-- \u2500\u2500 Step 1 input: add a type block (multi-select) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (ctrl.step() === 'type') {\n        <div class=\"add-type-row\">\n          <button\n            type=\"button\"\n            ymtIconButton\n            icon-button-size=\"extra-small\"\n            class=\"add-type-row__icon\"\n            (click)=\"typeInput.focus()\"\n            [attr.aria-label]=\"'yuv.smart-search.add-type' | translate\"\n            [matTooltip]=\"'yuv.smart-search.type.add-type.tooltip' | translate\"\n          >\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n\n          <!-- Staged draft types as removable Material chips -->\n          <mat-chip-grid\n            #typeChipGrid\n            class=\"add-type-row__chips\"\n            [attr.aria-label]=\"'yuv.smart-search.add-type' | translate\"\n          >\n            @for (t of ctrl.draftTypes(); track t.id) {\n              <mat-chip-row (removed)=\"ctrl.removeDraftType(t.id)\">\n                {{ t.label }}\n                <button matChipRemove [attr.aria-label]=\"'yuv.smart-search.type.remove-draft' | translate\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </mat-chip-row>\n            }\n            <input\n              #typeInput\n              [formControl]=\"ctrl.fieldCtrl\"\n              [placeholder]=\"'yuv.smart-search.add-type' | translate\"\n              [matAutocomplete]=\"auto\"\n              [matChipInputFor]=\"typeChipGrid\"\n              [matChipInputSeparatorKeyCodes]=\"NO_SEPARATOR_KEYS\"\n              (keydown.enter)=\"onTypeEnter($event)\"\n              (keydown.escape)=\"cancelPending()\"\n            />\n          </mat-chip-grid>\n\n          @if (ctrl.draftTypes().length) {\n            <button\n              ymtIconButton\n              icon-button-size=\"extra-small\"\n              class=\"add-type-row__confirm\"\n              (click)=\"confirmTypes()\"\n              [matTooltip]=\"'yuv.smart-search.type.confirm' | translate\"\n            >\n              <mat-icon>check</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- \u2500\u2500 Shared autocomplete panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <mat-autocomplete\n    #auto\n    panelWidth=\"auto\"\n    [displayWith]=\"displayFn\"\n    (optionSelected)=\"onSuggestionSelected($event)\"\n    (closed)=\"onPickerClosed()\"\n  >\n    @for (s of ctrl.suggestions(); track s.id) {\n      <mat-option [value]=\"s\">\n        <div class=\"suggestion\">\n          @if (s.kind !== 'type') {\n            <mat-icon class=\"suggestion__icon\">\n              @switch (s.kind) {\n                @case ('field') {\n                  tune\n                }\n                @case ('date-preset') {\n                  calendar_today\n                }\n                @default {\n                  manage_search\n                }\n              }\n            </mat-icon>\n          }\n          <span class=\"suggestion__label\">{{ s.label }}</span>\n        </div>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</div>\n", styles: [":host{display:block;--outline: rgb(from var(--ymt-text-color) r g b / .5);--focus-visible-border-color: var(--ymt-primary);--focus-visible-border-shadow-color: rgb(from var(--ymt-primary) r g b / .3)}::ng-deep .smart-search-select-panel.mat-mdc-select-panel{min-width:max-content}::ng-deep .smart-search-select-panel.mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{white-space:nowrap}.smart-search{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs)}.fulltext{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);border:1px solid var(--outline);border-radius:var(--ymt-corner-s);transition:opacity .15s}.fulltext.muted{opacity:.7}.fulltext.muted:hover,.fulltext.muted:focus-within{opacity:1}.fulltext__term{display:flex;align-items:center;gap:var(--ymt-spacing-xs)}.fulltext__icon{color:var(--ymt-text-color-subtle)}.fulltext__input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font:inherit;color:var(--ymt-text-color)}.fulltext__input::placeholder{color:var(--ymt-text-color-subtle);opacity:.7}.fulltext__filters{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--ymt-spacing-s)}.fulltext__scope,.fulltext__types{width:auto;font-size:.9em;color:var(--ymt-text-color-subtle);border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding-inline:var(--ymt-spacing-xs)}.fulltext__scope:focus-visible,.fulltext__types:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.block{border:1px solid var(--outline);border-radius:var(--ymt-corner-s);overflow:hidden;transition:border-color .15s;padding:var(--ymt-spacing-2xs)}.block:focus-within{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 3px var(--focus-visible-border-shadow-color)}.block__header{border-radius:var(--ymt-corner-xs);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);background:var(--ymt-surface-container-high)}.block__types{flex:1;display:flex;align-items:center;flex-wrap:wrap}.block__type{display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}.block__type-sep{font:var(--ymt-font-body-subtle);text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-xs)}.block__remove{margin-inline-start:auto;opacity:.7}.block__conditions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ymt-spacing-2xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);min-height:44px}.condition-chip{display:flex;flex:1;align-items:center;gap:0;border-radius:var(--ymt-corner-xs);border:1px solid var(--outline);cursor:pointer;overflow:hidden;outline:none;gap:var(--ymt-spacing-2xs)}.condition-chip:hover{border-color:var(--ymt-outline)}.condition-chip:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.condition-chip__part{display:inline-flex;align-items:center;gap:var(--ymt-spacing-4xs);padding:0 var(--ymt-spacing-xs);height:100%;white-space:nowrap;color:var(--ymt-text-color)}.condition-chip__part:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.condition-chip__op{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0}.condition-chip__value{flex:1;overflow:hidden;text-overflow:ellipsis;min-height:24px;--tile-slot-padding: 0;--yuv-renderer-display: inline-flex}.condition-chip__remove{--mat-icon-button-container-shape: 0;color:var(--ymt-text-color-subtle)}.condition-chip__remove:hover{color:var(--ymt-text-color)}.condition-chip__placeholder{font:var(--ymt-font-body-subtle);font-style:italic;color:var(--ymt-text-color-subtle);opacity:.8}.condition-chip__dynamic{--mat-icon-button-container-shape: 0;color:var(--ymt-text-color-subtle)}.condition-chip__dynamic:hover{color:var(--ymt-text-color)}.condition-chip--dynamic{outline:2px solid var(--ymt-inverse-surface);outline-offset:1px}.condition-chip--dynamic .condition-chip__dynamic{border-radius:0;background-color:var(--ymt-inverse-surface);color:var(--ymt-on-inverse-surface)}.toolbar{display:flex;justify-content:flex-end;align-items:center;background:var(--ymt-surface-container-high);border-radius:var(--ymt-corner-xs);border:1px solid var(--ymt-outline);padding:var(--ymt-spacing-3xs)}.toolbar__mode{display:inline-flex;gap:0}.toolbar__mode-btn{--bg: transparent;--fg: var(--ymt-text-color);--mdc-shape-small: var(--ymt-corner-xs);font-size:.82em;background-color:var(--bg);color:var(--fg);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);border:1px solid var(--ymt-inverse-surface);cursor:pointer}.toolbar__mode-btn:focus-visible{box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.toolbar__mode-btn:first-child{border-radius:var(--mdc-shape-small) 0 0 var(--mdc-shape-small)}.toolbar__mode-btn:last-child{border-radius:0 var(--mdc-shape-small) var(--mdc-shape-small) 0}.toolbar__mode-btn--active{--bg: var(--ymt-inverse-surface);--fg: var(--ymt-on-inverse-surface)}.dynamic-form{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs)}.dynamic-form__block{container-type:inline-size;border:1px solid var(--outline);border-radius:var(--ymt-corner-s);overflow:hidden}.dynamic-form__block-header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s);font:var(--ymt-font-body-subtle)}.dynamic-form__type-sep{text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-2xs)}.dynamic-form__rows{display:grid;grid-template-columns:max-content max-content 1fr;row-gap:var(--ymt-spacing-s);column-gap:var(--ymt-spacing-xs);overflow:auto;padding:var(--ymt-spacing-s)}.dynamic-form__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center}.dynamic-form__label{color:var(--ymt-text-color)}.dynamic-form__op{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);border:1px solid var(--outline);padding-inline:var(--ymt-spacing-2xs);border-radius:var(--ymt-corner-xs)}.dynamic-form__value{flex:1;padding:var(--ymt-spacing-xs);border:1px solid var(--outline);border-radius:var(--ymt-corner-xs)}.dynamic-form__value input{width:100%;border:none;outline:none;background:transparent;font:inherit;color:var(--ymt-text-color)}.dynamic-form__empty{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}@container (max-width: 499px){.dynamic-form__rows{grid-template-columns:1fr auto}.dynamic-form__row{grid-template-columns:subgrid;grid-column:1/-1;row-gap:var(--ymt-spacing-2xs)}.dynamic-form__value{grid-column:1/-1}}.inline-input{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);flex:1;border:1px dashed var(--outline);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-2xs);background:var(--ymt-surface)}.inline-input yuv-metadata-form-field{border-radius:var(--ymt-corner-xs)}.inline-input yuv-metadata-form-field:focus-within{outline:1px solid var(--focus-visible-border-color)}.inline-input .part-pill{display:inline-flex;align-items:center;gap:var(--ymt-spacing-4xs);white-space:nowrap;font:inherit;font-size:var(--ymt-font-body-subtle-size);color:var(--ymt-text-color);background:var(--ymt-surface-container);border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-4xs) var(--ymt-spacing-xs);cursor:pointer;transition:border-color .1s,background .1s}.inline-input .part-pill:hover{background:var(--ymt-surface-container-high)}.inline-input .part-pill:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.inline-input .part-pill--active{border-color:var(--ymt-primary);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.inline-input .part-pill mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}.inline-input yuv-metadata-form-field{flex:1;min-width:150px}.inline-input input{flex:1;border:none;outline:none;background:transparent}.inline-input .confirm-btn:not(:disabled){opacity:1;color:var(--ymt-color-accent)}.combinator{display:flex;justify-content:center;gap:0}.combinator__label{font:var(--ymt-font-body-subtle);text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}.add-type-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);border:1px dashed var(--ymt-outline);border-radius:var(--ymt-corner-s);color:var(--ymt-text-color-subtle)}.add-type-row__icon{display:inline-flex;align-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.add-type-row__icon mat-icon{font-size:var(--ymt-sizing-m);width:var(--ymt-sizing-m);height:var(--ymt-sizing-m);opacity:.5}.add-type-row__icon:hover mat-icon{opacity:.8}.add-type-row__confirm{color:var(--ymt-primary)}.add-type-row__chips{flex:1;min-width:120px}.add-type-row input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font:inherit;font-size:.9em;color:inherit}.add-type-row input::placeholder{color:var(--ymt-text-color-subtle);opacity:.7}.condition-combinator{display:flex;align-self:center}.suggestion{display:flex;align-items:center;gap:var(--ymt-spacing-xs)}.suggestion__icon{font-size:var(--ymt-sizing-s);width:var(--ymt-sizing-s);height:var(--ymt-sizing-s);--icon-size: var(--ymt-sizing-s);opacity:.6}.suggestion__label{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MetadataFormFieldComponent, selector: "yuv-metadata-form-field", inputs: ["formChangedSubject", "field", "variant", "situation"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "component", type: SmartSearchGroupComponent, selector: "yuv-smart-search-group", inputs: ["group", "bare", "chipTpl", "editorTpl"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SmartSearchComponent, decorators: [{
             type: Component,
@@ -2524,7 +2556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         RendererDirective,
                         SmartSearchGroupComponent,
                         TranslatePipe
-                    ], providers: [SmartSearchEditController], host: { '(keydown.enter)': 'onHostEnter($event)' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"smart-search\" halo-container halo-container-skip=\"true\">\n  <!-- Condition chip template \u2014 passed down into the recursive group component. -->\n  <ng-template #chipTpl let-condition let-container=\"container\" let-i=\"index\">\n    <div\n      class=\"condition-chip\"\n      [class.condition-chip--unset]=\"isUnset(condition)\"\n      [class.condition-chip--dynamic]=\"condition.dynamic\"\n      tabindex=\"0\"\n      role=\"button\"\n      [attr.aria-label]=\"'yuv.smart-search.condition.edit-aria' | translate: { label: condition.conditionLabel }\"\n      (click)=\"editCondition(container, condition, i)\"\n      (keydown.space)=\"$event.preventDefault(); editCondition(container, condition, i)\"\n      (keydown.enter)=\"$event.preventDefault(); editCondition(container, condition, i)\"\n    >\n      @if (supportDynamicConditions() && !isValueless(condition.operator)) {\n        <button\n          ymtIconButton\n          icon-button-size=\"extra-small\"\n          class=\"condition-chip__dynamic\"\n          tabindex=\"-1\"\n          [attr.aria-pressed]=\"!!condition.dynamic\"\n          [matTooltip]=\"\n            (condition.dynamic\n              ? 'yuv.smart-search.condition.unmark-dynamic'\n              : 'yuv.smart-search.condition.mark-dynamic'\n            ) | translate\n          \"\n          (click)=\"$event.stopPropagation(); toggleDynamic(container, condition)\"\n        >\n          <mat-icon>bolt</mat-icon>\n        </button>\n      }\n\n      <span class=\"condition-chip__part condition-chip__field\">\n        <!-- <mat-icon>tune</mat-icon> -->\n        {{ condition.fieldLabel }}\n      </span>\n      <span class=\"condition-chip__part condition-chip__op\">{{ condition.operatorLabel }}</span>\n      <!-- A valueless operator states the whole condition on its own (`is empty`, or a date\n           preset whose label already reads \u201CThis year\u201D), so it gets no value segment: the\n           stored value is an internal marker (`thisYear`), not something to show the user. -->\n      @if (!isValueless(condition.operator)) {\n        <span class=\"condition-chip__part condition-chip__value\">\n          @if (isUnset(condition)) {\n            <span class=\"condition-chip__placeholder\">{{ 'yuv.smart-search.condition.unset-value' | translate }}</span>\n          } @else if (valueRendererInput(condition); as rendererInput) {\n            <ng-container *yuvRenderer=\"rendererInput\" />\n          } @else {\n            {{ condition.value }}\n          }\n        </span>\n      }\n      <!-- @if (supportDynamicConditions() && !isValueless(condition.operator)) {\n        <button\n          ymtIconButton\n          icon-button-size=\"extra-small\"\n          class=\"condition-chip__dynamic\"\n          tabindex=\"-1\"\n          [attr.aria-pressed]=\"!!condition.dynamic\"\n          [matTooltip]=\"\n            (condition.dynamic\n              ? 'yuv.smart-search.condition.unmark-dynamic'\n              : 'yuv.smart-search.condition.mark-dynamic'\n            ) | translate\n          \"\n          (click)=\"$event.stopPropagation(); toggleDynamic(container, condition)\"\n        >\n          <mat-icon>bolt</mat-icon>\n        </button>\n      } -->\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"condition-chip__remove\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'yuv.smart-search.condition.remove' | translate\"\n        (click)=\"$event.stopPropagation(); removeCondition(container, condition)\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <!-- Inline editor template \u2014 rendered inside whichever container is active. -->\n  <ng-template #editorTpl>\n    <!-- Enter is bound on the wrapper, not per input, so it also covers the value step's\n         real metadata widget and runs after each widget's own key handling. -->\n    <div\n      class=\"inline-input\"\n      tabindex=\"-1\"\n      (focusout)=\"onInlineBlur($event)\"\n      (keydown.enter)=\"onEnter($event)\"\n      (keydown.escape)=\"cancelPending()\"\n    >\n      @if (ctrl.step() !== 'field' && ctrl.pendingField()) {\n        <button\n          class=\"part-pill\"\n          [class.part-pill--active]=\"ctrl.step() === 'field'\"\n          (click)=\"editField()\"\n          [matTooltip]=\"'yuv.smart-search.field.change' | translate\"\n        >\n          {{ ctrl.pendingField()?.label }}\n        </button>\n      }\n\n      <!-- The operator is always a pill, never editable text: at the value step it is the\n           way back to the operator picker, and at the operator step it shows what is\n           currently set while the (empty) input below filters the replacement list. -->\n      @if (ctrl.step() !== 'field' && ctrl.pendingOperatorLabel()) {\n        <button\n          class=\"part-pill\"\n          [class.part-pill--active]=\"ctrl.step() === 'operator'\"\n          (click)=\"editOperator()\"\n          [matTooltip]=\"'yuv.smart-search.operator.change' | translate\"\n        >\n          {{ ctrl.pendingOperatorLabel() }}\n        </button>\n      }\n\n      @if (ctrl.step() === 'field') {\n        <input\n          [formControl]=\"ctrl.fieldCtrl\"\n          [matAutocomplete]=\"auto\"\n          [placeholder]=\"'yuv.smart-search.field.pick' | translate\"\n        />\n      } @else if (ctrl.step() === 'operator') {\n        <input\n          [formControl]=\"ctrl.operatorCtrl\"\n          [matAutocomplete]=\"auto\"\n          [placeholder]=\"'yuv.smart-search.operator.select' | translate\"\n        />\n      } @else if (ctrl.step() === 'value') {\n        @let otf = valueFieldDef();\n        @if (otf) {\n          <yuv-metadata-form-field variant=\"raw\" [field]=\"otf\" situation=\"EDIT\" [formControl]=\"ctrl.valueCtrl\" />\n        } @else {\n          <input\n            [formControl]=\"ctrl.valueCtrl\"\n            [matAutocomplete]=\"auto\"\n            [placeholder]=\"'yuv.smart-search.value.enter' | translate\"\n          />\n        }\n      }\n\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"confirm-btn\"\n        [disabled]=\"!ctrl.isConditionComplete()\"\n        (click)=\"onEnter()\"\n        [matTooltip]=\"'yuv.smart-search.confirm' | translate\"\n      >\n        <mat-icon>check</mat-icon>\n      </button>\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"cancel-btn\"\n        (click)=\"cancelPending()\"\n        [matTooltip]=\"'yuv.smart-search.cancel' | translate\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <!-- \u2500\u2500 Toolbar: Essentials \u21C4 Full Form mode switch (only when the dynamic feature is enabled) \u2500\u2500 -->\n  @if (!fulltextOnly() && supportDynamicConditions() && (hasDynamicConditions() || formMode())) {\n    <div class=\"toolbar\">\n      <div class=\"toolbar__mode\" role=\"group\" [attr.aria-label]=\"'yuv.smart-search.mode.label' | translate\">\n        <button\n          type=\"button\"\n          class=\"toolbar__mode-btn\"\n          [class.toolbar__mode-btn--active]=\"formMode()\"\n          [attr.aria-pressed]=\"formMode()\"\n          (click)=\"enterFormMode()\"\n        >\n          {{ 'yuv.smart-search.mode.essentials' | translate }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"toolbar__mode-btn\"\n          [class.toolbar__mode-btn--active]=\"!formMode()\"\n          [attr.aria-pressed]=\"!formMode()\"\n          (click)=\"exitFormMode()\"\n        >\n          {{ 'yuv.smart-search.mode.full' | translate }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Generated fill-out form of the dynamic conditions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (formMode()) {\n    <div class=\"dynamic-form\">\n      @for (grp of formBlocks(); track grp.block.id; let last = $last) {\n        <div class=\"dynamic-form__block\">\n          <!-- Muted header listing the block's target types (a block matches any of them). -->\n          <div class=\"dynamic-form__block-header\">\n            @for (t of grp.block.types; track t.id) {\n              @if (!$first) {\n                <span class=\"dynamic-form__type-sep\">{{ 'yuv.smart-search.combinator.or' | translate }}</span>\n              }\n              <span class=\"dynamic-form__type\">{{ t.label }}</span>\n            }\n          </div>\n\n          <div class=\"dynamic-form__rows\">\n            @for (f of grp.fields; track f.condition) {\n              <div class=\"dynamic-form__row\">\n                <span class=\"dynamic-form__label\">{{ f.condition.fieldLabel }}</span>\n                <span class=\"dynamic-form__op\">{{ f.condition.operatorLabel }}</span>\n                <div class=\"dynamic-form__value\">\n                  @if (f.def) {\n                    <yuv-metadata-form-field variant=\"raw\" [field]=\"f.def\" situation=\"EDIT\" [formControl]=\"f.control\" />\n                  } @else {\n                    <input [formControl]=\"f.control\" [placeholder]=\"'yuv.smart-search.value.enter' | translate\" />\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Blocks are type-scoped and always combine with OR (\"this type as well as that type\"). -->\n        @if (!last) {\n          <div class=\"combinator\">\n            <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n          </div>\n        }\n      } @empty {\n        <span class=\"dynamic-form__empty\">{{ 'yuv.smart-search.mode.empty' | translate }}</span>\n      }\n    </div>\n  } @else {\n    <!-- \u2500\u2500 Full-text search bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <!-- Muting hints \"the blocks carry the search, not me\" \u2014 with the blocks hidden there\n         is nothing to defer to, so the only visible control never greys out. -->\n    <div class=\"fulltext\" [class.muted]=\"!fulltextOnly() && !fulltextActive() && ctrl.blocks().length\">\n      <!-- Row 1: full-width term -->\n      <div class=\"fulltext__term\">\n        <mat-icon class=\"fulltext__icon\">search</mat-icon>\n        <input\n          class=\"fulltext__input\"\n          [formControl]=\"fulltextTermCtrl\"\n          [placeholder]=\"'yuv.smart-search.fulltext.placeholder' | translate\"\n        />\n      </div>\n\n      <!-- Row 2: scope (single) + types (multiple) -->\n      <div class=\"fulltext__filters\">\n        <mat-select\n          class=\"fulltext__scope\"\n          [panelWidth]=\"null\"\n          panelClass=\"smart-search-select-panel\"\n          [value]=\"fulltext().scope\"\n          (selectionChange)=\"setFulltextScope($event.value)\"\n          [aria-label]=\"'yuv.smart-search.fulltext.scope.label' | translate\"\n        >\n          <mat-option value=\"all\">{{ 'yuv.smart-search.fulltext.scope.all' | translate }}</mat-option>\n          <mat-option value=\"metadata\">{{ 'yuv.smart-search.fulltext.scope.metadata' | translate }}</mat-option>\n          <mat-option value=\"content\">{{ 'yuv.smart-search.fulltext.scope.content' | translate }}</mat-option>\n        </mat-select>\n\n        <mat-select\n          class=\"fulltext__types\"\n          multiple\n          [panelWidth]=\"null\"\n          panelClass=\"smart-search-select-panel\"\n          [value]=\"fulltextTypeSelection()\"\n          (selectionChange)=\"onFulltextTypesChange($event.value)\"\n          [aria-label]=\"'yuv.smart-search.fulltext.types.label' | translate\"\n        >\n          <mat-option [value]=\"ALL_TYPES\">{{ 'yuv.smart-search.fulltext.types.all' | translate }}</mat-option>\n          @for (t of objectTypes(); track t.id) {\n            <mat-option [value]=\"t.id\">{{ t.label ?? t.id }}</mat-option>\n          }\n        </mat-select>\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Condition builder (hidden in full-text-only mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (!fulltextOnly()) {\n      <!-- Joiner between the full-text unit and the condition blocks. Top-level units\n           always combine with OR (\"looking for this as well as that\"), so this is a\n           static label rather than a toggle. -->\n      @if (fulltextActive() && ctrl.blocks().length) {\n        <div class=\"combinator\">\n          <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Step 1: Type blocks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @for (block of ctrl.blocks(); track block.id) {\n        <div class=\"block\" [attr.data-block-id]=\"block.id\" [class.block--active]=\"ctrl.activeBlock() === block\">\n          <div class=\"block__header\">\n            <div class=\"block__types\">\n              @for (t of block.types; track t.id) {\n                @if (!$first) {\n                  <span class=\"block__type-sep\">{{ 'yuv.smart-search.combinator.or' | translate }}</span>\n                }\n                <span class=\"block__type\">\n                  <span class=\"block__type-label\">{{ t.label }}</span>\n                </span>\n              }\n            </div>\n            <button\n              ymtIconButton\n              icon-button-size=\"extra-small\"\n              class=\"block__remove\"\n              (click)=\"removeBlock(block)\"\n              [matTooltip]=\"'yuv.smart-search.type.remove' | translate\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n\n          <div class=\"block__conditions\">\n            <yuv-smart-search-group [group]=\"block\" [bare]=\"true\" [chipTpl]=\"chipTpl\" [editorTpl]=\"editorTpl\" />\n          </div>\n        </div>\n\n        <!-- Static joiner between blocks \u2014 blocks are type-scoped, so they always\n             combine with OR (\"this type as well as that type\"). -->\n        @if (!$last && ctrl.showCombinator()) {\n          <div class=\"combinator\">\n            <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n          </div>\n        }\n      }\n\n      <!-- \u2500\u2500 Step 1 input: add a type block (multi-select) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (ctrl.step() === 'type') {\n        <div class=\"add-type-row\">\n          <button\n            type=\"button\"\n            ymtIconButton\n            icon-button-size=\"extra-small\"\n            class=\"add-type-row__icon\"\n            (click)=\"typeInput.focus()\"\n            [attr.aria-label]=\"'yuv.smart-search.add-type' | translate\"\n            [matTooltip]=\"'yuv.smart-search.type.add-type.tooltip' | translate\"\n          >\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n\n          <!-- Staged draft types as removable Material chips -->\n          <mat-chip-grid\n            #typeChipGrid\n            class=\"add-type-row__chips\"\n            [attr.aria-label]=\"'yuv.smart-search.add-type' | translate\"\n          >\n            @for (t of ctrl.draftTypes(); track t.id) {\n              <mat-chip-row (removed)=\"ctrl.removeDraftType(t.id)\">\n                {{ t.label }}\n                <button matChipRemove [attr.aria-label]=\"'yuv.smart-search.type.remove-draft' | translate\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </mat-chip-row>\n            }\n            <input\n              #typeInput\n              [formControl]=\"ctrl.fieldCtrl\"\n              [placeholder]=\"'yuv.smart-search.add-type' | translate\"\n              [matAutocomplete]=\"auto\"\n              [matChipInputFor]=\"typeChipGrid\"\n              [matChipInputSeparatorKeyCodes]=\"NO_SEPARATOR_KEYS\"\n              (keydown.enter)=\"onTypeEnter($event)\"\n              (keydown.escape)=\"cancelPending()\"\n            />\n          </mat-chip-grid>\n\n          @if (ctrl.draftTypes().length) {\n            <button\n              ymtIconButton\n              icon-button-size=\"extra-small\"\n              class=\"add-type-row__confirm\"\n              (click)=\"confirmTypes()\"\n              [matTooltip]=\"'yuv.smart-search.type.confirm' | translate\"\n            >\n              <mat-icon>check</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- \u2500\u2500 Shared autocomplete panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <mat-autocomplete\n    #auto\n    panelWidth=\"auto\"\n    [displayWith]=\"displayFn\"\n    (optionSelected)=\"onSuggestionSelected($event)\"\n    (closed)=\"onPickerClosed()\"\n  >\n    @for (s of ctrl.suggestions(); track s.id) {\n      <mat-option [value]=\"s\">\n        <div class=\"suggestion\">\n          @if (s.kind !== 'type') {\n            <mat-icon class=\"suggestion__icon\">\n              @switch (s.kind) {\n                @case ('field') {\n                  tune\n                }\n                @case ('date-preset') {\n                  calendar_today\n                }\n                @default {\n                  manage_search\n                }\n              }\n            </mat-icon>\n          }\n          <span class=\"suggestion__label\">{{ s.label }}</span>\n        </div>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</div>\n", styles: [":host{display:block;--outline: rgb(from var(--ymt-text-color) r g b / .5);--focus-visible-border-color: var(--ymt-primary);--focus-visible-border-shadow-color: rgb(from var(--ymt-primary) r g b / .3)}::ng-deep .smart-search-select-panel.mat-mdc-select-panel{min-width:max-content}::ng-deep .smart-search-select-panel.mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{white-space:nowrap}.smart-search{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs)}.fulltext{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);border:1px solid var(--outline);border-radius:var(--ymt-corner-s);transition:opacity .15s}.fulltext.muted{opacity:.7}.fulltext.muted:hover,.fulltext.muted:focus-within{opacity:1}.fulltext__term{display:flex;align-items:center;gap:var(--ymt-spacing-xs)}.fulltext__icon{color:var(--ymt-text-color-subtle)}.fulltext__input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font:inherit;color:var(--ymt-text-color)}.fulltext__input::placeholder{color:var(--ymt-text-color-subtle);opacity:.7}.fulltext__filters{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--ymt-spacing-s)}.fulltext__scope,.fulltext__types{width:auto;font-size:.9em;color:var(--ymt-text-color-subtle);border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding-inline:var(--ymt-spacing-xs)}.fulltext__scope:focus-visible,.fulltext__types:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.block{border:1px solid var(--outline);border-radius:var(--ymt-corner-s);overflow:hidden;transition:border-color .15s;padding:var(--ymt-spacing-2xs)}.block:focus-within{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 3px var(--focus-visible-border-shadow-color)}.block__header{border-radius:var(--ymt-corner-xs);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);background:var(--ymt-surface-container-high)}.block__types{flex:1;display:flex;align-items:center;flex-wrap:wrap}.block__type{display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}.block__type-sep{font:var(--ymt-font-body-subtle);text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-xs)}.block__remove{margin-inline-start:auto;opacity:.7}.block__conditions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ymt-spacing-2xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);min-height:44px}.condition-chip{display:flex;flex:1;align-items:center;gap:0;border-radius:var(--ymt-corner-xs);border:1px solid var(--outline);cursor:pointer;overflow:hidden;outline:none;gap:var(--ymt-spacing-2xs)}.condition-chip:hover{border-color:var(--ymt-outline)}.condition-chip:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.condition-chip__part{display:inline-flex;align-items:center;gap:var(--ymt-spacing-4xs);padding:0 var(--ymt-spacing-xs);height:100%;white-space:nowrap;color:var(--ymt-text-color)}.condition-chip__part:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.condition-chip__op{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0}.condition-chip__value{flex:1;overflow:hidden;text-overflow:ellipsis;min-height:24px;--tile-slot-padding: 0;--yuv-renderer-display: inline-flex}.condition-chip__remove{--mat-icon-button-container-shape: 0;color:var(--ymt-text-color-subtle)}.condition-chip__remove:hover{color:var(--ymt-text-color)}.condition-chip__placeholder{font:var(--ymt-font-body-subtle);font-style:italic;color:var(--ymt-text-color-subtle);opacity:.8}.condition-chip__dynamic{--mat-icon-button-container-shape: 0;color:var(--ymt-text-color-subtle)}.condition-chip__dynamic:hover{color:var(--ymt-text-color)}.condition-chip--dynamic{outline:2px solid var(--ymt-inverse-surface);outline-offset:1px}.condition-chip--dynamic .condition-chip__dynamic{border-radius:0;background-color:var(--ymt-inverse-surface);color:var(--ymt-on-inverse-surface)}.toolbar{display:flex;justify-content:flex-end;align-items:center;background:var(--ymt-surface-container-high);border-radius:var(--ymt-corner-xs);border:1px solid var(--ymt-outline);padding:var(--ymt-spacing-3xs)}.toolbar__mode{display:inline-flex;gap:0}.toolbar__mode-btn{--bg: transparent;--fg: var(--ymt-text-color);--mdc-shape-small: var(--ymt-corner-xs);font-size:.82em;background-color:var(--bg);color:var(--fg);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);border:1px solid var(--ymt-inverse-surface);cursor:pointer}.toolbar__mode-btn:focus-visible{box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.toolbar__mode-btn:first-child{border-radius:var(--mdc-shape-small) 0 0 var(--mdc-shape-small)}.toolbar__mode-btn:last-child{border-radius:0 var(--mdc-shape-small) var(--mdc-shape-small) 0}.toolbar__mode-btn--active{--bg: var(--ymt-inverse-surface);--fg: var(--ymt-on-inverse-surface)}.dynamic-form{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs)}.dynamic-form__block{container-type:inline-size;border:1px solid var(--outline);border-radius:var(--ymt-corner-s);overflow:hidden}.dynamic-form__block-header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s);font:var(--ymt-font-body-subtle)}.dynamic-form__type-sep{text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-2xs)}.dynamic-form__rows{display:grid;grid-template-columns:max-content max-content 1fr;row-gap:var(--ymt-spacing-s);column-gap:var(--ymt-spacing-xs);overflow:auto;padding:var(--ymt-spacing-s)}.dynamic-form__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center}.dynamic-form__label{color:var(--ymt-text-color)}.dynamic-form__op{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);border:1px solid var(--outline);padding-inline:var(--ymt-spacing-2xs);border-radius:var(--ymt-corner-xs)}.dynamic-form__value{flex:1;padding:var(--ymt-spacing-xs);border:1px solid var(--outline);border-radius:var(--ymt-corner-xs)}.dynamic-form__value input{width:100%;border:none;outline:none;background:transparent;font:inherit;color:var(--ymt-text-color)}.dynamic-form__empty{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}@container (max-width: 499px){.dynamic-form__rows{grid-template-columns:1fr auto}.dynamic-form__row{grid-template-columns:subgrid;grid-column:1/-1;row-gap:var(--ymt-spacing-2xs)}.dynamic-form__value{grid-column:1/-1}}.inline-input{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);flex:1;border:1px dashed var(--outline);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-2xs);background:var(--ymt-surface)}.inline-input yuv-metadata-form-field{border-radius:var(--ymt-corner-xs)}.inline-input yuv-metadata-form-field:focus-within{outline:1px solid var(--focus-visible-border-color)}.inline-input .part-pill{display:inline-flex;align-items:center;gap:var(--ymt-spacing-4xs);white-space:nowrap;font:inherit;font-size:var(--ymt-font-body-subtle-size);color:var(--ymt-text-color);background:var(--ymt-surface-container);border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-4xs) var(--ymt-spacing-xs);cursor:pointer;transition:border-color .1s,background .1s}.inline-input .part-pill:hover{background:var(--ymt-surface-container-high)}.inline-input .part-pill:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.inline-input .part-pill--active{border-color:var(--ymt-primary);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.inline-input .part-pill mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}.inline-input yuv-metadata-form-field{flex:1;min-width:150px}.inline-input input{flex:1;border:none;outline:none;background:transparent}.inline-input .confirm-btn:not(:disabled){opacity:1;color:var(--ymt-color-accent)}.combinator{display:flex;justify-content:center;gap:0}.combinator__label{font:var(--ymt-font-body-subtle);text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}.add-type-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);border:1px dashed var(--ymt-outline);border-radius:var(--ymt-corner-s);color:var(--ymt-text-color-subtle)}.add-type-row__icon{display:inline-flex;align-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.add-type-row__icon mat-icon{font-size:var(--ymt-sizing-m);width:var(--ymt-sizing-m);height:var(--ymt-sizing-m);opacity:.5}.add-type-row__icon:hover mat-icon{opacity:.8}.add-type-row__confirm{color:var(--ymt-primary)}.add-type-row__chips{flex:1;min-width:120px}.add-type-row input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font:inherit;font-size:.9em;color:inherit}.add-type-row input::placeholder{color:var(--ymt-text-color-subtle);opacity:.7}.condition-combinator{display:flex;align-self:center}.suggestion{display:flex;align-items:center;gap:var(--ymt-spacing-xs)}.suggestion__icon{font-size:var(--ymt-sizing-s);width:var(--ymt-sizing-s);height:var(--ymt-sizing-s);--icon-size: var(--ymt-sizing-s);opacity:.6}.suggestion__label{flex:1}\n"] }]
+                    ], providers: [SmartSearchEditController], host: { '(keydown.enter)': 'onHostEnter($event)' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"smart-search\" halo-container halo-container-skip=\"true\">\n  <!-- Condition chip template \u2014 passed down into the recursive group component. -->\n  <ng-template #chipTpl let-condition let-container=\"container\" let-i=\"index\">\n    <div\n      class=\"condition-chip\"\n      [class.condition-chip--unset]=\"isUnset(condition)\"\n      [class.condition-chip--dynamic]=\"condition.dynamic\"\n      tabindex=\"0\"\n      role=\"button\"\n      [attr.aria-label]=\"'yuv.smart-search.condition.edit-aria' | translate: { label: condition.conditionLabel }\"\n      (click)=\"editCondition(container, condition, i)\"\n      (keydown.space)=\"$event.preventDefault(); editCondition(container, condition, i)\"\n      (keydown.enter)=\"$event.preventDefault(); editCondition(container, condition, i)\"\n    >\n      @if (supportDynamicConditions() && !isValueless(condition.operator)) {\n        <!-- The name stays put and `aria-pressed` carries the state; the tooltip, which `matTooltip`\n             exposes as `aria-describedby`, is what names the action. The keydown guards stop the\n             chip's own enter/space handler from also opening the editor on the same keystroke. -->\n        <button\n          type=\"button\"\n          ymtIconButton\n          icon-button-size=\"extra-small\"\n          class=\"condition-chip__dynamic\"\n          [attr.aria-pressed]=\"!!condition.dynamic\"\n          [attr.aria-label]=\"'yuv.smart-search.condition.dynamic-aria' | translate: { label: condition.conditionLabel }\"\n          [matTooltip]=\"\n            (condition.dynamic\n              ? 'yuv.smart-search.condition.unmark-dynamic'\n              : 'yuv.smart-search.condition.mark-dynamic'\n            ) | translate\n          \"\n          (click)=\"$event.stopPropagation(); toggleDynamic(container, condition)\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n        >\n          <mat-icon>bolt</mat-icon>\n        </button>\n      }\n\n      <span class=\"condition-chip__part condition-chip__field\">\n        <!-- <mat-icon>tune</mat-icon> -->\n        {{ condition.fieldLabel }}\n      </span>\n      <span class=\"condition-chip__part condition-chip__op\">{{ condition.operatorLabel }}</span>\n      <!-- A valueless operator states the whole condition on its own (`is empty`, or a date\n           preset whose label already reads \u201CThis year\u201D), so it gets no value segment: the\n           stored value is an internal marker (`thisYear`), not something to show the user. -->\n      @if (!isValueless(condition.operator)) {\n        <span class=\"condition-chip__part condition-chip__value\">\n          @if (isUnset(condition)) {\n            <span class=\"condition-chip__placeholder\">{{ 'yuv.smart-search.condition.unset-value' | translate }}</span>\n          } @else if (valueRendererInput(condition); as rendererInput) {\n            <ng-container *yuvRenderer=\"rendererInput\" />\n          } @else {\n            {{ condition.value }}\n          }\n        </span>\n      }\n      <!-- @if (supportDynamicConditions() && !isValueless(condition.operator)) {\n        <button\n          type=\"button\"\n          ymtIconButton\n          icon-button-size=\"extra-small\"\n          class=\"condition-chip__dynamic\"\n          tabindex=\"-1\"\n          [attr.aria-pressed]=\"!!condition.dynamic\"\n          [matTooltip]=\"\n            (condition.dynamic\n              ? 'yuv.smart-search.condition.unmark-dynamic'\n              : 'yuv.smart-search.condition.mark-dynamic'\n            ) | translate\n          \"\n          (click)=\"$event.stopPropagation(); toggleDynamic(container, condition)\"\n        >\n          <mat-icon>bolt</mat-icon>\n        </button>\n      } -->\n      <button\n        type=\"button\"\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"condition-chip__remove\"\n        [attr.aria-label]=\"'yuv.smart-search.condition.remove' | translate\"\n        (click)=\"$event.stopPropagation(); removeCondition(container, condition)\"\n        (keydown.enter)=\"$event.stopPropagation()\"\n        (keydown.space)=\"$event.stopPropagation()\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <!-- Inline editor template \u2014 rendered inside whichever container is active. -->\n  <ng-template #editorTpl>\n    <!-- Enter is bound on the wrapper, not per input, so it also covers the value step's\n         real metadata widget and runs after each widget's own key handling. -->\n    <div\n      class=\"inline-input\"\n      tabindex=\"-1\"\n      (focusout)=\"onInlineBlur($event)\"\n      (keydown.enter)=\"onEnter($event)\"\n      (keydown.escape)=\"cancelPending()\"\n    >\n      @if (ctrl.step() !== 'field' && ctrl.pendingField()) {\n        <button\n          class=\"part-pill\"\n          [class.part-pill--active]=\"ctrl.step() === 'field'\"\n          (click)=\"editField()\"\n          [matTooltip]=\"'yuv.smart-search.field.change' | translate\"\n        >\n          {{ ctrl.pendingField()?.label }}\n        </button>\n      }\n\n      <!-- The operator is always a pill, never editable text: at the value step it is the\n           way back to the operator picker, and at the operator step it shows what is\n           currently set while the (empty) input below filters the replacement list. -->\n      @if (ctrl.step() !== 'field' && ctrl.pendingOperatorLabel()) {\n        <button\n          class=\"part-pill\"\n          [class.part-pill--active]=\"ctrl.step() === 'operator'\"\n          (click)=\"editOperator()\"\n          [matTooltip]=\"'yuv.smart-search.operator.change' | translate\"\n        >\n          {{ ctrl.pendingOperatorLabel() }}\n        </button>\n      }\n\n      @if (ctrl.step() === 'field') {\n        <input\n          [formControl]=\"ctrl.fieldCtrl\"\n          [matAutocomplete]=\"auto\"\n          [placeholder]=\"'yuv.smart-search.field.pick' | translate\"\n        />\n      } @else if (ctrl.step() === 'operator') {\n        <input\n          [formControl]=\"ctrl.operatorCtrl\"\n          [matAutocomplete]=\"auto\"\n          [placeholder]=\"'yuv.smart-search.operator.select' | translate\"\n        />\n      } @else if (ctrl.step() === 'value') {\n        @let otf = valueFieldDef();\n        @if (otf) {\n          <yuv-metadata-form-field variant=\"raw\" [field]=\"otf\" situation=\"EDIT\" [formControl]=\"ctrl.valueCtrl\" />\n        } @else {\n          <input\n            [formControl]=\"ctrl.valueCtrl\"\n            [matAutocomplete]=\"auto\"\n            [placeholder]=\"'yuv.smart-search.value.enter' | translate\"\n          />\n        }\n      }\n\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"confirm-btn\"\n        [disabled]=\"!ctrl.isConditionComplete()\"\n        (click)=\"onEnter()\"\n        [matTooltip]=\"'yuv.smart-search.confirm' | translate\"\n      >\n        <mat-icon>check</mat-icon>\n      </button>\n      <button\n        ymtIconButton\n        icon-button-size=\"extra-small\"\n        class=\"cancel-btn\"\n        (click)=\"cancelPending()\"\n        [matTooltip]=\"'yuv.smart-search.cancel' | translate\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </ng-template>\n\n  <!-- \u2500\u2500 Toolbar: Essentials \u21C4 Full Form mode switch (only when the dynamic feature is enabled) \u2500\u2500 -->\n  @if (!fulltextOnly() && supportDynamicConditions() && (hasDynamicConditions() || formMode())) {\n    <div class=\"toolbar\">\n      <div class=\"toolbar__mode\" role=\"group\" [attr.aria-label]=\"'yuv.smart-search.mode.label' | translate\">\n        <button\n          type=\"button\"\n          class=\"toolbar__mode-btn\"\n          [class.toolbar__mode-btn--active]=\"formMode()\"\n          [attr.aria-pressed]=\"formMode()\"\n          (click)=\"enterFormMode()\"\n        >\n          {{ 'yuv.smart-search.mode.essentials' | translate }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"toolbar__mode-btn\"\n          [class.toolbar__mode-btn--active]=\"!formMode()\"\n          [attr.aria-pressed]=\"!formMode()\"\n          (click)=\"exitFormMode()\"\n        >\n          {{ 'yuv.smart-search.mode.full' | translate }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Generated fill-out form of the dynamic conditions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (formMode()) {\n    <div class=\"dynamic-form\">\n      @for (grp of formBlocks(); track grp.block.id; let last = $last) {\n        <div class=\"dynamic-form__block\">\n          <!-- Muted header listing the block's target types (a block matches any of them). -->\n          <div class=\"dynamic-form__block-header\">\n            @for (t of grp.block.types; track t.id) {\n              @if (!$first) {\n                <span class=\"dynamic-form__type-sep\">{{ 'yuv.smart-search.combinator.or' | translate }}</span>\n              }\n              <span class=\"dynamic-form__type\">{{ t.label }}</span>\n            }\n          </div>\n\n          <div class=\"dynamic-form__rows\">\n            @for (f of grp.fields; track f.condition) {\n              <div class=\"dynamic-form__row\">\n                <span class=\"dynamic-form__label\">{{ f.condition.fieldLabel }}</span>\n                <span class=\"dynamic-form__op\">{{ f.condition.operatorLabel }}</span>\n                <div class=\"dynamic-form__value\">\n                  @if (f.def) {\n                    <yuv-metadata-form-field variant=\"raw\" [field]=\"f.def\" situation=\"EDIT\" [formControl]=\"f.control\" />\n                  } @else {\n                    <input [formControl]=\"f.control\" [placeholder]=\"'yuv.smart-search.value.enter' | translate\" />\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Blocks are type-scoped and always combine with OR (\"this type as well as that type\"). -->\n        @if (!last) {\n          <div class=\"combinator\">\n            <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n          </div>\n        }\n      } @empty {\n        <span class=\"dynamic-form__empty\">{{ 'yuv.smart-search.mode.empty' | translate }}</span>\n      }\n    </div>\n  } @else {\n    <!-- \u2500\u2500 Full-text search bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <!-- Muting hints \"the blocks carry the search, not me\" \u2014 with the blocks hidden there\n         is nothing to defer to, so the only visible control never greys out. -->\n    <div class=\"fulltext\" [class.muted]=\"!fulltextOnly() && !fulltextActive() && ctrl.blocks().length\">\n      <!-- Row 1: full-width term -->\n      <div class=\"fulltext__term\">\n        <mat-icon class=\"fulltext__icon\">search</mat-icon>\n        <input\n          class=\"fulltext__input\"\n          [formControl]=\"fulltextTermCtrl\"\n          [placeholder]=\"'yuv.smart-search.fulltext.placeholder' | translate\"\n        />\n      </div>\n\n      <!-- Row 2: scope (single) + types (multiple) -->\n      <div class=\"fulltext__filters\">\n        <mat-select\n          class=\"fulltext__scope\"\n          [panelWidth]=\"null\"\n          panelClass=\"smart-search-select-panel\"\n          [value]=\"fulltext().scope\"\n          (selectionChange)=\"setFulltextScope($event.value)\"\n          [aria-label]=\"'yuv.smart-search.fulltext.scope.label' | translate\"\n        >\n          <mat-option value=\"all\">{{ 'yuv.smart-search.fulltext.scope.all' | translate }}</mat-option>\n          <mat-option value=\"metadata\">{{ 'yuv.smart-search.fulltext.scope.metadata' | translate }}</mat-option>\n          <mat-option value=\"content\">{{ 'yuv.smart-search.fulltext.scope.content' | translate }}</mat-option>\n        </mat-select>\n\n        <mat-select\n          class=\"fulltext__types\"\n          multiple\n          [panelWidth]=\"null\"\n          panelClass=\"smart-search-select-panel\"\n          [value]=\"fulltextTypeSelection()\"\n          (selectionChange)=\"onFulltextTypesChange($event.value)\"\n          [aria-label]=\"'yuv.smart-search.fulltext.types.label' | translate\"\n        >\n          <mat-option [value]=\"ALL_TYPES\">{{ 'yuv.smart-search.fulltext.types.all' | translate }}</mat-option>\n          @for (t of objectTypes(); track t.id) {\n            <mat-option [value]=\"t.id\">{{ t.label ?? t.id }}</mat-option>\n          }\n        </mat-select>\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Condition builder (hidden in full-text-only mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (!fulltextOnly()) {\n      <!-- Joiner between the full-text unit and the condition blocks. Top-level units\n           always combine with OR (\"looking for this as well as that\"), so this is a\n           static label rather than a toggle. -->\n      @if (fulltextActive() && ctrl.blocks().length) {\n        <div class=\"combinator\">\n          <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Step 1: Type blocks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @for (block of ctrl.blocks(); track block.id) {\n        <div class=\"block\" [attr.data-block-id]=\"block.id\" [class.block--active]=\"ctrl.activeBlock() === block\">\n          <div class=\"block__header\">\n            <div class=\"block__types\">\n              @for (t of block.types; track t.id) {\n                @if (!$first) {\n                  <span class=\"block__type-sep\">{{ 'yuv.smart-search.combinator.or' | translate }}</span>\n                }\n                <span class=\"block__type\">\n                  <span class=\"block__type-label\">{{ t.label }}</span>\n                </span>\n              }\n            </div>\n            <button\n              ymtIconButton\n              icon-button-size=\"extra-small\"\n              class=\"block__remove\"\n              (click)=\"removeBlock(block)\"\n              [matTooltip]=\"'yuv.smart-search.type.remove' | translate\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n\n          <div class=\"block__conditions\">\n            <yuv-smart-search-group [group]=\"block\" [bare]=\"true\" [chipTpl]=\"chipTpl\" [editorTpl]=\"editorTpl\" />\n          </div>\n        </div>\n\n        <!-- Static joiner between blocks \u2014 blocks are type-scoped, so they always\n             combine with OR (\"this type as well as that type\"). -->\n        @if (!$last && ctrl.showCombinator()) {\n          <div class=\"combinator\">\n            <span class=\"combinator__label\">{{ 'yuv.smart-search.combinator.as-well-as' | translate }}</span>\n          </div>\n        }\n      }\n\n      <!-- \u2500\u2500 Step 1 input: add a type block (multi-select) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (ctrl.step() === 'type') {\n        <div class=\"add-type-row\">\n          <button\n            type=\"button\"\n            ymtIconButton\n            icon-button-size=\"extra-small\"\n            class=\"add-type-row__icon\"\n            (click)=\"typeInput.focus()\"\n            [attr.aria-label]=\"'yuv.smart-search.add-type' | translate\"\n            [matTooltip]=\"'yuv.smart-search.type.add-type.tooltip' | translate\"\n          >\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n\n          <!-- Staged draft types as removable Material chips -->\n          <mat-chip-grid\n            #typeChipGrid\n            class=\"add-type-row__chips\"\n            [attr.aria-label]=\"'yuv.smart-search.add-type' | translate\"\n          >\n            @for (t of ctrl.draftTypes(); track t.id) {\n              <mat-chip-row (removed)=\"ctrl.removeDraftType(t.id)\">\n                {{ t.label }}\n                <button matChipRemove [attr.aria-label]=\"'yuv.smart-search.type.remove-draft' | translate\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </mat-chip-row>\n            }\n            <input\n              #typeInput\n              [formControl]=\"ctrl.fieldCtrl\"\n              [placeholder]=\"'yuv.smart-search.add-type' | translate\"\n              [matAutocomplete]=\"auto\"\n              [matChipInputFor]=\"typeChipGrid\"\n              [matChipInputSeparatorKeyCodes]=\"NO_SEPARATOR_KEYS\"\n              (keydown.enter)=\"onTypeEnter($event)\"\n              (keydown.escape)=\"cancelPending()\"\n            />\n          </mat-chip-grid>\n\n          @if (ctrl.draftTypes().length) {\n            <button\n              ymtIconButton\n              icon-button-size=\"extra-small\"\n              class=\"add-type-row__confirm\"\n              (click)=\"confirmTypes()\"\n              [matTooltip]=\"'yuv.smart-search.type.confirm' | translate\"\n            >\n              <mat-icon>check</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- \u2500\u2500 Shared autocomplete panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <mat-autocomplete\n    #auto\n    panelWidth=\"auto\"\n    [displayWith]=\"displayFn\"\n    (optionSelected)=\"onSuggestionSelected($event)\"\n    (closed)=\"onPickerClosed()\"\n  >\n    @for (s of ctrl.suggestions(); track s.id) {\n      <mat-option [value]=\"s\">\n        <div class=\"suggestion\">\n          @if (s.kind !== 'type') {\n            <mat-icon class=\"suggestion__icon\">\n              @switch (s.kind) {\n                @case ('field') {\n                  tune\n                }\n                @case ('date-preset') {\n                  calendar_today\n                }\n                @default {\n                  manage_search\n                }\n              }\n            </mat-icon>\n          }\n          <span class=\"suggestion__label\">{{ s.label }}</span>\n        </div>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</div>\n", styles: [":host{display:block;--outline: rgb(from var(--ymt-text-color) r g b / .5);--focus-visible-border-color: var(--ymt-primary);--focus-visible-border-shadow-color: rgb(from var(--ymt-primary) r g b / .3)}::ng-deep .smart-search-select-panel.mat-mdc-select-panel{min-width:max-content}::ng-deep .smart-search-select-panel.mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{white-space:nowrap}.smart-search{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs)}.fulltext{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);border:1px solid var(--outline);border-radius:var(--ymt-corner-s);transition:opacity .15s}.fulltext.muted{opacity:.7}.fulltext.muted:hover,.fulltext.muted:focus-within{opacity:1}.fulltext__term{display:flex;align-items:center;gap:var(--ymt-spacing-xs)}.fulltext__icon{color:var(--ymt-text-color-subtle)}.fulltext__input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font:inherit;color:var(--ymt-text-color)}.fulltext__input::placeholder{color:var(--ymt-text-color-subtle);opacity:.7}.fulltext__filters{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--ymt-spacing-s)}.fulltext__scope,.fulltext__types{width:auto;font-size:.9em;color:var(--ymt-text-color-subtle);border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding-inline:var(--ymt-spacing-xs)}.fulltext__scope:focus-visible,.fulltext__types:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.block{border:1px solid var(--outline);border-radius:var(--ymt-corner-s);overflow:hidden;transition:border-color .15s;padding:var(--ymt-spacing-2xs)}.block:focus-within{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 3px var(--focus-visible-border-shadow-color)}.block__header{border-radius:var(--ymt-corner-xs);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);background:var(--ymt-surface-container-high)}.block__types{flex:1;display:flex;align-items:center;flex-wrap:wrap}.block__type{display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}.block__type-sep{font:var(--ymt-font-body-subtle);text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-xs)}.block__remove{margin-inline-start:auto;opacity:.7}.block__conditions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ymt-spacing-2xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);min-height:44px}.condition-chip{display:flex;flex:1;align-items:center;gap:0;border-radius:var(--ymt-corner-xs);border:1px solid var(--outline);cursor:pointer;overflow:hidden;outline:none;gap:var(--ymt-spacing-2xs)}.condition-chip:hover{border-color:var(--ymt-outline)}.condition-chip:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.condition-chip__part{display:inline-flex;align-items:center;gap:var(--ymt-spacing-4xs);padding:0 var(--ymt-spacing-xs);height:100%;white-space:nowrap;color:var(--ymt-text-color)}.condition-chip__part:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.condition-chip__op{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0}.condition-chip__value{flex:1;overflow:hidden;text-overflow:ellipsis;min-height:24px;--tile-slot-padding: 0;--yuv-renderer-display: inline-flex}.condition-chip__remove{--mat-icon-button-container-shape: 0;color:var(--ymt-text-color-subtle)}.condition-chip__remove:hover{color:var(--ymt-text-color)}.condition-chip__placeholder{font:var(--ymt-font-body-subtle);font-style:italic;color:var(--ymt-text-color-subtle);opacity:.8}.condition-chip__dynamic{--mat-icon-button-container-shape: 0;color:var(--ymt-text-color-subtle)}.condition-chip__dynamic:hover{color:var(--ymt-text-color)}.condition-chip--dynamic{outline:2px solid var(--ymt-inverse-surface);outline-offset:1px}.condition-chip--dynamic .condition-chip__dynamic{border-radius:0;background-color:var(--ymt-inverse-surface);color:var(--ymt-on-inverse-surface)}.toolbar{display:flex;justify-content:flex-end;align-items:center;background:var(--ymt-surface-container-high);border-radius:var(--ymt-corner-xs);border:1px solid var(--ymt-outline);padding:var(--ymt-spacing-3xs)}.toolbar__mode{display:inline-flex;gap:0}.toolbar__mode-btn{--bg: transparent;--fg: var(--ymt-text-color);--mdc-shape-small: var(--ymt-corner-xs);font-size:.82em;background-color:var(--bg);color:var(--fg);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);border:1px solid var(--ymt-inverse-surface);cursor:pointer}.toolbar__mode-btn:focus-visible{box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.toolbar__mode-btn:first-child{border-radius:var(--mdc-shape-small) 0 0 var(--mdc-shape-small)}.toolbar__mode-btn:last-child{border-radius:0 var(--mdc-shape-small) var(--mdc-shape-small) 0}.toolbar__mode-btn--active{--bg: var(--ymt-inverse-surface);--fg: var(--ymt-on-inverse-surface)}.dynamic-form{display:flex;flex-direction:column;gap:var(--ymt-spacing-xs)}.dynamic-form__block{container-type:inline-size;border:1px solid var(--outline);border-radius:var(--ymt-corner-s);overflow:hidden}.dynamic-form__block-header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s);font:var(--ymt-font-body-subtle)}.dynamic-form__type-sep{text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-2xs)}.dynamic-form__rows{display:grid;grid-template-columns:max-content max-content 1fr;row-gap:var(--ymt-spacing-s);column-gap:var(--ymt-spacing-xs);overflow:auto;padding:var(--ymt-spacing-s)}.dynamic-form__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center}.dynamic-form__label{color:var(--ymt-text-color)}.dynamic-form__op{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);border:1px solid var(--outline);padding-inline:var(--ymt-spacing-2xs);border-radius:var(--ymt-corner-xs)}.dynamic-form__value{flex:1;padding:var(--ymt-spacing-xs);border:1px solid var(--outline);border-radius:var(--ymt-corner-xs)}.dynamic-form__value input{width:100%;border:none;outline:none;background:transparent;font:inherit;color:var(--ymt-text-color)}.dynamic-form__empty{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}@container (max-width: 499px){.dynamic-form__rows{grid-template-columns:1fr auto}.dynamic-form__row{grid-template-columns:subgrid;grid-column:1/-1;row-gap:var(--ymt-spacing-2xs)}.dynamic-form__value{grid-column:1/-1}}.inline-input{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);flex:1;border:1px dashed var(--outline);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-2xs);background:var(--ymt-surface)}.inline-input yuv-metadata-form-field{border-radius:var(--ymt-corner-xs)}.inline-input yuv-metadata-form-field:focus-within{outline:1px solid var(--focus-visible-border-color)}.inline-input .part-pill{display:inline-flex;align-items:center;gap:var(--ymt-spacing-4xs);white-space:nowrap;font:inherit;font-size:var(--ymt-font-body-subtle-size);color:var(--ymt-text-color);background:var(--ymt-surface-container);border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-4xs) var(--ymt-spacing-xs);cursor:pointer;transition:border-color .1s,background .1s}.inline-input .part-pill:hover{background:var(--ymt-surface-container-high)}.inline-input .part-pill:focus-visible{border-color:var(--focus-visible-border-color);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.inline-input .part-pill--active{border-color:var(--ymt-primary);box-shadow:0 0 0 2px var(--focus-visible-border-shadow-color)}.inline-input .part-pill mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}.inline-input yuv-metadata-form-field{flex:1;min-width:150px}.inline-input input{flex:1;border:none;outline:none;background:transparent}.inline-input .confirm-btn:not(:disabled){opacity:1;color:var(--ymt-color-accent)}.combinator{display:flex;justify-content:center;gap:0}.combinator__label{font:var(--ymt-font-body-subtle);text-transform:lowercase;color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}.add-type-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);border:1px dashed var(--ymt-outline);border-radius:var(--ymt-corner-s);color:var(--ymt-text-color-subtle)}.add-type-row__icon{display:inline-flex;align-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.add-type-row__icon mat-icon{font-size:var(--ymt-sizing-m);width:var(--ymt-sizing-m);height:var(--ymt-sizing-m);opacity:.5}.add-type-row__icon:hover mat-icon{opacity:.8}.add-type-row__confirm{color:var(--ymt-primary)}.add-type-row__chips{flex:1;min-width:120px}.add-type-row input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font:inherit;font-size:.9em;color:inherit}.add-type-row input::placeholder{color:var(--ymt-text-color-subtle);opacity:.7}.condition-combinator{display:flex;align-self:center}.suggestion{display:flex;align-items:center;gap:var(--ymt-spacing-xs)}.suggestion__icon{font-size:var(--ymt-sizing-s);width:var(--ymt-sizing-s);height:var(--ymt-sizing-s);--icon-size: var(--ymt-sizing-s);opacity:.6}.suggestion__label{flex:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { types: [{ type: i0.Input, args: [{ isSignal: true, alias: "types", required: false }] }], ignoreTypePermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreTypePermissions", required: false }] }], skipProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipProperties", required: false }] }], fulltextOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "fulltextOnly", required: false }] }], supportDynamicConditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportDynamicConditions", required: false }] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], querySubmit: [{ type: i0.Output, args: ["querySubmit"] }], auto: [{ type: i0.ViewChild, args: ['auto', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }] } });
 
 /**