@esri/calcite-components/dist/calcite/p-45525730.entry.js

Web Components for Esri's Calcite Design System.

import{r as e,c as i,h as t,g as a}from"./p-c5b7f45e.js";import{c as n}from"./p-6b4b7af1.js";import"./p-a4e6e35b.js";const l=class{constructor(t){e(this,t),this.calciteInlineEditableEditingCancel=i(this,"calciteInlineEditableEditingCancel",7),this.calciteInlineEditableChangesConfirm=i(this,"calciteInlineEditableChangesConfirm",7),this.calciteInlineEditableEnableEditingChange=i(this,"calciteInlineEditableEnableEditingChange",7),this.disabled=!1,this.editingEnabled=!1,this.loading=!1,this.controls=!1,this.intlEnableEditing="Click to edit",this.intlCancelEditing="Cancel",this.intlConfirmChanges="Save",this.enableEditing=()=>{this.htmlInput.tabIndex=void 0,this.valuePriorToEditing=this.inputElement.value,this.editingEnabled=!0,this.inputElement.setFocus(),this.calciteInlineEditableEnableEditingChange.emit()},this.disableEditing=()=>{this.htmlInput.tabIndex=-1,this.editingEnabled=!1},this.cancelEditing=()=>{this.inputElement.value=this.valuePriorToEditing,this.disableEditing(),clearTimeout(this.editingFocusTimeout),this.editingFocusTimeout=window.setTimeout((()=>this.enableEditingButton.setFocus()),100),this.calciteInlineEditableEditingCancel.emit()},this.escapeKeyHandler=async e=>{"Escape"===e.key&&this.cancelEditing()},this.cancelEditingHandler=async e=>{e.preventDefault(),e.stopPropagation(),this.cancelEditing()},this.enableEditingHandler=async e=>{e.preventDefault(),e.stopPropagation(),this.disabled||this.editingEnabled||this.enableEditing()},this.confirmChangesHandler=async e=>{e.preventDefault(),e.stopPropagation(),this.calciteInlineEditableChangesConfirm.emit();try{this.afterConfirm&&(this.loading=!0,await this.afterConfirm(),this.disableEditing())}catch(e){}finally{this.loading=!1}}}disabledWatcher(e){this.inputElement.disabled=e}componentWillLoad(){this.inputElement=this.el.querySelector("calcite-input"),this.inputElement.disabled=this.disabled,this.scale=this.scale||this.inputElement.scale||n(this.el,"scale",void 0)}componentDidLoad(){this.htmlInput=this.inputElement.querySelector("input"),this.editingEnabled||(this.htmlInput.tabIndex=-1)}render(){return t("div",{class:"calcite-inline-editable-wrapper",onClick:this.enableEditingHandler,onKeyDown:this.escapeKeyHandler},t("div",{class:"calcite-inline-editable-input-wrapper"},t("slot",null)),t("div",{class:"calcite-inline-editable-controls-wrapper"},!this.editingEnabled&&t("calcite-button",{appearance:"transparent",class:"calcite-inline-editable-enable-editing-button",color:"neutral",disabled:this.disabled,iconStart:"pencil",label:this.intlEnableEditing,onClick:this.enableEditingHandler,ref:e=>this.enableEditingButton=e,scale:this.scale}),this.shouldShowControls&&[t("div",{class:"calcite-inline-editable-cancel-editing-button-wrapper"},t("calcite-button",{appearance:"transparent",class:"calcite-inline-editable-cancel-editing-button",color:"neutral",disabled:this.disabled,iconStart:"x",label:this.intlCancelEditing,onClick:this.cancelEditingHandler,scale:this.scale})),t("calcite-button",{appearance:"solid",class:"calcite-inline-editable-confirm-changes-button",color:"blue",disabled:this.disabled,iconStart:"check",label:this.intlConfirmChanges,loading:this.loading,onClick:this.confirmChangesHandler,scale:this.scale})]))}blurHandler(){this.controls||this.disableEditing()}handleLabelFocus(e){const i=e.target;"LABEL"!==i.parentElement.tagName&&"CALCITE-LABEL"!==i.parentElement.tagName||i.parentElement.contains(this.el)&&(e.preventDefault(),e.stopPropagation(),this.editingEnabled?this.inputElement.setFocus():this.enableEditingButton.setFocus())}get shouldShowControls(){return this.editingEnabled&&this.controls}get el(){return a(this)}static get watchers(){return{disabled:["disabledWatcher"]}}};l.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}.sc-calcite-inline-editable:root{--calcite-popper-transition:150ms ease-in-out}[hidden].sc-calcite-inline-editable-h{display:none}[scale=s].sc-calcite-inline-editable-h .calcite-inline-editable-controls-wrapper.sc-calcite-inline-editable{height:32px}[scale=m].sc-calcite-inline-editable-h .calcite-inline-editable-controls-wrapper.sc-calcite-inline-editable{height:44px}[scale=l].sc-calcite-inline-editable-h .calcite-inline-editable-controls-wrapper.sc-calcite-inline-editable{height:56px}.sc-calcite-inline-editable-h:not([editing-enabled]) .calcite-inline-editable-wrapper.sc-calcite-inline-editable:hover{background:var(--calcite-ui-foreground-2)}.calcite-inline-editable-wrapper.sc-calcite-inline-editable{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;background:var(--calcite-ui-foreground-1)}.calcite-inline-editable-wrapper.sc-calcite-inline-editable .calcite-inline-editable-input-wrapper.sc-calcite-inline-editable{-ms-flex:1;flex:1}.calcite-inline-editable-controls-wrapper.sc-calcite-inline-editable{display:-ms-flexbox;display:flex}.calcite-inline-editable-cancel-editing-button-wrapper.sc-calcite-inline-editable{border:1px solid var(--calcite-ui-border-1);border-left:none;border-right:none}[disabled].sc-calcite-inline-editable-h .calcite-inline-editable-cancel-editing-button-wrapper.sc-calcite-inline-editable{border-color:var(--calcite-ui-border-2)}.sc-calcite-inline-editable-h.sc-calcite-inline-editable-s .calcite-input-element-wrapper textarea,.sc-calcite-inline-editable-h.sc-calcite-inline-editable-s .calcite-input-element-wrapper input{-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper{background:transparent}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .sc-calcite-input{display:none}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper{display:-ms-flexbox;display:flex;cursor:pointer}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper textarea,.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper input{border-color:transparent;padding-left:0;cursor:pointer;display:-ms-flexbox;display:flex}.sc-calcite-inline-editable-h:not([editing-enabled]):hover.sc-calcite-inline-editable-s textarea,.sc-calcite-inline-editable-h:not([editing-enabled]):hover.sc-calcite-inline-editable-s input{background:var(--calcite-ui-foreground-2)}.sc-calcite-inline-editable-h[dir=rtl]:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper textarea,.sc-calcite-inline-editable-h[dir=rtl]:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper input{padding-right:0;padding-left:unset}[dir=rtl] .sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper textarea,[dir=rtl] .sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper input{padding-right:0;padding-left:unset}";export{l as calcite_inline_editable}