valtech-components 4.0.1042 → 4.0.1044

package/fesm2022/valtech-components.mjs

@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.1042';
+const VERSION = '4.0.1044';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -23646,23 +23646,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
  */
 class SelectSearchComponent {
-    constructor() {
-        this.label = '';
-        this.labelProperty = 'name';
-        this.valueProperty = 'id';
-        this.multiple = false;
-        this.placeholder = '';
-        this.icon = inject(IconService);
-        this.changeDetector = inject(ChangeDetectorRef);
-        this.i18n = inject(I18nService);
-        this.modals = inject(ModalService);
-        this.searchTerm = '';
-        this.filteredItems = [];
-        this.selectedItems = [];
-        this.displayValue = '';
-        this.previousOptions = [];
-        this.isProcessingChanges = false;
-    }
     /**
      * Label visible sobre el selector (estilo val-form). Solo se muestra si viene
      * explícito por `props.label` o el input `label`; sin él, no se renderiza nada.
@@ -23690,6 +23673,24 @@ class SelectSearchComponent {
     getItemsSelectedText(count) {
         return `${count} ${this.i18n.t('itemsSelected')}`;
     }
+    constructor() {
+        this.label = '';
+        this.labelProperty = 'name';
+        this.valueProperty = 'id';
+        this.multiple = false;
+        this.placeholder = '';
+        this.icon = inject(IconService);
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.i18n = inject(I18nService);
+        this.modals = inject(ModalService);
+        this.searchTerm = '';
+        this.filteredItems = [];
+        this.selectedItems = [];
+        this.displayValue = '';
+        this.previousOptions = [];
+        this.isProcessingChanges = false;
+        addIcons({ chevronDownOutline });
+    }
     ngOnInit() {
         this.applyDefaultValue();
         this.initializeItems();
@@ -23859,6 +23860,11 @@ class SelectSearchComponent {
         event.stopPropagation();
         void this.openPicker();
     }
+    openPickerFromKeyboard(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        void this.openPicker();
+    }
     updateDisplayValue() {
         if (this.props?.mode === 'legacy' && this.selectedItems.length === 0 && this.props?.control?.value) {
             this.displayValue = this.props.control.value.toString();
@@ -23912,33 +23918,43 @@ class SelectSearchComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectSearchComponent, isStandalone: true, selector: "val-select-search", inputs: { label: "label", labelProperty: "labelProperty", valueProperty: "valueProperty", multiple: "multiple", placeholder: "placeholder", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
     <label *ngIf="displayLabel" class="vss-label">{{ displayLabel }}</label>
 
-    <ion-input
-      type="text"
-      [value]="displayValue"
-      [placeholder]="getPlaceholder()"
-      readonly
+    <div
+      class="vss-control"
+      role="button"
+      tabindex="0"
+      [attr.aria-label]="getLabel()"
       (mousedown)="preventDefaultBehavior($event)"
-    />
+      (keydown.enter)="openPickerFromKeyboard($event)"
+      (keydown.space)="openPickerFromKeyboard($event)"
+    >
+      <ion-input type="text" [value]="displayValue" [placeholder]="getPlaceholder()" readonly />
+      <ion-icon class="vss-indicator" name="chevron-down-outline" aria-hidden="true" />
+    </div>
 
     <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
-  `, isInline: true, styles: [":host{display:block}.vss-label{display:block;margin-bottom:4px;font-size:.8125rem;color:var(--ion-color-dark, #43464d)}ion-header{padding:8px 8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.vss-label{display:block;margin-bottom:4px;font-size:.8125rem;color:var(--ion-color-dark, #43464d)}.vss-control{position:relative;display:block;cursor:pointer}.vss-control ion-input{--padding-end: 44px;cursor:pointer}.vss-control:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:3px;border-radius:999px}.vss-indicator{position:absolute;top:50%;right:16px;width:1.25rem;height:1.25rem;transform:translateY(-50%);color:var(--ion-color-medium, #92949c);pointer-events:none}ion-header{padding:8px 8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-select-search', standalone: true, imports: [CommonModule, IonicModule, FormsModule, ReactiveFormsModule], template: `
     <label *ngIf="displayLabel" class="vss-label">{{ displayLabel }}</label>
 
-    <ion-input
-      type="text"
-      [value]="displayValue"
-      [placeholder]="getPlaceholder()"
-      readonly
+    <div
+      class="vss-control"
+      role="button"
+      tabindex="0"
+      [attr.aria-label]="getLabel()"
       (mousedown)="preventDefaultBehavior($event)"
-    />
+      (keydown.enter)="openPickerFromKeyboard($event)"
+      (keydown.space)="openPickerFromKeyboard($event)"
+    >
+      <ion-input type="text" [value]="displayValue" [placeholder]="getPlaceholder()" readonly />
+      <ion-icon class="vss-indicator" name="chevron-down-outline" aria-hidden="true" />
+    </div>
 
     <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
-  `, styles: [":host{display:block}.vss-label{display:block;margin-bottom:4px;font-size:.8125rem;color:var(--ion-color-dark, #43464d)}ion-header{padding:8px 8px 0}\n"] }]
-        }], propDecorators: { label: [{
+  `, styles: [":host{display:block}.vss-label{display:block;margin-bottom:4px;font-size:.8125rem;color:var(--ion-color-dark, #43464d)}.vss-control{position:relative;display:block;cursor:pointer}.vss-control ion-input{--padding-end: 44px;cursor:pointer}.vss-control:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:3px;border-radius:999px}.vss-indicator{position:absolute;top:50%;right:16px;width:1.25rem;height:1.25rem;transform:translateY(-50%);color:var(--ion-color-medium, #92949c);pointer-events:none}ion-header{padding:8px 8px 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], labelProperty: [{
                 type: Input
@@ -94787,6 +94803,7 @@ class ChatWindowComponent {
         this.deleteMessage = output();
         this.replyTo = output();
         this.editMessage = output();
+        this.copyMessage = output();
         this.typing = output();
         this.voice = output();
         this.msgsEl = viewChild('msgs');
@@ -94896,6 +94913,7 @@ class ChatWindowComponent {
                 this.reactionClick.emit({ msgId: event.msgId, token: event.token ?? '👍' });
                 break;
             case 'copy':
+                this.copyMessage.emit(event.msgId);
                 break;
         }
     }
@@ -94903,7 +94921,7 @@ class ChatWindowComponent {
         return this.i18n.t(key, 'ChatWindow');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatWindowComponent, isStandalone: true, selector: "val-chat-window", inputs: { convId: { classPropertyName: "convId", publicName: "convId", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, typingUsers: { classPropertyName: "typingUsers", publicName: "typingUsers", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, canModerate: { classPropertyName: "canModerate", publicName: "canModerate", isSignal: true, isRequired: false, transformFunction: null }, showAttach: { classPropertyName: "showAttach", publicName: "showAttach", isSignal: true, isRequired: false, transformFunction: null }, showDictation: { classPropertyName: "showDictation", publicName: "showDictation", isSignal: true, isRequired: false, transformFunction: null }, showVoiceMessage: { classPropertyName: "showVoiceMessage", publicName: "showVoiceMessage", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, renderAiMessages: { classPropertyName: "renderAiMessages", publicName: "renderAiMessages", isSignal: true, isRequired: false, transformFunction: null }, showReactions: { classPropertyName: "showReactions", publicName: "showReactions", isSignal: true, isRequired: false, transformFunction: null }, showReplyAction: { classPropertyName: "showReplyAction", publicName: "showReplyAction", isSignal: true, isRequired: false, transformFunction: null }, showReactAction: { classPropertyName: "showReactAction", publicName: "showReactAction", isSignal: true, isRequired: false, transformFunction: null }, showEditAction: { classPropertyName: "showEditAction", publicName: "showEditAction", isSignal: true, isRequired: false, transformFunction: null }, showDeleteAction: { classPropertyName: "showDeleteAction", publicName: "showDeleteAction", isSignal: true, isRequired: false, transformFunction: null }, showCopyAction: { classPropertyName: "showCopyAction", publicName: "showCopyAction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", loadMore: "loadMore", reactionClick: "reactionClick", deleteMessage: "deleteMessage", replyTo: "replyTo", editMessage: "editMessage", typing: "typing", voice: "voice" }, viewQueries: [{ propertyName: "msgsEl", first: true, predicate: ["msgs"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatWindowComponent, isStandalone: true, selector: "val-chat-window", inputs: { convId: { classPropertyName: "convId", publicName: "convId", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, typingUsers: { classPropertyName: "typingUsers", publicName: "typingUsers", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, canModerate: { classPropertyName: "canModerate", publicName: "canModerate", isSignal: true, isRequired: false, transformFunction: null }, showAttach: { classPropertyName: "showAttach", publicName: "showAttach", isSignal: true, isRequired: false, transformFunction: null }, showDictation: { classPropertyName: "showDictation", publicName: "showDictation", isSignal: true, isRequired: false, transformFunction: null }, showVoiceMessage: { classPropertyName: "showVoiceMessage", publicName: "showVoiceMessage", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, renderAiMessages: { classPropertyName: "renderAiMessages", publicName: "renderAiMessages", isSignal: true, isRequired: false, transformFunction: null }, showReactions: { classPropertyName: "showReactions", publicName: "showReactions", isSignal: true, isRequired: false, transformFunction: null }, showReplyAction: { classPropertyName: "showReplyAction", publicName: "showReplyAction", isSignal: true, isRequired: false, transformFunction: null }, showReactAction: { classPropertyName: "showReactAction", publicName: "showReactAction", isSignal: true, isRequired: false, transformFunction: null }, showEditAction: { classPropertyName: "showEditAction", publicName: "showEditAction", isSignal: true, isRequired: false, transformFunction: null }, showDeleteAction: { classPropertyName: "showDeleteAction", publicName: "showDeleteAction", isSignal: true, isRequired: false, transformFunction: null }, showCopyAction: { classPropertyName: "showCopyAction", publicName: "showCopyAction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", loadMore: "loadMore", reactionClick: "reactionClick", deleteMessage: "deleteMessage", replyTo: "replyTo", editMessage: "editMessage", copyMessage: "copyMessage", typing: "typing", voice: "voice" }, viewQueries: [{ propertyName: "msgsEl", first: true, predicate: ["msgs"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="chat">
       <div #msgs class="messages" (scroll)="onScroll()">
         @if (isLoading()) {
@@ -95203,7 +95221,7 @@ class ThreadPanelComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".thread-panel{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8)}.thread-header{padding:12px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff))}.thread-header .thread-title{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000);margin:0}.thread-loading{display:flex;align-items:center;justify-content:center;flex:1;gap:10px;color:var(--ion-color-dark, #92949c);font-size:.875rem}.thread-chat{flex:1;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ChatWindowComponent, selector: "val-chat-window", inputs: ["convId", "messages", "currentUserId", "isOpen", "typingUsers", "isLoading", "canModerate", "showAttach", "showDictation", "showVoiceMessage", "showAvatars", "renderAiMessages", "showReactions", "showReplyAction", "showReactAction", "showEditAction", "showDeleteAction", "showCopyAction"], outputs: ["sendMessage", "loadMore", "reactionClick", "deleteMessage", "replyTo", "editMessage", "typing", "voice"] }] }); }
+  `, isInline: true, styles: [".thread-panel{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8)}.thread-header{padding:12px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff))}.thread-header .thread-title{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000);margin:0}.thread-loading{display:flex;align-items:center;justify-content:center;flex:1;gap:10px;color:var(--ion-color-dark, #92949c);font-size:.875rem}.thread-chat{flex:1;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ChatWindowComponent, selector: "val-chat-window", inputs: ["convId", "messages", "currentUserId", "isOpen", "typingUsers", "isLoading", "canModerate", "showAttach", "showDictation", "showVoiceMessage", "showAvatars", "renderAiMessages", "showReactions", "showReplyAction", "showReactAction", "showEditAction", "showDeleteAction", "showCopyAction"], outputs: ["sendMessage", "loadMore", "reactionClick", "deleteMessage", "replyTo", "editMessage", "copyMessage", "typing", "voice"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThreadPanelComponent, decorators: [{
             type: Component,