@nuralyui/menu 0.0.1 → 0.0.2
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/menu.style.js +1 -1
- package/menu.style.js.map +1 -1
- package/package.json +1 -1
- package/templates/hy-menu-link.d.ts +0 -1
- package/templates/hy-menu-link.d.ts.map +1 -1
- package/templates/hy-menu-link.js +1 -2
- package/templates/hy-menu-link.js.map +1 -1
- package/templates/hy-sub-menu.js +2 -2
- package/templates/hy-sub-menu.js.map +1 -1
package/menu.style.js
CHANGED
|
@@ -9,7 +9,7 @@ const menuStyle = css `
|
|
|
9
9
|
}
|
|
10
10
|
:host {
|
|
11
11
|
--hybrid-menu-font-size:13px;
|
|
12
|
-
--hybrid-menu-font-family:serif;
|
|
12
|
+
--hybrid-menu-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, SFProLocalRange;
|
|
13
13
|
--hybrid-menu-padding: 2px;
|
|
14
14
|
--hybrid-menu-width: 45%;
|
|
15
15
|
--hybrid-menu-border: 1px solid #f4f4f4;
|
package/menu.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../../src/components/menu/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFpB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst menuStyle = css`\n ul {\n width: var(--hybrid-menu-width);\n padding: var(--hybrid-menu-padding);\n border: var(--hybrid-menu-border);\n font-size: var(--hybrid-menu-font-size);\n font-family: var(--hybrid-menu-font-family)\n }\n :host {\n --hybrid-menu-font-size:13px;\n --hybrid-menu-font-family:serif;\n --hybrid-menu-padding: 2px;\n --hybrid-menu-width: 45%;\n --hybrid-menu-border: 1px solid #f4f4f4;\n --hybrid-menu-link-color: #000000;\n --hybrid-menu-link-icon-color: #525252;\n --hybrid-menu-disabled-link-color: #c6c6c6;\n --hybrid-menu-focus-border: 1px solid #0f62fe;\n --hybrid-menu-focus-color: #000000;\n --hybrid-menu-active-color: #000000;\n --hybrid-menu-active-background-color: #c6c6c6;\n --hybrid-menu-hover-link-background-color: #f4f4f4;\n --hybrid-menu-hover-link-color: #000000;\n --hybrid-menu-selected-link-background-color: #e0e0e0;\n --hybrid-menu-selected-link-border: 3px solid #0f62fe;\n --hybrid-menu-selected-color: #000000;\n --hybrid-menu-link-background-color: transparent;\n --hybrid-menu-link-padding-y: 8px;\n --hybrid-menu-link-empty-icon-padding-left: 39px;\n --hybrid-menu-link-icon-padding-right: 15px;\n --hybrid-menu-link-icon-padding-left: 10px;\n --hybrid-menu-link-icon-right-padding-left: 39px;\n --hybrid-menu-link-icon-only-width: 42px;\n --hybrid-sub-menu-color: #000000;\n --hybrid-sub-menu-disabled-color: #c6c6c6;\n --hybrid-sub-menu-focus-color: #525252;\n --hybrid-sub-menu-focus-border: 1px solid #0f62fe;\n --hybrid-sub-menu-hover-background-color: #f4f4f4;\n --hybrid-sub-menu-hover-color: #161616;\n --hybrid-sub-menu-active-background-color: #c6c6c6;\n --hybrid-sub-menu-active-color: #000000;\n --hybrid-sub-menu-highlighted-color: #000000;\n --hybrid-sub-menu-highlighted-background-color: #e2e2e2;\n --hybrid-sub-menu-text-icon-color: #525252;\n --hybrid-sub-menu-action-icon-color:#525252;\n --hybrid-sub-menu-status-icon-color:#525252;\n --hybrid-sub-menu-toggle-icon-color: #525252;\n --hybrid-sub-menu-padding-y: 8px;\n --hybrid-sub-menu-margin-y: 0px;\n --hybrid-sub-menu-padding-left: 10px;\n --hybrid-sub-menu-padding-left-text: 15px;\n --hybrid-sub-menu-empty-icon-padding-left-text: 29px;\n --hybrid-sub-menu-children-padding-left: 15px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-menu-border: 1px solid #ffffff;\n --hybrid-menu-link-color:#ffffff;\n --hybrid-menu-focus-border: 1px solid #ffffff;\n --hybrid-menu-focus-color: #ffffff;\n --hybrid-menu-hover-link-background-color: #333333;\n --hybrid-menu-hover-link-color: #ffffff;\n --hybrid-menu-active-color: #ffffff;\n --hybrid-menu-active-background-color: #242424;\n --hybrid-menu-selected-link-border: 3px solid #ffffff;\n --hybrid-menu-selected-link-background-color: #3a3a3a;\n --hybrid-menu-selected-color:#ffffff;\n --hybrid-menu-disabled-link-color: #525252;\n --hybrid-sub-menu-color: #ffffff;\n --hybrid-sub-menu-disabled-color: #525252;\n --hybrid-sub-menu-focus-border: 1px solid #ffffff;\n --hybrid-sub-menu-focus-color: #525252;\n --hybrid-sub-menu-hover-background-color: #333333;\n --hybrid-sub-menu-hover-color: #ffffff;\n --hybrid-sub-menu-active-background-color: #242424;\n --hybrid-sub-menu-active-color: #ffffff;\n --hybrid-sub-menu-highlighted-color: #ffffff;\n --hybrid-sub-menu-highlighted-background-color: #3a3a3a;\n --hybrid-sub-menu-text-icon-color: #525252;\n --hybrid-sub-menu-toggle-icon-color: #525252;\n }\n }\n`;\nexport const styles = [menuStyle];\n"]}
|
|
1
|
+
{"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../../src/components/menu/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFpB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst menuStyle = css`\n ul {\n width: var(--hybrid-menu-width);\n padding: var(--hybrid-menu-padding);\n border: var(--hybrid-menu-border);\n font-size: var(--hybrid-menu-font-size);\n font-family: var(--hybrid-menu-font-family)\n }\n :host {\n --hybrid-menu-font-size:13px;\n --hybrid-menu-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-menu-padding: 2px;\n --hybrid-menu-width: 45%;\n --hybrid-menu-border: 1px solid #f4f4f4;\n --hybrid-menu-link-color: #000000;\n --hybrid-menu-link-icon-color: #525252;\n --hybrid-menu-disabled-link-color: #c6c6c6;\n --hybrid-menu-focus-border: 1px solid #0f62fe;\n --hybrid-menu-focus-color: #000000;\n --hybrid-menu-active-color: #000000;\n --hybrid-menu-active-background-color: #c6c6c6;\n --hybrid-menu-hover-link-background-color: #f4f4f4;\n --hybrid-menu-hover-link-color: #000000;\n --hybrid-menu-selected-link-background-color: #e0e0e0;\n --hybrid-menu-selected-link-border: 3px solid #0f62fe;\n --hybrid-menu-selected-color: #000000;\n --hybrid-menu-link-background-color: transparent;\n --hybrid-menu-link-padding-y: 8px;\n --hybrid-menu-link-empty-icon-padding-left: 39px;\n --hybrid-menu-link-icon-padding-right: 15px;\n --hybrid-menu-link-icon-padding-left: 10px;\n --hybrid-menu-link-icon-right-padding-left: 39px;\n --hybrid-menu-link-icon-only-width: 42px;\n --hybrid-sub-menu-color: #000000;\n --hybrid-sub-menu-disabled-color: #c6c6c6;\n --hybrid-sub-menu-focus-color: #525252;\n --hybrid-sub-menu-focus-border: 1px solid #0f62fe;\n --hybrid-sub-menu-hover-background-color: #f4f4f4;\n --hybrid-sub-menu-hover-color: #161616;\n --hybrid-sub-menu-active-background-color: #c6c6c6;\n --hybrid-sub-menu-active-color: #000000;\n --hybrid-sub-menu-highlighted-color: #000000;\n --hybrid-sub-menu-highlighted-background-color: #e2e2e2;\n --hybrid-sub-menu-text-icon-color: #525252;\n --hybrid-sub-menu-action-icon-color:#525252;\n --hybrid-sub-menu-status-icon-color:#525252;\n --hybrid-sub-menu-toggle-icon-color: #525252;\n --hybrid-sub-menu-padding-y: 8px;\n --hybrid-sub-menu-margin-y: 0px;\n --hybrid-sub-menu-padding-left: 10px;\n --hybrid-sub-menu-padding-left-text: 15px;\n --hybrid-sub-menu-empty-icon-padding-left-text: 29px;\n --hybrid-sub-menu-children-padding-left: 15px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-menu-border: 1px solid #ffffff;\n --hybrid-menu-link-color:#ffffff;\n --hybrid-menu-focus-border: 1px solid #ffffff;\n --hybrid-menu-focus-color: #ffffff;\n --hybrid-menu-hover-link-background-color: #333333;\n --hybrid-menu-hover-link-color: #ffffff;\n --hybrid-menu-active-color: #ffffff;\n --hybrid-menu-active-background-color: #242424;\n --hybrid-menu-selected-link-border: 3px solid #ffffff;\n --hybrid-menu-selected-link-background-color: #3a3a3a;\n --hybrid-menu-selected-color:#ffffff;\n --hybrid-menu-disabled-link-color: #525252;\n --hybrid-sub-menu-color: #ffffff;\n --hybrid-sub-menu-disabled-color: #525252;\n --hybrid-sub-menu-focus-border: 1px solid #ffffff;\n --hybrid-sub-menu-focus-color: #525252;\n --hybrid-sub-menu-hover-background-color: #333333;\n --hybrid-sub-menu-hover-color: #ffffff;\n --hybrid-sub-menu-active-background-color: #242424;\n --hybrid-sub-menu-active-color: #ffffff;\n --hybrid-sub-menu-highlighted-color: #ffffff;\n --hybrid-sub-menu-highlighted-background-color: #3a3a3a;\n --hybrid-sub-menu-text-icon-color: #525252;\n --hybrid-sub-menu-toggle-icon-color: #525252;\n }\n }\n`;\nexport const styles = [menuStyle];\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import { ICON_POSITION } from './menu-link.contants.js';
|
|
3
3
|
import { IAction } from '../menu.types.js';
|
|
4
|
-
import '../../dropdown/hy-dropdown.component.js';
|
|
5
4
|
export declare class HyMenuLink extends LitElement {
|
|
6
5
|
static index: number;
|
|
7
6
|
private linkPosition;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-menu-link.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-menu-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAI9C,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"hy-menu-link.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-menu-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAI9C,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;IAGrB,OAAO,CAAC,YAAY,CAAU;IAG9B,IAAI,SAAgB;IAGpB,IAAI,EAAG,MAAM,CAAC;IAGd,QAAQ,UAAS;IAGjB,IAAI,SAAgB;IAGpB,YAAY,gBAAsB;IAGlC,QAAQ,UAAS;IAGjB,IAAI,EAAE;QAAC,IAAI,EAAC,MAAM,CAAC;QAAA,OAAO,EAAC,OAAO,EAAE,CAAA;KAAC,CAAA;IAGrC,MAAM,EAAE;QAAC,IAAI,EAAC,MAAM,CAAC;QAAA,KAAK,EAAC,MAAM,CAAA;KAAC,CAAA;IAElC,UAAU,EAAE,MAAM,EAAE,CAAC;IAGZ,iBAAiB,IAAI,IAAI;IAYzB,YAAY,IAAI,IAAI;IAM7B,UAAU,CAAC,KAAK,CAAC,EAAC,KAAK;IAYvB,aAAa,CAAC,CAAC,EAAC,WAAW;IAIlB,MAAM;IAsCf,OAAgB,MAAM,0BAAU;CACjC"}
|
|
@@ -10,7 +10,6 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
|
10
10
|
import { styles } from './menu-link.style.js';
|
|
11
11
|
import { EMPTY_STRING } from '../menu.constants.js';
|
|
12
12
|
import { ICON_POSITION } from './menu-link.contants.js';
|
|
13
|
-
import '../../dropdown/hy-dropdown.component.js';
|
|
14
13
|
let HyMenuLink = HyMenuLink_1 = class HyMenuLink extends LitElement {
|
|
15
14
|
constructor() {
|
|
16
15
|
super(...arguments);
|
|
@@ -51,7 +50,7 @@ let HyMenuLink = HyMenuLink_1 = class HyMenuLink extends LitElement {
|
|
|
51
50
|
render() {
|
|
52
51
|
var _a, _b;
|
|
53
52
|
return html `
|
|
54
|
-
<li tabindex="0" @
|
|
53
|
+
<li tabindex="0" @mousedown=${!this.disabled ? this._clickLink : nothing}>
|
|
55
54
|
<div class="icon-container" >
|
|
56
55
|
${this.icon
|
|
57
56
|
? html `${!this.text
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-menu-link.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-menu-link.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"hy-menu-link.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-menu-link.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './menu-link.style.js';\nimport {EMPTY_STRING} from '../menu.constants.js';\nimport {ICON_POSITION} from './menu-link.contants.js';\nimport { IAction } from '../menu.types.js';\n\n@customElement('hy-menu-link')\nexport class HyMenuLink extends LitElement {\n static index: number;\n\n @state()\n private linkPosition!: number;\n\n @property({reflect: true})\n text = EMPTY_STRING;\n\n @property()\n link!: string;\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({reflect: true})\n icon = EMPTY_STRING;\n\n @property({reflect: true})\n iconPosition = ICON_POSITION.LEFT;\n\n @property({type: Boolean, reflect: true})\n selected = false;\n\n @property()\n menu!:{icon:string,actions:IAction[]}\n\n @property()\n status!:{icon:string,label:string}\n\n optionPath!:number[];\n\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.optionPath=this.getAttribute('data-path')!.split('-').map((stringValue)=>+stringValue);\n\n const isTheFirstOption=this.optionPath.filter((path)=>path!=0).length==0\n if (isTheFirstOption) {\n HyMenuLink.index = 0;\n }\n this.linkPosition = HyMenuLink.index;\n HyMenuLink.index++;\n }\n\n override firstUpdated(): void {\n if (this.selected) {\n this._clickLink();\n }\n }\n\n _clickLink(event?:Event) {\n if((event?.target as HTMLElement)?.id !='action-icon'){\n this.dispatchEvent(\n new CustomEvent('selected-link', {\n detail: {index: this.linkPosition, value: this.text},\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n onActionClick(e:CustomEvent){\n this.dispatchEvent(new CustomEvent('action-click',{detail:{value:e.detail.value,path:this.optionPath},composed:true,bubbles:true}))\n }\n\n override render() {\n return html`\n <li tabindex=\"0\" @mousedown=${!this.disabled ? this._clickLink : nothing}>\n <div class=\"icon-container\" >\n ${this.icon\n ? html`${!this.text\n ? html`\n <div id=\"icon-only\">\n <hy-icon name=\"${this.icon}\"></hy-icon>\n </div>\n `\n : html`<hy-icon name=\"${this.icon}\"></hy-icon>`} `\n : nothing}\n \n </div>\n ${this.text\n ? html`\n <div class=\"action-text-container\">\n <div id=\"text-container\">\n <span>${this.text}</span>\n </div>\n <div class=\"icon-container\" >\n ${this.status?.icon?html`\n <hy-icon name=${this.status.icon} class=\"status-icon\"></hy-icon>\n `:nothing}\n ${this.menu?.actions?html`\n <hy-dropdown .options=${this.menu.actions} .trigger=${'hover'} @click-item=${this.onActionClick}>\n <hy-icon name=\"${this.menu.icon}\" id=\"action-icon\" ></hy-icon>\n </hy-dropdown>\n `:nothing}\n </div>\n \n </div>\n `\n : nothing}\n </li>\n `;\n }\n static override styles = styles;\n}\n"]}
|
package/templates/hy-sub-menu.js
CHANGED
|
@@ -47,7 +47,7 @@ let HySubMenu = class HySubMenu extends LitElement {
|
|
|
47
47
|
var _a, _b;
|
|
48
48
|
return html `
|
|
49
49
|
<ul tabindex="0">
|
|
50
|
-
<div @
|
|
50
|
+
<div @mousedown=${!this.disabled ? this._toggleMenu : nothing}>
|
|
51
51
|
${this.icon ? html `<hy-icon id="text-icon" name="${this.icon}"></hy-icon>` : nothing}
|
|
52
52
|
<span>${this.text}</span>
|
|
53
53
|
<div class="icons-container">
|
|
@@ -59,7 +59,7 @@ let HySubMenu = class HySubMenu extends LitElement {
|
|
|
59
59
|
<hy-icon name="${this.menu.icon}" class="action-icon"></hy-icon>
|
|
60
60
|
</hy-dropdown>
|
|
61
61
|
` : nothing}
|
|
62
|
-
<hy-icon id="toggle-icon" name="${this.isOpen ? 'angle-up' : 'angle-down'}" @
|
|
62
|
+
<hy-icon id="toggle-icon" name="${this.isOpen ? 'angle-up' : 'angle-down'}" @mousedown=${!this.disabled ? this.toggleIcon : nothing}></hy-icon>
|
|
63
63
|
</div>
|
|
64
64
|
</div>
|
|
65
65
|
<slot @select-menu=${this._handleSelectedChild} @selected-link=${this._handleSelectedChild} style="display:${this.isOpen ? nothing : 'none'};"></slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-sub-menu.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAIlD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAKE,SAAI,GAAG,YAAY,CAAC;QAGpB,aAAQ,GAAG,KAAK,CAAC;QAGjB,gBAAW,GAAG,KAAK,CAAC;QAGpB,WAAM,GAAG,KAAK,CAAC;IAgEjB,CAAC;IAtDU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAC,EAAE,CAAA,CAAC,WAAW,CAAC,CAAC;IAC9F,CAAC;IAED,WAAW,CAAC,KAAW;;QACrB,IAAG,CAAC,CAAA,MAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAsB,0CAAE,SAAS,KAAG,aAAa,CAAC,IAAG,CAAC,CAAA,MAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAsB,0CAAE,EAAE,KAAG,aAAa,CAAC,EAAC;YACtH,IAAG,CAAC,IAAI,CAAC,MAAM,EAAC;gBACd,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;aAC5B;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE;gBAChD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAC,KAAK,EAAC,IAAI,CAAC,IAAI,EAAC,IAAI,EAAC,IAAI,CAAC,UAAU,EAAC;aAC/C,CAAC,CAAC,CAAC;YACJ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;SACxB;IACD,CAAC;IAED,UAAU;QACR,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAA;IAC5B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAED,aAAa,CAAC,CAAa;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAC,EAAC,MAAM,EAAC,EAAC,KAAK,EAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAC,IAAI,EAAC,IAAI,CAAC,UAAU,EAAC,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,CAAC,CAAA;IACrI,CAAC;IAEQ,MAAM;;QACb,OAAO,IAAI,CAAA;;
|
|
1
|
+
{"version":3,"file":"hy-sub-menu.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './sub-menu.style.js';\nimport {EMPTY_STRING} from '../menu.constants.js';\nimport { IAction } from '../menu.types.js';\n\n@customElement('hy-sub-menu')\nexport class HySubMenu extends LitElement {\n @property()\n text!: string;\n\n @property({reflect: true})\n icon = EMPTY_STRING;\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({type: Boolean, reflect: true})\n highlighted = false;\n\n @state()\n isOpen = false;\n\n @property()\n menu!:{icon:string,actions:IAction[]}\n\n @property()\n status!:{icon:string,label:string};\n \n optionPath!:number[];\n \n override connectedCallback(): void {\n super.connectedCallback();\n this.optionPath=this.getAttribute('data-path')!.split('-').map((stringValue)=>+stringValue);\n }\n\n _toggleMenu(event:Event) {\n if(((event?.target as HTMLElement)?.className !='action-icon') &&((event?.target as HTMLElement)?.id !='toggle-icon')){\n if(!this.isOpen){\n this.isOpen = !this.isOpen;\n }\n this.dispatchEvent(new CustomEvent('select-menu', {\n bubbles: true,\n composed: true,\n detail: {value:this.text,path:this.optionPath},\n }));\n this.highlighted = true\n }\n }\n\n toggleIcon(){\n this.isOpen = !this.isOpen\n }\n\n _handleSelectedChild() {\n this.highlighted = true;\n }\n \n onActionClick(e:CustomEvent){\n this.dispatchEvent(new CustomEvent('action-click',{detail:{value:e.detail.value,path:this.optionPath},composed:true,bubbles:true}))\n }\n\n override render() {\n return html`\n <ul tabindex=\"0\">\n <div @mousedown=${!this.disabled ? this._toggleMenu : nothing}>\n ${this.icon ? html`<hy-icon id=\"text-icon\" name=\"${this.icon}\"></hy-icon>` : nothing}\n <span>${this.text}</span>\n <div class=\"icons-container\">\n ${this.status?.icon?html`\n <hy-icon name=${this.status.icon} class=\"status-icon\" ></hy-icon>\n `:nothing}\n ${this.menu?.actions?html`\n <hy-dropdown .options=${this.menu.actions} @click-item=${this.onActionClick} .trigger=${\"hover\"}>\n <hy-icon name=\"${this.menu.icon}\" class=\"action-icon\"></hy-icon>\n </hy-dropdown>\n `:nothing}\n <hy-icon id=\"toggle-icon\" name=\"${this.isOpen ? 'angle-up' : 'angle-down'}\" @mousedown=${!this.disabled ? this.toggleIcon : nothing}></hy-icon>\n </div>\n </div>\n <slot @select-menu=${this._handleSelectedChild} @selected-link=${this._handleSelectedChild} style=\"display:${this.isOpen ? nothing : 'none'};\"></slot>\n </ul>\n `;\n }\n static override styles = styles;\n}\n"]}
|