@genexus/genexus-ide-ui 0.0.62 → 0.0.63
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/dist/cjs/{ch-tree-x_3.cjs.entry.js → ch-checkbox_4.cjs.entry.js} +277 -71
- package/dist/cjs/ch-next-data-modeling-render.cjs.entry.js +242 -0
- package/dist/cjs/{ch-next-data-modeling-item.cjs.entry.js → ch-next-data-modeling_2.cjs.entry.js} +20 -1
- package/dist/cjs/ch-tree-view-render-wrapper.cjs.entry.js +160 -0
- package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
- package/dist/cjs/gx-ide-kb-manager-export.cjs.entry.js +41 -39
- package/dist/cjs/gx-ide-kb-manager-import.cjs.entry.js +23 -11
- package/dist/cjs/gx-ide-test.cjs.entry.js +107 -122
- package/dist/cjs/gxg-color-picker.cjs.entry.js +2 -2
- package/dist/cjs/gxg-title-editable.cjs.entry.js +11 -4
- package/dist/cjs/{gxg-tree_2.cjs.entry.js → gxg-tree-item.cjs.entry.js} +0 -212
- package/dist/cjs/gxg-tree-view.cjs.entry.js +165 -0
- package/dist/cjs/gxg-tree.cjs.entry.js +218 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +5 -3
- package/dist/collection/components/_test/test.css +5 -0
- package/dist/collection/components/_test/test.js +109 -220
- package/dist/collection/components/kb-manager-export/helpers.js +7 -23
- package/dist/collection/components/kb-manager-export/kb-manager-export.css +20 -0
- package/dist/collection/components/kb-manager-export/kb-manager-export.js +42 -22
- package/dist/collection/components/kb-manager-import/gx-ide-assets/kb-manager-import/langs/kb-manager-import.lang.en.json +1 -0
- package/dist/collection/components/kb-manager-import/kb-manager-import.js +23 -11
- package/dist/components/ch-next-data-modeling-item.js +1 -457
- package/dist/components/ch-next-data-modeling-render.js +295 -0
- package/dist/components/ch-next-data-modeling.js +1 -27
- package/dist/components/ch-tree-view-item.js +6 -0
- package/dist/components/ch-tree-view-render-wrapper.js +224 -0
- package/dist/components/ch-tree-view-render.js +6 -0
- package/dist/components/ch-tree-view.js +6 -0
- package/dist/components/gx-ide-kb-manager-export.js +75 -73
- package/dist/components/gx-ide-kb-manager-import.js +38 -20
- package/dist/components/gx-ide-references.js +21 -15
- package/dist/components/gx-ide-test.js +120 -160
- package/dist/components/gxg-color-picker.js +2 -2
- package/dist/components/gxg-title-editable.js +12 -4
- package/dist/components/gxg-tree-item.js +614 -1
- package/dist/components/gxg-tree-view.js +2 -2
- package/dist/components/gxg-tree.js +236 -1
- package/dist/components/index.js +5 -3
- package/dist/components/next-data-modeling-item.js +466 -0
- package/dist/{esm/ch-next-data-modeling.entry.js → components/next-data-modeling.js} +21 -7
- package/dist/components/{tree-x-list-item.js → tree-view-item.js} +9 -9
- package/dist/components/{ch-test-tree-x.js → tree-view-render.js} +168 -28
- package/dist/components/tree-view.js +410 -435
- package/dist/components/tree-view2.js +226 -0
- package/dist/esm/{ch-tree-x_3.entry.js → ch-checkbox_4.entry.js} +275 -70
- package/dist/esm/ch-next-data-modeling-render.entry.js +238 -0
- package/dist/esm/{ch-next-data-modeling-item.entry.js → ch-next-data-modeling_2.entry.js} +21 -3
- package/dist/esm/ch-tree-view-render-wrapper.entry.js +156 -0
- package/dist/esm/genexus-ide-ui.js +1 -1
- package/dist/esm/gx-ide-kb-manager-export.entry.js +41 -39
- package/dist/esm/gx-ide-kb-manager-import.entry.js +23 -11
- package/dist/esm/gx-ide-test.entry.js +108 -123
- package/dist/esm/gxg-color-picker.entry.js +2 -2
- package/dist/esm/gxg-title-editable.entry.js +11 -4
- package/dist/{components/gxg-tree-item2.js → esm/gxg-tree-item.entry.js} +9 -79
- package/dist/esm/gxg-tree-view.entry.js +161 -0
- package/dist/{components/gxg-tree2.js → esm/gxg-tree.entry.js} +8 -32
- package/dist/esm/loader.js +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.css +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
- package/dist/genexus-ide-ui/gx-ide-assets/kb-manager-import/langs/kb-manager-import.lang.en.json +1 -0
- package/dist/genexus-ide-ui/p-13177896.entry.js +1 -0
- package/dist/genexus-ide-ui/p-19fef562.entry.js +1 -0
- package/dist/genexus-ide-ui/p-2781b92a.entry.js +1 -0
- package/dist/genexus-ide-ui/p-2c17e71d.entry.js +1 -0
- package/dist/genexus-ide-ui/p-40a57a36.entry.js +1 -0
- package/dist/genexus-ide-ui/p-636d02fa.entry.js +1 -0
- package/dist/genexus-ide-ui/p-7b63be93.entry.js +1 -0
- package/dist/genexus-ide-ui/p-8a7c4561.entry.js +1 -0
- package/dist/genexus-ide-ui/p-a2cb0e6b.entry.js +1 -0
- package/dist/genexus-ide-ui/p-a9c8b373.entry.js +1 -0
- package/dist/genexus-ide-ui/p-b819706e.entry.js +1 -0
- package/dist/genexus-ide-ui/p-bacd879c.entry.js +1 -0
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/next/data-modeling-render/next-data-modeling-render.css +3 -0
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/renders/tree-view/tree-view-render.css +3 -0
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/test/test-tree-view/tree-view-render-wrapper.css +0 -0
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-view/tree-view/tree-view.css +45 -0
- package/dist/node_modules/@genexus/gemini/dist/collection/components/title-editable/title-editable.css +17 -3
- package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-view/tree-view.css +5 -2
- package/dist/types/common/helpers.d.ts +2 -2
- package/dist/types/components/_test/test.d.ts +3 -35
- package/dist/types/components/kb-manager-export/helpers.d.ts +4 -4
- package/dist/types/components/kb-manager-export/kb-manager-export.d.ts +10 -5
- package/dist/types/components/kb-manager-import/helpers.d.ts +3 -3
- package/dist/types/components/kb-manager-import/kb-manager-import.d.ts +7 -6
- package/dist/types/components/references/helpers.d.ts +2 -2
- package/dist/types/components/references/references.d.ts +3 -3
- package/dist/types/components.d.ts +3 -60
- package/package.json +3 -3
- package/dist/cjs/ch-checkbox.cjs.entry.js +0 -93
- package/dist/cjs/ch-next-data-modeling.cjs.entry.js +0 -19
- package/dist/cjs/ch-test-tree-x.cjs.entry.js +0 -458
- package/dist/components/ch-tree-x-list-item.js +0 -6
- package/dist/components/ch-tree-x.js +0 -6
- package/dist/components/tree-x.js +0 -504
- package/dist/esm/ch-checkbox.entry.js +0 -89
- package/dist/esm/ch-test-tree-x.entry.js +0 -454
- package/dist/esm/gxg-tree_2.entry.js +0 -757
- package/dist/genexus-ide-ui/p-092ccacd.entry.js +0 -1
- package/dist/genexus-ide-ui/p-1ad68b23.entry.js +0 -3
- package/dist/genexus-ide-ui/p-3442d19a.entry.js +0 -1
- package/dist/genexus-ide-ui/p-39968306.entry.js +0 -1
- package/dist/genexus-ide-ui/p-5755f985.entry.js +0 -1
- package/dist/genexus-ide-ui/p-85597097.entry.js +0 -1
- package/dist/genexus-ide-ui/p-9e530c7d.entry.js +0 -1
- package/dist/genexus-ide-ui/p-ad5040e4.entry.js +0 -1
- package/dist/genexus-ide-ui/p-aeb3b032.entry.js +0 -1
- package/dist/genexus-ide-ui/p-c53522c9.entry.js +0 -1
- package/dist/genexus-ide-ui/p-d104f9a4.entry.js +0 -1
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/test/test-tree-x.css +0 -3
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-view/tree-x/tree-x.css +0 -45
- /package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-view/{tree-x-list-item/tree-x-list-item.css → tree-view-item/tree-view-item.css} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as i,H as s,g as o}from"./p-976c3a09.js";import{d as e}from"./p-25aa052f.js";const h=class{constructor(i){t(this,i),this.value=void 0,this.titleType="h1",this.disableEdition=!1,this.clickToEdit=!1,this.fluid=!1,this.editing=!1,this.edit=()=>{this.editing=!0,this.positionCursorAtTheEnd()},this.wrapperClickedHandler=()=>{this.editing=!0},this.positionCursorAtTheEnd=()=>{this.textInput.selectionStart=this.textInput.selectionEnd=this.textInput.value.length,this.textInput.focus()},this.inputKeyDownHandler=t=>{"Enter"===t.key||"Escape"===t.key?(t.preventDefault(),this.editing=!1,this.editButtonEl.focus()):this.fluid&&this.setInputWidth()},this.detectClickOutsideFunc=t=>{e(t,this.wrapperEl)&&(this.editing=!1)},this.setInputWidth=()=>{this.textInput.style.width=this.value.length+1+"ch"},this.inputInputHandler=()=>{this.fluid&&(this.value=this.textInput.value,this.ghostDiv.innerText=this.value,this.updateInputWidth())},this.updateInputWidth=()=>{if(this.fluid){const t=this.ghostDiv.getBoundingClientRect().width;console.log(t),this.textInput.style.width=`${t}px`}}}watchEditingHandler(t){t?document.addEventListener("click",this.detectClickOutsideFunc):document.removeEventListener("click",this.detectClickOutsideFunc)}componentDidLoad(){this.fluid&&this.inputInputHandler()}render(){return i(s,{class:{editing:this.editing,"focus--text":"text"===this.focusType,"focus--line":"line"===this.focusType}},i("div",{onMouseUp:this.clickToEdit&&!this.editing&&!this.disableEdition&&this.wrapperClickedHandler,class:{wrapper:!0},ref:t=>this.wrapperEl=t},this.fluid?i("div",{class:"ghost",ref:t=>this.ghostDiv=t}):null,i("input",{type:"text",value:this.value,readOnly:!this.editing,ref:t=>this.textInput=t,onKeyDown:this.inputKeyDownHandler,onInput:this.fluid&&this.inputInputHandler,tabIndex:this.editing?0:-1}),this.disableEdition?null:i("gxg-button",{type:"secondary-icon-only",icon:"gemini-tools/edit",onClick:this.edit,ref:t=>this.editButtonEl=t})))}get el(){return o(this)}static get watchers(){return{editing:["watchEditingHandler"]}}};h.style=":host{display:block}:host .wrapper{font-family:var(--font-family-primary);color:var(--color-on-background);position:relative;max-width:100%}:host input{font-family:inherit;font-size:inherit;font-weight:inherit;text-transform:inherit;color:inherit;background-color:transparent;border:none;padding:0;box-sizing:border-box;flex-grow:1;cursor:auto;border-bottom:2px solid transparent}:host input:focus{outline:none}.wrapper{display:flex;align-items:center;gap:var(--spacing-comp-02)}:host(:not([editing])) input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([click-to-edit]:not([disable-edition])) .wrapper,:host([click-to-edit]:not([disable-edition])) input{cursor:pointer}:host([title-type=h1]) .wrapper{font-size:24px;font-weight:var(--font-weight-bold);text-transform:capitalize}:host([title-type=h2]) .wrapper{font-size:16px;font-weight:var(--font-weight-bold)}:host([fluid]) .wrapper{display:inline-flex}:host(.focus--text.editing) input{color:var(--gxg-editable-title-focus-color)}:host(.focus--line.editing) input{border-bottom-color:var(--gxg-editable-title-focus-color)}.ghost{font-family:inherit;font-size:inherit;position:fixed;visibility:hidden;height:auto;width:auto;white-space:nowrap;bottom:0;left:0;transform:translate(-100%, -100%)}";export{h as gxg_title_editable}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r,c as t,h as o,H as a,g as e}from"./p-976c3a09.js";const i=class{constructor(o){r(this,o),this.treeItemStateChanged=t(this,"treeItemStateChanged",7),this.masterTree=!1,this.checkbox=!0,this.checked=!1,this.opened=!0,this.toggleCheckboxes=!1,this.multiSelection=!1,this.evaluateIsMasterTree=()=>{var r;const t=null===(r=this.el.parentElement)||void 0===r?void 0:r.parentElement;void 0!==t&&"GXG-TREE"===t.nodeName||(this.masterTree=!0)},this.initialConfig=()=>{const r=this.el.parentElement;if("GXG-TREE-ITEM"===(null==r?void 0:r.tagName)){const t=r;this.checkbox=void 0!==t.checkbox?t.checkbox:this.checkbox,this.checked=void 0!==t.checked?t.checked:this.checked,this.opened=void 0!==t.opened?t.opened:this.opened,this.toggleCheckboxes=void 0!==t.toggleCheckboxes?t.toggleCheckboxes:this.toggleCheckboxes}},this.emitTreeItemNewState=(r,t)=>{this.treeItemStateChanged.emit({itemData:r,emittedBy:t})}}componentWillLoad(){this.initialConfig(),this.evaluateIsMasterTree()}checkboxToggledHandler(r){this.masterTree&&this.emitTreeItemNewState(r.detail,"checkboxToggled")}doubleClickedHandler(r){this.masterTree&&this.emitTreeItemNewState(r.detail,"doubleClicked")}selectionChangedHandler(r){const t=this.el.querySelectorAll("gxg-tree-item");(this.masterTree&&this.multiSelection&&!r.detail.ctrl||this.masterTree&&!this.multiSelection)&&Array.from(t).forEach((t=>{t!==r.detail.ref&&(t.selected=!1)})),this.masterTree&&this.emitTreeItemNewState(r.detail,"selectionChanged")}toggleIconClickedHandler(r){this.masterTree&&this.emitTreeItemNewState(r.detail,"toggleIconClicked")}async getCheckedItems(r){const t=Array.from(this.el.querySelectorAll("gxg-tree-item")),o=[];return(null==r?void 0:r.length)?r.forEach((r=>{const a=t.find((t=>r===t.id));a&&o.push({id:a.id,label:a.label,checked:a.checked,selected:a.selected})})):t.forEach((r=>{r.checked&&o.push({id:r.id,label:r.label,checked:r.checked,selected:r.selected})})),o}async getSelectedItems(){const r=[],t=this.el.querySelectorAll("gxg-tree-item");return(null==t?void 0:t.length)&&Array.from(t).forEach((t=>{t.selected&&r.push({id:t.id,label:t.label,checked:t.checked,selected:t.selected})})),r}async toggleItems(r,t){if(!(null==r?void 0:r.length))return[];const o=Array.from(this.el.querySelectorAll("gxg-tree-item")),a=[];return r.forEach((r=>{const e=o.find((t=>r===t.id));e&&void 0===t?e.opened=!e.opened:e&&t&&!e.opened?e.opened=!0:e&&!t&&e.opened&&(e.opened=!1),e&&a.push({id:e.id,opened:e.opened})})),a}render(){return o(a,null,o("div",{class:{tree:!0}},o("ul",{ref:r=>this.ulTree=r},o("slot",null))))}get el(){return e(this)}};i.style=":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{display:block;--gxg-tree-item-inner-spacing:var(--spacing-comp-01);overflow:auto;height:100%}:host::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}:host::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}:host::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}:host::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host ul{margin:0;padding-left:0;width:100%}";export{i as gxg_tree}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as e,h as i,H as s,g as n,w as a,f as h}from"./p-976c3a09.js";import{D as r}from"./p-bac6580b.js";import{f as d,m as l}from"./p-b374d112.js";const o="checkbox",c=class{constructor(i){t(this,i),this.click=e(this,"click",7),this.input=e(this,"input",7),this.disabled=!1,this.highlightable=!1,this.indeterminate=!1,this.readonly=!1,this.getValue=t=>t?this.checkedValue:this.unCheckedValue,this.handleClick=t=>{this.readonly||this.disabled||t.stopPropagation()},this.handleChange=t=>{t.stopPropagation();const e=t.target,i=e.checked,s=this.getValue(i);this.checked=i,this.value=s,e.value=s,this.input.emit(t),this.highlightable&&this.click.emit()}}valueChanged(){this.checked=this.value===this.checkedValue}componentWillLoad(){this.checked=this.value===this.checkedValue}render(){var t;const e=`${this.checked?" checked":""}${this.indeterminate?" indeterminate":""}`;return i(s,{class:{[r]:this.disabled,"ch-checkbox--actionable":!this.readonly&&!this.disabled||this.readonly&&this.highlightable}},i("div",{class:{container:!0,"container--checked":this.checked},part:`container${e}`},i("input",{"aria-label":""!==(null===(t=this.accessibleName)||void 0===t?void 0:t.trim())&&this.accessibleName!==this.caption?this.accessibleName:null,id:this.caption?o:null,class:"input",part:"input",type:"checkbox",checked:this.checked,disabled:this.disabled||this.readonly,indeterminate:this.indeterminate,value:this.value,onClick:this.handleClick,onInput:this.handleChange}),i("div",{class:{option:!0,"option--checked":this.checked&&!this.indeterminate,"option--indeterminate":this.indeterminate},part:`option${e}`,"aria-hidden":"true"})),this.caption&&i("label",{class:"label",part:"label",htmlFor:o,onClick:this.handleClick},this.caption))}get element(){return n(this)}static get watchers(){return{value:["valueChanged"]}}};c.style="*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";const p="ch-tree-view-item",u="text/plain",g=t=>t.tagName.toLowerCase()===p,v=()=>d().find(g),m=t=>t&&!t.editing,b=(t,e)=>`"newContainerId":"${t}","metadata":"${JSON.stringify(e)}"`,x=class{constructor(i){t(this,i),this.droppableZoneEnter=e(this,"droppableZoneEnter",7),this.expandedItemChange=e(this,"expandedItemChange",7),this.itemContextmenu=e(this,"itemContextmenu",7),this.itemsDropped=e(this,"itemsDropped",7),this.selectedItemsChange=e(this,"selectedItemsChange",7),this.keyDownEvents={ArrowDown:t=>{const e=v();m(e)&&(t.preventDefault(),e.focusNextItem(l(t)))},ArrowUp:t=>{const e=v();m(e)&&(t.preventDefault(),e.focusPreviousItem(l(t)))},F2:t=>{const e=v();e&&e.editable&&(t.preventDefault(),e.editing=!0)}},this.draggingSelectedItems=!1,this.needForRAF=!0,this.selectedItemsInfo=new Map,this.validDroppableZoneCache=new Map,this.draggedIds=[],this.draggedParentIds=[],this.draggingInTheDocument=!1,this.draggingInTree=!1,this.multiSelection=!1,this.openSubTreeCountdown=750,this.scrollToEdgeOnDrag=!0,this.waitDropProcessing=!1,this.trackItemDrag=t=>{t.preventDefault(),this.lastDragEvent=t,this.updateDropEffect(t),this.needForRAF&&(this.needForRAF=!1,requestAnimationFrame((()=>{this.needForRAF=!0,this.el.style.setProperty("--ch-tree-view-dragging-item-x",`${this.lastDragEvent.pageX}px`),this.el.style.setProperty("--ch-tree-view-dragging-item-y",`${this.lastDragEvent.pageY}px`)})))},this.fixScrollPositionOnDrag=()=>{this.draggingInTree&&this.lastDragEvent&&requestAnimationFrame((()=>{((t,e)=>{const i=this.lastDragEvent.clientY-e.getBoundingClientRect().top,s=e.clientHeight,n=i<=30;(n||i>s-30)&&(e.scrollTop+=(n?i-30:i-(s-30))/10)})(0,this.el),requestAnimationFrame(this.fixScrollPositionOnDrag)}))}}handleContextMenuEvent(t){const e=t.target.closest(p);e&&(t.preventDefault(),this.itemContextmenu.emit({id:e.id,itemRef:e,metadata:e.metadata,contextmenuEvent:t}))}handleKeyDownEvents(t){const e=this.keyDownEvents[t.key];e&&e(t)}handleDragStart(t){this.validDroppableZoneCache.clear(),this.draggingInTheDocument=!0,this.dragStartTimestamp=(new Date).getTime(),this.draggedItems=JSON.parse(t.dataTransfer.getData(u))}handleDragEnd(){this.draggingInTheDocument=!1}handleDragEnter(t){this.cancelSubTreeOpening(null,!0),t.stopPropagation();const e=t.target;e.tagName.toLowerCase()===p&&(this.lastOpenSubTreeItem=e,this.openSubTreeAfterCountdown(e),"valid"===this.validDroppableZone(t)&&(e.dragState="enter"))}handleDragLeave(t){const e=t.target;if(e.tagName.toLowerCase()!==p)return;const i=e;i.dragState="none",this.cancelSubTreeOpening(i)}cancelSubTreeOpening(t,e=!1){(this.lastOpenSubTreeItem===t||e)&&(clearTimeout(this.openSubTreeTimeout),this.lastOpenSubTreeItem=null)}handleItemDrop(t){t.stopPropagation(),this.cancelSubTreeOpening(null,!0);const e=t.target,i=JSON.parse(t.dataTransfer.getData(u));"valid"===this.validDroppableZone(t)&&this.itemsDropped.emit({newContainer:{id:e.id,metadata:e.metadata},draggingSelectedItems:this.draggingSelectedItems,draggedItems:i,dropInTheSameTree:this.draggingInTree})}handleItemDragStart(t){document.body.addEventListener("dragover",this.trackItemDrag,{capture:!0}),this.currentDraggedItem=t.target,this.checkDragValidityAndUpdateDragInfo(t.detail)?(this.draggingInTree=!0,this.scrollToEdgeOnDrag&&this.fixScrollPositionOnDrag()):t.detail.dragEvent.dataTransfer.effectAllowed="none"}handleItemDragEnd(){this.draggingInTree=!1,document.body.removeEventListener("dragover",this.trackItemDrag,{capture:!0}),this.resetVariables()}handleSelectedItemSync(t){t.stopPropagation();const e=t.detail;e.selected?this.selectedItemsInfo.set(e.id,e):this.selectedItemsInfo.delete(e.id)}handleSelectedItemChange(t){t.stopPropagation(),this.handleItemSelection(t.target,t.detail)}async clearSelectedItemsInfo(){this.clearSelectedItems()}async scrollIntoVisible(t){const e=this.el.querySelector(`${p}#${t}`);if(!e)return;let i=e.parentElement;for(;i.tagName.toLowerCase()===p;)i.expanded=!0,i=i.parentElement;requestAnimationFrame((()=>{e.scrollIntoView()}))}async updateValidDropZone(t,e,i,s){var n;if(!this.draggingInTheDocument||t<=this.dragStartTimestamp)return;const a=b(e,i);this.validDroppableZoneCache.set(a,s?"valid":"invalid"),(null===(n=this.lastOpenSubTreeItem)||void 0===n?void 0:n.id)===e&&(this.lastOpenSubTreeItem.dragState="enter")}validDroppableZone(t){const e=t.target,i=b(e.id,this.draggedItems);let s=this.validDroppableZoneCache.get(i);return"temporal-invalid"!==s||e.lazyLoad||e.downloading||(s=null),null!=s?s:"none"===t.dataTransfer.effectAllowed||e.dropDisabled||this.draggingInTree&&(this.draggedIds.includes(e.id)||this.draggedParentIds.includes(e.id))?(this.validDroppableZoneCache.set(i,"invalid"),"invalid"):e.lazyLoad||e.downloading?(this.validDroppableZoneCache.set(i,"temporal-invalid"),"temporal-invalid"):(this.validDroppableZoneCache.set(i,"checking"),this.droppableZoneEnter.emit({newContainer:{id:e.id,metadata:e.metadata},draggedItems:this.draggedItems}),"checking")}openSubTreeAfterCountdown(t){t.leaf||t.expanded||(this.openSubTreeTimeout=setTimeout((()=>{t.expanded=!0,this.expandedItemChange.emit({id:t.id,expanded:!0})}),this.openSubTreeCountdown))}updateDropEffect(t){const e=t.target;if(e.tagName.toLowerCase()!==p||e.closest("ch-tree-view")!==this.el)return;const i=this.validDroppableZone(t);"invalid"!==i&&"temporal-invalid"!==i||(t.dataTransfer.dropEffect="none")}resetVariables(){this.draggedIds=[],this.draggedParentIds=[]}checkDragValidityAndUpdateDragInfo(t){const e=t.elem,i=this.selectedItemsInfo.has(e.id);this.draggingSelectedItems=i;let s,n=[];if(i){const t=[...this.selectedItemsInfo.keys()],i=[...this.selectedItemsInfo.values()],a=t.length;s=i.every((t=>!t.itemRef.dragDisabled)),this.draggedIds=t,n=i.map((t=>({id:t.id,metadata:t.metadata}))),this.dragInfo=1===a?e.caption:a.toString()}else s=!e.dragDisabled,n=[{id:e.id,metadata:e.metadata}],this.draggedIds=[e.id],this.dragInfo=e.caption;this.getDirectParentsOfDraggableItems(i);const a=JSON.stringify(n);return t.dragEvent.dataTransfer.setData(u,a),s}getDirectParentsOfDraggableItems(t){if(t)this.selectedItemsInfo.forEach((t=>{const e=t.parentId;""!==e&&this.draggedParentIds.push(e)}));else{const t=this.currentDraggedItem.parentElement;t.tagName.toLowerCase()===p&&this.draggedParentIds.push(t.id)}}handleItemSelection(t,e){e.ctrlKeyPressed&&this.multiSelection||(this.selectedItemsInfo.delete(e.id),this.selectedItemsInfo.forEach((t=>{t.itemRef.selected=!1})),this.clearSelectedItems(),t.selected=e.selected),e.selected&&this.selectedItemsInfo.set(e.id,e),this.selectedItemsChange.emit(this.selectedItemsInfo)}clearSelectedItems(){this.selectedItemsInfo.clear()}disconnectedCallback(){this.resetVariables(),this.handleItemDragEnd()}render(){return i(s,{class:{"ch-tree-view-dragging-item":this.draggingInTheDocument,"ch-tree-view-not-dragging-item":!this.draggingInTheDocument,"ch-tree-view--dragging-selected-items":this.draggingInTree&&this.draggingSelectedItems,"ch-tree-view-waiting-drop-processing":this.waitDropProcessing}},i("div",{role:"tree",part:"tree-x-container","aria-multiselectable":this.multiSelection.toString(),class:"ch-tree-view-container"},i("slot",null)),this.draggingInTree&&i("span",{"aria-hidden":"true",class:"ch-tree-view-drag-info"},this.dragInfo))}get el(){return n(this)}};x.style="ch-tree-view{display:flex;position:relative;width:100%;overflow:auto}ch-tree-view>.ch-tree-view-container{position:absolute;inset:0}ch-tree-view.ch-tree-view-dragging-item ch-tree-view-item{pointer-events:var(--ch-tree-view-pointer-events, all)}ch-tree-view.ch-tree-view-dragging-item .ch-tree-view-list-item--deny-drop{pointer-events:none}ch-tree-view.ch-tree-view--dragging-selected-items ch-tree-view-item[selected]{--ch-tree-view-pointer-events:none}ch-tree-view.ch-tree-view-waiting-drop-processing{cursor:wait}ch-tree-view.ch-tree-view-waiting-drop-processing>.ch-tree-view-container{pointer-events:none}.ch-tree-view-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-view-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-view-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-view-drag-info-fade-in 10ms}@keyframes ch-tree-view-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-view-drag-info{--rtl-offset:-100%}";const f=new Image,w="ch-tree-view-item",k=`:scope>${w}`,C=`${w}:not([disabled])`,y=`:scope>${w}:last-child`,I="expandable",D="Enter",S=["container","input","option","checked","indeterminate"].map((t=>`${t}:checkbox__${t}`)).join(","),$=class{constructor(s){t(this,s),this.checkboxChange=e(this,"checkboxChange",7),this.checkboxToggleChange=e(this,"checkboxToggleChange",7),this.itemDragStart=e(this,"itemDragStart",7),this.itemDragEnd=e(this,"itemDragEnd",7),this.loadLazyContent=e(this,"loadLazyContent",7),this.modifyCaption=e(this,"modifyCaption",7),this.openReference=e(this,"openReference",7),this.selectedItemChange=e(this,"selectedItemChange",7),this.selectedItemSync=e(this,"selectedItemSync",7),this.ignoreCheckboxChange=!1,this.checkbox=!1,this.checked=!1,this.customRender=!1,this.disabled=!1,this.dragDisabled=!1,this.dropDisabled=!1,this.dragState="none",this.downloading=!1,this.editing=!1,this.expanded=!1,this.lastItem=!1,this.lazyLoad=!1,this.leaf=!1,this.level=0,this.indeterminate=!1,this.selected=!1,this.showDownloadingSpinner=!0,this.showExpandableButton=!0,this.showLines="none",this.toggleCheckboxes=!1,this.checkIfShouldRemoveEditMode=t=>{t.stopPropagation(),(t.code===D||"Escape"===t.code)&&(t.preventDefault(),this.removeEditMode(!0,t.code===D)())},this.removeEditModeOnClick=t=>{!t.composedPath().includes(this.inputRef)&&t.pointerType&&this.removeEditMode(!1)()},this.removeEditMode=(t,e=!1)=>()=>{if(!this.editing)return;this.editing=!1,document.body.removeEventListener("click",this.removeEditModeOnClick,{capture:!0});const i=this.inputRef.value;e&&""!==i.trim()&&this.modifyCaption.emit({id:this.el.id,caption:i}),t&&this.headerRef.focus()},this.toggleExpand=t=>{t.stopPropagation(),this.leaf||(this.expanded=!this.expanded),this.selected=!0,this.selectedItemChange.emit(this.getSelectedInfo(l(t),!0))},this.getSelectedInfo=(t,e)=>({ctrlKeyPressed:t,expanded:this.expanded,id:this.el.id,itemRef:this.el,metadata:this.metadata,parentId:this.el.parentElement.id,selected:e}),this.handleActionDblClick=t=>{t.stopPropagation(),l(t)?this.toggleSelected():(this.emitOpenReference(),this.leaf||this.toggleExpand(t))},this.handleActionClick=t=>{t.stopPropagation(),this.editing||(t.preventDefault(),t.pointerType?this.toggleOrSelect(t):(this.emitOpenReference(),this.toggleExpand(t)))},this.handleActionKeyDown=t=>{l(t)&&t.code===D&&(t.stopPropagation(),this.toggleSelected())},this.handleCheckedChange=t=>{t.stopPropagation(),this.checked=t.target.checked,this.checkboxChange.emit({id:this.el.id,checked:this.checked,indeterminate:this.indeterminate})},this.renderImg=(t,e)=>i("img",{"aria-hidden":"true",class:t,part:t,alt:"",src:e,loading:"lazy"}),this.handleDragStart=t=>{if(this.editing)return t.preventDefault(),void t.stopPropagation();t.dataTransfer.setDragImage(f,0,0),t.dataTransfer.effectAllowed="move",this.dragState="start",this.itemDragStart.emit({elem:this.el,dragEvent:t})},this.handleDragEnd=()=>{this.dragState="none",this.itemDragEnd.emit()},this.handleDrop=()=>{this.dragState="none"}}updateChildrenCheckedValue(t){!this.toggleCheckboxes||this.leaf||this.ignoreCheckboxChange?this.ignoreCheckboxChange=!1:this.getDirectTreeItems().forEach((e=>{e.checked===t&&!1===e.indeterminate||(e.checked=t,e.indeterminate=!1,this.checkboxToggleChange.emit({id:e.id,checked:t,indeterminate:!1}))}))}handleEditingChange(t){t&&(document.body.addEventListener("click",this.removeEditModeOnClick,{capture:!0}),a((()=>{requestAnimationFrame((()=>{this.inputRef&&this.inputRef.focus()}))})))}handleExpandedChange(t){this.lazyLoadItems(t)}handleLasItemChange(t){t&&this.showLines?this.setResizeObserver():this.disconnectObserver()}handleSelectedChange(t){this.selectedItemSync.emit(this.getSelectedInfo(!0,t))}handleShowLinesChange(t){t&&this.lastItem?this.setResizeObserver():this.disconnectObserver()}updateCheckboxValue(t){if(!this.toggleCheckboxes)return;const e=t.detail.checked,i=this.getDirectTreeItems().every((t=>t.checked===e));this.ignoreCheckboxChange=this.checked!==e,this.checked=e,this.indeterminate=!i,this.checkboxToggleChange.emit({id:this.el.id,checked:e,indeterminate:!i})}async focusNextItem(t){if(!this.leaf&&this.expanded){const e=this.el.querySelector(C);if(e)return void e.setFocus(t)}this.focusNextSibling(t)}async focusNextSibling(t){const e=this.el.nextElementSibling;e?e.disabled?e.focusNextItem(t):e.setFocus(t):0!==this.level&&this.el.parentElement.focusNextSibling(t)}async focusPreviousItem(t){const e=this.el.previousElementSibling;if(e)return void e.focusLastItem(t);if(0===this.level)return;const i=this.el.parentElement;i.disabled?i.focusPreviousItem(t):i.setFocus(t)}async focusLastItem(t){if(!this.leaf&&this.expanded){const e=this.el.querySelector(y);if(e)return void e.focusLastItem(t)}this.disabled?this.focusPreviousItem(t):this.setFocus(t)}async setFocus(t){this.headerRef.focus(),t||this.setSelected()}getDirectTreeItems(){return Array.from(this.el.querySelectorAll(k))}setResizeObserver(){this.watcher=new ResizeObserver((()=>{const t=this.el.getBoundingClientRect().height-this.headerRef.getBoundingClientRect().height/2;this.el.style.setProperty("--distance-to-checkbox",t+"px")})),this.watcher.observe(this.el),this.watcher.observe(this.headerRef)}disconnectObserver(){this.watcher&&(this.watcher.disconnect(),this.watcher=null)}lazyLoadItems(t){this.lazyLoad&&t&&(this.lazyLoad=!1,this.loadLazyContent.emit(this.el.id))}toggleSelected(){const t=!this.selected;this.selected=t,this.selectedItemChange.emit(this.getSelectedInfo(!0,t))}setSelected(){this.selected=!0,this.selectedItemChange.emit(this.getSelectedInfo(!1,!0))}toggleOrSelect(t){l(t)?this.toggleSelected():this.setSelected()}emitOpenReference(){this.openReference.emit({id:this.el.id,leaf:this.leaf,metadata:this.metadata})}componentWillLoad(){this.lazyLoadItems(this.expanded),this.selected&&this.selectedItemChange.emit(this.getSelectedInfo(!0,!0))}componentDidLoad(){this.lastItem&&this.showLines&&this.setResizeObserver()}disconnectedCallback(){this.editing&&this.removeEditMode(!1),this.disconnectObserver()}render(){const t=this.level%2==0,e=!this.leaf&&this.showExpandableButton,n=!this.leaf&&!this.showExpandableButton,a=!this.leaf&&!this.lazyLoad,h="all"===this.showLines&&0!==this.level,r="last"===this.showLines&&0!==this.level&&this.lastItem;return i(s,{role:"treeitem","aria-level":this.level+1,"aria-selected":this.selected?"true":null,class:{[w+"--downloading"]:this.downloading,[w+"--editing"]:this.editing,[w+"--not-editing"]:!this.editing,[w+"--drag-"+this.dragState]:"none"!==this.dragState&&"start"!==this.dragState,[w+"--deny-drop"]:this.leaf},style:{"--level":`${this.level}`},onDrop:this.dropDisabled||this.leaf||"start"===this.dragState?null:this.handleDrop},i("button",{"aria-controls":a?I:null,"aria-expanded":a?this.expanded.toString():null,class:{header:!0,"header--selected":this.selected,"header--disabled":this.disabled,"header--expandable-offset":e,"header--checkbox-offset":n&&this.checkbox,"header--even":t,"header--odd":!t,"header--even-expandable":t&&e,"header--odd-expandable":!t&&e,"header--level-0":0===this.level},part:`header${this.disabled?" disabled":""}${this.selected?" selected":""}`,type:"button",disabled:this.disabled,onClick:this.handleActionClick,onKeyDown:this.editing?null:this.handleActionKeyDown,draggable:!this.dragDisabled,onDragStart:this.handleDragStart,onDragEnd:this.dragDisabled?null:this.handleDragEnd,ref:t=>this.headerRef=t},!this.leaf&&this.showExpandableButton&&i("button",{type:"button",class:{"expandable-button":!0,"expandable-button--expanded":this.expanded,"expandable-button--collapsed":!this.expanded},part:`expandable-button${this.disabled?" disabled":""}${this.expanded?" expanded":" collapsed"}`,disabled:this.disabled,onClick:this.toggleExpand}),this.checkbox&&i("ch-checkbox",{accessibleName:this.caption,class:"checkbox",exportparts:S,part:`checkbox${this.disabled?" disabled":""}${this.checked?" checked":""}${this.indeterminate?" indeterminate":""}`,checkedValue:"true",disabled:this.disabled,indeterminate:this.indeterminate,unCheckedValue:"false",value:`${this.checked}`,onInput:this.handleCheckedChange}),this.customRender?i("slot",{name:"custom-content"}):[i("div",{class:{action:!0,"readonly-mode":!this.editing},part:`action${this.editing?"":" readonly-mode"}${!this.leaf&&this.expanded?" expanded":""}`,onDblClick:this.editing?null:this.handleActionDblClick},this.leftImgSrc&&this.renderImg("left-img",this.leftImgSrc),this.editable&&this.editing?i("input",{class:"edit-name",part:"edit-name",disabled:this.disabled,type:"text",value:this.caption,onBlur:this.removeEditMode(!1),onKeyDown:this.checkIfShouldRemoveEditMode,ref:t=>this.inputRef=t}):this.caption,this.rightImgSrc&&this.renderImg("right-img",this.rightImgSrc)),this.showDownloadingSpinner&&!this.leaf&&this.downloading&&i("div",{class:"downloading",part:"downloading"})],(h||r)&&i("div",{class:{"dashed-line":!0,"last-all-line":h&&this.lastItem,"last-line":r},part:"dashed-line"+(this.lastItem?" last-all-line":"")})),a&&i("div",{role:"group","aria-busy":this.downloading.toString(),"aria-live":this.downloading?"polite":null,id:I,class:{expandable:!0,"expandable--collapsed":!this.expanded},part:"expandable"+(this.expanded?" expanded":" collapsed")},i("slot",null)))}get el(){return n(this)}static get watchers(){return{checked:["updateChildrenCheckedValue"],editing:["handleEditingChange"],expanded:["handleExpandedChange"],lastItem:["handleLasItemChange"],selected:["handleSelectedChange"],showLines:["handleShowLinesChange"]}}};$.style=':where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n var(--checkbox-size) + var(--expandable-button-width) +\n (5px * 2)\n );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--even-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--odd-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n var(--expandable-button-width) + 5px\n )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:"";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url(\'data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z"/></svg>\')}.expandable-button--expanded::before{-webkit-mask-image:url(\'data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.15,8.5H1.93v-1H14.15Z"/></svg>\')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:"left-img text right-img"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative;content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}';const z=(t,e,i)=>i.regularExpression?null!==t.match(e):((t,e,i)=>i?t.includes(e):t.toLowerCase().includes(e.toLowerCase()))(t,e,i.camelCase),E={caption:(t,e)=>{var i;return!e.filter||z(null!==(i=t.caption)&&void 0!==i?i:"",e.filter,e.filterOptions)},checked:(t,e)=>{var i,s;return(null!==(i=t.checkbox)&&void 0!==i?i:e.defaultCheckbox)&&!t.indeterminate&&(null!==(s=t.checked)&&void 0!==s?s:e.defaultChecked)},"id-list":(t,e)=>e.filterList.includes(t.id),metadata:(t,e)=>{var i;return!e.filter||z(null!==(i=t.metadata)&&void 0!==i?i:"",e.filter,e.filterOptions)},none:()=>!0,unchecked:(t,e)=>{var i,s;return(null!==(i=t.checkbox)&&void 0!==i?i:e.defaultCheckbox)&&!t.indeterminate&&!(null!==(s=t.checked)&&void 0!==s?s:e.defaultChecked)}},L=(t,e,s,n)=>{var a,h,r,d,l,o;return("none"===e.filterType||!1!==t.render)&&i("ch-tree-view-item",{id:t.id,caption:t.caption,checkbox:null!==(a=t.checkbox)&&void 0!==a?a:e.checkbox,checked:null!==(h=t.checked)&&void 0!==h?h:e.checked,class:t.class,disabled:t.disabled,downloading:t.downloading,dragDisabled:null!==(r=t.dragDisabled)&&void 0!==r?r:e.dragDisabled,dropDisabled:null!==(d=t.dropDisabled)&&void 0!==d?d:e.dropDisabled,editable:null!==(l=t.editable)&&void 0!==l?l:e.editableItems,expanded:t.expanded,indeterminate:t.indeterminate,lastItem:s,lazyLoad:t.lazy,leaf:t.leaf,leftImgSrc:t.leftImgSrc,level:n,metadata:t.metadata,rightImgSrc:t.rightImgSrc,selected:t.selected,showExpandableButton:t.showExpandableButton,showLines:e.showLines,toggleCheckboxes:null!==(o=t.toggleCheckboxes)&&void 0!==o?o:e.toggleCheckboxes},!t.leaf&&null!=t.items&&t.items.map(((i,s)=>L(i,e,e.showLines&&s===t.items.length-1,n+1))))},O=class{constructor(i){t(this,i),this.checkedItemsChange=e(this,"checkedItemsChange",7),this.itemContextmenu=e(this,"itemContextmenu",7),this.itemOpenReference=e(this,"itemOpenReference",7),this.selectedItemsChange=e(this,"selectedItemsChange",7),this.flattenedTreeModel=new Map,this.flattenedCheckboxTreeModel=new Map,this.selectedItems=new Set,this.waitDropProcessing=!1,this.checkbox=!1,this.checked=!1,this.dragDisabled=!1,this.dropDisabled=!1,this.editableItems=!0,this.filterList=[],this.filterOptions={},this.filterType="none",this.multiSelection=!1,this.renderItem=L,this.showLines="none",this.toggleCheckboxes=!1,this.treeModel=[],this.handleDroppableZoneEnter=t=>{if(!this.checkDroppableZoneCallback)return;t.stopPropagation();const e=(new Date).getTime(),i=t.detail;this.checkDroppableZoneCallback(i).then((t=>{this.updateValidDropZone(e,i.newContainer.id,i.draggedItems,t)}))},this.handleSelectedItemsChange=t=>{t.stopPropagation();const e=new Map(t.detail);this.selectedItems.forEach((t=>{const i=this.flattenedTreeModel.get(t).item,s=e.get(t);s?(i.expanded=s.expanded,e.delete(t)):(i.selected=!1,this.selectedItems.delete(t))})),e.forEach(((t,e)=>{const i=this.flattenedTreeModel.get(e).item;i.selected=!0,i.expanded=t.expanded,this.selectedItems.add(e)})),this.selectedItemsChange.emit(t.detail)},this.handleExpandedItemChange=t=>{const e=t.detail;this.flattenedTreeModel.get(e.id).item.expanded=e.expanded},this.handleItemContextmenu=t=>{t.stopPropagation(),this.itemContextmenu.emit(t.detail)},this.handleItemsDropped=t=>{if(!this.dropItemsCallback)return;t.stopPropagation();const e=t.detail,i=e.newContainer.id;if(!this.flattenedTreeModel.get(i))return;const s=e.draggedItems;if(0===s.length)return;const n=this.dropItemsCallback(e);this.waitDropProcessing=!0,n.then((async t=>{if(this.waitDropProcessing=!1,!t.acceptDrop)return;const n=this.flattenedTreeModel.get(i).item;if(e.dropInTheSameTree)s.forEach(this.moveItemToNewParent(n)),e.draggingSelectedItems&&await this.treeRef.clearSelectedItemsInfo();else{if(null==t.items)return;n.items.push(...t.items),t.items.forEach(this.flattenItemUIModel(n))}this.sortItems(n.items),n.expanded=!0,this.emitCheckedItemsChange(),this.processFilters()}))},this.moveItemToNewParent=t=>e=>{const i=this.flattenedTreeModel.get(e.id),s=i.item,n=i.parentItem;n.items.splice(n.items.indexOf(s),1),t.items.push(s),i.parentItem=t},this.flattenItemUIModel=t=>e=>{var i,s,n,a,h,r;this.flattenedTreeModel.set(e.id,{parentItem:t,item:e}),(null!==(i=e.checkbox)&&void 0!==i?i:this.checkbox)&&this.flattenedCheckboxTreeModel.set(e.id,{parentItem:t,item:e}),e.class||(e.class="tree-view-item"),null!==(s=e.expanded)&&void 0!==s||(e.expanded=!1),null!==(n=e.indeterminate)&&void 0!==n||(e.indeterminate=!1),null!==(a=e.lazy)&&void 0!==a||(e.lazy=!1),null!==(h=e.order)&&void 0!==h||(e.order=0),null!==(r=e.selected)&&void 0!==r||(e.selected=!1),e.selected&&this.selectedItems.add(e.id),this.flattenSubModel(e)}}handleFilterChange(){"caption"!==this.filterType&&"metadata"!==this.filterType||this.processFilters()}handleFilterListChange(){"id-list"===this.filterType&&this.processFilters()}handleFilterOptionsChange(){"caption"!==this.filterType&&"metadata"!==this.filterType||this.processFilters()}handleFilterTypeChange(){this.processFilters()}handleTreeModelChange(){this.flattenModel()}async loadLazyContent(t,e,i=!1,s=!1){const n=this.flattenedTreeModel.get(t).item;n.downloading=i,n.lazy=s,null!=e&&(n.items=e,this.sortItems(n.items),this.flattenSubModel(n),this.emitCheckedItemsChange(),this.processFilters(),h(this))}async scrollIntoVisible(t){const e=this.flattenedTreeModel.get(t);if(!e)return;let i=e.parentItem;for(;i&&null!=i.id;)i.expanded=!0,i=this.flattenedTreeModel.get(i.id).parentItem;h(this),this.treeRef.scrollIntoVisible(t)}async toggleItems(t,e){if(!t)return[];const i=[];return t.forEach((t=>{const s=this.flattenedTreeModel.get(t).item;s&&(s.expanded=null!=e?e:!s.expanded,i.push({id:s.id,expanded:s.expanded}))})),h(this),i}async updateAllItemsProperties(t){[...this.flattenedTreeModel.values()].forEach((e=>{null!=t.expanded&&(e.item.expanded=t.expanded),null!=t.checked&&(e.item.checked=t.checked,e.item.indeterminate=!1)})),null!=t.checked&&this.processFilters(),h(this)}async updateItemsProperties(t,e){t.forEach((t=>{const i=this.flattenedTreeModel.get(t);this.updateItemProperty(i,e)})),this.processFilters(),h(this)}async updateValidDropZone(t,e,i,s){this.treeRef.updateValidDropZone(t,e,i,s)}updateItemProperty(t,e){if(!t)return;const i=t.item;Object.keys(e).forEach((t=>{i[t]=e[t]}))}updateCheckboxValue(t){t.stopPropagation();const e=t.detail,i=this.flattenedCheckboxTreeModel.get(e.id);if(!i)return;const s=i.item;s.checked=e.checked,s.indeterminate=e.indeterminate,this.emitCheckedItemsChange(),"checked"!==this.filterType&&"unchecked"!==this.filterType||(this.processFilters(),h(this))}loadLazyChildrenHandler(t){if(!this.lazyLoadTreeItemsCallback)return;t.stopPropagation();const e=t.detail,i=this.lazyLoadTreeItemsCallback(e);t.target.downloading=!0,i.then((t=>{this.loadLazyContent(e,t)}))}handleCaptionModification(t){if(!this.modifyItemCaptionCallback)return;t.stopPropagation();const e=t.target,i=t.detail.id,s=this.flattenedTreeModel.get(i),n=s.item,a=t.detail.caption,r=n.caption;n.caption=a,e.caption=a,this.modifyItemCaptionCallback(i,a).then((t=>{t.success?(this.sortItems(s.parentItem.items),this.processFilters(),h(this)):(e.caption=r,n.caption=r)}))}handleOpenReference(t){t.stopPropagation(),this.itemOpenReference.emit(t.detail)}emitCheckedItemsChange(){const t=new Map(this.flattenedCheckboxTreeModel);t.forEach((t=>{var e,i;null!==(e=(i=t.item).checked)&&void 0!==e||(i.checked=this.checked)})),this.checkedItemsChange.emit(t)}flattenSubModel(t){const e=t.items;e?(this.sortItems(e),e.forEach(this.flattenItemUIModel(t))):!0!==t.leaf&&(t.items=[])}sortItems(t){this.sortItemsCallback&&this.sortItemsCallback(t)}flattenModel(){this.flattenedTreeModel.clear(),this.flattenedCheckboxTreeModel.clear(),this.selectedItems.clear(),this.treeRef&&this.treeRef.clearSelectedItemsInfo(),this.flattenSubModel({id:null,caption:null,items:this.treeModel}),this.emitCheckedItemsChange()}filterSubModel(t,e){let i=!1;!0!==t.leaf&&null!=t.items&&t.items.forEach((t=>{const s=this.filterSubModel(t,e);i||(i=s)}));const s=E[this.filterType](t,e)||i;return t.render=s,s}processFilters(){"none"!==this.filterType&&this.filterSubModel({id:null,caption:null,items:this.treeModel},{defaultCheckbox:this.checkbox,defaultChecked:this.checked,filter:this.filter,filterList:this.filterList,filterOptions:this.filterOptions})}componentWillLoad(){this.flattenModel(),this.processFilters()}render(){return i("ch-tree-view",{class:this.cssClass||null,multiSelection:this.multiSelection,waitDropProcessing:this.waitDropProcessing,onDroppableZoneEnter:this.handleDroppableZoneEnter,onExpandedItemChange:this.handleExpandedItemChange,onItemContextmenu:this.handleItemContextmenu,onItemsDropped:this.handleItemsDropped,onSelectedItemsChange:this.handleSelectedItemsChange,ref:t=>this.treeRef=t},this.treeModel.map(((t,e)=>this.renderItem(t,this,this.showLines&&e===this.treeModel.length-1,0))))}static get watchers(){return{filter:["handleFilterChange"],filterList:["handleFilterListChange"],filterOptions:["handleFilterOptionsChange"],filterType:["handleFilterTypeChange"],treeModel:["handleTreeModelChange"]}}};O.style="ch-tree-view-render{display:contents}";export{c as ch_checkbox,x as ch_tree_view,$ as ch_tree_view_item,O as ch_tree_view_render}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as r,h as e,H as o,g as i}from"./p-976c3a09.js";import{c as a,g as n}from"./p-64765a81.js";var c=a((function(t){var r;self,r=()=>(()=>{var t={d:(r,e)=>{for(var o in e)t.o(e,o)&&!t.o(r,o)&&Object.defineProperty(r,o,{enumerable:!0,get:e[o]})},o:(t,r)=>Object.prototype.hasOwnProperty.call(t,r),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},r={};t.d(r,{default:()=>A});var e={};function o(t,r,e,o,i={}){r instanceof HTMLCollection||r instanceof NodeList?r=Array.from(r):Array.isArray(r)||(r=[r]),Array.isArray(e)||(e=[e]);for(const a of r)for(const r of e)a[t](r,o,{capture:!1,...i});return Array.prototype.slice.call(arguments,1)}t.r(e),t.d(e,{adjustableInputNumbers:()=>p,createElementFromString:()=>n,createFromTemplate:()=>c,eventPath:()=>s,off:()=>a,on:()=>i,resolveElement:()=>l});const i=o.bind(null,"addEventListener"),a=o.bind(null,"removeEventListener");function n(t){const r=document.createElement("div");return r.innerHTML=t.trim(),r.firstElementChild}function c(t){const r=(t,r)=>{const e=t.getAttribute(r);return t.removeAttribute(r),e},e=(t,o={})=>{const i=r(t,":obj"),a=r(t,":ref"),n=i?o[i]={}:o;a&&(o[a]=t);for(const o of Array.from(t.children)){const t=r(o,":arr"),i=e(o,t?{}:n);t&&(n[t]||(n[t]=[])).push(Object.keys(i).length?i:o)}return o};return e(n(t))}function s(t){let r=t.path||t.composedPath&&t.composedPath();if(r)return r;let e=t.target.parentElement;for(r=[t.target,e];e=e.parentElement;)r.push(e);return r.push(document,window),r}function l(t){return t instanceof Element?t:"string"==typeof t?t.split(/>>/g).reduce(((t,r,e,o)=>(t=t.querySelector(r),e<o.length-1?t.shadowRoot:t)),document):null}function p(t,r=(t=>t)){function e(e){const o=[.001,.01,.1][Number(e.shiftKey||2*e.ctrlKey)]*(e.deltaY<0?1:-1);let i=0,a=t.selectionStart;t.value=t.value.replace(/[\d.]+/g,((t,e)=>e<=a&&e+t.length>=a?(a=e,r(Number(t),o,i)):(i++,t))),t.focus(),t.setSelectionRange(a,a),e.preventDefault(),t.dispatchEvent(new Event("input"))}i(t,"focus",(()=>i(window,"wheel",e,{passive:!1}))),i(t,"blur",(()=>a(window,"wheel",e)))}const{min:h,max:d,floor:g,round:u}=Math;function f(t,r,e){r/=100,e/=100;const o=g(t=t/360*6),i=t-o,a=e*(1-r),n=e*(1-i*r),c=e*(1-(1-i)*r),s=o%6;return[255*[e,n,a,a,c,e][s],255*[c,e,e,n,a,a][s],255*[a,a,c,e,e,n][s]]}function m(t,r,e){const o=(2-(r/=100))*(e/=100)/2;return 0!==o&&(r=1===o?0:o<.5?r*e/(2*o):r*e/(2-2*o)),[t,100*r,100*o]}function v(t,r,e){const o=h(t/=255,r/=255,e/=255),i=d(t,r,e),a=i-o;let n,c;if(0===a)n=c=0;else{c=a/i;const o=((i-t)/6+a/2)/a,s=((i-r)/6+a/2)/a,l=((i-e)/6+a/2)/a;t===i?n=l-s:r===i?n=1/3+o-l:e===i&&(n=2/3+s-o),n<0?n+=1:n>1&&(n-=1)}return[360*n,100*c,100*i]}function b(t,r,e,o){return r/=100,e/=100,[...v(255*(1-h(1,(t/=100)*(1-(o/=100))+o)),255*(1-h(1,r*(1-o)+o)),255*(1-h(1,e*(1-o)+o)))]}function y(t,r,e){r/=100;const o=2*(r*=(e/=100)<.5?e:1-e)/(e+r)*100,i=100*(e+r);return[t,isNaN(o)?0:o,i]}function w(t){return v(...t.match(/.{2}/g).map((t=>parseInt(t,16))))}function x(t=0,r=0,e=0,o=1){const i=(t,r)=>(e=-1)=>r(~e?t.map((t=>Number(t.toFixed(e)))):t),a={h:t,s:r,v:e,a:o,toHSVA(){const t=[a.h,a.s,a.v,a.a];return t.toString=i(t,(t=>`hsva(${t[0]}, ${t[1]}%, ${t[2]}%, ${a.a})`)),t},toHSLA(){const t=[...m(a.h,a.s,a.v),a.a];return t.toString=i(t,(t=>`hsla(${t[0]}, ${t[1]}%, ${t[2]}%, ${a.a})`)),t},toRGBA(){const t=[...f(a.h,a.s,a.v),a.a];return t.toString=i(t,(t=>`rgba(${t[0]}, ${t[1]}, ${t[2]}, ${a.a})`)),t},toCMYK(){const t=function(t,r,e){const o=f(t,r,e),i=o[0]/255,a=o[1]/255,n=o[2]/255,c=h(1-i,1-a,1-n);return[100*(1===c?0:(1-i-c)/(1-c)),100*(1===c?0:(1-a-c)/(1-c)),100*(1===c?0:(1-n-c)/(1-c)),100*c]}(a.h,a.s,a.v);return t.toString=i(t,(t=>`cmyk(${t[0]}%, ${t[1]}%, ${t[2]}%, ${t[3]}%)`)),t},toHEXA(){const t=function(t,r,e){return f(t,r,e).map((t=>u(t).toString(16).padStart(2,"0")))}(a.h,a.s,a.v),r=a.a>=1?"":Number((255*a.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return r&&t.push(r),t.toString=()=>`#${t.join("").toUpperCase()}`,t},clone:()=>x(a.h,a.s,a.v,a.a)};return a}const k=t=>Math.max(Math.min(t,1),0);function z(t){const r={options:Object.assign({lock:null,onchange:()=>0,onstop:()=>0},t),_keyboard(t){const{options:e}=r,{type:o,key:i}=t;if(document.activeElement===e.wrapper){const{lock:e}=r.options,a="ArrowUp"===i,n="ArrowRight"===i,c="ArrowDown"===i,s="ArrowLeft"===i;if("keydown"===o&&(a||n||c||s)){let o=0,i=0;"v"===e?o=a||n?1:-1:"h"===e?o=a||n?-1:1:(i=a?-1:c?1:0,o=s?-1:n?1:0),r.update(k(r.cache.x+.01*o),k(r.cache.y+.01*i)),t.preventDefault()}else i.startsWith("Arrow")&&(r.options.onstop(),t.preventDefault())}},_tapstart(t){i(document,["mouseup","touchend","touchcancel"],r._tapstop),i(document,["mousemove","touchmove"],r._tapmove),t.cancelable&&t.preventDefault(),r._tapmove(t)},_tapmove(t){const{options:e,cache:o}=r,{lock:i,element:a,wrapper:n}=e,c=n.getBoundingClientRect();let s=0,l=0;if(t){const r=t&&t.touches&&t.touches[0];s=t?(r||t).clientX:0,l=t?(r||t).clientY:0,s<c.left?s=c.left:s>c.left+c.width&&(s=c.left+c.width),l<c.top?l=c.top:l>c.top+c.height&&(l=c.top+c.height),s-=c.left,l-=c.top}else o&&(s=o.x*c.width,l=o.y*c.height);"h"!==i&&(a.style.left=`calc(${s/c.width*100}% - ${a.offsetWidth/2}px)`),"v"!==i&&(a.style.top=`calc(${l/c.height*100}% - ${a.offsetHeight/2}px)`),r.cache={x:s/c.width,y:l/c.height};const p=k(s/c.width),h=k(l/c.height);switch(i){case"v":return e.onchange(p);case"h":return e.onchange(h);default:return e.onchange(p,h)}},_tapstop(){r.options.onstop(),a(document,["mouseup","touchend","touchcancel"],r._tapstop),a(document,["mousemove","touchmove"],r._tapmove)},trigger(){r._tapmove()},update(t=0,e=0){const{left:o,top:i,width:a,height:n}=r.options.wrapper.getBoundingClientRect();"h"===r.options.lock&&(e=t),r._tapmove({clientX:o+a*t,clientY:i+n*e})},destroy(){const{options:t,_tapstart:e,_keyboard:o}=r;a(document,["keydown","keyup"],o),a([t.wrapper,t.element],"mousedown",e),a([t.wrapper,t.element],"touchstart",e,{passive:!1})}},{options:e,_tapstart:o,_keyboard:n}=r;return i([e.wrapper,e.element],"mousedown",o),i([e.wrapper,e.element],"touchstart",o,{passive:!1}),i(document,["keydown","keyup"],n),r}function $(t={}){t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const r=i(t.elements,"click",(r=>{t.elements.forEach((e=>e.classList[r.target===e?"add":"remove"](t.className))),t.onchange(r),r.stopPropagation()}));return{destroy:()=>a(...r)}}const H={variantFlipOrder:{start:"sme",middle:"mse",end:"ems"},positionFlipOrder:{top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},position:"bottom",margin:8,padding:0};class A{static utils=e;static version="1.9.0";static I18N_DEFAULTS={"ui:dialog":"color picker dialog","btn:toggle":"toggle color picker dialog","btn:swatch":"color swatch","btn:last-color":"use previous color","btn:save":"Save","btn:cancel":"Cancel","btn:clear":"Clear","aria:btn:save":"save and close","aria:btn:cancel":"cancel and close","aria:btn:clear":"clear and close","aria:input":"color input field","aria:palette":"color selection area","aria:hue":"hue selection slider","aria:opacity":"selection slider"};static DEFAULT_OPTIONS={appClass:null,theme:"classic",useAsButton:!1,padding:8,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,container:"body",components:{interaction:{}},i18n:{},swatches:null,inline:!1,sliders:null,default:"#42445a",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"};_initializingActive=!0;_recalc=!0;_nanopop=null;_root=null;_color=x();_lastColor=x();_swatchColors=[];_setupAnimationFrame=null;_eventListener={init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]};constructor(t){this.options=t=Object.assign({...A.DEFAULT_OPTIONS},t);const{swatches:r,components:e,theme:o,sliders:i,lockOpacity:a,padding:n}=t;["nano","monolith"].includes(o)&&!i&&(t.sliders="h"),e.interaction||(e.interaction={});const{preview:c,opacity:s,hue:l,palette:p}=e;e.opacity=!a&&s,e.palette=p||c||s||l,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),r&&r.length&&r.forEach((t=>this.addSwatch(t)));const{button:h,app:d}=this._root;this._nanopop=((t,r,e)=>{const o="object"!=typeof t||t instanceof HTMLElement?{reference:t,popper:r,...e}:t;return{update(t=o){const{reference:r,popper:e}=Object.assign(o,t);if(!e||!r)throw new Error("Popper- or reference-element missing.");return((t,r,e)=>{const{container:o,arrow:i,margin:a,padding:n,position:c,variantFlipOrder:s,positionFlipOrder:l}={container:document.documentElement.getBoundingClientRect(),...H,...e},{left:p,top:h}=r.style;r.style.left="0",r.style.top="0";const d=t.getBoundingClientRect(),g=r.getBoundingClientRect(),u={t:d.top-g.height-a,b:d.bottom+a,r:d.right+a,l:d.left-g.width-a},f={vs:d.left,vm:d.left+d.width/2-g.width/2,ve:d.left+d.width-g.width,hs:d.top,hm:d.bottom-d.height/2-g.height/2,he:d.bottom-g.height},[m,v="middle"]=c.split("-"),b=l[m],y=s[v],{top:w,left:x,bottom:k,right:z}=o;for(const t of b){const e="t"===t||"b"===t;let o=u[t];const[a,c]=e?["top","left"]:["left","top"],[s,l]=e?[g.height,g.width]:[g.width,g.height],[p,h]=e?[k,z]:[z,k],[m,v]=e?[w,x]:[x,w];if(!(o<m||o+s+n>p))for(const p of y){let u=f[(e?"v":"h")+p];if(!(u<v||u+l+n>h)){if(u-=g[c],o-=g[a],r.style[c]=`${u}px`,r.style[a]=`${o}px`,i){const t=e?d.width/2:d.height/2;o<d[a]&&(o+=s),i.style[c]=`${2*t<l?d[c]+t:u+l/2}px`,i.style[a]=`${o}px`}return t+p}}}return r.style.left=p,r.style.top=h,null})(r,e,o)}}})(h,d,{margin:n}),h.setAttribute("role","button"),h.setAttribute("aria-label",this._t("btn:toggle"));const g=this;this._setupAnimationFrame=requestAnimationFrame((function r(){if(!d.offsetWidth)return requestAnimationFrame(r);g.setColor(t.default),g._rePositioningPicker(),t.defaultRepresentation&&(g._representation=t.defaultRepresentation,g.setColorRepresentation(g._representation)),t.showAlways&&g.show(),g._initializingActive=!1,g._emit("init")}))}static create=t=>new A(t);_preBuild(){const{options:t}=this;for(const r of["el","container"])t[r]=l(t[r]);this._root=(t=>{const{components:r,useAsButton:e,inline:o,appClass:i,theme:a,lockOpacity:n}=t.options,s=t=>t?"":'style="display:none" hidden',l=r=>t._t(r),p=c(`\n <div :ref="root" class="pickr">\n\n ${e?"":'<button type="button" :ref="button" class="pcr-button"></button>'}\n\n <div :ref="app" class="pcr-app ${i||""}" data-theme="${a}" ${o?'style="position: unset"':""} aria-label="${l("ui:dialog")}" role="window">\n <div class="pcr-selection" ${s(r.palette)}>\n <div :obj="preview" class="pcr-color-preview" ${s(r.preview)}>\n <button type="button" :ref="lastColor" class="pcr-last-color" aria-label="${l("btn:last-color")}"></button>\n <div :ref="currentColor" class="pcr-current-color"></div>\n </div>\n\n <div :obj="palette" class="pcr-color-palette">\n <div :ref="picker" class="pcr-picker"></div>\n <div :ref="palette" class="pcr-palette" tabindex="0" aria-label="${l("aria:palette")}" role="listbox"></div>\n </div>\n\n <div :obj="hue" class="pcr-color-chooser" ${s(r.hue)}>\n <div :ref="picker" class="pcr-picker"></div>\n <div :ref="slider" class="pcr-hue pcr-slider" tabindex="0" aria-label="${l("aria:hue")}" role="slider"></div>\n </div>\n\n <div :obj="opacity" class="pcr-color-opacity" ${s(r.opacity)}>\n <div :ref="picker" class="pcr-picker"></div>\n <div :ref="slider" class="pcr-opacity pcr-slider" tabindex="0" aria-label="${l("aria:opacity")}" role="slider"></div>\n </div>\n </div>\n\n <div class="pcr-swatches ${r.palette?"":"pcr-last"}" :ref="swatches"></div>\n\n <div :obj="interaction" class="pcr-interaction" ${s(Object.keys(r.interaction).length)}>\n <input :ref="result" class="pcr-result" type="text" spellcheck="false" ${s(r.interaction.input)} aria-label="${l("aria:input")}">\n\n <input :arr="options" class="pcr-type" data-type="HEXA" value="${n?"HEX":"HEXA"}" type="button" ${s(r.interaction.hex)}>\n <input :arr="options" class="pcr-type" data-type="RGBA" value="${n?"RGB":"RGBA"}" type="button" ${s(r.interaction.rgba)}>\n <input :arr="options" class="pcr-type" data-type="HSLA" value="${n?"HSL":"HSLA"}" type="button" ${s(r.interaction.hsla)}>\n <input :arr="options" class="pcr-type" data-type="HSVA" value="${n?"HSV":"HSVA"}" type="button" ${s(r.interaction.hsva)}>\n <input :arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ${s(r.interaction.cmyk)}>\n\n <input :ref="save" class="pcr-save" value="${l("btn:save")}" type="button" ${s(r.interaction.save)} aria-label="${l("aria:btn:save")}">\n <input :ref="cancel" class="pcr-cancel" value="${l("btn:cancel")}" type="button" ${s(r.interaction.cancel)} aria-label="${l("aria:btn:cancel")}">\n <input :ref="clear" class="pcr-clear" value="${l("btn:clear")}" type="button" ${s(r.interaction.clear)} aria-label="${l("aria:btn:clear")}">\n </div>\n </div>\n </div>\n `),h=p.interaction;return h.options.find((t=>!t.hidden&&!t.classList.add("active"))),h.type=()=>h.options.find((t=>t.classList.contains("active"))),p})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root)}_finalBuild(){const t=this.options,r=this._root;if(t.container.removeChild(r.root),t.inline){const e=t.el.parentElement;t.el.nextSibling?e.insertBefore(r.app,t.el.nextSibling):e.appendChild(r.app)}else t.container.appendChild(r.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(r.root,t.el),t.disabled&&this.disable(),t.comparison||(r.button.style.transition="none",t.useAsButton||(r.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,r=this.options.components,e=(t.options.sliders||"v").repeat(2),[o,i]=e.match(/^[vh]+$/g)?e:[],a=()=>this._color||(this._color=this._lastColor.clone()),n={palette:z({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop","slider",t),onchange(e,o){if(!r.palette)return;const i=a(),{_root:n,options:c}=t,{lastColor:s,currentColor:l}=n.preview;t._recalc&&(i.s=100*e,i.v=100-100*o,i.v<0&&(i.v=0),t._updateOutput("slider"));const p=i.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background=`\n linear-gradient(to top, rgba(0, 0, 0, ${i.a}), transparent),\n linear-gradient(to left, hsla(${i.h}, 100%, 50%, ${i.a}), rgba(255, 255, 255, ${i.a}))\n `,c.comparison?c.useAsButton||t._lastColor||s.style.setProperty("--pcr-color",p):(n.button.style.setProperty("--pcr-color",p),n.button.classList.remove("clear"));const h=i.toHEXA().toString();for(const{el:r,color:e}of t._swatchColors)r.classList[h===e.toHEXA().toString()?"add":"remove"]("pcr-active");l.style.setProperty("--pcr-color",p)}}),hue:z({lock:"v"===i?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop","slider",t),onchange(e){if(!r.hue||!r.palette)return;const o=a();t._recalc&&(o.h=360*e),this.element.style.backgroundColor=`hsl(${o.h}, 100%, 50%)`,n.palette.trigger()}}),opacity:z({lock:"v"===o?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop","slider",t),onchange(e){if(!r.opacity||!r.palette)return;const o=a();t._recalc&&(o.a=Math.round(100*e)/100),this.element.style.background=`rgba(0, 0, 0, ${o.a})`,n.palette.trigger()}}),selectable:$({elements:t._root.interaction.options,className:"active",onchange(r){t._representation=r.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput("swatch")}})};this._components=n}_bindEvents(){const{_root:t,options:r}=this,e=[i(t.interaction.clear,"click",(()=>this._clearColor())),i([t.interaction.cancel,t.preview.lastColor],"click",(()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit("cancel")})),i(t.interaction.save,"click",(()=>{!this.applyColor()&&!r.showAlways&&this.hide()})),i(t.interaction.result,["keyup","input"],(t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&(this._emit("change",this._color,"input",this),this._emit("changestop","input",this)),t.stopImmediatePropagation()})),i(t.interaction.result,["focus","blur"],(t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput(null)})),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],(()=>this._recalc=!0),{passive:!0})];if(!r.showAlways){const o=r.closeWithKey;e.push(i(t.button,"click",(()=>this.isOpen()?this.hide():this.show())),i(document,"keyup",(t=>this.isOpen()&&(t.key===o||t.code===o)&&this.hide())),i(document,["touchstart","mousedown"],(r=>{this.isOpen()&&!s(r).some((r=>r===t.app||r===t.button))&&this.hide()}),{capture:!0}))}if(r.adjustableNumbers){const r={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};p(t.interaction.result,((t,e,o)=>{const i=r[this.getColorRepresentation().toLowerCase()];if(i){const r=i[o],a=t+(r>=100?1e3*e:e);return a<=0?0:Number((a<r?a:r).toPrecision(3))}return t}))}if(r.autoReposition&&!r.inline){let t=null;const o=this;e.push(i(window,["scroll","resize"],(()=>{o.isOpen()&&(r.closeOnScroll&&o.hide(),null===t?(t=setTimeout((()=>t=null),100),requestAnimationFrame((function r(){o._rePositioningPicker(),null!==t&&requestAnimationFrame(r)}))):(clearTimeout(t),t=setTimeout((()=>t=null),100)))}),{capture:!0}))}this._eventBindings=e}_rePositioningPicker(){const{options:t}=this;if(!t.inline&&!this._nanopop.update({container:document.body.getBoundingClientRect(),position:t.position})){const t=this._root.app,r=t.getBoundingClientRect();t.style.top=(window.innerHeight-r.height)/2+"px",t.style.left=(window.innerWidth-r.width)/2+"px"}}_updateOutput(t){const{_root:r,_color:e,options:o}=this;if(r.interaction.type()){const t=`to${r.interaction.type().getAttribute("data-type")}`;r.interaction.result.value="function"==typeof e[t]?e[t]().toString(o.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",e,t,this)}_clearColor(t=!1){const{_root:r,options:e}=this;e.useAsButton||r.button.style.setProperty("--pcr-color","rgba(0, 0, 0, 0.15)"),r.button.classList.add("clear"),e.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit("save",null),this._emit("clear"))}_parseLocalColor(t){const{values:r,type:e,a:o}=function(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";const r=document.createElement("canvas").getContext("2d");return r.fillStyle=t,"#000"===r.fillStyle?null:r.fillStyle}(t):t;const r={cmyk:/^cmyk\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)/i,rgba:/^rgba?\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D*?(([\d.]+)(%?)|$)/i,hsla:/^hsla?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hsva:/^hsva?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},e=t=>t.map((t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0));let o;t:for(const i in r)if(o=r[i].exec(t))switch(i){case"cmyk":{const[,t,r,a,n]=e(o);if(t>100||r>100||a>100||n>100)break t;return{values:b(t,r,a,n),type:i}}case"rgba":{let[,t,,r,,a,,,n]=e(o);if(t="%"===o[2]?t/100*255:t,r="%"===o[4]?r/100*255:r,a="%"===o[6]?a/100*255:a,n="%"===o[9]?n/100:n,t>255||r>255||a>255||n<0||n>1)break t;return{values:[...v(t,r,a),n],a:n,type:i}}case"hexa":{let[,t]=o;4!==t.length&&3!==t.length||(t=t.split("").map((t=>t+t)).join(""));const r=t.substring(0,6);let e=t.substring(6);return e=e?parseInt(e,16)/255:void 0,{values:[...w(r),e],a:e,type:i}}case"hsla":{let[,t,r,a,,n]=e(o);if(n="%"===o[6]?n/100:n,t>360||r>100||a>100||n<0||n>1)break t;return{values:[...y(t,r,a),n],a:n,type:i}}case"hsva":{let[,t,r,a,,n]=e(o);if(n="%"===o[6]?n/100:n,t>360||r>100||a>100||n<0||n>1)break t;return{values:[t,r,a,n],a:n,type:i}}}return{values:null,type:null}}(t),{lockOpacity:i}=this.options,a=void 0!==o&&1!==o;return r&&3===r.length&&(r[3]=void 0),{values:!r||i&&a?null:r,type:e}}_t(t){return this.options.i18n[t]||A.I18N_DEFAULTS[t]}_emit(t,...r){this._eventListener[t].forEach((t=>t(...r,this)))}on(t,r){return this._eventListener[t].push(r),this}off(t,r){const e=this._eventListener[t]||[],o=e.indexOf(r);return~o&&e.splice(o,1),this}addSwatch(t){const{values:r}=this._parseLocalColor(t);if(r){const{_swatchColors:t,_root:e}=this,o=x(...r),a=n(`<button type="button" style="--pcr-color: ${o.toRGBA().toString(0)}" aria-label="${this._t("btn:swatch")}"/>`);return e.swatches.appendChild(a),t.push({el:a,color:o}),this._eventBindings.push(i(a,"click",(()=>{this.setHSVA(...o.toHSVA(),!0),this._emit("swatchselect",o),this._emit("change",o,"swatch",this)}))),!0}return!1}removeSwatch(t){const r=this._swatchColors[t];if(r){const{el:e}=r;return this._root.swatches.removeChild(e),this._swatchColors.splice(t,1),!0}return!1}applyColor(t=!1){const{preview:r,button:e}=this._root,o=this._color.toRGBA().toString(0);return r.lastColor.style.setProperty("--pcr-color",o),this.options.useAsButton||e.style.setProperty("--pcr-color",o),e.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color),this}destroy(){cancelAnimationFrame(this._setupAnimationFrame),this._eventBindings.forEach((t=>a(...t))),Object.keys(this._components).forEach((t=>this._components[t].destroy()))}destroyAndRemove(){this.destroy();const{root:t,app:r}=this._root;t.parentElement&&t.parentElement.removeChild(t),r.parentElement.removeChild(r),Object.keys(this).forEach((t=>this[t]=null))}hide(){return!!this.isOpen()&&(this._root.app.classList.remove("visible"),this._emit("hide"),!0)}show(){return!this.options.disabled&&!this.isOpen()&&(this._root.app.classList.add("visible"),this._rePositioningPicker(),this._emit("show",this._color),this)}isOpen(){return this._root.app.classList.contains("visible")}setHSVA(t=360,r=0,e=0,o=1,i=!1){const a=this._recalc;if(this._recalc=!1,t<0||t>360||r<0||r>100||e<0||e>100||o<0||o>1)return!1;this._color=x(t,r,e,o);const{hue:n,opacity:c,palette:s}=this._components;return n.update(t/360),c.update(o),s.update(r/100,1-e/100),i||this.applyColor(),a&&this._updateOutput(),this._recalc=a,!0}setColor(t,r=!1){if(null===t)return this._clearColor(r),!0;const{values:e,type:o}=this._parseLocalColor(t);if(e){const t=o.toUpperCase(),{options:i}=this._root.interaction,a=i.find((r=>r.getAttribute("data-type")===t));if(a&&!a.hidden)for(const t of i)t.classList[t===a?"add":"remove"]("active");return!!this.setHSVA(...e,r)&&this.setColorRepresentation(t)}return!1}setColorRepresentation(t){return t=t.toUpperCase(),!!this._root.interaction.options.find((r=>r.getAttribute("data-type").startsWith(t)&&!r.click()))}getColorRepresentation(){return this._representation}getColor(){return this._color}getSelectedColor(){return this._lastColor}getRoot(){return this._root}disable(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}enable(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}return r.default})(),t.exports=r()}));const s=n(c),l=class{constructor(e){t(this,e),this.save=r(this,"save",7),this.nameInputEvent=r(this,"nameInputEvent",7),this.change=r(this,"change",7),this.label=void 0,this.value="white",this.colorRepresentation="HEXA",this.colorInputValue="",this.colorChangedFromInput=!1}componentDidLoad(){this.value.includes("rgb")?this.colorRepresentation="RGBA":this.value.includes("#")&&(this.colorRepresentation="HEXA");const t=this.element.shadowRoot.querySelector(".color-picker"),r=this.element.shadowRoot.querySelector(".color-picker-main-container");this.pickr=new s({el:t,theme:"nano",container:r,inline:!0,showAlways:!0,default:this.value,components:{preview:!0,opacity:!0,hue:!0,interaction:{input:!1}}}),this.pickr.on("change",(t=>{this.colorObject=t,"HEXA"===this.colorRepresentation?this.value=this.colorObject.toHEXA().toString():"RGBA"===this.colorRepresentation&&(this.value=this.colorObject.toRGBA().toString(0)),this.change.emit(this.value)})),this.pickr.on("show",(()=>{this.colorObject=this.pickr.getColor()}));const e={root:document.querySelector("body"),rootMargin:"0px",threshold:1};new IntersectionObserver((()=>{this.pickr.setColor(this.value)}),e).observe(this.element)}componentDidUnload(){this.pickr.destroy()}watchHandler(t){this.pickr.setColor(t)}handleHexaButtonClick(){this.colorChangedFromInput=!1,this.colorRepresentation="HEXA",this.value=this.colorObject.toHEXA().toString(),this.change.emit(this.value)}handleRgbaButtonClick(){this.colorChangedFromInput=!1,this.colorRepresentation="RGBA",this.value=this.colorObject.toRGBA().toString(0),this.change.emit(this.value)}handleTitleValueChange(t){this.label=t.target.value}handleColorValueChange(t){this.colorChangedFromInput=!0;const r=t.target;this.colorInputValue=r.value,this.pickr.setColor(r.value)}colorValue(){if(!this.colorChangedFromInput){if(void 0===this.colorObject)return"";if("HEXA"===this.colorRepresentation)return this.colorObject.toHEXA().toString();if("RGBA"===this.colorRepresentation)return this.colorObject.toRGBA().toString(0)}return this.colorChangedFromInput=!0,this.colorInputValue}setActiveButton(){return this.value.includes("rgb")?"rgba":"hexa"}render(){return e(o,null,this.label?e("gxg-label",null,this.label):null,e("div",{class:{"color-picker-main-container":!0},id:"color-picker-main-container"},e("div",{class:"color-picker"}),e("div",{class:"cp-gxg-buttons before-color-value",slot:"editable"},e("gxg-button-group",{"default-selected-btn-id":this.setActiveButton()},e("button",{id:"rgba",onClick:this.handleRgbaButtonClick.bind(this)},"RGBA"),e("button",{id:"hexa",onClick:this.handleHexaButtonClick.bind(this)},"HEXA"))),e("input",{type:"text",name:"cp-color-value",id:"cp-color-value",value:this.colorValue(),class:"color-picker-main-container-textbox",onInput:this.handleColorValueChange.bind(this)})))}get element(){return i(this)}static get watchers(){return{value:["watchHandler"]}}};l.style='/*! Pickr 1.7.4 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>\') no-repeat 50%;background-size:0;transition:all .3s}.pickr .pcr-button:before{background:url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>\');background-size:.5em;z-index:-1;z-index:auto}.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:.15em}.pickr .pcr-button:after{transition:background .3s;background:currentColor}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app *,.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pcr-app button.pcr-active,.pcr-app button:focus,.pcr-app input.pcr-active,.pcr-app input:focus,.pickr button.pcr-active,.pickr button:focus,.pickr input.pcr-active,.pickr input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pcr-app .pcr-palette,.pcr-app .pcr-slider,.pickr .pcr-palette,.pickr .pcr-slider{transition:box-shadow .3s}.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus,.pickr .pcr-palette:focus,.pickr .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>\');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-save{width:auto;color:#fff}.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover,.pcr-app .pcr-interaction .pcr-save:hover{filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-cancel:focus,.pcr-app .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active,.pcr-app .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:currentColor;width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>\');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>\');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,transparent,#000),url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>\');background-size:100%,.25em}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{width:230px;display:block}.label{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;align-items:center;cursor:default}.color-picker-main-container{box-shadow:var(--box-shadow-01);z-index:10;--cardAnimationDelay:0;position:relative;animation-name:slideUp;animation-duration:0.75s;animation-iteration-count:1;animation-delay:var(--cardAnimationDelay);background:var(--color-background);position:relative;margin-top:-1px;transition:max-height 0.5s ease-in-out;padding:var(--spacing-comp-02) var(--card-padding) 0 var(--card-padding)}@keyframes slideUp{0%{top:5px;opacity:0}100%{top:0px;opacity:100%}}.color-picker-main-container-textbox{font-family:var(--font-family-primary);font-size:var(--font-size-md);color:var(--color--black);padding-left:var(--spacing-comp-02);padding-right:var(--spacing-comp-02);padding-top:var(--spacing-comp-01);padding-bottom:var(--spacing-comp-01);background:var(--color-background);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-color:var(--gray-04);letter-spacing:0.018em;height:var(--spacing-comp-05);border-radius:0;width:100%;margin-bottom:var(--spacing-comp-02);box-sizing:border-box}.color-picker-main-container--visible{max-height:400px}.pcr-app{background:var(--color-background)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:0}.pickr{display:none}.pcr-app{max-width:100%;width:100% !important;box-shadow:none}.cp-gxg-buttons{padding:var(--spacing-comp-02)}.color-picker-main-container-textbox{margin:0 var(--spacing-comp-02);width:calc(100% - 16px);margin-bottom:var(--spacing-comp-02)}.cp-gxg-buttons.before-color-value gxg-button{margin-right:var(--spacing-comp-02)}.cp-gxg-buttons.after-color-value{text-align:right}.pcr-color-chooser,.pcr-color-opacity{width:85%}';export{l as gxg_color_picker}
|
|
File without changes
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
ch-tree-view {
|
|
2
|
+
display: flex;
|
|
3
|
+
position: relative;
|
|
4
|
+
width: 100%;
|
|
5
|
+
overflow: auto;
|
|
6
|
+
}
|
|
7
|
+
ch-tree-view > .ch-tree-view-container {
|
|
8
|
+
position: absolute;
|
|
9
|
+
inset: 0;
|
|
10
|
+
}
|
|
11
|
+
ch-tree-view.ch-tree-view-dragging-item ch-tree-view-item {
|
|
12
|
+
pointer-events: var(--ch-tree-view-pointer-events, all);
|
|
13
|
+
}
|
|
14
|
+
ch-tree-view.ch-tree-view-dragging-item .ch-tree-view-list-item--deny-drop {
|
|
15
|
+
pointer-events: none;
|
|
16
|
+
}
|
|
17
|
+
ch-tree-view.ch-tree-view--dragging-selected-items ch-tree-view-item[selected] {
|
|
18
|
+
--ch-tree-view-pointer-events: none;
|
|
19
|
+
}
|
|
20
|
+
ch-tree-view.ch-tree-view-waiting-drop-processing {
|
|
21
|
+
cursor: wait;
|
|
22
|
+
}
|
|
23
|
+
ch-tree-view.ch-tree-view-waiting-drop-processing > .ch-tree-view-container {
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.ch-tree-view-drag-info {
|
|
28
|
+
--rtl-offset: 16px;
|
|
29
|
+
position: fixed;
|
|
30
|
+
left: 0;
|
|
31
|
+
top: 0;
|
|
32
|
+
transform: translate(calc(var(--ch-tree-view-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-view-dragging-item-y) + 8px));
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
z-index: 1;
|
|
35
|
+
animation: ch-tree-view-drag-info-fade-in 10ms;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@keyframes ch-tree-view-drag-info-fade-in {
|
|
39
|
+
0%, 100% {
|
|
40
|
+
opacity: 0;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
html[dir=rtl] .ch-tree-view-drag-info {
|
|
44
|
+
--rtl-offset: -100%;
|
|
45
|
+
}
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
box-sizing: border-box;
|
|
20
20
|
flex-grow: 1;
|
|
21
21
|
cursor: auto;
|
|
22
|
+
border-bottom: 2px solid transparent;
|
|
22
23
|
}
|
|
23
24
|
:host input:focus {
|
|
24
25
|
outline: none;
|
|
@@ -39,12 +40,11 @@
|
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
/*click-to-edit*/
|
|
42
|
-
:host([click-to-edit]:not[disable-edition]) .wrapper,
|
|
43
|
-
:host([click-to-edit]:not[disable-edition]) input {
|
|
43
|
+
:host([click-to-edit]:not([disable-edition])) .wrapper,
|
|
44
|
+
:host([click-to-edit]:not([disable-edition])) input {
|
|
44
45
|
cursor: pointer;
|
|
45
46
|
}
|
|
46
47
|
|
|
47
|
-
/*disable-edition*/
|
|
48
48
|
/*title types*/
|
|
49
49
|
:host([title-type=h1]) .wrapper {
|
|
50
50
|
font-size: 24px;
|
|
@@ -62,6 +62,16 @@
|
|
|
62
62
|
display: inline-flex;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
+
/*focus (optional)*/
|
|
66
|
+
:host(.focus--text.editing) input {
|
|
67
|
+
color: var(--gxg-editable-title-focus-color);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/*focus (optional)*/
|
|
71
|
+
:host(.focus--line.editing) input {
|
|
72
|
+
border-bottom-color: var(--gxg-editable-title-focus-color);
|
|
73
|
+
}
|
|
74
|
+
|
|
65
75
|
/*ghost div: it helps measuring the text width, to make the input as wide as needed (fluid)*/
|
|
66
76
|
.ghost {
|
|
67
77
|
font-family: inherit;
|
|
@@ -71,4 +81,8 @@
|
|
|
71
81
|
height: auto;
|
|
72
82
|
width: auto;
|
|
73
83
|
white-space: nowrap;
|
|
84
|
+
/*remove from viewport*/
|
|
85
|
+
bottom: 0;
|
|
86
|
+
left: 0;
|
|
87
|
+
transform: translate(-100%, -100%);
|
|
74
88
|
}
|
package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-view/tree-view.css
CHANGED
|
@@ -370,6 +370,9 @@ gxg-tree-view {
|
|
|
370
370
|
background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
|
|
371
371
|
cursor: pointer;
|
|
372
372
|
}
|
|
373
|
+
.tree-view .ch-tree-view-container {
|
|
374
|
+
padding: var(--spacing-comp-02);
|
|
375
|
+
}
|
|
373
376
|
|
|
374
377
|
/*---------------------------
|
|
375
378
|
.tree-view-item
|
|
@@ -534,11 +537,11 @@ gxg-tree-view {
|
|
|
534
537
|
}
|
|
535
538
|
|
|
536
539
|
/*-- Other Selectors (these depend on the tag class name)---*/
|
|
537
|
-
.
|
|
540
|
+
.tree-view-item--editing::part(header) {
|
|
538
541
|
border: 2px solid transparent;
|
|
539
542
|
}
|
|
540
543
|
/*--- Revisar ---*/
|
|
541
|
-
.
|
|
544
|
+
.tree-view .ch-tree-view-drag-info {
|
|
542
545
|
padding-inline: 6px;
|
|
543
546
|
padding-block: 2px;
|
|
544
547
|
background-color: #cfdee6;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TreeViewItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types";
|
|
2
2
|
/**
|
|
3
3
|
* @param element an HTMLElement
|
|
4
4
|
* @returns an alphabetically ordered array of all the parts and exportparts the element contains.
|
|
@@ -12,4 +12,4 @@ export declare const querySelectorPart: (selector: string) => HTMLElement;
|
|
|
12
12
|
export declare const formatDate: (date: Date, type?: FormatDateType) => string;
|
|
13
13
|
export type FormatDateType = "date" | "date-time";
|
|
14
14
|
export declare const resolveGxgIconPath: (gxgIconName: string) => string;
|
|
15
|
-
export declare const countTreeItems: (treeModel:
|
|
15
|
+
export declare const countTreeItems: (treeModel: TreeViewItemModel[], children?: boolean) => number;
|
|
@@ -1,45 +1,13 @@
|
|
|
1
1
|
import { EventEmitter } from "../../stencil-public-runtime";
|
|
2
|
-
import { GxgTreeItemData } from "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item";
|
|
3
2
|
export declare class GxIdeTest {
|
|
4
|
-
private
|
|
3
|
+
private treeViewEl;
|
|
5
4
|
private renderedFirstTime;
|
|
6
|
-
/**
|
|
7
|
-
* The model for a gxg-tree
|
|
8
|
-
*/
|
|
9
|
-
treeModel: GxgTreeItemData[];
|
|
10
|
-
/**
|
|
11
|
-
* A new lazy node
|
|
12
|
-
*/
|
|
13
|
-
readonly lazyNode: GxgTreeItemData[];
|
|
14
|
-
/**
|
|
15
|
-
* A new lazy node
|
|
16
|
-
*/
|
|
17
|
-
readonly updateLazyCallback: (id: string) => Promise<GxgTreeItemData[]>;
|
|
18
|
-
/**
|
|
19
|
-
* The new tree node to update
|
|
20
|
-
*/
|
|
21
|
-
newNode: GxgTreeItemData[];
|
|
22
|
-
/**
|
|
23
|
-
* Update tree model test
|
|
24
|
-
*/
|
|
25
|
-
readonly testUpdateNode = false;
|
|
26
|
-
/**
|
|
27
|
-
* A callback that returns a Promise with the new tree model
|
|
28
|
-
*/
|
|
29
|
-
readonly lazyLoadTreeItemsCallback: (treeItemId: string) => Promise<GxgTreeItemData[]>;
|
|
30
5
|
/**
|
|
31
6
|
* @description Gets fired when the component has rendered for the first time.
|
|
32
7
|
*/
|
|
33
8
|
componentDidRenderFirstTime: EventEmitter<string>;
|
|
34
9
|
componentDidRender(): void;
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
private closeTreeNodeHandler;
|
|
38
|
-
private openTreeNodeHandler;
|
|
39
|
-
private toggleTreeNodeHandler;
|
|
40
|
-
private getSelectedItemsHandler;
|
|
41
|
-
private getCheckedItemsHandler;
|
|
42
|
-
private deleteNodeHandler;
|
|
43
|
-
private treeItemStateChangedHandler;
|
|
10
|
+
componentDidLoad(): void;
|
|
11
|
+
private checkAllHandler;
|
|
44
12
|
render(): any;
|
|
45
13
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TreeViewItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types";
|
|
2
2
|
import { ObjectData, ObjectType, KBPropertyData, KBPropertyType } from "./kb-manager-export";
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const convertKbPropertiesDataToTreeItemData: (properties: KBPropertyData[], kbPropertiesTypes: KBPropertyType[], actualTreeState:
|
|
5
|
-
export declare const clearKbPropertiesFromTree: (actualTreeState:
|
|
3
|
+
export declare const updateTreeModelWithObjects: (objects: ObjectData[] | undefined, objectTypes: Map<string, ObjectType>, actualTreeState: TreeViewItemModel[]) => TreeViewItemModel[];
|
|
4
|
+
export declare const convertKbPropertiesDataToTreeItemData: (properties: KBPropertyData[], kbPropertiesTypes: KBPropertyType[], actualTreeState: TreeViewItemModel[]) => TreeViewItemModel[];
|
|
5
|
+
export declare const clearKbPropertiesFromTree: (actualTreeState: TreeViewItemModel[]) => TreeViewItemModel[];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EventEmitter } from "../../stencil-public-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { TreeViewItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types";
|
|
3
3
|
export declare class GxIdeKbManagerExport {
|
|
4
4
|
/**
|
|
5
5
|
* Selected properties
|
|
@@ -11,20 +11,22 @@ export declare class GxIdeKbManagerExport {
|
|
|
11
11
|
private checkedObjectsIds;
|
|
12
12
|
private checkedPropertiesIds;
|
|
13
13
|
private renderedFirstTime;
|
|
14
|
+
private flattenedObjectTypes;
|
|
14
15
|
el: HTMLGxIdeKbManagerExportElement;
|
|
15
16
|
private fileNameEl;
|
|
16
17
|
private exportAllCheckboxEl;
|
|
17
18
|
private objectsTreeEl;
|
|
19
|
+
exportAllIsChecked: boolean;
|
|
18
20
|
fileName: string;
|
|
19
21
|
exportFilePathName: string;
|
|
20
22
|
noObjects: boolean;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
treeModel: TreeViewItemModel[];
|
|
24
|
+
watchtreeModelHandler(newState: TreeViewItemModel[]): void;
|
|
23
25
|
/**
|
|
24
26
|
* Just for testing. Remove when this is is done (Bruno)
|
|
25
27
|
*/
|
|
26
|
-
readonly dummyInitialTree:
|
|
27
|
-
watchDummyInitialTreeHandler(newTree:
|
|
28
|
+
readonly dummyInitialTree: TreeViewItemModel[];
|
|
29
|
+
watchDummyInitialTreeHandler(newTree: TreeViewItemModel[]): void;
|
|
28
30
|
/**
|
|
29
31
|
* Array with the possible types of KB properties
|
|
30
32
|
*/
|
|
@@ -33,6 +35,7 @@ export declare class GxIdeKbManagerExport {
|
|
|
33
35
|
* Array of possible object types
|
|
34
36
|
*/
|
|
35
37
|
readonly objectTypes: ObjectType[];
|
|
38
|
+
watchObjectTypeslHandler(newState: ObjectType[]): void;
|
|
36
39
|
/**
|
|
37
40
|
* Callback invoked when the user wants to access the export options.
|
|
38
41
|
*/
|
|
@@ -87,6 +90,8 @@ export declare class GxIdeKbManagerExport {
|
|
|
87
90
|
private exportCallbackHandler;
|
|
88
91
|
private cancelCallbackHandler;
|
|
89
92
|
private clearButtonHandler;
|
|
93
|
+
private exportAllChangedHandler;
|
|
94
|
+
private flattenObjectTypes;
|
|
90
95
|
render(): void;
|
|
91
96
|
}
|
|
92
97
|
export type KBPropertiesCallback = () => Promise<KBPropertyData[]>;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TreeViewItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types";
|
|
2
2
|
import { ImportCategoryData, ImportItemResultData } from "../../common/types";
|
|
3
3
|
/**
|
|
4
4
|
* @description This function converts ReferenceData[] data to TreeItemData[]
|
|
5
5
|
*/
|
|
6
|
-
export declare const convertImportCategoryToTreeView: (importCategoryData: ImportCategoryData[]) =>
|
|
6
|
+
export declare const convertImportCategoryToTreeView: (importCategoryData: ImportCategoryData[]) => TreeViewItemModel[];
|
|
7
7
|
/**
|
|
8
8
|
* @description This function adds an ImportItemResultData item to the "importTreeState", and returns the updated tree with the new item added.
|
|
9
9
|
*/
|
|
10
|
-
export declare const addImportItemResultDataItem: (importItemResultData: ImportItemResultData, importCategoryData: ImportCategoryData[], importTreeActualState:
|
|
10
|
+
export declare const addImportItemResultDataItem: (importItemResultData: ImportItemResultData, importCategoryData: ImportCategoryData[], importTreeActualState: TreeViewItemModel[]) => TreeViewItemModel[];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EventEmitter } from "../../stencil-public-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { TreeViewItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types";
|
|
3
3
|
import { ImportCategoryData, ImportItemResultData } from "../../common/types";
|
|
4
4
|
export declare class GxIdeKbManagerImport {
|
|
5
5
|
/**
|
|
@@ -14,15 +14,16 @@ export declare class GxIdeKbManagerImport {
|
|
|
14
14
|
private fileInputEl;
|
|
15
15
|
private headerButtonsGroup;
|
|
16
16
|
private objectsButtonsGroup;
|
|
17
|
+
private toggleObjectsCheckboxEl;
|
|
17
18
|
checkedObjectsIds: string[];
|
|
18
19
|
noObjects: boolean;
|
|
19
20
|
showHiddenImportsMessage: boolean;
|
|
20
21
|
statusInfo: StatusInfo;
|
|
21
|
-
objectsTreeState:
|
|
22
|
-
watchObjectsTreeStateHandler(newState:
|
|
22
|
+
objectsTreeState: TreeViewItemModel[];
|
|
23
|
+
watchObjectsTreeStateHandler(newState: TreeViewItemModel[]): void;
|
|
23
24
|
noImport: boolean;
|
|
24
|
-
importTreeState:
|
|
25
|
-
watchImportTreeStateHandler(newState:
|
|
25
|
+
importTreeState: TreeViewItemModel[];
|
|
26
|
+
watchImportTreeStateHandler(newState: TreeViewItemModel[]): void;
|
|
26
27
|
importingObjects: boolean;
|
|
27
28
|
/**
|
|
28
29
|
* The name of the imported xml or xps file
|
|
@@ -75,7 +76,7 @@ export declare class GxIdeKbManagerImport {
|
|
|
75
76
|
private cancelImportHandler;
|
|
76
77
|
private optionsHandler;
|
|
77
78
|
private clearStatusHandler;
|
|
78
|
-
private
|
|
79
|
+
private toggleSelectionHandler;
|
|
79
80
|
private statusButtonsSelectionChangedHandler;
|
|
80
81
|
private evaluateCheckAllValue;
|
|
81
82
|
private evaluateHiddenImportsMessage;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SuggestData } from "@genexus/chameleon-controls-library/dist/types/components/suggest/ch-suggest";
|
|
2
|
-
import {
|
|
2
|
+
import { TreeViewItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types";
|
|
3
3
|
import { SelectorCategoryData } from "./references";
|
|
4
4
|
import { ReferenceData } from "./references";
|
|
5
5
|
/**
|
|
@@ -9,4 +9,4 @@ export declare const convertObjectDataToSuggestData: (selectorCategoriesData: Se
|
|
|
9
9
|
/**
|
|
10
10
|
* @description This function converts ReferenceData[] data to TreeItemData[]
|
|
11
11
|
*/
|
|
12
|
-
export declare const convertReferenceDataToTreeViewData: (referenceData: ReferenceData[] | undefined) =>
|
|
12
|
+
export declare const convertReferenceDataToTreeViewData: (referenceData: ReferenceData[] | undefined) => TreeViewItemModel[];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { EventEmitter } from "../../stencil-public-runtime";
|
|
2
2
|
import { GxgTreeItemData } from "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item";
|
|
3
|
-
import {
|
|
3
|
+
import { TreeViewItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types";
|
|
4
4
|
import { SuggestData } from "@genexus/chameleon-controls-library/dist/types/components/suggest/ch-suggest";
|
|
5
5
|
export declare class GxIdeReferences {
|
|
6
6
|
/**
|
|
@@ -13,8 +13,8 @@ export declare class GxIdeReferences {
|
|
|
13
13
|
*/
|
|
14
14
|
private selectorCategoryData;
|
|
15
15
|
el: HTMLGxIdeReferencesElement;
|
|
16
|
-
referencedByTreeData:
|
|
17
|
-
referencesToTreeData:
|
|
16
|
+
referencedByTreeData: TreeViewItemModel[];
|
|
17
|
+
referencesToTreeData: TreeViewItemModel[];
|
|
18
18
|
/**
|
|
19
19
|
* Displays or hides the header-bottom section
|
|
20
20
|
*/
|