@sankhyalabs/ezui 2.14.5 → 2.15.0
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/EzScrollDirection-b2c99895.js +8 -0
- package/dist/cjs/{ez-filter-input_3.cjs.entry.js → ez-filter-input_4.cjs.entry.js} +197 -1
- package/dist/cjs/ez-guide-navigator.cjs.entry.js +3 -2
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.css +19 -10
- package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.js +3 -1
- package/dist/collection/components/ez-scroller/ez-scroller.css +1 -5
- package/dist/collection/components/ez-tree/ez-tree.css +3 -0
- package/dist/custom-elements/index.js +11 -11
- package/dist/esm/EzScrollDirection-2df26c93.js +8 -0
- package/dist/esm/{ez-filter-input_3.entry.js → ez-filter-input_4.entry.js} +199 -4
- package/dist/esm/ez-guide-navigator.entry.js +3 -2
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-6414e7cb.entry.js +1 -0
- package/dist/ezui/p-98bb8b16.js +1 -0
- package/dist/ezui/p-cc038b32.entry.js +1 -0
- package/package.json +1 -1
- package/dist/cjs/ez-scroller.cjs.entry.js +0 -209
- package/dist/esm/ez-scroller.entry.js +0 -205
- package/dist/ezui/p-73eb147d.entry.js +0 -1
- package/dist/ezui/p-ac7f2170.entry.js +0 -1
- package/dist/ezui/p-ca8f7199.entry.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,c as r,h as t,g as i,H as s,f as o}from"./p-7b80df03.js";import{ElementIDUtils as l,JSUtils as a,StringUtils as n}from"@sankhyalabs/core";import{C as c}from"./p-4a5e37a7.js";import{E as h}from"./p-98bb8b16.js";let d=class{constructor(t){e(this,t),this.ezChange=r(this,"ezChange",7),this.enabled=!0,this.mode="regular"}observeLabel(){this._textInput&&(this._textInput.label=this.label)}observeErrorMessage(){this._textInput&&(this._textInput.errorMessage=this.errorMessage)}observeValue(e,r){this._textInput&&e!=r&&(this._textInput.value=e,this.ezChange.emit(e))}async setFocus(){this._textInput.setFocus()}async setBlur(){this._textInput.setBlur()}async isInvalid(){return"string"==typeof this.errorMessage&&""!==this.errorMessage.trim()}changeValue(e){const r=e.detail;this.errorMessage="",r!==this.value&&(this.value=r)}componentDidLoad(){c.applyVarsTextInput(this._elem,this._textInput)}render(){return l.addIDInfoIfNotExists(this._elem,"input"),t("ez-text-input",{"data-element-id":l.getInternalIDInfo("textInput"),ref:e=>this._textInput=e,label:this.label,onEzChange:e=>this.changeValue(e),value:this.value,enabled:this.enabled,errorMessage:this.errorMessage,restrict:this.restrict,mode:this.mode},t("ez-icon",{slot:"leftIcon",iconName:"search"}))}get _elem(){return i(this)}static get watchers(){return{label:["observeLabel"],errorMessage:["observeErrorMessage"],value:["observeValue"]}}};d.style=":host{display:block;width:100%}";let b=class{constructor(r){e(this,r),this._shadowStart="ez-scroller__wrapper--shadow-start",this._shadowEnd="ez-scroller__wrapper--shadow-end",this.isActive=!1,this.locked=!1,this.activeShadow=!1}getContainerClass(){return`ez-scroller__container ez-scroller__container--${this.direction}\n ${this.locked||!this.isActive?" ez-scroller__container--locked":""}\n `}getWrapperClass(){return`ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`}finishDrag(){this._controller&&this._container.classList.remove("dragging")}updateScroller(){const e=this._container;if(null==e)return;let r;if(this.direction===h.HORIZONTAL){const{scrollWidth:t,clientWidth:i,scrollLeft:s}=e;r=t-i-Math.ceil(s),this._startHidden=e.scrollLeft>0}else if(this.direction===h.VERTICAL){const{scrollHeight:t,clientHeight:i,scrollTop:s}=e;r=t-i-Math.ceil(s),this._startHidden=e.scrollTop>0}this._endHidden=r>0,this.isActive=this._startHidden||this._endHidden||this.isActiveScroller(),this.updateShadow()}updateShadow(){const e=this._wrapper;if(!this.activeShadow||null==e)return;const r=["","start","end","middle"][Number(this._startHidden)|Number(this._endHidden)<<1];"start"===r?(e.classList.add(this._shadowStart),e.classList.remove(this._shadowEnd)):"end"===r?(e.classList.remove(this._shadowStart),e.classList.add(this._shadowEnd)):"middle"===r?(e.classList.add(this._shadowStart),e.classList.add(this._shadowEnd)):(e.classList.remove(this._shadowStart),e.classList.remove(this._shadowEnd))}configResize(){const e=this._container;null!=e&&(null!=this._resizeObserver&&this._resizeObserver.unobserve(e),this._resizeObserver=new ResizeObserver(a.debounce(this.updateScroller.bind(this),200)),this._resizeObserver.observe(e))}getContainerElement(){return t("div",{ref:e=>this._container=e,class:this.getContainerClass()},t("slot",null))}isActiveScroller(){return null!=this._container&&(this._container.scrollWidth>this._container.clientWidth||this._container.scrollHeight>this._container.clientHeight)}clickListener(e){this._controller&&this._controller.didScroll()&&(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation())}mouseDownHandler(e){this.locked?this.finishDrag():(this._controller||(this._controller=new u(this._container)),this._controller.startDragg(e),this._container.classList.add("dragging"))}mouseUpHandler(){this.finishDrag()}mouseMoveHandler(e){this.locked?this.finishDrag():this._controller&&(0===e.buttons?this.finishDrag():this._controller.doScroll(e))}componentDidRender(){var e,r;if(null!=this._container){if(this.direction===h.BOTH)return null===(e=this._wrapper)||void 0===e||e.classList.remove(this._shadowStart),null===(r=this._wrapper)||void 0===r||r.classList.remove(this._shadowEnd),void(this.isActive=this.isActiveScroller());this._container.onscroll=this.updateScroller.bind(this),this.configResize(),this.updateScroller()}}render(){return t(s,null,this.activeShadow?t("div",{ref:e=>this._wrapper=e,class:this.getWrapperClass()},this.getContainerElement()):this.getContainerElement())}};class u{constructor(e){this.scrollablePanel=e}startDragg(e){this.startX=this.measureX(e),this.startY=this.measureY(e),this.scrollWidth=0,this.scrollHeight=0}measureX(e){return e.pageX-this.scrollablePanel.offsetLeft}measureY(e){return e.pageY-this.scrollablePanel.offsetTop}doScroll(e){const r=this.measureX(e),t=this.measureY(e);if(r!=this.startX||t!=this.startY){const e=r-this.startX,i=t-this.startY;this.startX+=e,this.startY+=i,this.scrollWidth+=Math.abs(e),this.scrollHeight+=Math.abs(i),this.scrollablePanel.scrollLeft=Math.max(0,this.scrollablePanel.scrollLeft-e),this.scrollablePanel.scrollTop=Math.max(0,this.scrollablePanel.scrollTop-i)}}didScroll(){return this.scrollHeight>5||this.scrollWidth>5}}b.style=':host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:auto}.ez-scroller__wrapper--horizontal{flex-direction:row}.ez-scroller__wrapper--vertical{flex-direction:column}.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--shadow-end::after{content:"";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}';let _=class{constructor(t){e(this,t),this.ezClick=r(this,"ezClick",7)}componentDidLoad(){this._element&&l.addIDInfo(this._element),this._button&&l.addIDInfo(this._button,"button",{id:"embedded"})}render(){return t("button",{type:"button",onClick:()=>{this.ezClick.emit()},ref:e=>this._button=e},t("span",null))}get _element(){return i(this)}};_.style=":host{--ez-sidebar-button--width:6px;--ez-sidebar-button--hover--width:12px;--ez-sidebar-button--height:96px;--ez-sidebar-button--background-color--xlight:var(--background--xlight, #fff);--ez-sidebar-button--background-color--primary:var(--color--primary);--ez-sidebar-button--space--small:var(--space--small, 6px);--ez-sidebar-button--space--medium:var(--space--medium, 12px);--ez-sidebar-button--box-shadow:var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));--ez-sidebar-button--hover--box-shadow:var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));--ez-sidebar-button--border--radius-small:var(--border--radius-small);--ez-sidebar-button--border--radius-medium:var(--border--radius-medium)}button{display:flex;background:var(--ez-sidebar-button--background-color--xlight);border:0;border-radius:0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;box-shadow:var(--ez-sidebar-button--box-shadow);padding:0;cursor:pointer}span{width:var(--ez-sidebar-button--width);height:var(--ez-sidebar-button--height);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--small) var(--ez-sidebar-button--space--medium) 0;background:var(--ez-sidebar-button--background-color--primary);border-radius:0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0}button:hover{box-shadow:var(--ez-sidebar-button--hover--box-shadow)}button:hover span{width:var(--ez-sidebar-button--hover--width);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) 0}";const v=(e,r)=>r?e.iconExpanded||"chevron-down":e.iconContracted||"chevron-right",z=e=>e.tooltip||e.label,p=e=>{const{node:r,selectedId:i,itemClick:s,iconClick:o,iconResolver:a,tooltipResolver:n,itemsList:c}=e;if(!r.visible)return;const h=r.item,d=e.level||1,b=r.isDisabled(),u=!b&&h.expanded,_=r.isExpandable(),v=!b&&!r.isPlaceHolder;return v&&c.push(h),t("ul",{class:1===d?"first-level":void 0},t("li",Object.assign({title:n(h,!b,d),class:"tree-item",onClick:()=>v&&s(h)},{disabled:b,selected:h.id===i,[l.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:l.getInternalIDInfo(`ezTreeItem_${h.id}`)}),t("div",{class:"item-icon-box"},_&&t("ez-icon",{id:h.id,class:"item-icon",size:"small",iconName:a(h,u,d),onClick:()=>v&&o(h)})),t("label",{class:"item-label"},h.label)),u&&r.getChildren().map((e=>t(p,{selectedId:i,node:e,itemClick:s,iconClick:o,level:d+1,iconResolver:a,tooltipResolver:n,itemsList:c}))))};class m{constructor(e,r,t,i=!1){this.children=new Map,this.visible=!0,this.item=r,this.parent=t,this._tree=e,this.isPlaceHolder=i,r&&!i?(this._isLazyLoad="function"==typeof r.children||r.childrenCount>0,Array.isArray(r.children)&&(Array.from(r.children).forEach((e=>this.addChild(this._tree,e))),this._childrenLoaded=!0)):(this._isLazyLoad=!1,this._childrenLoaded=!0)}refresh(e){if(this.isPlaceHolder)return;this.item=Object.assign({},e),this._isLazyLoad="function"==typeof this.item.children||this.item.childrenCount>0;const r=this.children;this.children=new Map,Array.isArray(this.item.children)?(Array.from(this.item.children).forEach((e=>{const t=r.get(e.id);t?(t.refresh(e),this.children.set(e.id,t)):this.addChild(this._tree,Object.assign({},e))})),this._childrenLoaded=!0):this._childrenLoaded=!1}isDisabled(){return!this.isPlaceHolder&&this._tree.isNodeDisabled(this.item.id,this.item.disabled)}updateChildren(e){this.isPlaceHolder||this.refresh(Object.assign(Object.assign({},this.item),{children:e}))}addChild(e,r){this.children.has(r.id)||this.children.set(r.id,new m(e,r,this))}addPlaceHolder(){this.children.clear();const e=this.item.id;this.children.set(e,new m(void 0,{id:`placeholder_${e}`,label:"Carregando..."},this,!0))}getNode(e){if(this.children.has(e))return this.children.get(e);const r=Array.from(this.children.values());for(const t of r){const r=t.getNode(e);if(r)return r}}needLoad(){return this._isLazyLoad&&!this._childrenLoaded}isExpandable(){return this._isLazyLoad||this.children.size>0||Array.isArray(this.item.children)}getChildren(){return this.isPlaceHolder?[]:(this.needLoad()&&this._tree.loadChildren(this),Array.from(this.children.values()))}}class g extends m{constructor(e){super(void 0),this._disabledValues=new Map,this._changeCallback=e}async addChildAt(e,r){const t=this.getNode(e);null!=t&&(t.addChild(this,r),this._changeCallback())}setDisabled(e,r){this._disabledValues.set(e,r),this._changeCallback()}isNodeDisabled(e,r){return this._disabledValues.has(e)?this._disabledValues.get(e):r}load(e){if(e===this._currentItems)return;this._currentItems=e;const r=this.children;this.children=new Map,this._disabledValues.clear(),e.forEach((e=>{const t=r.get(e.id);t?(t.refresh(e),this.children.set(e.id,t)):this.addChild(this,Object.assign({},e))}))}setFilterPattern(e){this._filterPattern=n.replaceAccentuatedCharsKeepSymbols(e),this.applyFilter(this),this._changeCallback()}updateItem(e){if(null==e)return;const r=this.getNode(e.id);null!=r&&(Object.keys(e).forEach((t=>r.item[t]=e[t])),this._changeCallback())}async open(e){return new Promise((async r=>{await this.walkPath(this,e,(e=>e.item.expanded=!0)),r()}))}applyFilter(e){if(e.children.forEach((e=>{this.applyFilter(e)})),null==e.item)return;let r=!1;if(n.replaceAccentuatedCharsKeepSymbols(e.item.label).includes(this._filterPattern))r=!0;else{const t=Array.from(e.children.values());for(let i=0;i<t.length;i++)if(t[i].visible){r=!0,e.item.expanded=!0;break}}e.visible=r}async walkPath(e,r,t,i=0){return new Promise((async s=>{const o=r.split(">>").map((e=>e.trim()));if(o.length>i){const s=e.getNode(o[i]);s&&(s.needLoad()&&await this.loadLevel(s),t(s),await this.walkPath(s,r,t,i+1))}s()}))}async loadChildren(e){return new Promise((r=>{this.loadLevel(e).then((()=>{r(),this._changeCallback()}))}))}async loadLevel(e){return new Promise((r=>{e.addPlaceHolder(),(0,e.item.children)(e.item).then((t=>{e.updateChildren(t),r()}))}))}}let w=class{constructor(t){e(this,t),this.ezChange=r(this,"ezChange",7),this.ezOpenItem=r(this,"ezOpenItem",7),this._onItemClick=e=>{this.value=e},this._onIconClick=e=>{this.openClose(e),this.value=e},this._tree=new g((()=>o(this))),this.items=[],this.iconResolver=v}async selectItem(e){const r=this._tree.getNode(e);this.value=r?r.item:void 0}async openItem(e){this._waintingForLoad=!0,await this._tree.open(e),this._waintingForLoad=!1}async disableItem(e){[].concat(e).forEach((e=>this._tree.setDisabled(e,!0)))}async enableItem(e){[].concat(e).forEach((e=>this._tree.setDisabled(e,!1)))}async addChild(e,r){var t;null==r&&(r=null===(t=this.value)||void 0===t?void 0:t.id),this._tree.addChildAt(r,e);const i=this._tree.getNode(r);i&&(i.item.expanded=!0)}async applyFilter(e){this._tree.setFilterPattern(e)}observeItems(e,r){e!=r&&this._tree.load(this.items||[])}observeValue(){var e;this.ezChange.emit(this.value),this.selectedId=null===(e=this.value)||void 0===e?void 0:e.id}onKeyDownListener(e){if(!this.value)return;let r=!1;switch(e.key){case"ArrowUp":this.previousItem(),r=!0;break;case"ArrowDown":this.nextItem(),r=!0;break;case"ArrowLeft":this.previousLevel(),r=!0;break;case"ArrowRight":this.nextLevel(),r=!0;break;case" ":this.openClose(this.value),r=!0}r&&(e.stopPropagation(),e.preventDefault())}openClose(e){if(null==e)return;const r=!e.expanded;e.expanded=r,r&&this.ezOpenItem.emit(e),this._tree.updateItem(e)}previousLevel(){var e;if(this.value)if(this.value.expanded)this.value.expanded=!1,this._tree.updateItem(this.value);else{const r=null===(e=this._tree.getNode(this.value.id).parent)||void 0===e?void 0:e.item;r&&(this.value=r)}}nextLevel(){this.value&&this._tree.getNode(this.value.id).isExpandable()&&(this.value.expanded?this.nextItem():(this.value.expanded=!0,this._tree.updateItem(this.value)))}indexOf(e){if(null==e)return-1;for(let r=0;r<this._visibleItems.length;r++)if(this._visibleItems[r].id===e)return r;return-1}selectNextItem(e){var r;const t=this.indexOf(null===(r=this.value)||void 0===r?void 0:r.id)+e;t>-1&&t<this._visibleItems.length&&(this.value=this._visibleItems[t])}nextItem(){this.selectNextItem(1)}previousItem(){this.selectNextItem(-1)}connectedCallback(){this.items&&this._tree.load(this.items)}componentWillRender(){var e;if(!this.selectedId||(null===(e=this.value)||void 0===e?void 0:e.id)===this.selectedId)return;const r=this._tree.getNode(this.selectedId);r?this.value=r.item:this.selectedId=void 0}render(){if(l.addIDInfoIfNotExists(this._element,"ezTree"),null!=this.items)return this._visibleItems=[],t(s,{tabindex:"-1"},this._waintingForLoad?t("label",null,"Carregando..."):this._tree.getChildren().map((e=>{var r;return t(p,{selectedId:null===(r=this.value)||void 0===r?void 0:r.id,node:e,itemClick:this._onItemClick,iconClick:this._onIconClick,iconResolver:this.iconResolver,tooltipResolver:this.tooltipResolver||z,itemsList:this._visibleItems})})))}get _element(){return i(this)}static get watchers(){return{items:["observeItems"],value:["observeValue"]}}};w.style=":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--margin-right:calc(var(--space--small, 6px) + 2px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);margin-right:var(--ez-tree--margin-right);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding)}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";export{d as ez_filter_input,b as ez_scroller,_ as ez_sidebar_button,w as ez_tree}
|
package/package.json
CHANGED
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-5e208fa5.js');
|
|
6
|
-
const core = require('@sankhyalabs/core');
|
|
7
|
-
|
|
8
|
-
var EzScrollDirection;
|
|
9
|
-
(function (EzScrollDirection) {
|
|
10
|
-
EzScrollDirection["HORIZONTAL"] = "horizontal";
|
|
11
|
-
EzScrollDirection["VERTICAL"] = "vertical";
|
|
12
|
-
EzScrollDirection["BOTH"] = "both";
|
|
13
|
-
})(EzScrollDirection || (EzScrollDirection = {}));
|
|
14
|
-
|
|
15
|
-
const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--shadow-end::after{content:\"\";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}";
|
|
16
|
-
|
|
17
|
-
let EzScroller = class {
|
|
18
|
-
constructor(hostRef) {
|
|
19
|
-
index.registerInstance(this, hostRef);
|
|
20
|
-
this._shadowStart = "ez-scroller__wrapper--shadow-start";
|
|
21
|
-
this._shadowEnd = "ez-scroller__wrapper--shadow-end";
|
|
22
|
-
this.isActive = false;
|
|
23
|
-
/**
|
|
24
|
-
* Define se o `scroll` estará bloqueado.
|
|
25
|
-
*/
|
|
26
|
-
this.locked = false;
|
|
27
|
-
/**
|
|
28
|
-
* Define se haverá efeito de sombreado.
|
|
29
|
-
*/
|
|
30
|
-
this.activeShadow = false;
|
|
31
|
-
}
|
|
32
|
-
//---------------------------------------------
|
|
33
|
-
// Private methods
|
|
34
|
-
//---------------------------------------------
|
|
35
|
-
getContainerClass() {
|
|
36
|
-
return `ez-scroller__container ez-scroller__container--${this.direction}
|
|
37
|
-
${this.locked || !this.isActive ? " ez-scroller__container--locked" : ""}
|
|
38
|
-
`;
|
|
39
|
-
}
|
|
40
|
-
getWrapperClass() {
|
|
41
|
-
return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
|
|
42
|
-
}
|
|
43
|
-
finishDrag() {
|
|
44
|
-
if (this._controller) {
|
|
45
|
-
this._container.classList.remove("dragging");
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
updateScroller() {
|
|
49
|
-
const container = this._container;
|
|
50
|
-
if (container == undefined) {
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
let remainingScroll;
|
|
54
|
-
if (this.direction === EzScrollDirection.HORIZONTAL) {
|
|
55
|
-
const { scrollWidth, clientWidth, scrollLeft } = container;
|
|
56
|
-
remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
|
|
57
|
-
this._startHidden = container.scrollLeft > 0;
|
|
58
|
-
}
|
|
59
|
-
else if (this.direction === EzScrollDirection.VERTICAL) {
|
|
60
|
-
const { scrollHeight, clientHeight, scrollTop } = container;
|
|
61
|
-
remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
|
|
62
|
-
this._startHidden = container.scrollTop > 0;
|
|
63
|
-
}
|
|
64
|
-
this._endHidden = remainingScroll > 0;
|
|
65
|
-
this.isActive = this._startHidden || this._endHidden || this.isActiveScroller();
|
|
66
|
-
this.updateShadow();
|
|
67
|
-
}
|
|
68
|
-
updateShadow() {
|
|
69
|
-
const wrapper = this._wrapper;
|
|
70
|
-
if (!this.activeShadow || wrapper == undefined) {
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
73
|
-
const shadowPositions = ["", "start", "end", "middle"];
|
|
74
|
-
const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
75
|
-
if (currentPosition === "start") {
|
|
76
|
-
wrapper.classList.add(this._shadowStart);
|
|
77
|
-
wrapper.classList.remove(this._shadowEnd);
|
|
78
|
-
}
|
|
79
|
-
else if (currentPosition === "end") {
|
|
80
|
-
wrapper.classList.remove(this._shadowStart);
|
|
81
|
-
wrapper.classList.add(this._shadowEnd);
|
|
82
|
-
}
|
|
83
|
-
else if (currentPosition === "middle") {
|
|
84
|
-
wrapper.classList.add(this._shadowStart);
|
|
85
|
-
wrapper.classList.add(this._shadowEnd);
|
|
86
|
-
}
|
|
87
|
-
else {
|
|
88
|
-
wrapper.classList.remove(this._shadowStart);
|
|
89
|
-
wrapper.classList.remove(this._shadowEnd);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
configResize() {
|
|
93
|
-
const container = this._container;
|
|
94
|
-
if (container == undefined) {
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
if (this._resizeObserver != undefined) {
|
|
98
|
-
this._resizeObserver.unobserve(container);
|
|
99
|
-
}
|
|
100
|
-
this._resizeObserver = new ResizeObserver(core.JSUtils.debounce(this.updateScroller.bind(this), 200));
|
|
101
|
-
this._resizeObserver.observe(container);
|
|
102
|
-
}
|
|
103
|
-
getContainerElement() {
|
|
104
|
-
return index.h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, index.h("slot", null));
|
|
105
|
-
}
|
|
106
|
-
isActiveScroller() {
|
|
107
|
-
if (this._container == undefined) {
|
|
108
|
-
return false;
|
|
109
|
-
}
|
|
110
|
-
return this._container.scrollWidth > this._container.clientWidth
|
|
111
|
-
|| this._container.scrollHeight > this._container.clientHeight;
|
|
112
|
-
}
|
|
113
|
-
//---------------------------------------------
|
|
114
|
-
// Event handlers
|
|
115
|
-
//---------------------------------------------
|
|
116
|
-
clickListener(evt) {
|
|
117
|
-
if (this._controller && this._controller.didScroll()) {
|
|
118
|
-
evt.preventDefault();
|
|
119
|
-
evt.stopPropagation();
|
|
120
|
-
evt.stopImmediatePropagation();
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
mouseDownHandler(evt) {
|
|
124
|
-
if (this.locked) {
|
|
125
|
-
this.finishDrag();
|
|
126
|
-
return;
|
|
127
|
-
}
|
|
128
|
-
if (!this._controller) {
|
|
129
|
-
this._controller = new ScrollCtrl(this._container);
|
|
130
|
-
}
|
|
131
|
-
this._controller.startDragg(evt);
|
|
132
|
-
this._container.classList.add("dragging");
|
|
133
|
-
}
|
|
134
|
-
mouseUpHandler() {
|
|
135
|
-
this.finishDrag();
|
|
136
|
-
}
|
|
137
|
-
mouseMoveHandler(evt) {
|
|
138
|
-
if (this.locked) {
|
|
139
|
-
this.finishDrag();
|
|
140
|
-
return;
|
|
141
|
-
}
|
|
142
|
-
if (this._controller) {
|
|
143
|
-
if (evt.buttons === 0) {
|
|
144
|
-
this.finishDrag();
|
|
145
|
-
}
|
|
146
|
-
else {
|
|
147
|
-
this._controller.doScroll(evt);
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
componentDidRender() {
|
|
152
|
-
var _a, _b;
|
|
153
|
-
if (this._container == undefined) {
|
|
154
|
-
return;
|
|
155
|
-
}
|
|
156
|
-
if (this.direction === EzScrollDirection.BOTH) {
|
|
157
|
-
(_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
|
|
158
|
-
(_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
|
|
159
|
-
this.isActive = this.isActiveScroller();
|
|
160
|
-
return;
|
|
161
|
-
}
|
|
162
|
-
this._container.onscroll = this.updateScroller.bind(this);
|
|
163
|
-
this.configResize();
|
|
164
|
-
this.updateScroller();
|
|
165
|
-
}
|
|
166
|
-
render() {
|
|
167
|
-
return (index.h(index.Host, null, this.activeShadow
|
|
168
|
-
? index.h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
|
|
169
|
-
: this.getContainerElement()));
|
|
170
|
-
}
|
|
171
|
-
};
|
|
172
|
-
class ScrollCtrl {
|
|
173
|
-
constructor(scrollablePanel) {
|
|
174
|
-
this.scrollablePanel = scrollablePanel;
|
|
175
|
-
}
|
|
176
|
-
startDragg(evt) {
|
|
177
|
-
this.startX = this.measureX(evt);
|
|
178
|
-
this.startY = this.measureY(evt);
|
|
179
|
-
this.scrollWidth = 0;
|
|
180
|
-
this.scrollHeight = 0;
|
|
181
|
-
}
|
|
182
|
-
measureX(e) {
|
|
183
|
-
return e.pageX - this.scrollablePanel.offsetLeft;
|
|
184
|
-
}
|
|
185
|
-
measureY(e) {
|
|
186
|
-
return e.pageY - this.scrollablePanel.offsetTop;
|
|
187
|
-
}
|
|
188
|
-
doScroll(e) {
|
|
189
|
-
const x = this.measureX(e);
|
|
190
|
-
const y = this.measureY(e);
|
|
191
|
-
if (x != this.startX || y != this.startY) {
|
|
192
|
-
const scrollX = x - this.startX;
|
|
193
|
-
const scrollY = y - this.startY;
|
|
194
|
-
this.startX += scrollX;
|
|
195
|
-
this.startY += scrollY;
|
|
196
|
-
this.scrollWidth += Math.abs(scrollX);
|
|
197
|
-
this.scrollHeight += Math.abs(scrollY);
|
|
198
|
-
this.scrollablePanel.scrollLeft = Math.max(0, this.scrollablePanel.scrollLeft - scrollX);
|
|
199
|
-
this.scrollablePanel.scrollTop = Math.max(0, this.scrollablePanel.scrollTop - scrollY);
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
didScroll() {
|
|
203
|
-
const tollerance = 5;
|
|
204
|
-
return this.scrollHeight > tollerance || this.scrollWidth > tollerance;
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
EzScroller.style = ezScrollerCss;
|
|
208
|
-
|
|
209
|
-
exports.ez_scroller = EzScroller;
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-c5203f95.js';
|
|
2
|
-
import { JSUtils } from '@sankhyalabs/core';
|
|
3
|
-
|
|
4
|
-
var EzScrollDirection;
|
|
5
|
-
(function (EzScrollDirection) {
|
|
6
|
-
EzScrollDirection["HORIZONTAL"] = "horizontal";
|
|
7
|
-
EzScrollDirection["VERTICAL"] = "vertical";
|
|
8
|
-
EzScrollDirection["BOTH"] = "both";
|
|
9
|
-
})(EzScrollDirection || (EzScrollDirection = {}));
|
|
10
|
-
|
|
11
|
-
const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--shadow-end::after{content:\"\";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}";
|
|
12
|
-
|
|
13
|
-
let EzScroller = class {
|
|
14
|
-
constructor(hostRef) {
|
|
15
|
-
registerInstance(this, hostRef);
|
|
16
|
-
this._shadowStart = "ez-scroller__wrapper--shadow-start";
|
|
17
|
-
this._shadowEnd = "ez-scroller__wrapper--shadow-end";
|
|
18
|
-
this.isActive = false;
|
|
19
|
-
/**
|
|
20
|
-
* Define se o `scroll` estará bloqueado.
|
|
21
|
-
*/
|
|
22
|
-
this.locked = false;
|
|
23
|
-
/**
|
|
24
|
-
* Define se haverá efeito de sombreado.
|
|
25
|
-
*/
|
|
26
|
-
this.activeShadow = false;
|
|
27
|
-
}
|
|
28
|
-
//---------------------------------------------
|
|
29
|
-
// Private methods
|
|
30
|
-
//---------------------------------------------
|
|
31
|
-
getContainerClass() {
|
|
32
|
-
return `ez-scroller__container ez-scroller__container--${this.direction}
|
|
33
|
-
${this.locked || !this.isActive ? " ez-scroller__container--locked" : ""}
|
|
34
|
-
`;
|
|
35
|
-
}
|
|
36
|
-
getWrapperClass() {
|
|
37
|
-
return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
|
|
38
|
-
}
|
|
39
|
-
finishDrag() {
|
|
40
|
-
if (this._controller) {
|
|
41
|
-
this._container.classList.remove("dragging");
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
updateScroller() {
|
|
45
|
-
const container = this._container;
|
|
46
|
-
if (container == undefined) {
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
let remainingScroll;
|
|
50
|
-
if (this.direction === EzScrollDirection.HORIZONTAL) {
|
|
51
|
-
const { scrollWidth, clientWidth, scrollLeft } = container;
|
|
52
|
-
remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
|
|
53
|
-
this._startHidden = container.scrollLeft > 0;
|
|
54
|
-
}
|
|
55
|
-
else if (this.direction === EzScrollDirection.VERTICAL) {
|
|
56
|
-
const { scrollHeight, clientHeight, scrollTop } = container;
|
|
57
|
-
remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
|
|
58
|
-
this._startHidden = container.scrollTop > 0;
|
|
59
|
-
}
|
|
60
|
-
this._endHidden = remainingScroll > 0;
|
|
61
|
-
this.isActive = this._startHidden || this._endHidden || this.isActiveScroller();
|
|
62
|
-
this.updateShadow();
|
|
63
|
-
}
|
|
64
|
-
updateShadow() {
|
|
65
|
-
const wrapper = this._wrapper;
|
|
66
|
-
if (!this.activeShadow || wrapper == undefined) {
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
const shadowPositions = ["", "start", "end", "middle"];
|
|
70
|
-
const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
71
|
-
if (currentPosition === "start") {
|
|
72
|
-
wrapper.classList.add(this._shadowStart);
|
|
73
|
-
wrapper.classList.remove(this._shadowEnd);
|
|
74
|
-
}
|
|
75
|
-
else if (currentPosition === "end") {
|
|
76
|
-
wrapper.classList.remove(this._shadowStart);
|
|
77
|
-
wrapper.classList.add(this._shadowEnd);
|
|
78
|
-
}
|
|
79
|
-
else if (currentPosition === "middle") {
|
|
80
|
-
wrapper.classList.add(this._shadowStart);
|
|
81
|
-
wrapper.classList.add(this._shadowEnd);
|
|
82
|
-
}
|
|
83
|
-
else {
|
|
84
|
-
wrapper.classList.remove(this._shadowStart);
|
|
85
|
-
wrapper.classList.remove(this._shadowEnd);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
configResize() {
|
|
89
|
-
const container = this._container;
|
|
90
|
-
if (container == undefined) {
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
if (this._resizeObserver != undefined) {
|
|
94
|
-
this._resizeObserver.unobserve(container);
|
|
95
|
-
}
|
|
96
|
-
this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.updateScroller.bind(this), 200));
|
|
97
|
-
this._resizeObserver.observe(container);
|
|
98
|
-
}
|
|
99
|
-
getContainerElement() {
|
|
100
|
-
return h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, h("slot", null));
|
|
101
|
-
}
|
|
102
|
-
isActiveScroller() {
|
|
103
|
-
if (this._container == undefined) {
|
|
104
|
-
return false;
|
|
105
|
-
}
|
|
106
|
-
return this._container.scrollWidth > this._container.clientWidth
|
|
107
|
-
|| this._container.scrollHeight > this._container.clientHeight;
|
|
108
|
-
}
|
|
109
|
-
//---------------------------------------------
|
|
110
|
-
// Event handlers
|
|
111
|
-
//---------------------------------------------
|
|
112
|
-
clickListener(evt) {
|
|
113
|
-
if (this._controller && this._controller.didScroll()) {
|
|
114
|
-
evt.preventDefault();
|
|
115
|
-
evt.stopPropagation();
|
|
116
|
-
evt.stopImmediatePropagation();
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
mouseDownHandler(evt) {
|
|
120
|
-
if (this.locked) {
|
|
121
|
-
this.finishDrag();
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
if (!this._controller) {
|
|
125
|
-
this._controller = new ScrollCtrl(this._container);
|
|
126
|
-
}
|
|
127
|
-
this._controller.startDragg(evt);
|
|
128
|
-
this._container.classList.add("dragging");
|
|
129
|
-
}
|
|
130
|
-
mouseUpHandler() {
|
|
131
|
-
this.finishDrag();
|
|
132
|
-
}
|
|
133
|
-
mouseMoveHandler(evt) {
|
|
134
|
-
if (this.locked) {
|
|
135
|
-
this.finishDrag();
|
|
136
|
-
return;
|
|
137
|
-
}
|
|
138
|
-
if (this._controller) {
|
|
139
|
-
if (evt.buttons === 0) {
|
|
140
|
-
this.finishDrag();
|
|
141
|
-
}
|
|
142
|
-
else {
|
|
143
|
-
this._controller.doScroll(evt);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
componentDidRender() {
|
|
148
|
-
var _a, _b;
|
|
149
|
-
if (this._container == undefined) {
|
|
150
|
-
return;
|
|
151
|
-
}
|
|
152
|
-
if (this.direction === EzScrollDirection.BOTH) {
|
|
153
|
-
(_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
|
|
154
|
-
(_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
|
|
155
|
-
this.isActive = this.isActiveScroller();
|
|
156
|
-
return;
|
|
157
|
-
}
|
|
158
|
-
this._container.onscroll = this.updateScroller.bind(this);
|
|
159
|
-
this.configResize();
|
|
160
|
-
this.updateScroller();
|
|
161
|
-
}
|
|
162
|
-
render() {
|
|
163
|
-
return (h(Host, null, this.activeShadow
|
|
164
|
-
? h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
|
|
165
|
-
: this.getContainerElement()));
|
|
166
|
-
}
|
|
167
|
-
};
|
|
168
|
-
class ScrollCtrl {
|
|
169
|
-
constructor(scrollablePanel) {
|
|
170
|
-
this.scrollablePanel = scrollablePanel;
|
|
171
|
-
}
|
|
172
|
-
startDragg(evt) {
|
|
173
|
-
this.startX = this.measureX(evt);
|
|
174
|
-
this.startY = this.measureY(evt);
|
|
175
|
-
this.scrollWidth = 0;
|
|
176
|
-
this.scrollHeight = 0;
|
|
177
|
-
}
|
|
178
|
-
measureX(e) {
|
|
179
|
-
return e.pageX - this.scrollablePanel.offsetLeft;
|
|
180
|
-
}
|
|
181
|
-
measureY(e) {
|
|
182
|
-
return e.pageY - this.scrollablePanel.offsetTop;
|
|
183
|
-
}
|
|
184
|
-
doScroll(e) {
|
|
185
|
-
const x = this.measureX(e);
|
|
186
|
-
const y = this.measureY(e);
|
|
187
|
-
if (x != this.startX || y != this.startY) {
|
|
188
|
-
const scrollX = x - this.startX;
|
|
189
|
-
const scrollY = y - this.startY;
|
|
190
|
-
this.startX += scrollX;
|
|
191
|
-
this.startY += scrollY;
|
|
192
|
-
this.scrollWidth += Math.abs(scrollX);
|
|
193
|
-
this.scrollHeight += Math.abs(scrollY);
|
|
194
|
-
this.scrollablePanel.scrollLeft = Math.max(0, this.scrollablePanel.scrollLeft - scrollX);
|
|
195
|
-
this.scrollablePanel.scrollTop = Math.max(0, this.scrollablePanel.scrollTop - scrollY);
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
didScroll() {
|
|
199
|
-
const tollerance = 5;
|
|
200
|
-
return this.scrollHeight > tollerance || this.scrollWidth > tollerance;
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
EzScroller.style = ezScrollerCss;
|
|
204
|
-
|
|
205
|
-
export { EzScroller as ez_scroller };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,h as a,H as i,g as t}from"./p-7b80df03.js";import{ElementIDUtils as r}from"@sankhyalabs/core";let o=class{constructor(a){e(this,a),this.open=!0,this.items=[],this.filterText=""}async disableItem(e){[].concat(e).forEach((e=>this._tree.disableItem(e)))}async enableItem(e){[].concat(e).forEach((e=>this._tree.enableItem(e)))}async handleToggleSidebar(){this.open=!this.open}handleFilterTree(e){"Enter"===e.key&&this._tree.applyFilter(this.filterText)}render(){return r.addIDInfoIfNotExists(this._element),a(i,null,a("ez-sidebar-button",{class:this.open?"hidden":"",onEzClick:this.handleToggleSidebar.bind(this),"aria-controls":"navigator","aria-expanded":this.open,"data-element-id":r.getInternalIDInfo("openButton")}),a("aside",{tabIndex:-1,id:"navigator",class:"ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator "+(this.open?"":"hidden"),"data-element-id":r.getInternalIDInfo("sidebar")},a("div",{role:"search",class:"ez-guide-navigator__actions"},a("ez-filter-input",{mode:"slim",value:this.filterText,onEzChange:e=>this.filterText=e.detail,label:"Buscar guia","aria-placeholder":"Buscar guia",onKeyUp:this.handleFilterTree.bind(this),"data-element-id":r.getInternalIDInfo("textinput")}),a("ez-button",{onClick:this.handleToggleSidebar.bind(this),class:"inverted",mode:"icon",size:"small",iconName:"show_menu",title:"Ocultar menu","aria-label":"Ocultar menu","aria-controls":"navigator","data-element-id":r.getInternalIDInfo("closeButton")})),a("ez-tree",{ref:e=>this._tree=e,items:this.items,"data-element-id":r.getInternalIDInfo("tree"),tooltipResolver:this.tooltipResolver})))}get _element(){return t(this)}};o.style=":host{--ez-guide-navigator--padding:0 var(--space--large);--ez-guide-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-guide-navigator--background-color:var(--color--inverted);--ez-guide-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-guide-navigator--actions-gap:var(--space--medium);--ez-guide-navigator--actions-margin:var(--space--medium) 0 var(--space--medium)}.inverted{transform:rotate(180deg)}.ez-guide-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:var(--ez-guide-navigator--padding);background-color:var(--ez-guide-navigator--background-color);-webkit-box-shadow:var(--ez-guide-navigator--box-shadow);box-shadow:var(--ez-guide-navigator--box-shadow);border-radius:var(--ez-guide-navigator--border-radius)}.ez-guide-navigator__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-guide-navigator--actions-gap);margin:var(--ez-guide-navigator--actions-margin)}.hidden{display:none}";export{o as ez_guide_navigator}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r,h as e,H as o}from"./p-7b80df03.js";import{JSUtils as l}from"@sankhyalabs/core";var t;!function(r){r.HORIZONTAL="horizontal",r.VERTICAL="vertical",r.BOTH="both"}(t||(t={}));let s=class{constructor(e){r(this,e),this._shadowStart="ez-scroller__wrapper--shadow-start",this._shadowEnd="ez-scroller__wrapper--shadow-end",this.isActive=!1,this.locked=!1,this.activeShadow=!1}getContainerClass(){return`ez-scroller__container ez-scroller__container--${this.direction}\n ${this.locked||!this.isActive?" ez-scroller__container--locked":""}\n `}getWrapperClass(){return`ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`}finishDrag(){this._controller&&this._container.classList.remove("dragging")}updateScroller(){const r=this._container;if(null==r)return;let e;if(this.direction===t.HORIZONTAL){const{scrollWidth:o,clientWidth:l,scrollLeft:t}=r;e=o-l-Math.ceil(t),this._startHidden=r.scrollLeft>0}else if(this.direction===t.VERTICAL){const{scrollHeight:o,clientHeight:l,scrollTop:t}=r;e=o-l-Math.ceil(t),this._startHidden=r.scrollTop>0}this._endHidden=e>0,this.isActive=this._startHidden||this._endHidden||this.isActiveScroller(),this.updateShadow()}updateShadow(){const r=this._wrapper;if(!this.activeShadow||null==r)return;const e=["","start","end","middle"][Number(this._startHidden)|Number(this._endHidden)<<1];"start"===e?(r.classList.add(this._shadowStart),r.classList.remove(this._shadowEnd)):"end"===e?(r.classList.remove(this._shadowStart),r.classList.add(this._shadowEnd)):"middle"===e?(r.classList.add(this._shadowStart),r.classList.add(this._shadowEnd)):(r.classList.remove(this._shadowStart),r.classList.remove(this._shadowEnd))}configResize(){const r=this._container;null!=r&&(null!=this._resizeObserver&&this._resizeObserver.unobserve(r),this._resizeObserver=new ResizeObserver(l.debounce(this.updateScroller.bind(this),200)),this._resizeObserver.observe(r))}getContainerElement(){return e("div",{ref:r=>this._container=r,class:this.getContainerClass()},e("slot",null))}isActiveScroller(){return null!=this._container&&(this._container.scrollWidth>this._container.clientWidth||this._container.scrollHeight>this._container.clientHeight)}clickListener(r){this._controller&&this._controller.didScroll()&&(r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation())}mouseDownHandler(r){this.locked?this.finishDrag():(this._controller||(this._controller=new c(this._container)),this._controller.startDragg(r),this._container.classList.add("dragging"))}mouseUpHandler(){this.finishDrag()}mouseMoveHandler(r){this.locked?this.finishDrag():this._controller&&(0===r.buttons?this.finishDrag():this._controller.doScroll(r))}componentDidRender(){var r,e;if(null!=this._container){if(this.direction===t.BOTH)return null===(r=this._wrapper)||void 0===r||r.classList.remove(this._shadowStart),null===(e=this._wrapper)||void 0===e||e.classList.remove(this._shadowEnd),void(this.isActive=this.isActiveScroller());this._container.onscroll=this.updateScroller.bind(this),this.configResize(),this.updateScroller()}}render(){return e(o,null,this.activeShadow?e("div",{ref:r=>this._wrapper=r,class:this.getWrapperClass()},this.getContainerElement()):this.getContainerElement())}};class c{constructor(r){this.scrollablePanel=r}startDragg(r){this.startX=this.measureX(r),this.startY=this.measureY(r),this.scrollWidth=0,this.scrollHeight=0}measureX(r){return r.pageX-this.scrollablePanel.offsetLeft}measureY(r){return r.pageY-this.scrollablePanel.offsetTop}doScroll(r){const e=this.measureX(r),o=this.measureY(r);if(e!=this.startX||o!=this.startY){const r=e-this.startX,l=o-this.startY;this.startX+=r,this.startY+=l,this.scrollWidth+=Math.abs(r),this.scrollHeight+=Math.abs(l),this.scrollablePanel.scrollLeft=Math.max(0,this.scrollablePanel.scrollLeft-r),this.scrollablePanel.scrollTop=Math.max(0,this.scrollablePanel.scrollTop-l)}}didScroll(){return this.scrollHeight>5||this.scrollWidth>5}}s.style=':host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--shadow-end::after{content:"";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}';export{s as ez_scroller}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as i,g as r,f as s,H as a}from"./p-7b80df03.js";import{ElementIDUtils as o,StringUtils as n}from"@sankhyalabs/core";import{C as h}from"./p-4a5e37a7.js";let l=class{constructor(i){e(this,i),this.ezChange=t(this,"ezChange",7),this.enabled=!0,this.mode="regular"}observeLabel(){this._textInput&&(this._textInput.label=this.label)}observeErrorMessage(){this._textInput&&(this._textInput.errorMessage=this.errorMessage)}observeValue(e,t){this._textInput&&e!=t&&(this._textInput.value=e,this.ezChange.emit(e))}async setFocus(){this._textInput.setFocus()}async setBlur(){this._textInput.setBlur()}async isInvalid(){return"string"==typeof this.errorMessage&&""!==this.errorMessage.trim()}changeValue(e){const t=e.detail;this.errorMessage="",t!==this.value&&(this.value=t)}componentDidLoad(){h.applyVarsTextInput(this._elem,this._textInput)}render(){return o.addIDInfoIfNotExists(this._elem,"input"),i("ez-text-input",{"data-element-id":o.getInternalIDInfo("textInput"),ref:e=>this._textInput=e,label:this.label,onEzChange:e=>this.changeValue(e),value:this.value,enabled:this.enabled,errorMessage:this.errorMessage,restrict:this.restrict,mode:this.mode},i("ez-icon",{slot:"leftIcon",iconName:"search"}))}get _elem(){return r(this)}static get watchers(){return{label:["observeLabel"],errorMessage:["observeErrorMessage"],value:["observeValue"]}}};l.style=":host{display:block;width:100%}";let d=class{constructor(i){e(this,i),this.ezClick=t(this,"ezClick",7)}componentDidLoad(){this._element&&o.addIDInfo(this._element),this._button&&o.addIDInfo(this._button,"button",{id:"embedded"})}render(){return i("button",{type:"button",onClick:()=>{this.ezClick.emit()},ref:e=>this._button=e},i("span",null))}get _element(){return r(this)}};d.style=":host{--ez-sidebar-button--width:6px;--ez-sidebar-button--hover--width:12px;--ez-sidebar-button--height:96px;--ez-sidebar-button--background-color--xlight:var(--background--xlight, #fff);--ez-sidebar-button--background-color--primary:var(--color--primary);--ez-sidebar-button--space--small:var(--space--small, 6px);--ez-sidebar-button--space--medium:var(--space--medium, 12px);--ez-sidebar-button--box-shadow:var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));--ez-sidebar-button--hover--box-shadow:var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));--ez-sidebar-button--border--radius-small:var(--border--radius-small);--ez-sidebar-button--border--radius-medium:var(--border--radius-medium)}button{display:flex;background:var(--ez-sidebar-button--background-color--xlight);border:0;border-radius:0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;box-shadow:var(--ez-sidebar-button--box-shadow);padding:0;cursor:pointer}span{width:var(--ez-sidebar-button--width);height:var(--ez-sidebar-button--height);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--small) var(--ez-sidebar-button--space--medium) 0;background:var(--ez-sidebar-button--background-color--primary);border-radius:0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0}button:hover{box-shadow:var(--ez-sidebar-button--hover--box-shadow)}button:hover span{width:var(--ez-sidebar-button--hover--width);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) 0}";const c=(e,t)=>t?e.iconExpanded||"chevron-down":e.iconContracted||"chevron-right",b=e=>e.tooltip||e.label,u=e=>{const{node:t,selectedId:r,itemClick:s,iconClick:a,iconResolver:n,tooltipResolver:h,itemsList:l}=e;if(!t.visible)return;const d=t.item,c=e.level||1,b=t.isDisabled(),m=!b&&d.expanded,v=t.isExpandable(),p=!b&&!t.isPlaceHolder;return p&&l.push(d),i("ul",{class:1===c?"first-level":void 0},i("li",Object.assign({title:h(d,!b,c),class:"tree-item",onClick:()=>p&&s(d)},{disabled:b,selected:d.id===r,[o.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:o.getInternalIDInfo(`ezTreeItem_${d.id}`)}),i("div",{class:"item-icon-box"},v&&i("ez-icon",{id:d.id,class:"item-icon",size:"small",iconName:n(d,m,c),onClick:()=>p&&a(d)})),i("label",{class:"item-label"},d.label)),m&&t.getChildren().map((e=>i(u,{selectedId:r,node:e,itemClick:s,iconClick:a,level:c+1,iconResolver:n,tooltipResolver:h,itemsList:l}))))};class m{constructor(e,t,i,r=!1){this.children=new Map,this.visible=!0,this.item=t,this.parent=i,this._tree=e,this.isPlaceHolder=r,t&&!r?(this._isLazyLoad="function"==typeof t.children||t.childrenCount>0,Array.isArray(t.children)&&(Array.from(t.children).forEach((e=>this.addChild(this._tree,e))),this._childrenLoaded=!0)):(this._isLazyLoad=!1,this._childrenLoaded=!0)}refresh(e){if(this.isPlaceHolder)return;this.item=Object.assign({},e),this._isLazyLoad="function"==typeof this.item.children||this.item.childrenCount>0;const t=this.children;this.children=new Map,Array.isArray(this.item.children)?(Array.from(this.item.children).forEach((e=>{const i=t.get(e.id);i?(i.refresh(e),this.children.set(e.id,i)):this.addChild(this._tree,Object.assign({},e))})),this._childrenLoaded=!0):this._childrenLoaded=!1}isDisabled(){return!this.isPlaceHolder&&this._tree.isNodeDisabled(this.item.id,this.item.disabled)}updateChildren(e){this.isPlaceHolder||this.refresh(Object.assign(Object.assign({},this.item),{children:e}))}addChild(e,t){this.children.has(t.id)||this.children.set(t.id,new m(e,t,this))}addPlaceHolder(){this.children.clear();const e=this.item.id;this.children.set(e,new m(void 0,{id:`placeholder_${e}`,label:"Carregando..."},this,!0))}getNode(e){if(this.children.has(e))return this.children.get(e);const t=Array.from(this.children.values());for(const i of t){const t=i.getNode(e);if(t)return t}}needLoad(){return this._isLazyLoad&&!this._childrenLoaded}isExpandable(){return this._isLazyLoad||this.children.size>0||Array.isArray(this.item.children)}getChildren(){return this.isPlaceHolder?[]:(this.needLoad()&&this._tree.loadChildren(this),Array.from(this.children.values()))}}class v extends m{constructor(e){super(void 0),this._disabledValues=new Map,this._changeCallback=e}async addChildAt(e,t){const i=this.getNode(e);null!=i&&(i.addChild(this,t),this._changeCallback())}setDisabled(e,t){this._disabledValues.set(e,t),this._changeCallback()}isNodeDisabled(e,t){return this._disabledValues.has(e)?this._disabledValues.get(e):t}load(e){if(e===this._currentItems)return;this._currentItems=e;const t=this.children;this.children=new Map,this._disabledValues.clear(),e.forEach((e=>{const i=t.get(e.id);i?(i.refresh(e),this.children.set(e.id,i)):this.addChild(this,Object.assign({},e))}))}setFilterPattern(e){this._filterPattern=n.replaceAccentuatedCharsKeepSymbols(e),this.applyFilter(this),this._changeCallback()}updateItem(e){if(null==e)return;const t=this.getNode(e.id);null!=t&&(Object.keys(e).forEach((i=>t.item[i]=e[i])),this._changeCallback())}async open(e){return new Promise((async t=>{await this.walkPath(this,e,(e=>e.item.expanded=!0)),t()}))}applyFilter(e){if(e.children.forEach((e=>{this.applyFilter(e)})),null==e.item)return;let t=!1;if(n.replaceAccentuatedCharsKeepSymbols(e.item.label).includes(this._filterPattern))t=!0;else{const i=Array.from(e.children.values());for(let r=0;r<i.length;r++)if(i[r].visible){t=!0,e.item.expanded=!0;break}}e.visible=t}async walkPath(e,t,i,r=0){return new Promise((async s=>{const a=t.split(">>").map((e=>e.trim()));if(a.length>r){const s=e.getNode(a[r]);s&&(s.needLoad()&&await this.loadLevel(s),i(s),await this.walkPath(s,t,i,r+1))}s()}))}async loadChildren(e){return new Promise((t=>{this.loadLevel(e).then((()=>{t(),this._changeCallback()}))}))}async loadLevel(e){return new Promise((t=>{e.addPlaceHolder(),(0,e.item.children)(e.item).then((i=>{e.updateChildren(i),t()}))}))}}let p=class{constructor(i){e(this,i),this.ezChange=t(this,"ezChange",7),this.ezOpenItem=t(this,"ezOpenItem",7),this._onItemClick=e=>{this.value=e},this._onIconClick=e=>{this.openClose(e),this.value=e},this._tree=new v((()=>s(this))),this.items=[],this.iconResolver=c}async selectItem(e){const t=this._tree.getNode(e);this.value=t?t.item:void 0}async openItem(e){this._waintingForLoad=!0,await this._tree.open(e),this._waintingForLoad=!1}async disableItem(e){[].concat(e).forEach((e=>this._tree.setDisabled(e,!0)))}async enableItem(e){[].concat(e).forEach((e=>this._tree.setDisabled(e,!1)))}async addChild(e,t){var i;null==t&&(t=null===(i=this.value)||void 0===i?void 0:i.id),this._tree.addChildAt(t,e);const r=this._tree.getNode(t);r&&(r.item.expanded=!0)}async applyFilter(e){this._tree.setFilterPattern(e)}observeItems(e,t){e!=t&&this._tree.load(this.items||[])}observeValue(){var e;this.ezChange.emit(this.value),this.selectedId=null===(e=this.value)||void 0===e?void 0:e.id}onKeyDownListener(e){if(!this.value)return;let t=!1;switch(e.key){case"ArrowUp":this.previousItem(),t=!0;break;case"ArrowDown":this.nextItem(),t=!0;break;case"ArrowLeft":this.previousLevel(),t=!0;break;case"ArrowRight":this.nextLevel(),t=!0;break;case" ":this.openClose(this.value),t=!0}t&&(e.stopPropagation(),e.preventDefault())}openClose(e){if(null==e)return;const t=!e.expanded;e.expanded=t,t&&this.ezOpenItem.emit(e),this._tree.updateItem(e)}previousLevel(){var e;if(this.value)if(this.value.expanded)this.value.expanded=!1,this._tree.updateItem(this.value);else{const t=null===(e=this._tree.getNode(this.value.id).parent)||void 0===e?void 0:e.item;t&&(this.value=t)}}nextLevel(){this.value&&this._tree.getNode(this.value.id).isExpandable()&&(this.value.expanded?this.nextItem():(this.value.expanded=!0,this._tree.updateItem(this.value)))}indexOf(e){if(null==e)return-1;for(let t=0;t<this._visibleItems.length;t++)if(this._visibleItems[t].id===e)return t;return-1}selectNextItem(e){var t;const i=this.indexOf(null===(t=this.value)||void 0===t?void 0:t.id)+e;i>-1&&i<this._visibleItems.length&&(this.value=this._visibleItems[i])}nextItem(){this.selectNextItem(1)}previousItem(){this.selectNextItem(-1)}connectedCallback(){this.items&&this._tree.load(this.items)}componentWillRender(){var e;if(!this.selectedId||(null===(e=this.value)||void 0===e?void 0:e.id)===this.selectedId)return;const t=this._tree.getNode(this.selectedId);t?this.value=t.item:this.selectedId=void 0}render(){if(o.addIDInfoIfNotExists(this._element,"ezTree"),null!=this.items)return this._visibleItems=[],i(a,{tabindex:"-1"},this._waintingForLoad?i("label",null,"Carregando..."):this._tree.getChildren().map((e=>{var t;return i(u,{selectedId:null===(t=this.value)||void 0===t?void 0:t.id,node:e,itemClick:this._onItemClick,iconClick:this._onIconClick,iconResolver:this.iconResolver,tooltipResolver:this.tooltipResolver||b,itemsList:this._visibleItems})})))}get _element(){return r(this)}static get watchers(){return{items:["observeItems"],value:["observeValue"]}}};p.style=":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding)}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";export{l as ez_filter_input,d as ez_sidebar_button,p as ez_tree}
|