@luzmo/lucero 1.0.1-alpha.45 → 1.0.1-alpha.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -9
- package/components/color-field/index.cjs +1 -1
- package/components/color-field/index.js +1 -1
- package/components/date-time-picker/index.cjs +1 -1
- package/components/date-time-picker/index.js +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +1 -1
- package/components/number-field/index.cjs +1 -1
- package/components/number-field/index.js +1 -1
- package/components/prompt-box/index.cjs +28 -26
- package/components/prompt-box/index.js +90 -61
- package/components/prompt-box/prompt-box.d.ts +72 -12
- package/components/search/index.cjs +1 -1
- package/components/search/index.js +1 -1
- package/components/text-field/index.cjs +1 -1
- package/components/text-field/index.js +1 -1
- package/components/text-field/text-field.d.ts +25 -0
- package/components/text-field-BKFCIyzQ.js +332 -0
- package/components/text-field-Cccbbja7.cjs +81 -0
- package/components/{text-field.module-Bp4Mwuvj.js → text-field.module-CQNW-UdO.js} +1 -1
- package/components/{text-field.module-eAEqjvZu.cjs → text-field.module-D0JJfBCr.cjs} +1 -1
- package/custom-elements.json +1 -1
- package/package.json +1 -1
- package/components/text-field-CclDsK1X.cjs +0 -81
- package/components/text-field-Ckbe58fH.js +0 -288
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("@luzmo/icons"),i=require("lit"),s=require("lit/decorators.js"),w=require("lit/directives/repeat.js"),E=require("../base-DxRGeCrb.cjs"),A=require("../sized-mixin-DcvJLFeo.cjs"),z=require("../voice-recorder-CAm5iDre.cjs");require("../action-button/index.cjs");require("../button/index.cjs");require("../icon/index.cjs");require("../tags/index.cjs");require("../text-field/index.cjs");const $=":host{display:flex;flex-direction:column;font-family:var(--luzmo-prompt-box-font-family, var(--prompt-box-font-family));font-size:var(--luzmo-prompt-box-font-size, var(--prompt-box-font-size));line-height:var(--luzmo-prompt-box-line-height, var(--prompt-box-line-height));color:var(--highcontrast-prompt-box-text-color, var(--luzmo-prompt-box-text-color, var(--prompt-box-text-color)));width:100%}:host([disabled]){opacity:var(--luzmo-prompt-box-disabled-opacity, var(--prompt-box-disabled-opacity));pointer-events:none}.container{display:flex;flex-direction:column;gap:var(--luzmo-prompt-box-gap, var(--prompt-box-gap));padding:var(--luzmo-prompt-box-vertical-padding, var(--prompt-box-vertical-padding)) var(--luzmo-prompt-box-horizontal-padding, var(--prompt-box-horizontal-padding));background-color:var(--highcontrast-prompt-box-background-color, var(--luzmo-prompt-box-background-color, var(--prompt-box-background-color)));border-radius:var(--luzmo-prompt-box-border-radius, var(--prompt-box-border-radius));border-width:var(--luzmo-prompt-box-border-width, var(--prompt-box-border-width));border-style:solid;border-color:var(--highcontrast-prompt-box-border-color, var(--luzmo-prompt-box-border-color, var(--prompt-box-border-color)));box-shadow:var(--luzmo-prompt-box-shadow, var(--prompt-box-shadow));transition:border-color var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out,box-shadow var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}:host(:focus-visible) .container{border-color:var(--luzmo-prompt-box-border-color-focus, var(--prompt-box-border-color-focus));box-shadow:var(--luzmo-prompt-box-shadow-focus, var(--prompt-box-shadow-focus))}:host(.focus-visible) .container{border-color:var(--luzmo-prompt-box-border-color-focus, var(--prompt-box-border-color-focus));box-shadow:var(--luzmo-prompt-box-shadow-focus, var(--prompt-box-shadow-focus))}:host(:focus){outline:none}.top-actions{display:flex;align-items:center;gap:var(--luzmo-prompt-box-top-actions-gap, var(--prompt-box-top-actions-gap));flex-wrap:wrap;opacity:var(--luzmo-prompt-box-actions-opacity, var(--prompt-box-actions-opacity, 1));transition:opacity var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}.top-actions.empty{display:none}.hidden-file-input{position:absolute;width:0;height:0;opacity:0;overflow:hidden;pointer-events:none}.attachments{display:flex;flex-direction:column;gap:var(--luzmo-prompt-box-attachments-gap, var(--prompt-box-attachments-gap, 8px))}.image-attachments{display:flex;flex-wrap:wrap;gap:var(--luzmo-prompt-box-image-attachments-gap, var(--prompt-box-image-attachments-gap, 8px))}.image-attachment{position:relative;display:inline-flex;width:var(--luzmo-prompt-box-image-preview-size, var(--prompt-box-image-preview-size, 80px));height:var(--luzmo-prompt-box-image-preview-size, var(--prompt-box-image-preview-size, 80px));border-radius:var(--luzmo-prompt-box-image-border-radius, var(--prompt-box-image-border-radius, 8px));overflow:hidden;background-color:var(--luzmo-prompt-box-image-background, var(--prompt-box-image-background, rgba(0, 0, 0, .05)))}.image-preview{width:100%;height:100%;object-fit:cover}.attachment-remove{position:absolute;top:4px;right:4px;width:var(--luzmo-prompt-box-remove-button-size, var(--prompt-box-remove-button-size, 24px));height:var(--luzmo-prompt-box-remove-button-size, var(--prompt-box-remove-button-size, 24px));background-color:var(--luzmo-prompt-box-remove-button-background, var(--prompt-box-remove-button-background, rgba(0, 0, 0, .5)));border-radius:50%;--luzmo-clear-button-icon-color: var( --luzmo-prompt-box-remove-button-icon-color, var(--prompt-box-remove-button-icon-color, #fff) )}.attachment-remove:hover{background-color:var(--luzmo-prompt-box-remove-button-background-hover, var(--prompt-box-remove-button-background-hover, rgba(0, 0, 0, .7)))}.file-attachments{--luzmo-tag-border-radius: 16px;display:flex;flex-wrap:wrap;gap:var(--luzmo-prompt-box-file-attachments-gap, var(--prompt-box-file-attachments-gap, 4px))}.file-attachment{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-wrapper{position:relative;display:flex;flex:1}.input-field{flex:1;width:100%;min-width:0;--luzmo-text-field-focus-indicator-width: 0;--luzmo-text-field-border-width: 0;--luzmo-text-field-width: 100%;--luzmo-text-field-min-width: 0;--luzmo-text-field-placeholder-text-color-default: var( --luzmo-prompt-box-placeholder-color, var(--prompt-box-placeholder-color) )}.actions-row{display:flex;align-items:center;justify-content:space-between;gap:var(--luzmo-prompt-box-actions-gap, var(--prompt-box-actions-gap))}.bottom-actions{display:flex;align-items:center;gap:var(--luzmo-prompt-box-bottom-actions-gap, var(--prompt-box-bottom-actions-gap));flex-wrap:wrap;flex:1;opacity:var(--luzmo-prompt-box-actions-opacity, var(--prompt-box-actions-opacity, 1));transition:opacity var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}.button-group{display:flex;align-items:center;gap:var(--luzmo-prompt-box-button-group-gap, var(--prompt-box-button-group-gap));margin-left:auto}.record-button,.cancel-recording-button{--luzmo-action-button-border-radius: var( --luzmo-prompt-box-record-button-border-radius, 50% );--luzmo-action-button-focus-indicator-border-radius: var( --luzmo-prompt-box-record-button-focus-indicator-border-radius, 50% )}.submit-button{margin-inline-start:var(--luzmo-prompt-box-submit-button-margin-inline-start, var(--prompt-box-submit-button-margin-inline-start))}.recording-ui{display:flex;align-items:center;gap:var(--luzmo-prompt-box-recording-gap, var(--prompt-box-recording-gap))}.waveform{display:flex;align-items:center;gap:var(--luzmo-prompt-box-waveform-gap, var(--prompt-box-waveform-gap, 3px));height:var(--luzmo-prompt-box-waveform-height, var(--prompt-box-waveform-height, 24px));padding:0 4px}.waveform-bar{width:var(--luzmo-prompt-box-waveform-bar-width, var(--prompt-box-waveform-bar-width, 3px));height:calc(var(--bar-height, .3) * var(--luzmo-prompt-box-waveform-height, var(--prompt-box-waveform-height, 24px)));min-height:4px;background-color:var(--luzmo-prompt-box-waveform-bar-color, var(--prompt-box-waveform-bar-color, currentColor));border-radius:var(--luzmo-prompt-box-waveform-bar-radius, var(--prompt-box-waveform-bar-radius, 2px));transition:height .05s ease-out;animation:waveform-pulse 1s ease-in-out infinite}.waveform-bar:nth-child(1){animation-delay:0s}.waveform-bar:nth-child(2){animation-delay:.1s}.waveform-bar:nth-child(3){animation-delay:.2s}.waveform-bar:nth-child(4){animation-delay:.1s}.waveform-bar:nth-child(5){animation-delay:0s}@keyframes waveform-pulse{0%,to{opacity:.6}50%{opacity:1}}.recording-duration{font-family:var(--luzmo-prompt-box-recording-duration-font-family, var(--prompt-box-recording-duration-font-family, monospace));font-size:var(--luzmo-prompt-box-recording-duration-font-size, var(--prompt-box-recording-duration-font-size, 14px));font-weight:var(--luzmo-prompt-box-recording-duration-font-weight, var(--prompt-box-recording-duration-font-weight, 500));color:var(--luzmo-prompt-box-recording-duration-color, var(--prompt-box-recording-duration-color, currentColor));text-align:center}::slotted([slot=top-actions]){display:inline-flex;align-items:center}::slotted([slot=bottom-actions]){display:inline-flex;align-items:center}::slotted([slot=record-button]){display:inline-flex}::slotted([slot=submit-button]){display:inline-flex;margin-inline-start:var(--luzmo-prompt-box-submit-button-margin-inline-start, var(--prompt-box-submit-button-margin-inline-start))}@media (forced-colors: active){:host{--highcontrast-prompt-box-background-color: Canvas;--highcontrast-prompt-box-border-color: CanvasText;--highcontrast-prompt-box-text-color: CanvasText}}:host{--prompt-box-font-family: var(--luzmo-font-family);--prompt-box-font-size: var(--luzmo-font-size);--prompt-box-line-height: 1.5;--prompt-box-text-color: var(--luzmo-font-color);--prompt-box-background-color: var(--luzmo-background-color);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-border-width: var(--luzmo-border-width);--prompt-box-border-color: var(--luzmo-border-color);--prompt-box-border-color-focus: var(--luzmo-primary);--prompt-box-shadow: 0 2px 8px rgba(var(--luzmo-border-color-rgb), .08);--prompt-box-shadow-focus: 0 2px 12px rgba(var(--luzmo-primary-rgb), .15);--prompt-box-gap: var(--luzmo-spacing-5);--prompt-box-recording-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--prompt-box-vertical-padding: var(--luzmo-spacing-4);--prompt-box-horizontal-padding: var(--luzmo-spacing-5);--prompt-box-actions-gap: var(--luzmo-spacing-3);--prompt-box-top-actions-gap: var(--luzmo-spacing-2);--prompt-box-bottom-actions-gap: var(--luzmo-spacing-2);--prompt-box-button-group-gap: var(--luzmo-spacing-2);--prompt-box-submit-button-margin-inline-start: var(--luzmo-spacing-3);--prompt-box-max-height: 200px;--prompt-box-placeholder-color: var(--luzmo-font-color-extra-dimmed);--prompt-box-placeholder-opacity: 1;--prompt-box-animation-duration: var(--luzmo-animation-duration, .15s);--prompt-box-disabled-opacity: .5;--prompt-box-attachments-gap: var(--luzmo-spacing-1);--prompt-box-image-attachments-gap: var(--luzmo-spacing-2);--prompt-box-file-attachments-gap: var(--luzmo-spacing-2);--prompt-box-image-preview-size: 64px;--prompt-box-image-border-radius: var(--luzmo-border-radius);--prompt-box-image-background: rgba(0, 0, 0, .05);--prompt-box-remove-button-size: 20px;--prompt-box-remove-button-background: rgba(0, 0, 0, .5);--prompt-box-remove-button-background-hover: rgba(0, 0, 0, .7);--prompt-box-remove-button-icon-color: #fff}:host([size=s]){--prompt-box-font-size: var(--luzmo-font-size-s);--prompt-box-border-radius: var(--luzmo-border-radius-l);--prompt-box-vertical-padding: var(--luzmo-spacing-3);--prompt-box-horizontal-padding: var(--luzmo-spacing-4);--prompt-box-gap: var(--luzmo-spacing-4);--prompt-box-attachments-gap: 0;--prompt-box-image-attachments-gap: var(--luzmo-spacing-1);--prompt-box-recording-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--prompt-box-max-height: 150px;--prompt-box-image-preview-size: 48px;--prompt-box-remove-button-size: 18px}:host([size=l]){--prompt-box-font-size: var(--luzmo-font-size-l);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-vertical-padding: var(--luzmo-spacing-5);--prompt-box-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--prompt-box-gap: var(--luzmo-spacing-4);--prompt-box-attachments-gap: var(--luzmo-spacing-1);--prompt-box-image-attachments-gap: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--prompt-box-recording-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--prompt-box-max-height: 250px;--prompt-box-image-preview-size: 72px;--prompt-box-remove-button-size: 24px}:host([size=xl]){--prompt-box-font-size: var(--luzmo-font-size-xl);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--prompt-box-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--prompt-box-gap: var(--luzmo-spacing-5);--prompt-box-attachments-gap: var(--luzmo-spacing-2);--prompt-box-image-attachments-gap: var(--luzmo-spacing-3);--prompt-box-max-height: 300px;--prompt-box-image-preview-size: 96px;--prompt-box-remove-button-size: 28px}:host([pending]){--prompt-box-actions-opacity: .75}";var C=Object.defineProperty,l=(_,t,e,o)=>{for(var n=void 0,r=_.length-1,p;r>=0;r--)(p=_[r])&&(n=p(t,e,n)||n);return n&&C(t,e,n),n};let v=!1;typeof window<"u"&&(document.addEventListener("keydown",()=>{v=!0},!0),document.addEventListener("mousedown",()=>{v=!1},!0),document.addEventListener("pointerdown",()=>{v=!1},!0));var u;const a=(u=class extends A.SizedMixin(E.LuzmoElement,{validSizes:["xs","s","m","l","xl"],defaultSize:"m"}){constructor(){super(...arguments),this.rows=1,this.grows=!1,this.recording=!1,this.hideSubmit=!1,this.placeholder="",this.value="",this.disabled=!1,this.readonly=!1,this.maxlength=-1,this.pending=!1,this.allowImages=!1,this.allowFiles=!1,this.acceptedFileTypes=[],this._hasTopActions=!1,this._hasBottomActions=!1,this._hasRecordButton=!1,this._hasSubmitButton=!1,this._attachments=[],this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0,this._voiceRecorder=null,this._shouldFocusFinishButton=!1,this._attachmentIdCounter=0,this._handleHostFocus=()=>{v&&this.classList.add("focus-visible")},this._handleHostBlur=()=>{this.classList.remove("focus-visible")},this._handlePaste=t=>{var n;if(!this.allowImages||this.disabled||this.readonly||this.pending)return;const e=(n=t.clipboardData)==null?void 0:n.items;if(!e)return;const o=[];for(const r of e)if(r.type.startsWith("image/")){const p=r.getAsFile();p&&o.push(p)}o.length>0&&this.addFiles(o)}}static get styles(){return[i.unsafeCSS($)]}get _tagSize(){switch(this.size){case"s":case"m":return"s";case"l":case"xl":return"m";default:return"s"}}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("focus",this._handleHostFocus),this.addEventListener("blur",this._handleHostBlur),this.addEventListener("paste",this._handlePaste)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this._handleHostFocus),this.removeEventListener("blur",this._handleHostBlur),this.removeEventListener("paste",this._handlePaste),this._revokeAllPreviewUrls(),this._destroyVoiceRecorder()}_revokeAllPreviewUrls(){for(const t of this._attachments)t.previewUrl&&URL.revokeObjectURL(t.previewUrl)}_handleTopActionsSlotChange(t){const e=t.target;this._hasTopActions=e.assignedNodes().length>0}_handleBottomActionsSlotChange(t){const e=t.target;this._hasBottomActions=e.assignedNodes().length>0}_handleRecordButtonSlotChange(t){const e=t.target;this._hasRecordButton=e.assignedNodes().length>0}_handleSubmitButtonSlotChange(t){const e=t.target;this._hasSubmitButton=e.assignedNodes().length>0}_handleInput(t){const e=t.target;this.value=e.value,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}_handleKeydown(t){t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),this._submit())}_handleFileInputChange(t){const e=t.target,o=e.files;o&&o.length>0&&this.addFiles([...o]),e.value=""}_isFileTypeAccepted(t){if(this.acceptedFileTypes.length===0)return!0;const e=t.name.toLowerCase(),o=t.type.toLowerCase();for(const n of this.acceptedFileTypes){const r=n.toLowerCase();if(r.endsWith("/*")){const p=r.slice(0,-2);if(o.startsWith(p+"/"))return!0}else{if(o===r)return!0;if(r.startsWith(".")&&e.endsWith(r))return!0}}return!1}_isImageFile(t){return t.type.startsWith("image/")}_generateAttachmentId(){return`attachment-${++this._attachmentIdCounter}-${Date.now()}`}addFiles(t){if(this.disabled||this.readonly||this.pending)return[];const e=[];for(const o of t){if(this._isImageFile(o)&&!this.allowImages||!this._isImageFile(o)&&!this.allowFiles||!this._isFileTypeAccepted(o))continue;const n=this._generateAttachmentId(),r={file:o,id:n};this._isImageFile(o)&&(r.previewUrl=URL.createObjectURL(o)),this._attachments=[...this._attachments,r],e.push(n)}return e.length>0&&this.dispatchEvent(new CustomEvent("luzmo-attachments-change",{bubbles:!0,composed:!0,detail:{attachments:this._attachments}})),e}removeAttachment(t){const e=this._attachments.find(o=>o.id===t);e&&(e.previewUrl&&URL.revokeObjectURL(e.previewUrl),this._attachments=this._attachments.filter(o=>o.id!==t),this.dispatchEvent(new CustomEvent("luzmo-attachments-change",{bubbles:!0,composed:!0,detail:{attachments:this._attachments}})))}clearAttachments(){this._revokeAllPreviewUrls(),this._attachments=[],this.dispatchEvent(new CustomEvent("luzmo-attachments-change",{bubbles:!0,composed:!0,detail:{attachments:this._attachments}}))}getAttachments(){return[...this._attachments]}openFilePicker(){var t;(t=this._fileInput)==null||t.click()}_handleRemoveAttachment(t){const o=t.currentTarget.dataset.attachmentId;o&&this.removeAttachment(o)}_handleTagDelete(t){const o=t.target.dataset.attachmentId;o&&(t.preventDefault(),this.removeAttachment(o))}_extractActionValues(t){const e=[];for(const o of t){const n=this._getInteractiveElements(o);for(const r of n){const p={element:r,name:r.getAttribute("name")||r.getAttribute("label")||void 0},m=["luzmo-switch","luzmo-checkbox","luzmo-radio"],d=r.tagName.toLowerCase();"value"in r&&(p.value=r.value),m.includes(d)&&"checked"in r&&(p.checked=r.checked),e.push(p)}}return e}_submit(){var m,d;if(this.disabled||this.readonly||this.pending)return;const t=(m=this.shadowRoot)==null?void 0:m.querySelector('slot[name="top-actions"]'),e=(d=this.shadowRoot)==null?void 0:d.querySelector('slot[name="bottom-actions"]'),o=(t==null?void 0:t.assignedElements())??[],n=(e==null?void 0:e.assignedElements())??[],r=this._extractActionValues([...o,...n]),p={value:this.value,topActions:[...o],bottomActions:[...n],actionValues:r,attachments:[...this._attachments]};this.dispatchEvent(new CustomEvent("luzmo-submit",{bubbles:!0,composed:!0,detail:p}))}async _handleRecordClick(t){if(!z.VoiceRecorder.isSupported()){this.dispatchEvent(new CustomEvent("luzmo-record-error",{bubbles:!0,composed:!0,detail:{error:"Voice recording is not supported in this browser"}}));return}if(this._isRecording)this._stopRecording();else{const e=t.currentTarget;this._shouldFocusFinishButton=e.matches(":focus-visible"),await this._startRecording()}this.dispatchEvent(new CustomEvent("luzmo-record",{bubbles:!0,composed:!0,detail:{isRecording:this._isRecording}}))}async _startRecording(){if(this._initVoiceRecorder(),!this._voiceRecorder)return;await this._voiceRecorder.startRecording()&&(this._isRecording=!0,this._recordingDuration=0,this._audioLevel=0)}_stopRecording(){this._voiceRecorder&&this._voiceRecorder.stopRecording()}_cancelRecording(){this._voiceRecorder&&this._voiceRecorder.cancelRecording(),this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0}_handleCancelRecordClick(){this._cancelRecording(),this.dispatchEvent(new CustomEvent("luzmo-record-cancel",{bubbles:!0,composed:!0}))}_initVoiceRecorder(){this._voiceRecorder||(this._voiceRecorder=new z.VoiceRecorder({maxDuration:3e5}),this._voiceRecorder.onStart(()=>{this._isRecording=!0}).onStop(t=>{this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0,this.dispatchEvent(new CustomEvent("luzmo-recording-complete",{bubbles:!0,composed:!0,detail:{audioBlob:t.audioBlob,duration:t.duration,mimeType:t.mimeType}}))}).onError(t=>{this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0,this.dispatchEvent(new CustomEvent("luzmo-record-error",{bubbles:!0,composed:!0,detail:{error:t}}))}).onAudioLevel(t=>{this._audioLevel=t}).onDurationUpdate(t=>{this._recordingDuration=t}))}_destroyVoiceRecorder(){this._voiceRecorder&&(this._voiceRecorder.destroy(),this._voiceRecorder=null),this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0}_formatRecordingDuration(){return z.VoiceRecorder.formatDuration(this._recordingDuration)}focus(){var t;(t=this._inputElement)==null||t.focus()}clear(){this.value="",this.clearAttachments()}getTopActions(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector('slot[name="top-actions"]');return(t==null?void 0:t.assignedElements())??[]}getBottomActions(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector('slot[name="bottom-actions"]');return(t==null?void 0:t.assignedElements())??[]}updated(t){super.updated(t),(t.has("pending")||t.has("disabled"))&&this._updateSlottedElementsState(),this._shouldFocusFinishButton&&this._isRecording&&(this._shouldFocusFinishButton=!1,requestAnimationFrame(()=>{var e;(e=this._finishRecordingButton)==null||e.focus()}))}_getInteractiveElements(t){const e=[];t.matches(u.INTERACTIVE_ELEMENTS_SELECTOR)&&e.push(t);const o=t.querySelectorAll(u.INTERACTIVE_ELEMENTS_SELECTOR);return e.push(...o),e}_updateSlottedElementsState(){var m,d,b,y;const t=(m=this.shadowRoot)==null?void 0:m.querySelector('slot[name="submit-button"]'),e=(t==null?void 0:t.assignedElements())??[];for(const x of e){const f=this._getInteractiveElements(x);for(const c of f)this.pending?(c.setAttribute("pending",""),c.removeAttribute("disabled"),c.removeAttribute("readonly")):this.disabled?(c.removeAttribute("pending"),c.setAttribute("disabled",""),c.removeAttribute("readonly")):(c.removeAttribute("pending"),c.removeAttribute("disabled"),c.removeAttribute("readonly"))}const o=x=>{for(const f of x){const c=this._getInteractiveElements(f);for(const h of c)this.disabled?(h.setAttribute("disabled",""),h.removeAttribute("readonly")):this.pending?(h.removeAttribute("disabled"),h.setAttribute("readonly","")):(h.removeAttribute("disabled"),h.removeAttribute("readonly"))}},n=(d=this.shadowRoot)==null?void 0:d.querySelector('slot[name="top-actions"]');o((n==null?void 0:n.assignedElements())??[]);const r=(b=this.shadowRoot)==null?void 0:b.querySelector('slot[name="bottom-actions"]');o((r==null?void 0:r.assignedElements())??[]);const p=(y=this.shadowRoot)==null?void 0:y.querySelector('slot[name="record-button"]');o((p==null?void 0:p.assignedElements())??[])}renderTopActions(){return i.html`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("@luzmo/icons"),a=require("lit"),s=require("lit/decorators.js"),w=require("lit/directives/repeat.js"),E=require("../base-DxRGeCrb.cjs"),A=require("../sized-mixin-DcvJLFeo.cjs"),z=require("../voice-recorder-CAm5iDre.cjs");require("../action-button/index.cjs");require("../button/index.cjs");require("../icon/index.cjs");require("../tags/index.cjs");require("../text-field/index.cjs");const $=":host{display:flex;flex-direction:column;font-family:var(--luzmo-prompt-box-font-family, var(--prompt-box-font-family));font-size:var(--luzmo-prompt-box-font-size, var(--prompt-box-font-size));line-height:var(--luzmo-prompt-box-line-height, var(--prompt-box-line-height));color:var(--highcontrast-prompt-box-text-color, var(--luzmo-prompt-box-text-color, var(--prompt-box-text-color)));width:100%}:host([disabled]){opacity:var(--luzmo-prompt-box-disabled-opacity, var(--prompt-box-disabled-opacity));pointer-events:none}.container{display:flex;flex-direction:column;gap:var(--luzmo-prompt-box-gap, var(--prompt-box-gap));padding:var(--luzmo-prompt-box-vertical-padding, var(--prompt-box-vertical-padding)) var(--luzmo-prompt-box-horizontal-padding, var(--prompt-box-horizontal-padding));background-color:var(--highcontrast-prompt-box-background-color, var(--luzmo-prompt-box-background-color, var(--prompt-box-background-color)));border-radius:var(--luzmo-prompt-box-border-radius, var(--prompt-box-border-radius));border-width:var(--luzmo-prompt-box-border-width, var(--prompt-box-border-width));border-style:solid;border-color:var(--highcontrast-prompt-box-border-color, var(--luzmo-prompt-box-border-color, var(--prompt-box-border-color)));box-shadow:var(--luzmo-prompt-box-shadow, var(--prompt-box-shadow));transition:border-color var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out,box-shadow var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}:host(:focus-visible) .container{border-color:var(--luzmo-prompt-box-border-color-focus, var(--prompt-box-border-color-focus));box-shadow:var(--luzmo-prompt-box-shadow-focus, var(--prompt-box-shadow-focus))}:host(.focus-visible) .container{border-color:var(--luzmo-prompt-box-border-color-focus, var(--prompt-box-border-color-focus));box-shadow:var(--luzmo-prompt-box-shadow-focus, var(--prompt-box-shadow-focus))}:host(:focus){outline:none}.top-actions{display:flex;align-items:center;gap:var(--luzmo-prompt-box-top-actions-gap, var(--prompt-box-top-actions-gap));flex-wrap:wrap;opacity:var(--luzmo-prompt-box-actions-opacity, var(--prompt-box-actions-opacity, 1));transition:opacity var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}.top-actions.empty{display:none}.hidden-file-input{position:absolute;width:0;height:0;opacity:0;overflow:hidden;pointer-events:none}.attachments{display:flex;flex-direction:column;gap:var(--luzmo-prompt-box-attachments-gap, var(--prompt-box-attachments-gap, 8px))}.image-attachments{display:flex;flex-wrap:wrap;gap:var(--luzmo-prompt-box-image-attachments-gap, var(--prompt-box-image-attachments-gap, 8px))}.image-attachment{position:relative;display:inline-flex;width:var(--luzmo-prompt-box-image-preview-size, var(--prompt-box-image-preview-size, 80px));height:var(--luzmo-prompt-box-image-preview-size, var(--prompt-box-image-preview-size, 80px));border-radius:var(--luzmo-prompt-box-image-border-radius, var(--prompt-box-image-border-radius, 8px));overflow:hidden;background-color:var(--luzmo-prompt-box-image-background, var(--prompt-box-image-background, rgba(0, 0, 0, .05)))}.image-preview{width:100%;height:100%;object-fit:cover}.attachment-remove{position:absolute;top:4px;right:4px;width:var(--luzmo-prompt-box-remove-button-size, var(--prompt-box-remove-button-size, 24px));height:var(--luzmo-prompt-box-remove-button-size, var(--prompt-box-remove-button-size, 24px));background-color:var(--luzmo-prompt-box-remove-button-background, var(--prompt-box-remove-button-background, rgba(0, 0, 0, .5)));border-radius:50%;--luzmo-clear-button-icon-color: var( --luzmo-prompt-box-remove-button-icon-color, var(--prompt-box-remove-button-icon-color, #fff) )}.attachment-remove:hover{background-color:var(--luzmo-prompt-box-remove-button-background-hover, var(--prompt-box-remove-button-background-hover, rgba(0, 0, 0, .7)))}.file-attachments{--luzmo-tag-border-radius: 16px;display:flex;flex-wrap:wrap;gap:var(--luzmo-prompt-box-file-attachments-gap, var(--prompt-box-file-attachments-gap, 4px))}.file-attachment{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-wrapper{position:relative;display:flex;flex:1}.input-field{flex:1;width:100%;min-width:0;--luzmo-text-field-focus-indicator-width: 0;--luzmo-text-field-border-width: 0;--luzmo-text-field-width: 100%;--luzmo-text-field-min-width: 0;--luzmo-text-field-placeholder-text-color-default: var( --luzmo-prompt-box-placeholder-color, var(--prompt-box-placeholder-color) )}.actions-row{display:flex;align-items:center;justify-content:space-between;gap:var(--luzmo-prompt-box-actions-gap, var(--prompt-box-actions-gap))}.bottom-actions{display:flex;align-items:center;gap:var(--luzmo-prompt-box-bottom-actions-gap, var(--prompt-box-bottom-actions-gap));flex-wrap:wrap;flex:1;opacity:var(--luzmo-prompt-box-actions-opacity, var(--prompt-box-actions-opacity, 1));transition:opacity var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}.button-group{display:flex;align-items:center;gap:var(--luzmo-prompt-box-button-group-gap, var(--prompt-box-button-group-gap));margin-left:auto}.record-button,.cancel-recording-button{--luzmo-action-button-border-radius: var( --luzmo-prompt-box-record-button-border-radius, 50% );--luzmo-action-button-focus-indicator-border-radius: var( --luzmo-prompt-box-record-button-focus-indicator-border-radius, 50% )}.submit-button{margin-inline-start:var(--luzmo-prompt-box-submit-button-margin-inline-start, var(--prompt-box-submit-button-margin-inline-start))}.recording-ui{display:flex;align-items:center;gap:var(--luzmo-prompt-box-recording-gap, var(--prompt-box-recording-gap))}.waveform{display:flex;align-items:center;gap:var(--luzmo-prompt-box-waveform-gap, var(--prompt-box-waveform-gap, 3px));height:var(--luzmo-prompt-box-waveform-height, var(--prompt-box-waveform-height, 24px));padding:0 4px}.waveform-bar{width:var(--luzmo-prompt-box-waveform-bar-width, var(--prompt-box-waveform-bar-width, 3px));height:calc(var(--bar-height, .3) * var(--luzmo-prompt-box-waveform-height, var(--prompt-box-waveform-height, 24px)));min-height:4px;background-color:var(--luzmo-prompt-box-waveform-bar-color, var(--prompt-box-waveform-bar-color, currentColor));border-radius:var(--luzmo-prompt-box-waveform-bar-radius, var(--prompt-box-waveform-bar-radius, 2px));transition:height .05s ease-out;animation:waveform-pulse 1s ease-in-out infinite}.waveform-bar:nth-child(1){animation-delay:0s}.waveform-bar:nth-child(2){animation-delay:.1s}.waveform-bar:nth-child(3){animation-delay:.2s}.waveform-bar:nth-child(4){animation-delay:.1s}.waveform-bar:nth-child(5){animation-delay:0s}@keyframes waveform-pulse{0%,to{opacity:.6}50%{opacity:1}}.recording-duration{font-family:var(--luzmo-prompt-box-recording-duration-font-family, var(--prompt-box-recording-duration-font-family, monospace));font-size:var(--luzmo-prompt-box-recording-duration-font-size, var(--prompt-box-recording-duration-font-size, 14px));font-weight:var(--luzmo-prompt-box-recording-duration-font-weight, var(--prompt-box-recording-duration-font-weight, 500));color:var(--luzmo-prompt-box-recording-duration-color, var(--prompt-box-recording-duration-color, currentColor));text-align:center}::slotted([slot=top-actions]){display:inline-flex;align-items:center}::slotted([slot=bottom-actions]){display:inline-flex;align-items:center}::slotted([slot=record-button]){display:inline-flex}::slotted([slot=submit-button]){display:inline-flex;margin-inline-start:var(--luzmo-prompt-box-submit-button-margin-inline-start, var(--prompt-box-submit-button-margin-inline-start))}@media (forced-colors: active){:host{--highcontrast-prompt-box-background-color: Canvas;--highcontrast-prompt-box-border-color: CanvasText;--highcontrast-prompt-box-text-color: CanvasText}}:host{--prompt-box-font-family: var(--luzmo-font-family);--prompt-box-font-size: var(--luzmo-font-size);--prompt-box-line-height: 1.5;--prompt-box-text-color: var(--luzmo-font-color);--prompt-box-background-color: var(--luzmo-background-color);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-border-width: var(--luzmo-border-width);--prompt-box-border-color: var(--luzmo-border-color);--prompt-box-border-color-focus: var(--luzmo-primary);--prompt-box-shadow: 0 2px 8px rgba(var(--luzmo-border-color-rgb), .08);--prompt-box-shadow-focus: 0 2px 12px rgba(var(--luzmo-primary-rgb), .15);--prompt-box-gap: var(--luzmo-spacing-5);--prompt-box-recording-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--prompt-box-vertical-padding: var(--luzmo-spacing-4);--prompt-box-horizontal-padding: var(--luzmo-spacing-5);--prompt-box-actions-gap: var(--luzmo-spacing-3);--prompt-box-top-actions-gap: var(--luzmo-spacing-2);--prompt-box-bottom-actions-gap: var(--luzmo-spacing-2);--prompt-box-button-group-gap: var(--luzmo-spacing-2);--prompt-box-submit-button-margin-inline-start: var(--luzmo-spacing-3);--prompt-box-max-height: 200px;--prompt-box-placeholder-color: var(--luzmo-font-color-extra-dimmed);--prompt-box-placeholder-opacity: 1;--prompt-box-animation-duration: var(--luzmo-animation-duration, .15s);--prompt-box-disabled-opacity: .5;--prompt-box-attachments-gap: var(--luzmo-spacing-1);--prompt-box-image-attachments-gap: var(--luzmo-spacing-2);--prompt-box-file-attachments-gap: var(--luzmo-spacing-2);--prompt-box-image-preview-size: 64px;--prompt-box-image-border-radius: var(--luzmo-border-radius);--prompt-box-image-background: rgba(0, 0, 0, .05);--prompt-box-remove-button-size: 20px;--prompt-box-remove-button-background: rgba(0, 0, 0, .5);--prompt-box-remove-button-background-hover: rgba(0, 0, 0, .7);--prompt-box-remove-button-icon-color: #fff}:host([size=s]){--prompt-box-font-size: var(--luzmo-font-size-s);--prompt-box-border-radius: var(--luzmo-border-radius-l);--prompt-box-vertical-padding: var(--luzmo-spacing-3);--prompt-box-horizontal-padding: var(--luzmo-spacing-4);--prompt-box-gap: var(--luzmo-spacing-4);--prompt-box-attachments-gap: 0;--prompt-box-image-attachments-gap: var(--luzmo-spacing-1);--prompt-box-recording-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--prompt-box-max-height: 150px;--prompt-box-image-preview-size: 48px;--prompt-box-remove-button-size: 18px}:host([size=l]){--prompt-box-font-size: var(--luzmo-font-size-l);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-vertical-padding: var(--luzmo-spacing-5);--prompt-box-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--prompt-box-gap: var(--luzmo-spacing-4);--prompt-box-attachments-gap: var(--luzmo-spacing-1);--prompt-box-image-attachments-gap: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--prompt-box-recording-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--prompt-box-max-height: 250px;--prompt-box-image-preview-size: 72px;--prompt-box-remove-button-size: 24px}:host([size=xl]){--prompt-box-font-size: var(--luzmo-font-size-xl);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--prompt-box-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--prompt-box-gap: var(--luzmo-spacing-5);--prompt-box-attachments-gap: var(--luzmo-spacing-2);--prompt-box-image-attachments-gap: var(--luzmo-spacing-3);--prompt-box-max-height: 300px;--prompt-box-image-preview-size: 96px;--prompt-box-remove-button-size: 28px}:host([pending]){--prompt-box-actions-opacity: .75}";var C=Object.defineProperty,n=(_,t,o,e)=>{for(var l=void 0,r=_.length-1,p;r>=0;r--)(p=_[r])&&(l=p(t,o,l)||l);return l&&C(t,o,l),l};let v=!1;typeof window<"u"&&(document.addEventListener("keydown",()=>{v=!0},!0),document.addEventListener("mousedown",()=>{v=!1},!0),document.addEventListener("pointerdown",()=>{v=!1},!0));var u;const i=(u=class extends A.SizedMixin(E.LuzmoElement,{validSizes:["xs","s","m","l","xl"],defaultSize:"m"}){constructor(){super(...arguments),this.rows=1,this.grows=!1,this.maxRows=-1,this.recording=!1,this.hideSubmit=!1,this.placeholder="",this.value="",this.disabled=!1,this.readonly=!1,this.maxlength=-1,this.pending=!1,this.allowImages=!1,this.allowFiles=!1,this.acceptedFileTypes=[],this._hasTopActions=!1,this._hasBottomActions=!1,this._hasRecordButton=!1,this._hasSubmitButton=!1,this._attachments=[],this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0,this._voiceRecorder=null,this._shouldFocusFinishButton=!1,this._attachmentIdCounter=0,this._handleHostFocus=()=>{v&&this.classList.add("focus-visible")},this._handleHostBlur=()=>{this.classList.remove("focus-visible")},this._handlePaste=t=>{var l;if(!this.allowImages||this.disabled||this.readonly||this.pending)return;const o=(l=t.clipboardData)==null?void 0:l.items;if(!o)return;const e=[];for(const r of o)if(r.type.startsWith("image/")){const p=r.getAsFile();p&&e.push(p)}e.length>0&&this.addFiles(e)}}static get styles(){return[a.unsafeCSS($)]}get _tagSize(){switch(this.size){case"s":case"m":return"s";case"l":case"xl":return"m";default:return"s"}}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("focus",this._handleHostFocus),this.addEventListener("blur",this._handleHostBlur),this.addEventListener("paste",this._handlePaste)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this._handleHostFocus),this.removeEventListener("blur",this._handleHostBlur),this.removeEventListener("paste",this._handlePaste),this._revokeAllPreviewUrls(),this._destroyVoiceRecorder()}_revokeAllPreviewUrls(){for(const t of this._attachments)t.previewUrl&&URL.revokeObjectURL(t.previewUrl)}_handleTopActionsSlotChange(t){const o=t.target;this._hasTopActions=o.assignedNodes().length>0}_handleBottomActionsSlotChange(t){const o=t.target;this._hasBottomActions=o.assignedNodes().length>0}_handleRecordButtonSlotChange(t){const o=t.target;this._hasRecordButton=o.assignedNodes().length>0}_handleSubmitButtonSlotChange(t){const o=t.target;this._hasSubmitButton=o.assignedNodes().length>0}_handleInput(t){const o=t.target;this.value=o.value,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}_handleKeydown(t){t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),this._submit())}_handleFileInputChange(t){const o=t.target,e=o.files;e&&e.length>0&&this.addFiles([...e]),o.value=""}_isFileTypeAccepted(t){if(this.acceptedFileTypes.length===0)return!0;const o=t.name.toLowerCase(),e=t.type.toLowerCase();for(const l of this.acceptedFileTypes){const r=l.toLowerCase();if(r.endsWith("/*")){const p=r.slice(0,-2);if(e.startsWith(p+"/"))return!0}else{if(e===r)return!0;if(r.startsWith(".")&&o.endsWith(r))return!0}}return!1}_isImageFile(t){return t.type.startsWith("image/")}_generateAttachmentId(){return`attachment-${++this._attachmentIdCounter}-${Date.now()}`}addFiles(t){if(this.disabled||this.readonly||this.pending)return[];const o=[];for(const e of t){if(this._isImageFile(e)&&!this.allowImages||!this._isImageFile(e)&&!this.allowFiles||!this._isFileTypeAccepted(e))continue;const l=this._generateAttachmentId(),r={file:e,id:l};this._isImageFile(e)&&(r.previewUrl=URL.createObjectURL(e)),this._attachments=[...this._attachments,r],o.push(l)}return o.length>0&&this.dispatchEvent(new CustomEvent("luzmo-attachments-change",{bubbles:!0,composed:!0,detail:{attachments:this._attachments}})),o}removeAttachment(t){const o=this._attachments.find(e=>e.id===t);o&&(o.previewUrl&&URL.revokeObjectURL(o.previewUrl),this._attachments=this._attachments.filter(e=>e.id!==t),this.dispatchEvent(new CustomEvent("luzmo-attachments-change",{bubbles:!0,composed:!0,detail:{attachments:this._attachments}})))}clearAttachments(){this._revokeAllPreviewUrls(),this._attachments=[],this.dispatchEvent(new CustomEvent("luzmo-attachments-change",{bubbles:!0,composed:!0,detail:{attachments:this._attachments}}))}getAttachments(){return[...this._attachments]}openFilePicker(){var t;(t=this._fileInput)==null||t.click()}_handleRemoveAttachment(t){const e=t.currentTarget.dataset.attachmentId;e&&this.removeAttachment(e)}_handleTagDelete(t){const e=t.target.dataset.attachmentId;e&&(t.preventDefault(),this.removeAttachment(e))}_extractActionValues(t){const o=[];for(const e of t){const l=this._getInteractiveElements(e);for(const r of l){const p={element:r,name:r.getAttribute("name")||r.getAttribute("label")||void 0},m=["luzmo-switch","luzmo-checkbox","luzmo-radio"],d=r.tagName.toLowerCase();"value"in r&&(p.value=r.value),m.includes(d)&&"checked"in r&&(p.checked=r.checked),o.push(p)}}return o}_submit(){var m,d;if(this.disabled||this.readonly||this.pending)return;const t=(m=this.shadowRoot)==null?void 0:m.querySelector('slot[name="top-actions"]'),o=(d=this.shadowRoot)==null?void 0:d.querySelector('slot[name="bottom-actions"]'),e=(t==null?void 0:t.assignedElements())??[],l=(o==null?void 0:o.assignedElements())??[],r=this._extractActionValues([...e,...l]),p={value:this.value,topActions:[...e],bottomActions:[...l],actionValues:r,attachments:[...this._attachments]};this.dispatchEvent(new CustomEvent("luzmo-submit",{bubbles:!0,composed:!0,detail:p}))}async _handleRecordClick(t){if(!z.VoiceRecorder.isSupported()){this.dispatchEvent(new CustomEvent("luzmo-record-error",{bubbles:!0,composed:!0,detail:{error:"Voice recording is not supported in this browser"}}));return}if(this._isRecording)this._stopRecording();else{const o=t.currentTarget;this._shouldFocusFinishButton=o.matches(":focus-visible"),await this._startRecording()}this.dispatchEvent(new CustomEvent("luzmo-record",{bubbles:!0,composed:!0,detail:{isRecording:this._isRecording}}))}async _startRecording(){if(this._initVoiceRecorder(),!this._voiceRecorder)return;await this._voiceRecorder.startRecording()&&(this._isRecording=!0,this._recordingDuration=0,this._audioLevel=0)}_stopRecording(){this._voiceRecorder&&this._voiceRecorder.stopRecording()}_cancelRecording(){this._voiceRecorder&&this._voiceRecorder.cancelRecording(),this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0}_handleCancelRecordClick(){this._cancelRecording(),this.dispatchEvent(new CustomEvent("luzmo-record-cancel",{bubbles:!0,composed:!0}))}_initVoiceRecorder(){this._voiceRecorder||(this._voiceRecorder=new z.VoiceRecorder({maxDuration:3e5}),this._voiceRecorder.onStart(()=>{this._isRecording=!0}).onStop(t=>{this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0,this.dispatchEvent(new CustomEvent("luzmo-recording-complete",{bubbles:!0,composed:!0,detail:{audioBlob:t.audioBlob,duration:t.duration,mimeType:t.mimeType}}))}).onError(t=>{this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0,this.dispatchEvent(new CustomEvent("luzmo-record-error",{bubbles:!0,composed:!0,detail:{error:t}}))}).onAudioLevel(t=>{this._audioLevel=t}).onDurationUpdate(t=>{this._recordingDuration=t}))}_destroyVoiceRecorder(){this._voiceRecorder&&(this._voiceRecorder.destroy(),this._voiceRecorder=null),this._isRecording=!1,this._recordingDuration=0,this._audioLevel=0}_formatRecordingDuration(){return z.VoiceRecorder.formatDuration(this._recordingDuration)}focus(){var t;(t=this._inputElement)==null||t.focus()}clear(){this.value="",this.clearAttachments()}getTopActions(){var o;const t=(o=this.shadowRoot)==null?void 0:o.querySelector('slot[name="top-actions"]');return(t==null?void 0:t.assignedElements())??[]}getBottomActions(){var o;const t=(o=this.shadowRoot)==null?void 0:o.querySelector('slot[name="bottom-actions"]');return(t==null?void 0:t.assignedElements())??[]}updated(t){super.updated(t),(t.has("pending")||t.has("disabled"))&&this._updateSlottedElementsState(),this._shouldFocusFinishButton&&this._isRecording&&(this._shouldFocusFinishButton=!1,requestAnimationFrame(()=>{var o;(o=this._finishRecordingButton)==null||o.focus()}))}_getInteractiveElements(t){const o=[];t.matches(u.INTERACTIVE_ELEMENTS_SELECTOR)&&o.push(t);const e=t.querySelectorAll(u.INTERACTIVE_ELEMENTS_SELECTOR);return o.push(...e),o}_updateSlottedElementsState(){var m,d,b,y;const t=(m=this.shadowRoot)==null?void 0:m.querySelector('slot[name="submit-button"]'),o=(t==null?void 0:t.assignedElements())??[];for(const x of o){const f=this._getInteractiveElements(x);for(const c of f)this.pending?(c.setAttribute("pending",""),c.removeAttribute("disabled"),c.removeAttribute("readonly")):this.disabled?(c.removeAttribute("pending"),c.setAttribute("disabled",""),c.removeAttribute("readonly")):(c.removeAttribute("pending"),c.removeAttribute("disabled"),c.removeAttribute("readonly"))}const e=x=>{for(const f of x){const c=this._getInteractiveElements(f);for(const h of c)this.disabled?(h.setAttribute("disabled",""),h.removeAttribute("readonly")):this.pending?(h.removeAttribute("disabled"),h.setAttribute("readonly","")):(h.removeAttribute("disabled"),h.removeAttribute("readonly"))}},l=(d=this.shadowRoot)==null?void 0:d.querySelector('slot[name="top-actions"]');e((l==null?void 0:l.assignedElements())??[]);const r=(b=this.shadowRoot)==null?void 0:b.querySelector('slot[name="bottom-actions"]');e((r==null?void 0:r.assignedElements())??[]);const p=(y=this.shadowRoot)==null?void 0:y.querySelector('slot[name="record-button"]');e((p==null?void 0:p.assignedElements())??[])}renderTopActions(){return a.html`
|
|
19
19
|
<div
|
|
20
20
|
class="top-actions ${this._hasTopActions?"":"empty"}"
|
|
21
21
|
part="top-actions"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
@slotchange=${this._handleTopActionsSlotChange}
|
|
26
26
|
></slot>
|
|
27
27
|
</div>
|
|
28
|
-
`}renderBottomActions(){return
|
|
28
|
+
`}renderBottomActions(){return a.html`
|
|
29
29
|
<div
|
|
30
30
|
class="bottom-actions ${this._hasBottomActions?"":"empty"}"
|
|
31
31
|
part="bottom-actions"
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
@slotchange=${this._handleBottomActionsSlotChange}
|
|
36
36
|
></slot>
|
|
37
37
|
</div>
|
|
38
|
-
`}renderRecordButton(){return!this.recording&&!this._hasRecordButton?
|
|
38
|
+
`}renderRecordButton(){return!this.recording&&!this._hasRecordButton?a.html`<slot
|
|
39
39
|
name="record-button"
|
|
40
40
|
@slotchange=${this._handleRecordButtonSlotChange}
|
|
41
|
-
></slot>`:this._hasRecordButton?
|
|
41
|
+
></slot>`:this._hasRecordButton?a.html`<slot
|
|
42
42
|
name="record-button"
|
|
43
43
|
@slotchange=${this._handleRecordButtonSlotChange}
|
|
44
|
-
></slot>`:this._isRecording?
|
|
44
|
+
></slot>`:this._isRecording?a.html`
|
|
45
45
|
<slot
|
|
46
46
|
name="record-button"
|
|
47
47
|
@slotchange=${this._handleRecordButtonSlotChange}
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
<luzmo-icon slot="icon" .icon=${g.luzmoCheck}></luzmo-icon>
|
|
79
79
|
</luzmo-button>
|
|
80
80
|
</div>
|
|
81
|
-
`:
|
|
81
|
+
`:a.html`
|
|
82
82
|
<slot
|
|
83
83
|
name="record-button"
|
|
84
84
|
@slotchange=${this._handleRecordButtonSlotChange}
|
|
@@ -99,23 +99,23 @@
|
|
|
99
99
|
.size=${this.size}
|
|
100
100
|
></luzmo-icon>
|
|
101
101
|
</luzmo-action-button>
|
|
102
|
-
`}renderWaveform(){const
|
|
102
|
+
`}renderWaveform(){const o=[];for(let e=0;e<5;e++){const r=Math.floor(2.5),m=1-Math.abs(e-r)*.15,d=.3+this._audioLevel*.7*m,b=Math.max(.2,Math.min(1,d));o.push(a.html`
|
|
103
103
|
<span
|
|
104
104
|
class="waveform-bar"
|
|
105
105
|
style="--bar-height: ${b}"
|
|
106
106
|
></span>
|
|
107
|
-
`)}return
|
|
108
|
-
<div class="waveform" part="waveform" aria-hidden="true">${
|
|
109
|
-
`}renderSubmitButton(){return this._isRecording?
|
|
107
|
+
`)}return a.html`
|
|
108
|
+
<div class="waveform" part="waveform" aria-hidden="true">${o}</div>
|
|
109
|
+
`}renderSubmitButton(){return this._isRecording?a.html`<slot
|
|
110
110
|
name="submit-button"
|
|
111
111
|
@slotchange=${this._handleSubmitButtonSlotChange}
|
|
112
|
-
></slot>`:this.hideSubmit&&!this._hasSubmitButton?
|
|
112
|
+
></slot>`:this.hideSubmit&&!this._hasSubmitButton?a.html`<slot
|
|
113
113
|
name="submit-button"
|
|
114
114
|
@slotchange=${this._handleSubmitButtonSlotChange}
|
|
115
|
-
></slot>`:this._hasSubmitButton?
|
|
115
|
+
></slot>`:this._hasSubmitButton?a.html`<slot
|
|
116
116
|
name="submit-button"
|
|
117
117
|
@slotchange=${this._handleSubmitButtonSlotChange}
|
|
118
|
-
></slot>`:
|
|
118
|
+
></slot>`:a.html`
|
|
119
119
|
<slot
|
|
120
120
|
name="submit-button"
|
|
121
121
|
@slotchange=${this._handleSubmitButtonSlotChange}
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
>
|
|
134
134
|
<luzmo-icon slot="icon" .icon=${g.luzmoArrowUp}></luzmo-icon>
|
|
135
135
|
</luzmo-button>
|
|
136
|
-
`}renderTextarea(){return
|
|
136
|
+
`}renderTextarea(){return a.html`
|
|
137
137
|
<luzmo-text-field
|
|
138
138
|
class="input-field"
|
|
139
139
|
part="input"
|
|
@@ -142,6 +142,7 @@
|
|
|
142
142
|
.size=${this.size}
|
|
143
143
|
rows=${this.rows}
|
|
144
144
|
?grows=${this.grows}
|
|
145
|
+
max-rows=${this.maxRows}
|
|
145
146
|
?readonly=${this.readonly||this.pending||this.disabled}
|
|
146
147
|
maxlength=${this.maxlength>0?this.maxlength:-1}
|
|
147
148
|
multiline
|
|
@@ -149,8 +150,9 @@
|
|
|
149
150
|
label=${this.placeholder||"Enter your message"}
|
|
150
151
|
@input=${this._handleInput}
|
|
151
152
|
@keydown=${this._handleKeydown}
|
|
153
|
+
hide-validation-icons
|
|
152
154
|
></luzmo-text-field>
|
|
153
|
-
`}_getAcceptAttribute(){if(this.acceptedFileTypes.length>0)return this.acceptedFileTypes.join(",");const t=[];return this.allowImages&&t.push("image/*"),this.allowFiles&&t.push("*/*"),t.join(",")}renderHiddenFileInput(){return!this.allowImages&&!this.allowFiles?
|
|
155
|
+
`}_getAcceptAttribute(){if(this.acceptedFileTypes.length>0)return this.acceptedFileTypes.join(",");const t=[];return this.allowImages&&t.push("image/*"),this.allowFiles&&t.push("*/*"),t.join(",")}renderHiddenFileInput(){return!this.allowImages&&!this.allowFiles?a.nothing:a.html`
|
|
154
156
|
<input
|
|
155
157
|
type="file"
|
|
156
158
|
class="hidden-file-input"
|
|
@@ -160,7 +162,7 @@
|
|
|
160
162
|
aria-hidden="true"
|
|
161
163
|
tabindex="-1"
|
|
162
164
|
/>
|
|
163
|
-
`}renderImageAttachment(t){return
|
|
165
|
+
`}renderImageAttachment(t){return a.html`
|
|
164
166
|
<div class="image-attachment" part="image-attachment">
|
|
165
167
|
<img
|
|
166
168
|
src=${t.previewUrl||""}
|
|
@@ -176,7 +178,7 @@
|
|
|
176
178
|
@click=${this._handleRemoveAttachment}
|
|
177
179
|
></luzmo-clear-button>
|
|
178
180
|
</div>
|
|
179
|
-
`}renderFileAttachment(t){return
|
|
181
|
+
`}renderFileAttachment(t){return a.html`
|
|
180
182
|
<luzmo-tag
|
|
181
183
|
class="file-attachment"
|
|
182
184
|
part="file-attachment"
|
|
@@ -188,24 +190,24 @@
|
|
|
188
190
|
>
|
|
189
191
|
${t.file.name}
|
|
190
192
|
</luzmo-tag>
|
|
191
|
-
`}renderAttachments(){if(this._attachments.length===0)return
|
|
193
|
+
`}renderAttachments(){if(this._attachments.length===0)return a.nothing;const t=this._attachments.filter(e=>this._isImageFile(e.file)),o=this._attachments.filter(e=>!this._isImageFile(e.file));return a.html`
|
|
192
194
|
<div class="attachments" part="attachments">
|
|
193
|
-
${t.length>0?
|
|
195
|
+
${t.length>0?a.html`
|
|
194
196
|
<div class="image-attachments" part="image-attachments">
|
|
195
|
-
${w.repeat(t,
|
|
197
|
+
${w.repeat(t,e=>e.id,e=>this.renderImageAttachment(e))}
|
|
196
198
|
</div>
|
|
197
|
-
`:
|
|
198
|
-
${
|
|
199
|
+
`:a.nothing}
|
|
200
|
+
${o.length>0?a.html`
|
|
199
201
|
<luzmo-tags
|
|
200
202
|
class="file-attachments"
|
|
201
203
|
part="file-attachments"
|
|
202
204
|
.size=${this._tagSize}
|
|
203
205
|
>
|
|
204
|
-
${w.repeat(e
|
|
206
|
+
${w.repeat(o,e=>e.id,e=>this.renderFileAttachment(e))}
|
|
205
207
|
</luzmo-tags>
|
|
206
|
-
`:
|
|
208
|
+
`:a.nothing}
|
|
207
209
|
</div>
|
|
208
|
-
`}render(){return
|
|
210
|
+
`}render(){return a.html`
|
|
209
211
|
${this.renderHiddenFileInput()}
|
|
210
212
|
<div class="container" part="container">
|
|
211
213
|
${this.renderTopActions()} ${this.renderAttachments()}
|
|
@@ -219,4 +221,4 @@
|
|
|
219
221
|
</div>
|
|
220
222
|
</div>
|
|
221
223
|
</div>
|
|
222
|
-
`}},u.INTERACTIVE_ELEMENTS_SELECTOR="luzmo-button, luzmo-action-button, luzmo-switch, luzmo-picker, luzmo-picker-button, luzmo-select, luzmo-text-field, luzmo-number-field",u);
|
|
224
|
+
`}},u.INTERACTIVE_ELEMENTS_SELECTOR="luzmo-button, luzmo-action-button, luzmo-switch, luzmo-picker, luzmo-picker-button, luzmo-select, luzmo-text-field, luzmo-number-field",u);n([s.property({type:Number})],i.prototype,"rows");n([s.property({type:Boolean,reflect:!0})],i.prototype,"grows");n([s.property({type:Number,attribute:"max-rows"})],i.prototype,"maxRows");n([s.property({type:Boolean,reflect:!0})],i.prototype,"recording");n([s.property({type:Boolean,reflect:!0,attribute:"hide-submit"})],i.prototype,"hideSubmit");n([s.property({type:String})],i.prototype,"placeholder");n([s.property({type:String})],i.prototype,"value");n([s.property({type:Boolean,reflect:!0})],i.prototype,"disabled");n([s.property({type:Boolean,reflect:!0})],i.prototype,"readonly");n([s.property({type:Number})],i.prototype,"maxlength");n([s.property({type:Boolean,reflect:!0})],i.prototype,"pending");n([s.property({type:Boolean,reflect:!0,attribute:"allow-images"})],i.prototype,"allowImages");n([s.property({type:Boolean,reflect:!0,attribute:"allow-files"})],i.prototype,"allowFiles");n([s.property({type:Array,attribute:"accepted-file-types"})],i.prototype,"acceptedFileTypes");n([s.state()],i.prototype,"_hasTopActions");n([s.state()],i.prototype,"_hasBottomActions");n([s.state()],i.prototype,"_hasRecordButton");n([s.state()],i.prototype,"_hasSubmitButton");n([s.state()],i.prototype,"_attachments");n([s.state()],i.prototype,"_isRecording");n([s.state()],i.prototype,"_recordingDuration");n([s.state()],i.prototype,"_audioLevel");n([s.query("luzmo-text-field")],i.prototype,"_inputElement");n([s.query('input[type="file"]')],i.prototype,"_fileInput");n([s.query(".finish-recording-button")],i.prototype,"_finishRecordingButton");let R=i;customElements.get("luzmo-prompt-box")||customElements.define("luzmo-prompt-box",R);exports.LuzmoPromptBox=R;
|