@spectrum-web-components/menu 0.16.16 → 0.16.18-overlay.10
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/package.json +10 -10
- package/src/Menu.d.ts +11 -3
- package/src/Menu.dev.js +135 -60
- package/src/Menu.dev.js.map +2 -2
- package/src/Menu.js +6 -3
- package/src/Menu.js.map +3 -3
- package/src/MenuGroup.dev.js +1 -3
- package/src/MenuGroup.dev.js.map +2 -2
- package/src/MenuGroup.js +3 -5
- package/src/MenuGroup.js.map +2 -2
- package/src/MenuItem.d.ts +14 -3
- package/src/MenuItem.dev.js +90 -85
- package/src/MenuItem.dev.js.map +3 -3
- package/src/MenuItem.js +31 -12
- package/src/MenuItem.js.map +3 -3
- package/src/menu-group.css.dev.js +1 -3
- package/src/menu-group.css.dev.js.map +2 -2
- package/src/menu-group.css.js +1 -3
- package/src/menu-group.css.js.map +2 -2
- package/src/menu-item.css.dev.js +8 -24
- package/src/menu-item.css.dev.js.map +2 -2
- package/src/menu-item.css.js +8 -24
- package/src/menu-item.css.js.map +2 -2
- package/src/menu.css.dev.js +4 -12
- package/src/menu.css.dev.js.map +2 -2
- package/src/menu.css.js +4 -12
- package/src/menu.css.js.map +2 -2
- package/src/spectrum-checkmark.css.dev.js +1 -5
- package/src/spectrum-checkmark.css.dev.js.map +2 -2
- package/src/spectrum-checkmark.css.js +1 -5
- package/src/spectrum-checkmark.css.js.map +2 -2
- package/src/spectrum-chevron.css.dev.js +1 -5
- package/src/spectrum-chevron.css.dev.js.map +2 -2
- package/src/spectrum-chevron.css.js +1 -5
- package/src/spectrum-chevron.css.js.map +2 -2
- package/src/spectrum-config.js +305 -0
- package/src/spectrum-menu-item.css.dev.js +7 -15
- package/src/spectrum-menu-item.css.dev.js.map +2 -2
- package/src/spectrum-menu-item.css.js +7 -15
- package/src/spectrum-menu-item.css.js.map +2 -2
- package/src/spectrum-menu-sectionHeading.css.dev.js +1 -3
- package/src/spectrum-menu-sectionHeading.css.dev.js.map +2 -2
- package/src/spectrum-menu-sectionHeading.css.js +1 -3
- package/src/spectrum-menu-sectionHeading.css.js.map +2 -2
- package/src/spectrum-menu.css.dev.js +3 -11
- package/src/spectrum-menu.css.dev.js.map +2 -2
- package/src/spectrum-menu.css.js +3 -11
- package/src/spectrum-menu.css.js.map +2 -2
- package/stories/submenu.stories.js +26 -20
- package/stories/submenu.stories.js.map +3 -3
- package/test/menu-group.test.js +14 -1
- package/test/menu-group.test.js.map +2 -2
- package/test/menu.test.js +7 -0
- package/test/menu.test.js.map +2 -2
- package/test/submenu.test.js +202 -69
- package/test/submenu.test.js.map +2 -2
- package/custom-elements.json +0 -2191
- package/src/spectrum-config.v1.js +0 -195
|
@@ -5,18 +5,10 @@ var(--spectrum-alias-border-size-thin)
|
|
|
5
5
|
))}:host([dir=rtl][selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(
|
|
6
6
|
--spectrum-popover-border-size,
|
|
7
7
|
var(--spectrum-alias-border-size-thin)
|
|
8
|
-
))}:host([selected]) .checkmark{display:block}.icon,::slotted([slot=icon]){align-self:flex-start;flex-shrink:0}:host([dir=ltr]) .icon+#label,:host([dir=ltr])
|
|
9
|
-
--spectrum-listitem-texticon-icon-gap
|
|
10
|
-
)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) slot[name=icon]+#label{margin-right:var(
|
|
11
|
-
--spectrum-listitem-texticon-icon-gap
|
|
12
|
-
)}.icon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap) - var(--spectrum-listitem-textthumbnail-padding-left) - var(
|
|
8
|
+
))}:host([selected]) .checkmark{display:block}.icon,::slotted([slot=icon]){align-self:flex-start;flex-shrink:0}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) [name=icon]+#label{margin-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) [name=icon]+#label{margin-right:var(--spectrum-listitem-texticon-icon-gap)}.icon+#label,[name=icon]+#label{width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap) - var(--spectrum-listitem-textthumbnail-padding-left) - var(
|
|
13
9
|
--spectrum-alias-workflow-icon-size-m,
|
|
14
10
|
var(--spectrum-global-dimension-size-225)
|
|
15
|
-
))}#label{flex:
|
|
16
|
-
--spectrum-listitem-texticon-icon-gap
|
|
17
|
-
)}:host([dir=rtl]) .checkmark,:host([dir=rtl]) .chevron{padding-right:var(
|
|
18
|
-
--spectrum-listitem-texticon-icon-gap
|
|
19
|
-
)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(
|
|
11
|
+
))}#label{flex:auto;-webkit-hyphens:auto;hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap))}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=ltr]) .checkmark,:host([dir=ltr]) .chevron{padding-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) .checkmark,:host([dir=rtl]) .chevron{padding-right:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(
|
|
20
12
|
--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)
|
|
21
13
|
);color:var(
|
|
22
14
|
--spectrum-listitem-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)
|
|
@@ -44,7 +36,7 @@ var(--spectrum-global-dimension-size-225)
|
|
|
44
36
|
--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)
|
|
45
37
|
);color:var(
|
|
46
38
|
--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
|
|
47
|
-
)}:host
|
|
39
|
+
)}:host .is-highlighted,:host .is-open,:host(:focus),:host(:hover){background-color:var(
|
|
48
40
|
--spectrum-listitem-m-texticon-background-color-hover,var(--spectrum-alias-background-color-hover-overlay)
|
|
49
41
|
);color:var(
|
|
50
42
|
--spectrum-listitem-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)
|
|
@@ -52,20 +44,20 @@ var(--spectrum-global-dimension-size-225)
|
|
|
52
44
|
--spectrum-listitem-m-texticon-text-color-selected,var(--spectrum-alias-component-text-color-default)
|
|
53
45
|
)}:host([selected]) .checkmark{color:var(
|
|
54
46
|
--spectrum-listitem-m-texticon-ui-icon-color-selected,var(--spectrum-alias-icon-color-selected)
|
|
55
|
-
)}:host(
|
|
47
|
+
)}:host([active]),:host:active{background-color:var(
|
|
56
48
|
--spectrum-listitem-m-texticon-background-color-down,var(--spectrum-alias-background-color-hover-overlay)
|
|
57
49
|
)}:host([disabled]){background-color:var(
|
|
58
50
|
--spectrum-listitem-m-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)
|
|
59
51
|
);background-image:none;color:var(
|
|
60
52
|
--spectrum-listitem-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
|
|
61
|
-
);cursor:default}@media (forced-colors:active){:host{--spectrum-listheading-text-color:ButtonText;--spectrum-listitem-m-texticon-background-color:ButtonFace;--spectrum-listitem-m-texticon-background-color-disabled:ButtonFace;--spectrum-listitem-m-texticon-background-color-down:ButtonFace;--spectrum-listitem-m-texticon-background-color-hover:Highlight;--spectrum-listitem-m-texticon-background-color-key-focus:Highlight;--spectrum-listitem-m-texticon-focus-indicator-color:Highlight;--spectrum-listitem-m-texticon-text-color:ButtonText;--spectrum-listitem-m-texticon-text-color-disabled:GrayText;--spectrum-listitem-m-texticon-text-color-hover:HighlightText;--spectrum-listitem-m-texticon-text-color-key-focus:HighlightText;--spectrum-listitem-m-texticon-text-color-selected:ButtonText;--spectrum-listitem-m-texticon-ui-icon-color-selected:Highlight;forced-color-adjust:none}:host(:not([disabled]).
|
|
53
|
+
);cursor:default}@media (forced-colors:active){:host{--spectrum-listheading-text-color:ButtonText;--spectrum-listitem-m-texticon-background-color:ButtonFace;--spectrum-listitem-m-texticon-background-color-disabled:ButtonFace;--spectrum-listitem-m-texticon-background-color-down:ButtonFace;--spectrum-listitem-m-texticon-background-color-hover:Highlight;--spectrum-listitem-m-texticon-background-color-key-focus:Highlight;--spectrum-listitem-m-texticon-focus-indicator-color:Highlight;--spectrum-listitem-m-texticon-text-color:ButtonText;--spectrum-listitem-m-texticon-text-color-disabled:GrayText;--spectrum-listitem-m-texticon-text-color-hover:HighlightText;--spectrum-listitem-m-texticon-text-color-key-focus:HighlightText;--spectrum-listitem-m-texticon-text-color-selected:ButtonText;--spectrum-listitem-m-texticon-ui-icon-color-selected:Highlight;forced-color-adjust:none}:host(:not([disabled])) .is-highlighted,:host(:not([disabled])) .is-open,:host(:not([disabled]).focus-visible),:host(:not([disabled]):focus),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(
|
|
62
54
|
--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)
|
|
63
55
|
);color:var(
|
|
64
56
|
--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
|
|
65
|
-
)}:host(:not([disabled]).is-highlighted
|
|
57
|
+
)}:host(:not([disabled])) .is-highlighted,:host(:not([disabled])) .is-open,:host(:not([disabled]):focus),:host(:not([disabled]):focus-visible),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(
|
|
66
58
|
--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)
|
|
67
59
|
);color:var(
|
|
68
60
|
--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
|
|
69
|
-
)}:host(:not([disabled]).focus-visible[selected]) .checkmark,:host(:not([disabled])
|
|
61
|
+
)}:host(:not([disabled]).focus-visible[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark,:host(:not([disabled])[selected]) .is-highlighted .checkmark,:host(:not([disabled])[selected]) .is-open .checkmark,:host(:not([disabled])[selected]:focus) .checkmark,:host(:not([disabled])[selected]:hover) .checkmark{color:HighlightText}:host(:not([disabled]).focus-visible[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark,:host(:not([disabled])[selected]) .is-highlighted .checkmark,:host(:not([disabled])[selected]) .is-open .checkmark,:host(:not([disabled])[selected]:focus) .checkmark,:host(:not([disabled])[selected]:hover) .checkmark{color:HighlightText}:host(:not([disabled]):focus-visible[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark,:host(:not([disabled])[selected]) .is-highlighted .checkmark,:host(:not([disabled])[selected]) .is-open .checkmark,:host(:not([disabled])[selected]:focus) .checkmark,:host(:not([disabled])[selected]:hover) .checkmark{color:HighlightText}}
|
|
70
62
|
`;export default o;
|
|
71
63
|
//# sourceMappingURL=spectrum-menu-item.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-menu-item.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([dir=ltr]){border-left:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host([dir=rtl]){border-right:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--spectrum-listitem-texticon-text-size);font-style:normal;font-weight:var(--spectrum-listitem-texticon-text-font-weight);margin:0;min-height:var(--spectrum-listitem-texticon-height);padding:var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-right) var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-left);position:relative;text-decoration:none}:host(:focus){outline:none}:host([dir=ltr][selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([selected]) .checkmark{display:block}.icon,::slotted([slot=icon]){align-self:flex-start;flex-shrink:0}:host([dir=ltr]) .icon+#label,:host([dir=ltr])
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([dir=ltr]){border-left:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host([dir=rtl]){border-right:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--spectrum-listitem-texticon-text-size);font-style:normal;font-weight:var(--spectrum-listitem-texticon-text-font-weight);margin:0;min-height:var(--spectrum-listitem-texticon-height);padding:var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-right) var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-left);position:relative;text-decoration:none}:host(:focus){outline:none}:host([dir=ltr][selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([selected]) .checkmark{display:block}.icon,::slotted([slot=icon]){align-self:flex-start;flex-shrink:0}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) [name=icon]+#label{margin-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) [name=icon]+#label{margin-right:var(--spectrum-listitem-texticon-icon-gap)}.icon+#label,[name=icon]+#label{width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap) - var(--spectrum-listitem-textthumbnail-padding-left) - var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n))}#label{flex:auto;-webkit-hyphens:auto;hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap))}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=ltr]) .checkmark,:host([dir=ltr]) .chevron{padding-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) .checkmark,:host([dir=rtl]) .chevron{padding-right:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-listitem-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host(.focus-visible),:host([focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(.focus-visible),:host([focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:focus-visible),:host([focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host .is-highlighted,:host .is-open,:host(:focus),:host(:hover){background-color:var(\n--spectrum-listitem-m-texticon-background-color-hover,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([selected]){color:var(\n--spectrum-listitem-m-texticon-text-color-selected,var(--spectrum-alias-component-text-color-default)\n)}:host([selected]) .checkmark{color:var(\n--spectrum-listitem-m-texticon-ui-icon-color-selected,var(--spectrum-alias-icon-color-selected)\n)}:host([active]),:host:active{background-color:var(\n--spectrum-listitem-m-texticon-background-color-down,var(--spectrum-alias-background-color-hover-overlay)\n)}:host([disabled]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);background-image:none;color:var(\n--spectrum-listitem-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);cursor:default}@media (forced-colors:active){:host{--spectrum-listheading-text-color:ButtonText;--spectrum-listitem-m-texticon-background-color:ButtonFace;--spectrum-listitem-m-texticon-background-color-disabled:ButtonFace;--spectrum-listitem-m-texticon-background-color-down:ButtonFace;--spectrum-listitem-m-texticon-background-color-hover:Highlight;--spectrum-listitem-m-texticon-background-color-key-focus:Highlight;--spectrum-listitem-m-texticon-focus-indicator-color:Highlight;--spectrum-listitem-m-texticon-text-color:ButtonText;--spectrum-listitem-m-texticon-text-color-disabled:GrayText;--spectrum-listitem-m-texticon-text-color-hover:HighlightText;--spectrum-listitem-m-texticon-text-color-key-focus:HighlightText;--spectrum-listitem-m-texticon-text-color-selected:ButtonText;--spectrum-listitem-m-texticon-ui-icon-color-selected:Highlight;forced-color-adjust:none}:host(:not([disabled])) .is-highlighted,:host(:not([disabled])) .is-open,:host(:not([disabled]).focus-visible),:host(:not([disabled]):focus),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:not([disabled])) .is-highlighted,:host(:not([disabled])) .is-open,:host(:not([disabled]):focus),:host(:not([disabled]):focus-visible),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:not([disabled]).focus-visible[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark,:host(:not([disabled])[selected]) .is-highlighted .checkmark,:host(:not([disabled])[selected]) .is-open .checkmark,:host(:not([disabled])[selected]:focus) .checkmark,:host(:not([disabled])[selected]:hover) .checkmark{color:HighlightText}:host(:not([disabled]).focus-visible[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark,:host(:not([disabled])[selected]) .is-highlighted .checkmark,:host(:not([disabled])[selected]) .is-open .checkmark,:host(:not([disabled])[selected]:focus) .checkmark,:host(:not([disabled])[selected]:hover) .checkmark{color:HighlightText}:host(:not([disabled]):focus-visible[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark,:host(:not([disabled])[selected]) .is-highlighted .checkmark,:host(:not([disabled])[selected]) .is-open .checkmark,:host(:not([disabled])[selected]:focus) .checkmark,:host(:not([disabled])[selected]:hover) .checkmark{color:HighlightText}}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8Df,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(
|
|
5
|
-
--spectrum-listitem-texticon-heading-letter-spacing
|
|
6
|
-
);line-height:var(--spectrum-listitem-texticon-heading-line-height);margin:var(--spectrum-listitem-texticon-heading-margin);padding:var(--spectrum-listitem-texticon-heading-padding);text-transform:var(--spectrum-listitem-texticon-heading-text-transform)}
|
|
4
|
+
.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(--spectrum-listitem-texticon-heading-letter-spacing);line-height:var(--spectrum-listitem-texticon-heading-line-height);margin:var(--spectrum-listitem-texticon-heading-margin);padding:var(--spectrum-listitem-texticon-heading-padding);text-transform:var(--spectrum-listitem-texticon-heading-text-transform)}
|
|
7
5
|
`;
|
|
8
6
|
export default styles;
|
|
9
7
|
//# sourceMappingURL=spectrum-menu-sectionHeading.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-menu-sectionHeading.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(
|
|
5
|
-
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(--spectrum-listitem-texticon-heading-letter-spacing);line-height:var(--spectrum-listitem-texticon-heading-line-height);margin:var(--spectrum-listitem-texticon-heading-margin);padding:var(--spectrum-listitem-texticon-heading-padding);text-transform:var(--spectrum-listitem-texticon-heading-text-transform)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
"use strict";import{css as t}from"@spectrum-web-components/base";const e=t`
|
|
2
|
-
.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(
|
|
3
|
-
--spectrum-listitem-texticon-heading-letter-spacing
|
|
4
|
-
);line-height:var(--spectrum-listitem-texticon-heading-line-height);margin:var(--spectrum-listitem-texticon-heading-margin);padding:var(--spectrum-listitem-texticon-heading-padding);text-transform:var(--spectrum-listitem-texticon-heading-text-transform)}
|
|
2
|
+
.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(--spectrum-listitem-texticon-heading-letter-spacing);line-height:var(--spectrum-listitem-texticon-heading-line-height);margin:var(--spectrum-listitem-texticon-heading-margin);padding:var(--spectrum-listitem-texticon-heading-padding);text-transform:var(--spectrum-listitem-texticon-heading-text-transform)}
|
|
5
3
|
`;export default e;
|
|
6
4
|
//# sourceMappingURL=spectrum-menu-sectionHeading.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-menu-sectionHeading.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(--spectrum-listitem-texticon-heading-letter-spacing);line-height:var(--spectrum-listitem-texticon-heading-line-height);margin:var(--spectrum-listitem-texticon-heading-margin);padding:var(--spectrum-listitem-texticon-heading-padding);text-transform:var(--spectrum-listitem-texticon-heading-text-transform)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host{--spectrum-menu-margin-x:var(
|
|
5
|
-
--spectrum-global-dimension-size-40
|
|
6
|
-
);--spectrum-listitem-texticon-heading-text-size:var(
|
|
4
|
+
:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-texticon-heading-text-size:var(
|
|
7
5
|
--spectrum-global-dimension-font-size-50
|
|
8
6
|
);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(
|
|
9
7
|
--spectrum-global-dimension-size-75
|
|
@@ -42,19 +40,13 @@ var(--spectrum-alias-border-size-thin)
|
|
|
42
40
|
--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)
|
|
43
41
|
);margin-left:0;margin-right:0;margin-top:var(
|
|
44
42
|
--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)
|
|
45
|
-
);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(
|
|
46
|
-
--spectrum-listitem-texticon-selectable-padding-right
|
|
47
|
-
)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(
|
|
48
|
-
--spectrum-listitem-texticon-selectable-padding-right
|
|
49
|
-
)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(
|
|
43
|
+
);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(
|
|
50
44
|
--spectrum-popover-border-size,
|
|
51
45
|
var(--spectrum-alias-border-size-thin)
|
|
52
46
|
))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(
|
|
53
47
|
--spectrum-popover-border-size,
|
|
54
48
|
var(--spectrum-alias-border-size-thin)
|
|
55
|
-
))}
|
|
56
|
-
--spectrum-global-color-gray-700
|
|
57
|
-
)}:host{background-color:var(
|
|
49
|
+
))}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700)}:host{background-color:var(
|
|
58
50
|
--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)
|
|
59
51
|
)}
|
|
60
52
|
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-menu.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-menu-margin-x:var(
|
|
5
|
-
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-texticon-heading-text-size:var(\n--spectrum-global-dimension-font-size-50\n);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(\n--spectrum-global-dimension-size-75\n) 0 0 0;--spectrum-listitem-texticon-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-texticon-padding-y:var(\n--spectrum-global-dimension-size-85\n);--spectrum-listitem-texticon-selectable-padding-right:calc(var(--spectrum-listitem-texticon-ui-icon-width) + var(--spectrum-listitem-texticon-ui-icon-gap) + var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n));--spectrum-listitem-texticon-label-line-height:1.3;--spectrum-listitem-texticon-heading-line-height:var(\n--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium)\n)}:host{--spectrum-listitem-texticon-padding-left:var(\n--spectrum-listitem-m-texticon-padding-left\n);--spectrum-listitem-textthumbnail-padding-left:var(\n--spectrum-listitem-m-textthumbnail-padding-left\n);--spectrum-listitem-texticon-text-size:var(\n--spectrum-listitem-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-listitem-texticon-text-font-weight:var(\n--spectrum-listitem-m-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-listitem-texticon-icon-gap:var(\n--spectrum-listitem-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-divider-padding:var(\n--spectrum-listitem-m-texticon-divider-padding,var(--spectrum-global-dimension-static-size-40)\n);--spectrum-listitem-texticon-ui-icon-margin-top:var(\n--spectrum-listitem-m-texticon-ui-icon-margin-top,var(--spectrum-global-dimension-size-125)\n);--spectrum-listitem-texticon-ui-icon-width:var(\n--spectrum-listitem-m-texticon-ui-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-listitem-texticon-ui-icon-gap:var(\n--spectrum-listitem-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-padding-right:var(\n--spectrum-listitem-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-listitem-texticon-focus-indicator-size:var(\n--spectrum-listitem-m-texticon-focus-indicator-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-listitem-texticon-height:var(\n--spectrum-listitem-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host{box-sizing:border-box;display:inline-block;list-style-type:none;margin-bottom:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-menu.css.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
"use strict";import{css as t}from"@spectrum-web-components/base";const i=t`
|
|
2
|
-
:host{--spectrum-menu-margin-x:var(
|
|
3
|
-
--spectrum-global-dimension-size-40
|
|
4
|
-
);--spectrum-listitem-texticon-heading-text-size:var(
|
|
2
|
+
:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-texticon-heading-text-size:var(
|
|
5
3
|
--spectrum-global-dimension-font-size-50
|
|
6
4
|
);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(
|
|
7
5
|
--spectrum-global-dimension-size-75
|
|
@@ -40,19 +38,13 @@ var(--spectrum-alias-border-size-thin)
|
|
|
40
38
|
--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)
|
|
41
39
|
);margin-left:0;margin-right:0;margin-top:var(
|
|
42
40
|
--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)
|
|
43
|
-
);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(
|
|
44
|
-
--spectrum-listitem-texticon-selectable-padding-right
|
|
45
|
-
)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(
|
|
46
|
-
--spectrum-listitem-texticon-selectable-padding-right
|
|
47
|
-
)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(
|
|
41
|
+
);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(
|
|
48
42
|
--spectrum-popover-border-size,
|
|
49
43
|
var(--spectrum-alias-border-size-thin)
|
|
50
44
|
))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(
|
|
51
45
|
--spectrum-popover-border-size,
|
|
52
46
|
var(--spectrum-alias-border-size-thin)
|
|
53
|
-
))}
|
|
54
|
-
--spectrum-global-color-gray-700
|
|
55
|
-
)}:host{background-color:var(
|
|
47
|
+
))}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700)}:host{background-color:var(
|
|
56
48
|
--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)
|
|
57
49
|
)}
|
|
58
50
|
`;export default i;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-menu.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-menu-margin-x:var(
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-texticon-heading-text-size:var(\n--spectrum-global-dimension-font-size-50\n);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(\n--spectrum-global-dimension-size-75\n) 0 0 0;--spectrum-listitem-texticon-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-texticon-padding-y:var(\n--spectrum-global-dimension-size-85\n);--spectrum-listitem-texticon-selectable-padding-right:calc(var(--spectrum-listitem-texticon-ui-icon-width) + var(--spectrum-listitem-texticon-ui-icon-gap) + var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n));--spectrum-listitem-texticon-label-line-height:1.3;--spectrum-listitem-texticon-heading-line-height:var(\n--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium)\n)}:host{--spectrum-listitem-texticon-padding-left:var(\n--spectrum-listitem-m-texticon-padding-left\n);--spectrum-listitem-textthumbnail-padding-left:var(\n--spectrum-listitem-m-textthumbnail-padding-left\n);--spectrum-listitem-texticon-text-size:var(\n--spectrum-listitem-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-listitem-texticon-text-font-weight:var(\n--spectrum-listitem-m-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-listitem-texticon-icon-gap:var(\n--spectrum-listitem-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-divider-padding:var(\n--spectrum-listitem-m-texticon-divider-padding,var(--spectrum-global-dimension-static-size-40)\n);--spectrum-listitem-texticon-ui-icon-margin-top:var(\n--spectrum-listitem-m-texticon-ui-icon-margin-top,var(--spectrum-global-dimension-size-125)\n);--spectrum-listitem-texticon-ui-icon-width:var(\n--spectrum-listitem-m-texticon-ui-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-listitem-texticon-ui-icon-gap:var(\n--spectrum-listitem-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-padding-right:var(\n--spectrum-listitem-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-listitem-texticon-focus-indicator-size:var(\n--spectrum-listitem-m-texticon-focus-indicator-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-listitem-texticon-height:var(\n--spectrum-listitem-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host{box-sizing:border-box;display:inline-block;list-style-type:none;margin-bottom:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkDf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { html, render } from "@spectrum-web-components/base";
|
|
3
3
|
import "@spectrum-web-components/action-menu/sp-action-menu.js";
|
|
4
|
+
import "@spectrum-web-components/menu/sp-menu.js";
|
|
4
5
|
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
5
6
|
import "@spectrum-web-components/menu/sp-menu-divider.js";
|
|
6
7
|
import "@spectrum-web-components/menu/sp-menu-group.js";
|
|
@@ -18,34 +19,37 @@ class SubmenuReady extends HTMLElement {
|
|
|
18
19
|
constructor() {
|
|
19
20
|
super();
|
|
20
21
|
this.handleMenuOpened = async (event) => {
|
|
22
|
+
this.menu.removeEventListener("sp-opened", this.handleMenuOpened);
|
|
21
23
|
await nextFrame();
|
|
22
24
|
await event.target.updateComplete;
|
|
23
|
-
|
|
24
|
-
if (!
|
|
25
|
+
this.submenu = document.querySelector("#submenu-item-1");
|
|
26
|
+
if (!this.submenu) {
|
|
25
27
|
return;
|
|
26
28
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
});
|
|
30
|
-
submenu2.dispatchEvent(
|
|
31
|
-
new PointerEvent("pointerenter", { bubbles: true, composed: true })
|
|
32
|
-
);
|
|
29
|
+
this.submenu.addEventListener("sp-opened", this.handleSubmenuOpened);
|
|
30
|
+
this.submenu.click();
|
|
33
31
|
};
|
|
34
32
|
this.handleSubmenuOpened = async (event) => {
|
|
33
|
+
this.submenu.removeEventListener("sp-opened", this.handleSubmenuOpened);
|
|
35
34
|
await nextFrame();
|
|
36
35
|
await event.target.updateComplete;
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
this.submenuChild = document.querySelector(
|
|
37
|
+
"#submenu-item-2"
|
|
38
|
+
);
|
|
39
|
+
if (!this.submenuChild) {
|
|
39
40
|
return;
|
|
40
41
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
submenu2.dispatchEvent(
|
|
45
|
-
new PointerEvent("pointerenter", { bubbles: true, composed: true })
|
|
42
|
+
this.submenuChild.addEventListener(
|
|
43
|
+
"sp-opened",
|
|
44
|
+
this.handleSubmenuChildOpened
|
|
46
45
|
);
|
|
46
|
+
this.submenuChild.click();
|
|
47
47
|
};
|
|
48
48
|
this.handleSubmenuChildOpened = async (event) => {
|
|
49
|
+
this.submenuChild.removeEventListener(
|
|
50
|
+
"sp-opened",
|
|
51
|
+
this.handleSubmenuChildOpened
|
|
52
|
+
);
|
|
49
53
|
await nextFrame();
|
|
50
54
|
await event.target.updateComplete;
|
|
51
55
|
this.ready(true);
|
|
@@ -58,11 +62,9 @@ class SubmenuReady extends HTMLElement {
|
|
|
58
62
|
}
|
|
59
63
|
async setup() {
|
|
60
64
|
await nextFrame();
|
|
61
|
-
|
|
62
|
-
menu.addEventListener("sp-opened", this.handleMenuOpened
|
|
63
|
-
|
|
64
|
-
});
|
|
65
|
-
menu.open = true;
|
|
65
|
+
this.menu = document.querySelector(`sp-action-menu`);
|
|
66
|
+
this.menu.addEventListener("sp-opened", this.handleMenuOpened);
|
|
67
|
+
this.menu.open = true;
|
|
66
68
|
}
|
|
67
69
|
get updateComplete() {
|
|
68
70
|
return this.readyPromise;
|
|
@@ -266,8 +268,12 @@ export const contextMenu = () => {
|
|
|
266
268
|
valueEls.first.textContent = "";
|
|
267
269
|
};
|
|
268
270
|
const handleRootChange = (event) => {
|
|
271
|
+
var _a;
|
|
269
272
|
const valueEls = getValueEls();
|
|
270
273
|
valueEls.root.textContent = event.target.value;
|
|
274
|
+
(_a = event.target.parentElement) == null ? void 0 : _a.dispatchEvent(
|
|
275
|
+
new Event("close", { bubbles: true })
|
|
276
|
+
);
|
|
271
277
|
};
|
|
272
278
|
const handleFirstDescendantChange = (event) => {
|
|
273
279
|
const valueEls = getValueEls();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["submenu.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, render, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { openOverlay, VirtualTrigger } from '@spectrum-web-components/overlay';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu/Submenu',\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass SubmenuReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n\n const menu = document.querySelector(`sp-action-menu`) as ActionMenu;\n menu.addEventListener('sp-opened', this.handleMenuOpened, {\n once: true,\n });\n menu.open = true;\n }\n\n handleMenuOpened = async (event: Event): Promise<void> => {\n await nextFrame();\n await (event.target as ActionMenu).updateComplete;\n\n const submenu = document.querySelector('#submenu-item-1') as MenuItem;\n if (!submenu) {\n return;\n }\n submenu.addEventListener('sp-opened', this.handleSubmenuOpened, {\n once: true,\n });\n submenu.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true, composed: true })\n );\n };\n\n handleSubmenuOpened = async (event: Event): Promise<void> => {\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n const submenu = document.querySelector('#submenu-item-2') as MenuItem;\n if (!submenu) {\n return;\n }\n submenu.addEventListener('sp-opened', this.handleSubmenuChildOpened, {\n once: true,\n });\n submenu.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true, composed: true })\n );\n };\n\n handleSubmenuChildOpened = async (event: Event): Promise<void> => {\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('submenu-ready', SubmenuReady);\n\nconst submenuDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <submenu-ready></submenu-ready>\n `;\n};\n\nexport const submenu = (): TemplateResult => {\n const getValueEls = (): {\n root: HTMLElement;\n first: HTMLElement;\n second: HTMLElement;\n } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n second: document.querySelector('#second-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n valueEls.second.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n const handleSecondDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.second.textContent = event.target.selected[0] || '';\n };\n return html`\n <sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group\n @change=${() => console.log('group change')}\n role=\"none\"\n >\n <span slot=\"header\">New York</span>\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>S. Oxford St</sp-menu-item>\n <sp-menu-item>S. Portland Ave</sp-menu-item>\n <sp-menu-item>S. Elliot Pl</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item>Williamsburg</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Manhattan\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n Second descendant value:\n <span id=\"second-value\"></span>\n <br />\n </div>\n `;\n};\n\nsubmenu.decorators = [submenuDecorator];\n\nexport const contextMenu = (): TemplateResult => {\n const contextMenuTemplate = (): TemplateResult => html`\n <sp-popover\n style=\"max-width: 33vw;\"\n @click=${(event: Event) =>\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n >\n <sp-menu @change=${handleRootChange}>\n <sp-menu-group>\n <span slot=\"header\">Options</span>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Select layer\n <sp-menu\n slot=\"submenu\"\n selects=\"single\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item selected>Ellipse 1</sp-menu-item>\n <sp-menu-item>Rectangle</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Group\n <span slot=\"value\">\u2318\u200BG</span>\n </sp-menu-item>\n <sp-menu-item>\n Unlock\n <span slot=\"value\">\u2318\u200BL</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Bring to front\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Bring forward\n <span slot=\"value\">\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Send backward\n <span slot=\"value\">\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-item>\n Send to back\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Delete\n <span slot=\"value\">DEL</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n const pointerenter = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n const trigger = event.target as HTMLElement;\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const fragment = document.createDocumentFragment();\n render(contextMenuTemplate(), fragment);\n const popover = fragment.querySelector('sp-popover') as Popover;\n clearValues();\n openOverlay(trigger, 'modal', popover, {\n placement: 'right-start',\n receivesFocus: 'auto',\n virtualTrigger,\n });\n };\n const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n active-overlay::part(theme) {\n --swc-menu-width: 200px;\n }\n </style>\n <div class=\"app-root\" @contextmenu=${pointerenter}>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n </div>\n </div>\n `;\n};\n"],
|
|
5
|
-
"mappings": ";AAYA,SAAS,MAAM,cAA8B;AAE7C,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,aAAa,sBAAsB;AAE5C,OAAO;AACP,OAAO;AAIP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEA,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEA,MAAM,qBAAqB,YAAY;AAAA,EAGnC,cAAc;AACV,UAAM;
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, render, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { openOverlay, VirtualTrigger } from '@spectrum-web-components/overlay';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu/Submenu',\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass SubmenuReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n menu!: ActionMenu;\n submenu!: MenuItem;\n submenuChild!: MenuItem;\n\n async setup(): Promise<void> {\n await nextFrame();\n\n this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;\n this.menu.addEventListener('sp-opened', this.handleMenuOpened);\n this.menu.open = true;\n }\n\n handleMenuOpened = async (event: Event): Promise<void> => {\n this.menu.removeEventListener('sp-opened', this.handleMenuOpened);\n await nextFrame();\n await (event.target as ActionMenu).updateComplete;\n\n this.submenu = document.querySelector('#submenu-item-1') as MenuItem;\n if (!this.submenu) {\n return;\n }\n\n this.submenu.addEventListener('sp-opened', this.handleSubmenuOpened);\n this.submenu.click();\n };\n\n handleSubmenuOpened = async (event: Event): Promise<void> => {\n this.submenu.removeEventListener('sp-opened', this.handleSubmenuOpened);\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.submenuChild = document.querySelector(\n '#submenu-item-2'\n ) as MenuItem;\n if (!this.submenuChild) {\n return;\n }\n this.submenuChild.addEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n this.submenuChild.click();\n };\n\n handleSubmenuChildOpened = async (event: Event): Promise<void> => {\n this.submenuChild.removeEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('submenu-ready', SubmenuReady);\n\nconst submenuDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <submenu-ready></submenu-ready>\n `;\n};\n\nexport const submenu = (): TemplateResult => {\n const getValueEls = (): {\n root: HTMLElement;\n first: HTMLElement;\n second: HTMLElement;\n } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n second: document.querySelector('#second-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n valueEls.second.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n const handleSecondDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.second.textContent = event.target.selected[0] || '';\n };\n return html`\n <sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group\n @change=${() => console.log('group change')}\n role=\"none\"\n >\n <span slot=\"header\">New York</span>\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>S. Oxford St</sp-menu-item>\n <sp-menu-item>S. Portland Ave</sp-menu-item>\n <sp-menu-item>S. Elliot Pl</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item>Williamsburg</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Manhattan\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n Second descendant value:\n <span id=\"second-value\"></span>\n <br />\n </div>\n `;\n};\n\nsubmenu.decorators = [submenuDecorator];\n\nexport const contextMenu = (): TemplateResult => {\n const contextMenuTemplate = (): TemplateResult => html`\n <sp-popover\n style=\"max-width: 33vw;\"\n @click=${(event: Event) =>\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n >\n <sp-menu @change=${handleRootChange}>\n <sp-menu-group>\n <span slot=\"header\">Options</span>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Select layer\n <sp-menu\n slot=\"submenu\"\n selects=\"single\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item selected>Ellipse 1</sp-menu-item>\n <sp-menu-item>Rectangle</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Group\n <span slot=\"value\">\u2318\u200BG</span>\n </sp-menu-item>\n <sp-menu-item>\n Unlock\n <span slot=\"value\">\u2318\u200BL</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Bring to front\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Bring forward\n <span slot=\"value\">\u2318\u200B\u200B]</span>\n </sp-menu-item>\n <sp-menu-item>\n Send backward\n <span slot=\"value\">\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-item>\n Send to back\n <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B[</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Delete\n <span slot=\"value\">DEL</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n const pointerenter = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n const trigger = event.target as HTMLElement;\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const fragment = document.createDocumentFragment();\n render(contextMenuTemplate(), fragment);\n const popover = fragment.querySelector('sp-popover') as Popover;\n clearValues();\n openOverlay(trigger, 'modal', popover, {\n placement: 'right-start',\n receivesFocus: 'auto',\n virtualTrigger,\n });\n };\n const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n event.target.parentElement?.dispatchEvent(\n new Event('close', { bubbles: true })\n );\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n active-overlay::part(theme) {\n --swc-menu-width: 200px;\n }\n </style>\n <div class=\"app-root\" @contextmenu=${pointerenter}>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n </div>\n </div>\n `;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/test/menu-group.test.js
CHANGED
|
@@ -93,26 +93,38 @@ describe("Menu group", () => {
|
|
|
93
93
|
html`
|
|
94
94
|
<sp-menu selects="single">
|
|
95
95
|
<sp-menu-item selected>First</sp-menu-item>
|
|
96
|
+
<!-- 1 -->
|
|
96
97
|
<sp-menu-item>Second</sp-menu-item>
|
|
98
|
+
<!-- 1 -->
|
|
97
99
|
<sp-menu-group id="mg-multi" selects="multiple">
|
|
98
100
|
<sp-menu-item selected>Multi1</sp-menu-item>
|
|
101
|
+
<!-- 2 -->
|
|
99
102
|
<sp-menu-item>Multi2</sp-menu-item>
|
|
103
|
+
<!-- 2 -->
|
|
100
104
|
<sp-menu-group id="mg-sub-inherit" selects="inherit">
|
|
101
105
|
<sp-menu-item>SubInherit1</sp-menu-item>
|
|
106
|
+
<!-- 2 -->
|
|
102
107
|
<sp-menu-item>SubInherit2</sp-menu-item>
|
|
108
|
+
<!-- 2 -->
|
|
103
109
|
</sp-menu-group>
|
|
104
110
|
</sp-menu-group>
|
|
105
111
|
<sp-menu-group id="mg-single" selects="single">
|
|
106
112
|
<sp-menu-item selected>Single1</sp-menu-item>
|
|
113
|
+
<!-- 3 -->
|
|
107
114
|
<sp-menu-item>Single2</sp-menu-item>
|
|
115
|
+
<!-- 3 -->
|
|
108
116
|
</sp-menu-group>
|
|
109
117
|
<sp-menu-group id="mg-none">
|
|
110
118
|
<sp-menu-item>Inherit1</sp-menu-item>
|
|
119
|
+
<!-- - -->
|
|
111
120
|
<sp-menu-item>Inherit2</sp-menu-item>
|
|
121
|
+
<!-- - -->
|
|
112
122
|
</sp-menu-group>
|
|
113
123
|
<sp-menu-group id="mg-inherit" selects="inherit">
|
|
114
124
|
<sp-menu-item>Inherit1</sp-menu-item>
|
|
125
|
+
<!-- 1 -->
|
|
115
126
|
<sp-menu-item>Inherit2</sp-menu-item>
|
|
127
|
+
<!-- 1 -->
|
|
116
128
|
</sp-menu-group>
|
|
117
129
|
</sp-menu>
|
|
118
130
|
`
|
|
@@ -219,6 +231,7 @@ describe("Menu group", () => {
|
|
|
219
231
|
expect(el.value).to.equal("Inherit1");
|
|
220
232
|
expect(el.selectedItems.length).to.equal(1);
|
|
221
233
|
noneItem2.click();
|
|
234
|
+
await elementUpdated(el);
|
|
222
235
|
await elementUpdated(noneGroup);
|
|
223
236
|
await elementUpdated(noneItem2);
|
|
224
237
|
expect(inheritItem1.selected).to.be.true;
|
|
@@ -229,8 +242,8 @@ describe("Menu group", () => {
|
|
|
229
242
|
await elementUpdated(singleGroup);
|
|
230
243
|
await elementUpdated(singleItem1);
|
|
231
244
|
await elementUpdated(singleItem2);
|
|
232
|
-
expect(singleItem1.selected, "first item not selected").to.be.false;
|
|
233
245
|
expect(singleItem2.selected).to.be.true;
|
|
246
|
+
expect(singleItem1.selected, "first item not selected").to.be.false;
|
|
234
247
|
expect(inheritItem1.selected).to.be.true;
|
|
235
248
|
expect(singleItem1.getAttribute("aria-checked")).to.equal("false");
|
|
236
249
|
expect(singleItem2.getAttribute("aria-checked")).to.equal("true");
|