v4web-components/dist/stencil-library/p-7066de3f.entry.js

Stencil Component Starter

import{r as e,h as a,g as s}from"./p-c2aeec95.js";const t=".v4-context-menu{gap:var(--lab-ds-semantic-selectable-space-gap-xs);color:var(--lab-ds-semantic-color-fg-default)}.icon-menu{display:flex;justify-content:flex-end;font-family:Material Symbols Outlined}.left .icon-menu{justify-content:flex-start}.items{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);position:relative}.hints{position:absolute;top:0;right:0;max-height:21rem;overflow-y:auto;overflow-x:hidden;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);gap:var(--lab-ds-semantic-selectable-space-gap-s);box-shadow:var(--lab-ds-semantic-selectable-shadow-m);background-color:var(--lab-ds-semantic-placeholder-color-bg-default);color:var(--lab-ds-semantic-color-fg-default)}.left .hints{left:0;right:inherit}.hints-container{gap:var(--lab-ds-semantic-selectable-space-gap-s);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.hints-container .action-item{display:flex;align-items:center;border:none;z-index:20;font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);background-color:rgba(0, 0, 0, 0);padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-s);width:100%;white-space:nowrap}.icon-item{font-family:Material Symbols Outlined}.icon{display:flex}.hints-container .action-item.last-item:not(:disabled){border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-color:var(--lab-ds-semantic-selectable-color-border-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-bottom-style:solid}.hints-container .action-item:hover{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);background-color:var(--lab-ds-semantic-selectable-color-bg-hover)}.hints-container .action-item:focus{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-style:solid;outline-offset:-1px;background-color:rgba(0, 0, 0, 0)}.hints-container .action-item:active{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border:none;background-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-bg-pure)}.hints-container .action-item:disabled{color:var(--lab-ds-semantic-color-fg-disabled);background-color:rgba(0, 0, 0, 0);border:none}.hints-container .action-item.destructive-item{color:var(--lab-ds-semantic-selectable-color-bg-dark-error);background-color:rgba(0, 0, 0, 0)}.hints-container .action-item.destructive-item:hover{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);background-color:var(--lab-ds-semantic-selectable-color-secondary-active)}.hints-container .action-item.destructive-item:focus{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);outline-style:solid;outline-offset:-1px;background-color:rgba(0, 0, 0, 0)}.hints-container .action-item.destructive-item:active{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border:none;background-color:var(--lab-ds-semantic-selectable-color-secondary-press);color:var(--lab-ds-semantic-color-bg-pure)}.hints-container .action-item.destructive-item:disabled{opacity:var(--lab-ds-core-opacity-80);color:var(--lab-ds-semantic-selectable-color-bg-dark-error);background-color:rgba(0, 0, 0, 0);border:none}";const i=class{constructor(a){e(this,a);this.items=undefined;this.destructiveItem=undefined;this.iconMenu="more_vert";this.isItemsVisible=false;this.disabled=false;this.listPosition="left"}handleSelect(){if(this.disabled)return;this.isItemsVisible=!this.isItemsVisible}checkForClickOutside(e){if(this.el.contains(e.target)){return}this.isItemsVisible=false}render(){var e,s;return a("div",{class:`v4-context-menu ${this.listPosition==="left"?"left":"right"}`},a("div",{class:"icon-menu"},a("lab-ds-icon-selectable",{onClick:()=>this.handleSelect(),icon:this.iconMenu,size:"small"})),(((e=this.items)===null||e===void 0?void 0:e.length)>0||this.destructiveItem)&&this.isItemsVisible&&a("div",{class:"items"},a("div",{class:"hints"},a("div",{class:"hints-container"},(s=this.items)===null||s===void 0?void 0:s.map(((e,s)=>a("button",{onClick:()=>{e.event();this.isItemsVisible=false},disabled:e.disabled,key:e.key,class:`action-item ${this.items.length===s+1&&this.destructiveItem?"last-item":""}`},e.icon&&a("lab-ds-icon-not-selectable",{class:"icon-item",key:s,size:"small",icon:e.icon}),a("span",{class:"hint"},e.label)))),this.destructiveItem&&a("button",{onClick:()=>{this.destructiveItem.event()},disabled:this.destructiveItem.disabled,key:this.destructiveItem.key,class:`action-item destructive-item`},this.destructiveItem.icon&&a("lab-ds-icon-not-selectable",{class:"icon-item",size:"small",icon:this.destructiveItem.icon}),a("span",{class:"hint"},this.destructiveItem.label))))))}get el(){return s(this)}};i.style=t;export{i as lab_ds_context_menu};
//# sourceMappingURL=p-7066de3f.entry.js.map