@nuralyui/menu 0.0.8 → 0.0.9
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.component.js +1 -1
- package/menu.component.js.map +1 -1
- package/menu.style.js +2 -2
- package/menu.style.js.map +1 -1
- package/package.json +1 -1
- package/templates/hy-sub-menu.d.ts +1 -0
- package/templates/hy-sub-menu.d.ts.map +1 -1
- package/templates/hy-sub-menu.js +7 -3
- package/templates/hy-sub-menu.js.map +1 -1
- package/templates/menu-link.style.d.ts.map +1 -1
- package/templates/menu-link.style.js +3 -1
- package/templates/menu-link.style.js.map +1 -1
- package/templates/sub-menu.style.d.ts.map +1 -1
- package/templates/sub-menu.style.js +7 -0
- package/templates/sub-menu.style.js.map +1 -1
package/menu.component.js
CHANGED
|
@@ -61,7 +61,7 @@ let HyMenuComponent = class HyMenuComponent extends LitElement {
|
|
|
61
61
|
.icon=${menu.icon}
|
|
62
62
|
.disabled=${menu.disabled}
|
|
63
63
|
.status=${menu.status}
|
|
64
|
-
|
|
64
|
+
?selected=${menu.selected}
|
|
65
65
|
data-path=${currentPath}
|
|
66
66
|
@select-menu=${this._selectMenu}>
|
|
67
67
|
${this._display(menu.children, [...path, index])}
|
package/menu.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, html} from 'lit';\nimport {customElement, property, queryAll} from 'lit/decorators.js';\nimport {styles} from './menu.style.js';\nimport {IMenu} from './menu.types.js';\nimport './templates/hy-menu-link.js';\nimport './templates/hy-sub-menu.js';\n@customElement('hy-menu')\nexport class HyMenuComponent extends LitElement {\n private _currentSelectedLink!: number;\n @queryAll('hy-menu-link')\n _menuLinks!: NodeListOf<HTMLElement>;\n\n @queryAll('hy-sub-menu')\n _subMenues!: NodeListOf<HTMLElement>;\n\n @property()\n items!: IMenu[];\n\n override firstUpdated(): void {\n this._getPreSelectedIndex();\n }\n\n _getPreSelectedIndex() {\n const listOfLinks = [...this._menuLinks.values()];\n this._currentSelectedLink = listOfLinks.findIndex((element) => element.hasAttribute('selected'));\n }\n\n _updateSelectedLink(updateSelectedLinkEvent: CustomEvent) {\n this._handleInitHighlighted();\n const newSelectedIndex = updateSelectedLinkEvent.detail.index;\n const value = updateSelectedLinkEvent.detail.value;\n if (this._currentSelectedLink >= 0) this._menuLinks[this._currentSelectedLink].removeAttribute('selected');\n this._menuLinks[newSelectedIndex].setAttribute('selected', 'true');\n this._currentSelectedLink = newSelectedIndex;\n const pathToOption = this._menuLinks[newSelectedIndex]\n .getAttribute('data-path')\n ?.split('-')\n .map((valueString) => +valueString);\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: {path: pathToOption, value},\n })\n );\n }\n\n _handleInitHighlighted() {\n this._subMenues.forEach((element) => {\n if (element.hasAttribute('highlighted')) {\n element.removeAttribute('highlighted');\n }\n });\n }\n _selectMenu(selectMenuEvent:CustomEvent){\n if (this._currentSelectedLink >= 0) \n {\n this._menuLinks[this._currentSelectedLink].removeAttribute('selected');\n this._currentSelectedLink = -1;\n }\n\n this._handleInitHighlighted()\n this.dispatchEvent(new CustomEvent('change',{bubbles:true,composed:true,detail:{path:selectMenuEvent.detail.path,value:selectMenuEvent.detail.value}}));\n }\n\n _display(items: IMenu[], path: number[] = []): any {\n return items.map((menu, index) => {\n const currentPath = [...path, index].join('-');\n if (menu.children) {\n return html`\n <hy-sub-menu \n .menu=${menu} \n .text=${menu.text} \n .icon=${menu.icon} \n .disabled=${menu.disabled} \n .status=${menu.status}\n ?selected=${menu.selected}\n data-path=${currentPath} \n @select-menu=${this._selectMenu}>\n ${this._display(menu.children, [...path, index])}\n </hy-sub-menu>\n `;\n } else {\n return html` <hy-menu-link\n data-path=${currentPath}\n icon=${menu.icon}\n .menu=${menu.menu}\n .status=${menu.status}\n text=${menu.text}\n link=${menu.link}\n iconposition=${menu.iconPosition}\n ?selected=${menu.selected}\n ?disabled=${menu.disabled}\n @selected-link=${this._updateSelectedLink}\n ></hy-menu-link>`;\n }\n });\n }\n\n override render() {\n return html`\n <ul>\n ${this._display(this.items)}\n </ul>\n `;\n }\n\n static override styles = [styles];\n}\n"]}
|
package/menu.style.js
CHANGED
|
@@ -19,7 +19,7 @@ const menuStyle = css `
|
|
|
19
19
|
--hybrid-menu-focus-border: 1px solid #0f62fe;
|
|
20
20
|
--hybrid-menu-focus-color: #000000;
|
|
21
21
|
--hybrid-menu-active-color: #000000;
|
|
22
|
-
--hybrid-menu-active-background-color: #
|
|
22
|
+
--hybrid-menu-active-background-color: #e0e0e0;
|
|
23
23
|
--hybrid-menu-hover-link-background-color: #f4f4f4;
|
|
24
24
|
--hybrid-menu-hover-link-color: #000000;
|
|
25
25
|
--hybrid-menu-selected-link-background-color: #e0e0e0;
|
|
@@ -34,7 +34,7 @@ const menuStyle = css `
|
|
|
34
34
|
--hybrid-menu-link-icon-only-width: 42px;
|
|
35
35
|
--hybrid-sub-menu-color: #000000;
|
|
36
36
|
--hybrid-sub-menu-disabled-color: #c6c6c6;
|
|
37
|
-
--hybrid-sub-menu-focus-color: #
|
|
37
|
+
--hybrid-sub-menu-focus-color: #e0e0e0;
|
|
38
38
|
--hybrid-sub-menu-focus-border: 1px solid #0f62fe;
|
|
39
39
|
--hybrid-sub-menu-hover-background-color: #f4f4f4;
|
|
40
40
|
--hybrid-sub-menu-hover-color: #161616;
|
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,
|
|
1
|
+
{"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../../src/components/menu/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,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: #e0e0e0;\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: #e0e0e0;\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: 5px;\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-sub-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,qBACa,SAAU,SAAQ,UAAU;IAEvC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,SAAgB;IAGpB,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAGpB,MAAM,UAAS;IAGf,OAAO,UAAS;IAGhB,IAAI,EAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,EAAE,CAAC;QAAC,QAAQ,EAAE,GAAG,CAAG;QAAC,IAAI,EAAG,GAAG,CAAE;QAAC,MAAM,EAAG,OAAO,CAAA;KAAC,CAAC;IAG3F,MAAM,EAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAEzC,UAAU,EAAG,MAAM,EAAE,CAAC;IAEb,iBAAiB,IAAI,IAAI;IAWlC,WAAW,CAAC,KAAK,EAAE,KAAK;IAcxB,UAAU;IAIV,oBAAoB;IAIpB,aAAa,CAAC,CAAC,EAAE,WAAW;cAIT,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAW3D,MAAM;IAsBf,OAAgB,MAAM,0BAAU;CACjC"}
|
|
1
|
+
{"version":3,"file":"hy-sub-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,qBACa,SAAU,SAAQ,UAAU;IAEvC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,SAAgB;IAGpB,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAGpB,MAAM,UAAS;IAGf,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,IAAI,EAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,EAAE,CAAC;QAAC,QAAQ,EAAE,GAAG,CAAG;QAAC,IAAI,EAAG,GAAG,CAAE;QAAC,MAAM,EAAG,OAAO,CAAA;KAAC,CAAC;IAG3F,MAAM,EAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAEzC,UAAU,EAAG,MAAM,EAAE,CAAC;IAEb,iBAAiB,IAAI,IAAI;IAWlC,WAAW,CAAC,KAAK,EAAE,KAAK;IAcxB,UAAU;IAIV,oBAAoB;IAIpB,aAAa,CAAC,CAAC,EAAE,WAAW;cAIT,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAW3D,MAAM;IAsBf,OAAgB,MAAM,0BAAU;CACjC"}
|
package/templates/hy-sub-menu.js
CHANGED
|
@@ -16,6 +16,7 @@ let HySubMenu = class HySubMenu extends LitElement {
|
|
|
16
16
|
this.highlighted = false;
|
|
17
17
|
this.isOpen = false;
|
|
18
18
|
this.hovered = false;
|
|
19
|
+
this.selected = false;
|
|
19
20
|
}
|
|
20
21
|
connectedCallback() {
|
|
21
22
|
super.connectedCallback();
|
|
@@ -90,7 +91,7 @@ __decorate([
|
|
|
90
91
|
property()
|
|
91
92
|
], HySubMenu.prototype, "text", void 0);
|
|
92
93
|
__decorate([
|
|
93
|
-
property({})
|
|
94
|
+
property({ reflect: true })
|
|
94
95
|
], HySubMenu.prototype, "icon", void 0);
|
|
95
96
|
__decorate([
|
|
96
97
|
property({ type: Boolean })
|
|
@@ -105,10 +106,13 @@ __decorate([
|
|
|
105
106
|
state()
|
|
106
107
|
], HySubMenu.prototype, "hovered", void 0);
|
|
107
108
|
__decorate([
|
|
108
|
-
property({ type:
|
|
109
|
+
property({ type: Boolean, reflect: true })
|
|
110
|
+
], HySubMenu.prototype, "selected", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
property({ type: Object })
|
|
109
113
|
], HySubMenu.prototype, "menu", void 0);
|
|
110
114
|
__decorate([
|
|
111
|
-
property({ type: Object
|
|
115
|
+
property({ type: Object })
|
|
112
116
|
], HySubMenu.prototype, "status", void 0);
|
|
113
117
|
HySubMenu = __decorate([
|
|
114
118
|
customElement('hy-sub-menu')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-sub-menu.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIpD,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;QAGf,YAAO,GAAG,KAAK,CAAC;
|
|
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, PropertyValues, 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 })\n disabled = false;\n\n @property({ type: Boolean})\n highlighted = false;\n\n @state()\n isOpen = false;\n\n @state()\n hovered = false;\n\n @property({type: Boolean, reflect: true})\n selected = false;\n \n @property({type: Object})\n menu!: { icon: string, actions: IAction[], children: any , menu : any , opened : boolean};\n\n @property({type: Object})\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 this.addEventListener('mouseenter', () => {\n this.hovered = true\n });\n this.addEventListener('mouseleave', () => {\n this.hovered = false\n });\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 console.log(e.detail)\n this.dispatchEvent(new CustomEvent('action-click', { detail: { value: e.detail.value, path: this.optionPath, additionalData: e.detail.additionalData}, composed: true, bubbles: true }))\n }\n protected override updated(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('menu')) {\n const previousMenu = _changedProperties.get('menu') as typeof this.menu;\n if (previousMenu?.opened !== this.menu.opened) {\n if(this.menu.opened){\n this.isOpen = this.menu.opened;\n }\n }\n }\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.highlighted || this.hovered) && this.menu?.menu.actions ? html`\n <hy-dropdown .options=${this.menu.menu.actions} @click-item=${this.onActionClick} .trigger=${\"click\"}>\n <hy-icon name=\"${this.menu.menu.icon}\" class=\"action-icon\"></hy-icon>\n </hy-dropdown>\n `: nothing}\n ${this.menu.children.length ? html`<hy-icon id=\"toggle-icon\" name=\"${this.isOpen ? 'angle-up' : 'angle-down'}\" @mousedown=${!this.disabled ? this.toggleIcon : nothing}></hy-icon>` : nothing}\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-link.style.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/menu-link.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"menu-link.style.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/menu-link.style.ts"],"names":[],"mappings":"AAgGA,eAAO,MAAM,MAAM,yBAAgB,CAAC"}
|
|
@@ -59,8 +59,10 @@ const menuLinkStyle = css `
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
:host(:not([disabled])) li:focus {
|
|
62
|
-
border: var(--hybrid-menu-focus-border);
|
|
62
|
+
/* border: var(--hybrid-menu-focus-border); */
|
|
63
|
+
background-color: var(--hybrid-menu-active-background-color);
|
|
63
64
|
color: var(--hybrid-menu-focus-color);
|
|
65
|
+
border-left: var(--hybrid-menu-selected-link-border);
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
:host(:not([disabled]):not([selected])) li:active {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-link.style.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/menu-link.style.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"menu-link.style.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/menu-link.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FxB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\nconst menuLinkStyle = css`\n :host([disabled]) li {\n color: var(--hybrid-menu-disabled-link-color);\n cursor: not-allowed;\n }\n\n :host(:not([disabled]):not([selected])) li {\n background-color: var(--hybrid-menu-link-background-color);\n }\n\n :host(:not([disabled]):not([selected])) li:hover {\n background-color: var(--hybrid-menu-hover-link-background-color);\n color: var(--hybrid-menu-hover-link-color);\n }\n\n :host([selected]) li:not(:focus) {\n background-color: var(--hybrid-menu-selected-link-background-color);\n color: var(--hybrid-menu-selected-color);\n border-left: var(--hybrid-menu-selected-link-border);\n }\n\n :host(:not([disabled])) li {\n color: var(--hybrid-menu-link-color);\n }\n\n :host([text='']) li {\n width: var(--hybrid-menu-link-icon-only-width);\n }\n hy-icon {\n --hybrid-icon-color: var(--hybrid-menu-link-icon-color);\n }\n .icon-container{\n display:flex;\n align-items:center;\n position:relative;\n }\n \n .status-icon{\n padding-right:0px;\n }\n\n li {\n list-style: none;\n display: flex;\n cursor: pointer;\n padding-bottom: var(--hybrid-menu-link-padding-y);\n padding-top: var(--hybrid-menu-link-padding-y);\n }\n .action-text-container{\n width:100%;\n display:flex;\n justify-content:space-between;\n }\n\n :host([iconPosition='right']) li {\n flex-direction: row-reverse;\n justify-content: space-between;\n }\n\n :host(:not([disabled])) li:focus {\n /* border: var(--hybrid-menu-focus-border); */\n background-color: var(--hybrid-menu-active-background-color);\n color: var(--hybrid-menu-focus-color);\n border-left: var(--hybrid-menu-selected-link-border);\n }\n\n :host(:not([disabled]):not([selected])) li:active {\n color: var(--hybrid-menu-active-color);\n background-color: var(--hybrid-menu-active-background-color);\n }\n\n :host([icon='']) #text-container {\n padding-left: var(--hybrid-menu-link-empty-icon-padding-left);\n }\n :host([icon=''][iconPosition='right']) #text-container {\n margin-right: auto;\n }\n\n :host([iconPosition='right']) #text-container,\n :host([iconPosition='right']) #icon-only {\n padding-left: var(--hybrid-menu-link-icon-right-padding-left);\n }\n\n #link-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n hy-icon {\n display: flex;\n align-items: center;\n padding-right: var(--hybrid-menu-link-icon-padding-right);\n padding-left: var(--hybrid-menu-link-icon-padding-left);\n }\n`;\nexport const styles = menuLinkStyle;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sub-menu.style.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/sub-menu.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sub-menu.style.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/sub-menu.style.ts"],"names":[],"mappings":"AAuFA,eAAO,MAAM,MAAM,yBAAe,CAAC"}
|
|
@@ -72,10 +72,17 @@ const subMenuStyle = css `
|
|
|
72
72
|
background-color: var(--hybrid-sub-menu-hover-background-color);
|
|
73
73
|
color: var(--hybrid-sub-menu-hover-color);
|
|
74
74
|
}
|
|
75
|
+
:host([selected]:not([disabled])) ul > div {
|
|
76
|
+
background-color: var(--hybrid-menu-selected-link-background-color);
|
|
77
|
+
color: var(--hybrid-menu-focus-color);
|
|
78
|
+
border-left: var(--hybrid-menu-selected-link-border);
|
|
79
|
+
}
|
|
75
80
|
:host(:not([disabled])) ul > div:active {
|
|
76
81
|
background-color: var(--hybrid-sub-menu-active-background-color);
|
|
77
82
|
color: var(--hybrid-sub-menu-active-color);
|
|
78
83
|
}
|
|
84
|
+
|
|
85
|
+
|
|
79
86
|
`;
|
|
80
87
|
export const styles = subMenuStyle;
|
|
81
88
|
//# sourceMappingURL=sub-menu.style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sub-menu.style.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/sub-menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"sub-menu.style.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/sub-menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFvB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst subMenuStyle = css`\n :host([disabled]) ul > div {\n color: var(--hybrid-sub-menu-disabled-color);\n cursor: not-allowed;\n }\n :host(:not([disabled])[highlighted]) ul > div {\n background: var(--hybrid-sub-menu-highlighted-background-color);\n color: var(--hybrid-sub-menu-highlighted-color);\n }\n :host(:not([disabled])) {\n color: var(--hybrid-sub-menu-color);\n }\n\n :host([icon]) span {\n margin-right: auto;\n padding-left: var(--hybrid-sub-menu-padding-left-text);\n }\n\n .icons-container{\n display:flex;\n align-items:center;\n position:relative;\n }\n .action-icon{\n margin-right:1px;\n --hybrid-icon-color: var(--hybrid-sub-menu-action-icon-color);\n }\n .status-icon{\n margin-right:10px;\n --hybrid-icon-color: var(--hybrid-sub-menu-status-icon-color);\n }\n\n #text-icon {\n --hybrid-icon-color: var(--hybrid-sub-menu-text-icon-color);\n }\n #toggle-icon {\n --hybrid-icon-color: var(--hybrid-sub-menu-toggle-icon-color);\n }\n\n ul {\n display: flex;\n flex-direction: column;\n margin-bottom: var(--hybrid-sub-menu-margin-y);\n margin-top: var(--hybrid-sub-menu-margin-y);\n padding-left: 0px;\n }\n\n :host([icon]) ::slotted(*) {\n padding-left: var(--hybrid-sub-menu-children-padding-left);\n }\n\n :host([icon='']) span {\n padding-left: var(--hybrid-sub-menu-empty-icon-padding-left-text);\n }\n\n ul > div {\n display: flex;\n justify-content: space-between;\n cursor: pointer;\n padding-top: var(--hybrid-sub-menu-padding-y);\n padding-bottom: var(--hybrid-sub-menu-padding-y);\n padding-left: var(--hybrid-sub-menu-padding-left);\n }\n\n :host(:not([disabled])) ul > div:focus {\n border: var(--hybrid-sub-menu-focus-border);\n color: var(--hybrid-sub-menu-focus-color);\n }\n\n :host(:not([disabled])) ul > div:hover {\n background-color: var(--hybrid-sub-menu-hover-background-color);\n color: var(--hybrid-sub-menu-hover-color);\n }\n :host([selected]:not([disabled])) ul > div {\n background-color: var(--hybrid-menu-selected-link-background-color);\n color: var(--hybrid-menu-focus-color);\n border-left: var(--hybrid-menu-selected-link-border);\n}\n :host(:not([disabled])) ul > div:active {\n background-color: var(--hybrid-sub-menu-active-background-color);\n color: var(--hybrid-sub-menu-active-color);\n }\n\n \n`;\nexport const styles = subMenuStyle;\n"]}
|