@spectrum-web-components/overlay 0.42.4 → 0.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +48 -0
- package/package.json +7 -7
- package/src/HoverController.dev.js +1 -2
- package/src/HoverController.dev.js.map +2 -2
- package/src/HoverController.js +1 -1
- package/src/HoverController.js.map +2 -2
- package/src/InteractionController.d.ts +1 -0
- package/src/InteractionController.dev.js +5 -1
- package/src/InteractionController.dev.js.map +2 -2
- package/src/InteractionController.js +1 -1
- package/src/InteractionController.js.map +2 -2
- package/src/overlay-trigger-directive.d.ts +2 -1
- package/src/overlay-trigger-directive.dev.js +16 -6
- package/src/overlay-trigger-directive.dev.js.map +2 -2
- package/src/overlay-trigger-directive.js +1 -1
- package/src/overlay-trigger-directive.js.map +3 -3
- package/stories/overlay-directive.stories.js +95 -3
- package/stories/overlay-directive.stories.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -672,6 +672,19 @@
|
|
|
672
672
|
"module": "src/InteractionController.js"
|
|
673
673
|
}
|
|
674
674
|
},
|
|
675
|
+
{
|
|
676
|
+
"kind": "field",
|
|
677
|
+
"name": "isLazilyOpen",
|
|
678
|
+
"type": {
|
|
679
|
+
"text": "boolean"
|
|
680
|
+
},
|
|
681
|
+
"privacy": "private",
|
|
682
|
+
"default": "false",
|
|
683
|
+
"inheritedFrom": {
|
|
684
|
+
"name": "InteractionController",
|
|
685
|
+
"module": "src/InteractionController.js"
|
|
686
|
+
}
|
|
687
|
+
},
|
|
675
688
|
{
|
|
676
689
|
"kind": "field",
|
|
677
690
|
"name": "open",
|
|
@@ -1060,6 +1073,19 @@
|
|
|
1060
1073
|
"module": "src/InteractionController.js"
|
|
1061
1074
|
}
|
|
1062
1075
|
},
|
|
1076
|
+
{
|
|
1077
|
+
"kind": "field",
|
|
1078
|
+
"name": "isLazilyOpen",
|
|
1079
|
+
"type": {
|
|
1080
|
+
"text": "boolean"
|
|
1081
|
+
},
|
|
1082
|
+
"privacy": "private",
|
|
1083
|
+
"default": "false",
|
|
1084
|
+
"inheritedFrom": {
|
|
1085
|
+
"name": "InteractionController",
|
|
1086
|
+
"module": "src/InteractionController.js"
|
|
1087
|
+
}
|
|
1088
|
+
},
|
|
1063
1089
|
{
|
|
1064
1090
|
"kind": "field",
|
|
1065
1091
|
"name": "open",
|
|
@@ -1227,6 +1253,15 @@
|
|
|
1227
1253
|
"privacy": "private",
|
|
1228
1254
|
"default": "handleOverlayReady"
|
|
1229
1255
|
},
|
|
1256
|
+
{
|
|
1257
|
+
"kind": "field",
|
|
1258
|
+
"name": "isLazilyOpen",
|
|
1259
|
+
"type": {
|
|
1260
|
+
"text": "boolean"
|
|
1261
|
+
},
|
|
1262
|
+
"privacy": "private",
|
|
1263
|
+
"default": "false"
|
|
1264
|
+
},
|
|
1230
1265
|
{
|
|
1231
1266
|
"kind": "field",
|
|
1232
1267
|
"name": "open",
|
|
@@ -1572,6 +1607,19 @@
|
|
|
1572
1607
|
"module": "src/InteractionController.js"
|
|
1573
1608
|
}
|
|
1574
1609
|
},
|
|
1610
|
+
{
|
|
1611
|
+
"kind": "field",
|
|
1612
|
+
"name": "isLazilyOpen",
|
|
1613
|
+
"type": {
|
|
1614
|
+
"text": "boolean"
|
|
1615
|
+
},
|
|
1616
|
+
"privacy": "private",
|
|
1617
|
+
"default": "false",
|
|
1618
|
+
"inheritedFrom": {
|
|
1619
|
+
"name": "InteractionController",
|
|
1620
|
+
"module": "src/InteractionController.js"
|
|
1621
|
+
}
|
|
1622
|
+
},
|
|
1575
1623
|
{
|
|
1576
1624
|
"kind": "field",
|
|
1577
1625
|
"name": "open",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/overlay",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.43.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -160,11 +160,11 @@
|
|
|
160
160
|
"dependencies": {
|
|
161
161
|
"@floating-ui/dom": "^1.6.1",
|
|
162
162
|
"@floating-ui/utils": "^0.2.1",
|
|
163
|
-
"@spectrum-web-components/action-button": "^0.
|
|
164
|
-
"@spectrum-web-components/base": "^0.
|
|
165
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
166
|
-
"@spectrum-web-components/shared": "^0.
|
|
167
|
-
"@spectrum-web-components/theme": "^0.
|
|
163
|
+
"@spectrum-web-components/action-button": "^0.43.0",
|
|
164
|
+
"@spectrum-web-components/base": "^0.43.0",
|
|
165
|
+
"@spectrum-web-components/reactive-controllers": "^0.43.0",
|
|
166
|
+
"@spectrum-web-components/shared": "^0.43.0",
|
|
167
|
+
"@spectrum-web-components/theme": "^0.43.0"
|
|
168
168
|
},
|
|
169
169
|
"types": "./src/index.d.ts",
|
|
170
170
|
"customElements": "custom-elements.json",
|
|
@@ -176,5 +176,5 @@
|
|
|
176
176
|
"./stories/overlay-story-components.js",
|
|
177
177
|
"./**/*.dev.js"
|
|
178
178
|
],
|
|
179
|
-
"gitHead": "
|
|
179
|
+
"gitHead": "dd5179a5eae5fe69ac77c5e10faed912d0e780e3"
|
|
180
180
|
}
|
|
@@ -16,8 +16,7 @@ export class HoverController extends InteractionController {
|
|
|
16
16
|
this.pointerentered = false;
|
|
17
17
|
}
|
|
18
18
|
handleTargetFocusin() {
|
|
19
|
-
|
|
20
|
-
if (!((_a = document.activeElement) == null ? void 0 : _a.matches(":focus-visible"))) {
|
|
19
|
+
if (!this.target.matches(":focus-visible")) {
|
|
21
20
|
return;
|
|
22
21
|
}
|
|
23
22
|
this.open = true;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["HoverController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 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 { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\nimport { noop } from './AbstractOverlay.dev.js'\n\nconst HOVER_DELAY = 300;\n\nexport class HoverController extends InteractionController {\n override type = InteractionTypes.hover;\n\n private elementIds: string[] = [];\n\n focusedin = false;\n\n private hoverTimeout?: ReturnType<typeof setTimeout>;\n\n pointerentered = false;\n\n handleTargetFocusin(): void {\n
|
|
5
|
-
"mappings": ";AAYA,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AAEzB;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,YAAY;AAErB,MAAM,cAAc;AAEb,aAAM,wBAAwB,sBAAsB;AAAA,EAApD;AAAA;AACH,SAAS,OAAO,iBAAiB;AAEjC,SAAQ,aAAuB,CAAC;AAEhC,qBAAY;AAIZ,0BAAiB;AAAA;AAAA,EAEjB,sBAA4B;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\nimport { noop } from './AbstractOverlay.dev.js'\n\nconst HOVER_DELAY = 300;\n\nexport class HoverController extends InteractionController {\n override type = InteractionTypes.hover;\n\n private elementIds: string[] = [];\n\n focusedin = false;\n\n private hoverTimeout?: ReturnType<typeof setTimeout>;\n\n pointerentered = false;\n\n handleTargetFocusin(): void {\n if (!this.target.matches(':focus-visible')) {\n return;\n }\n this.open = true;\n this.focusedin = true;\n }\n\n handleTargetFocusout(): void {\n this.focusedin = false;\n if (this.pointerentered) return;\n this.open = false;\n }\n\n handleTargetPointerenter(): void {\n if (this.hoverTimeout) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = undefined;\n }\n if (this.overlay?.disabled) return;\n this.open = true;\n this.pointerentered = true;\n }\n\n handleTargetPointerleave(): void {\n this.doPointerleave();\n }\n\n // set a timeout once the pointer enters and the overlay is shown\n // give the user time to enter the overlay\n handleHostPointerenter(): void {\n if (this.hoverTimeout) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = undefined;\n }\n }\n\n handleHostPointerleave(): void {\n this.doPointerleave();\n }\n\n override prepareDescription(): void {\n // require \"content\" to apply relationship\n if (!this.overlay.elements.length) return;\n\n const triggerRoot = this.target.getRootNode();\n const contentRoot = this.overlay.elements[0].getRootNode();\n const overlayRoot = this.overlay.getRootNode();\n if (triggerRoot === overlayRoot) {\n this.prepareOverlayRelativeDescription();\n } else if (triggerRoot === contentRoot) {\n this.prepareContentRelativeDescription();\n }\n }\n\n private prepareOverlayRelativeDescription(): void {\n const releaseDescription = conditionAttributeWithId(\n this.target,\n 'aria-describedby',\n [this.overlay.id]\n );\n this.releaseDescription = () => {\n releaseDescription();\n this.releaseDescription = noop;\n };\n }\n\n private prepareContentRelativeDescription(): void {\n const elementIds: string[] = [];\n const appliedIds = this.overlay.elements.map((el) => {\n elementIds.push(el.id);\n if (!el.id) {\n el.id = `${this.overlay.tagName.toLowerCase()}-helper-${randomID()}`;\n }\n return el.id;\n });\n this.elementIds = elementIds;\n const releaseDescription = conditionAttributeWithId(\n this.target,\n 'aria-describedby',\n appliedIds\n );\n this.releaseDescription = () => {\n releaseDescription();\n this.overlay.elements.map((el, index) => {\n el.id = this.elementIds[index];\n });\n this.releaseDescription = noop;\n };\n }\n\n protected doPointerleave(): void {\n this.pointerentered = false;\n const triggerElement = this.target as HTMLElement;\n if (this.focusedin && triggerElement.matches(':focus-visible')) return;\n\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n }, HOVER_DELAY);\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'focusin',\n () => this.handleTargetFocusin(),\n { signal }\n );\n this.target.addEventListener(\n 'focusout',\n () => this.handleTargetFocusout(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerenter',\n () => this.handleTargetPointerenter(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerleave',\n () => this.handleTargetPointerleave(),\n { signal }\n );\n if (this.overlay) {\n this.initOverlay();\n }\n }\n\n override initOverlay(): void {\n if (!this.abortController) {\n return;\n }\n const { signal } = this.abortController;\n this.overlay.addEventListener(\n 'pointerenter',\n () => this.handleHostPointerenter(),\n { signal }\n );\n this.overlay.addEventListener(\n 'pointerleave',\n () => this.handleHostPointerleave(),\n { signal }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AAEzB;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,YAAY;AAErB,MAAM,cAAc;AAEb,aAAM,wBAAwB,sBAAsB;AAAA,EAApD;AAAA;AACH,SAAS,OAAO,iBAAiB;AAEjC,SAAQ,aAAuB,CAAC;AAEhC,qBAAY;AAIZ,0BAAiB;AAAA;AAAA,EAEjB,sBAA4B;AACxB,QAAI,CAAC,KAAK,OAAO,QAAQ,gBAAgB,GAAG;AACxC;AAAA,IACJ;AACA,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACrB;AAAA,EAEA,uBAA6B;AACzB,SAAK,YAAY;AACjB,QAAI,KAAK,eAAgB;AACzB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,2BAAiC;AAhDrC;AAiDQ,QAAI,KAAK,cAAc;AACnB,mBAAa,KAAK,YAAY;AAC9B,WAAK,eAAe;AAAA,IACxB;AACA,SAAI,UAAK,YAAL,mBAAc,SAAU;AAC5B,SAAK,OAAO;AACZ,SAAK,iBAAiB;AAAA,EAC1B;AAAA,EAEA,2BAAiC;AAC7B,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA,EAIA,yBAA+B;AAC3B,QAAI,KAAK,cAAc;AACnB,mBAAa,KAAK,YAAY;AAC9B,WAAK,eAAe;AAAA,IACxB;AAAA,EACJ;AAAA,EAEA,yBAA+B;AAC3B,SAAK,eAAe;AAAA,EACxB;AAAA,EAES,qBAA2B;AAEhC,QAAI,CAAC,KAAK,QAAQ,SAAS,OAAQ;AAEnC,UAAM,cAAc,KAAK,OAAO,YAAY;AAC5C,UAAM,cAAc,KAAK,QAAQ,SAAS,CAAC,EAAE,YAAY;AACzD,UAAM,cAAc,KAAK,QAAQ,YAAY;AAC7C,QAAI,gBAAgB,aAAa;AAC7B,WAAK,kCAAkC;AAAA,IAC3C,WAAW,gBAAgB,aAAa;AACpC,WAAK,kCAAkC;AAAA,IAC3C;AAAA,EACJ;AAAA,EAEQ,oCAA0C;AAC9C,UAAM,qBAAqB;AAAA,MACvB,KAAK;AAAA,MACL;AAAA,MACA,CAAC,KAAK,QAAQ,EAAE;AAAA,IACpB;AACA,SAAK,qBAAqB,MAAM;AAC5B,yBAAmB;AACnB,WAAK,qBAAqB;AAAA,IAC9B;AAAA,EACJ;AAAA,EAEQ,oCAA0C;AAC9C,UAAM,aAAuB,CAAC;AAC9B,UAAM,aAAa,KAAK,QAAQ,SAAS,IAAI,CAAC,OAAO;AACjD,iBAAW,KAAK,GAAG,EAAE;AACrB,UAAI,CAAC,GAAG,IAAI;AACR,WAAG,KAAK,GAAG,KAAK,QAAQ,QAAQ,YAAY,CAAC,WAAW,SAAS,CAAC;AAAA,MACtE;AACA,aAAO,GAAG;AAAA,IACd,CAAC;AACD,SAAK,aAAa;AAClB,UAAM,qBAAqB;AAAA,MACvB,KAAK;AAAA,MACL;AAAA,MACA;AAAA,IACJ;AACA,SAAK,qBAAqB,MAAM;AAC5B,yBAAmB;AACnB,WAAK,QAAQ,SAAS,IAAI,CAAC,IAAI,UAAU;AACrC,WAAG,KAAK,KAAK,WAAW,KAAK;AAAA,MACjC,CAAC;AACD,WAAK,qBAAqB;AAAA,IAC9B;AAAA,EACJ;AAAA,EAEU,iBAAuB;AAC7B,SAAK,iBAAiB;AACtB,UAAM,iBAAiB,KAAK;AAC5B,QAAI,KAAK,aAAa,eAAe,QAAQ,gBAAgB,EAAG;AAEhE,SAAK,eAAe,WAAW,MAAM;AACjC,WAAK,OAAO;AAAA,IAChB,GAAG,WAAW;AAAA,EAClB;AAAA,EAES,OAAa;AAvI1B;AAyIQ,eAAK,oBAAL,mBAAsB;AACtB,SAAK,kBAAkB,IAAI,gBAAgB;AAC3C,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,SAAK,OAAO;AAAA,MACR;AAAA,MACA,MAAM,KAAK,oBAAoB;AAAA,MAC/B,EAAE,OAAO;AAAA,IACb;AACA,SAAK,OAAO;AAAA,MACR;AAAA,MACA,MAAM,KAAK,qBAAqB;AAAA,MAChC,EAAE,OAAO;AAAA,IACb;AACA,SAAK,OAAO;AAAA,MACR;AAAA,MACA,MAAM,KAAK,yBAAyB;AAAA,MACpC,EAAE,OAAO;AAAA,IACb;AACA,SAAK,OAAO;AAAA,MACR;AAAA,MACA,MAAM,KAAK,yBAAyB;AAAA,MACpC,EAAE,OAAO;AAAA,IACb;AACA,QAAI,KAAK,SAAS;AACd,WAAK,YAAY;AAAA,IACrB;AAAA,EACJ;AAAA,EAES,cAAoB;AACzB,QAAI,CAAC,KAAK,iBAAiB;AACvB;AAAA,IACJ;AACA,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,SAAK,QAAQ;AAAA,MACT;AAAA,MACA,MAAM,KAAK,uBAAuB;AAAA,MAClC,EAAE,OAAO;AAAA,IACb;AACA,SAAK,QAAQ;AAAA,MACT;AAAA,MACA,MAAM,KAAK,uBAAuB;AAAA,MAClC,EAAE,OAAO;AAAA,IACb;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/HoverController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{conditionAttributeWithId as o}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";import{randomID as a}from"@spectrum-web-components/shared/src/random-id.js";import{InteractionController as l,InteractionTypes as h}from"./InteractionController.js";import{noop as s}from"./AbstractOverlay.js";const d=300;export class HoverController extends l{constructor(){super(...arguments);this.type=h.hover;this.elementIds=[];this.focusedin=!1;this.pointerentered=!1}handleTargetFocusin(){
|
|
1
|
+
"use strict";import{conditionAttributeWithId as o}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";import{randomID as a}from"@spectrum-web-components/shared/src/random-id.js";import{InteractionController as l,InteractionTypes as h}from"./InteractionController.js";import{noop as s}from"./AbstractOverlay.js";const d=300;export class HoverController extends l{constructor(){super(...arguments);this.type=h.hover;this.elementIds=[];this.focusedin=!1;this.pointerentered=!1}handleTargetFocusin(){this.target.matches(":focus-visible")&&(this.open=!0,this.focusedin=!0)}handleTargetFocusout(){this.focusedin=!1,!this.pointerentered&&(this.open=!1)}handleTargetPointerenter(){var e;this.hoverTimeout&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=void 0),!((e=this.overlay)!=null&&e.disabled)&&(this.open=!0,this.pointerentered=!0)}handleTargetPointerleave(){this.doPointerleave()}handleHostPointerenter(){this.hoverTimeout&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=void 0)}handleHostPointerleave(){this.doPointerleave()}prepareDescription(){if(!this.overlay.elements.length)return;const e=this.target.getRootNode(),t=this.overlay.elements[0].getRootNode(),r=this.overlay.getRootNode();e===r?this.prepareOverlayRelativeDescription():e===t&&this.prepareContentRelativeDescription()}prepareOverlayRelativeDescription(){const e=o(this.target,"aria-describedby",[this.overlay.id]);this.releaseDescription=()=>{e(),this.releaseDescription=s}}prepareContentRelativeDescription(){const e=[],t=this.overlay.elements.map(i=>(e.push(i.id),i.id||(i.id=`${this.overlay.tagName.toLowerCase()}-helper-${a()}`),i.id));this.elementIds=e;const r=o(this.target,"aria-describedby",t);this.releaseDescription=()=>{r(),this.overlay.elements.map((i,n)=>{i.id=this.elementIds[n]}),this.releaseDescription=s}}doPointerleave(){this.pointerentered=!1;const e=this.target;this.focusedin&&e.matches(":focus-visible")||(this.hoverTimeout=setTimeout(()=>{this.open=!1},d))}init(){var t;(t=this.abortController)==null||t.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("focusin",()=>this.handleTargetFocusin(),{signal:e}),this.target.addEventListener("focusout",()=>this.handleTargetFocusout(),{signal:e}),this.target.addEventListener("pointerenter",()=>this.handleTargetPointerenter(),{signal:e}),this.target.addEventListener("pointerleave",()=>this.handleTargetPointerleave(),{signal:e}),this.overlay&&this.initOverlay()}initOverlay(){if(!this.abortController)return;const{signal:e}=this.abortController;this.overlay.addEventListener("pointerenter",()=>this.handleHostPointerenter(),{signal:e}),this.overlay.addEventListener("pointerleave",()=>this.handleHostPointerleave(),{signal:e})}}
|
|
2
2
|
//# sourceMappingURL=HoverController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["HoverController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 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 { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\nimport { noop } from './AbstractOverlay.js';\n\nconst HOVER_DELAY = 300;\n\nexport class HoverController extends InteractionController {\n override type = InteractionTypes.hover;\n\n private elementIds: string[] = [];\n\n focusedin = false;\n\n private hoverTimeout?: ReturnType<typeof setTimeout>;\n\n pointerentered = false;\n\n handleTargetFocusin(): void {\n
|
|
5
|
-
"mappings": "aAYA,OAAS,4BAAAA,MAAgC,mEACzC,OAAS,YAAAC,MAAgB,mDAEzB,OACI,yBAAAC,EACA,oBAAAC,MACG,6BACP,OAAS,QAAAC,MAAY,uBAErB,MAAMC,EAAc,IAEb,aAAM,wBAAwBH,CAAsB,CAApD,kCACH,KAAS,KAAOC,EAAiB,MAEjC,KAAQ,WAAuB,CAAC,EAEhC,eAAY,GAIZ,oBAAiB,GAEjB,qBAA4B,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\nimport { noop } from './AbstractOverlay.js';\n\nconst HOVER_DELAY = 300;\n\nexport class HoverController extends InteractionController {\n override type = InteractionTypes.hover;\n\n private elementIds: string[] = [];\n\n focusedin = false;\n\n private hoverTimeout?: ReturnType<typeof setTimeout>;\n\n pointerentered = false;\n\n handleTargetFocusin(): void {\n if (!this.target.matches(':focus-visible')) {\n return;\n }\n this.open = true;\n this.focusedin = true;\n }\n\n handleTargetFocusout(): void {\n this.focusedin = false;\n if (this.pointerentered) return;\n this.open = false;\n }\n\n handleTargetPointerenter(): void {\n if (this.hoverTimeout) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = undefined;\n }\n if (this.overlay?.disabled) return;\n this.open = true;\n this.pointerentered = true;\n }\n\n handleTargetPointerleave(): void {\n this.doPointerleave();\n }\n\n // set a timeout once the pointer enters and the overlay is shown\n // give the user time to enter the overlay\n handleHostPointerenter(): void {\n if (this.hoverTimeout) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = undefined;\n }\n }\n\n handleHostPointerleave(): void {\n this.doPointerleave();\n }\n\n override prepareDescription(): void {\n // require \"content\" to apply relationship\n if (!this.overlay.elements.length) return;\n\n const triggerRoot = this.target.getRootNode();\n const contentRoot = this.overlay.elements[0].getRootNode();\n const overlayRoot = this.overlay.getRootNode();\n if (triggerRoot === overlayRoot) {\n this.prepareOverlayRelativeDescription();\n } else if (triggerRoot === contentRoot) {\n this.prepareContentRelativeDescription();\n }\n }\n\n private prepareOverlayRelativeDescription(): void {\n const releaseDescription = conditionAttributeWithId(\n this.target,\n 'aria-describedby',\n [this.overlay.id]\n );\n this.releaseDescription = () => {\n releaseDescription();\n this.releaseDescription = noop;\n };\n }\n\n private prepareContentRelativeDescription(): void {\n const elementIds: string[] = [];\n const appliedIds = this.overlay.elements.map((el) => {\n elementIds.push(el.id);\n if (!el.id) {\n el.id = `${this.overlay.tagName.toLowerCase()}-helper-${randomID()}`;\n }\n return el.id;\n });\n this.elementIds = elementIds;\n const releaseDescription = conditionAttributeWithId(\n this.target,\n 'aria-describedby',\n appliedIds\n );\n this.releaseDescription = () => {\n releaseDescription();\n this.overlay.elements.map((el, index) => {\n el.id = this.elementIds[index];\n });\n this.releaseDescription = noop;\n };\n }\n\n protected doPointerleave(): void {\n this.pointerentered = false;\n const triggerElement = this.target as HTMLElement;\n if (this.focusedin && triggerElement.matches(':focus-visible')) return;\n\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n }, HOVER_DELAY);\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'focusin',\n () => this.handleTargetFocusin(),\n { signal }\n );\n this.target.addEventListener(\n 'focusout',\n () => this.handleTargetFocusout(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerenter',\n () => this.handleTargetPointerenter(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerleave',\n () => this.handleTargetPointerleave(),\n { signal }\n );\n if (this.overlay) {\n this.initOverlay();\n }\n }\n\n override initOverlay(): void {\n if (!this.abortController) {\n return;\n }\n const { signal } = this.abortController;\n this.overlay.addEventListener(\n 'pointerenter',\n () => this.handleHostPointerenter(),\n { signal }\n );\n this.overlay.addEventListener(\n 'pointerleave',\n () => this.handleHostPointerleave(),\n { signal }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["conditionAttributeWithId", "randomID", "InteractionController", "InteractionTypes", "noop", "HOVER_DELAY", "_a", "triggerRoot", "contentRoot", "overlayRoot", "releaseDescription", "elementIds", "appliedIds", "el", "index", "triggerElement", "signal"]
|
|
7
7
|
}
|
|
@@ -15,6 +15,7 @@ export declare class InteractionController implements ReactiveController {
|
|
|
15
15
|
abortController: AbortController;
|
|
16
16
|
get activelyOpening(): boolean;
|
|
17
17
|
private handleOverlayReady?;
|
|
18
|
+
private isLazilyOpen;
|
|
18
19
|
get open(): boolean;
|
|
19
20
|
/**
|
|
20
21
|
* Set `open` against the associated Overlay lazily.
|
|
@@ -8,6 +8,8 @@ export var InteractionTypes = /* @__PURE__ */ ((InteractionTypes2) => {
|
|
|
8
8
|
export class InteractionController {
|
|
9
9
|
constructor(target, { overlay, isPersistent, handleOverlayReady }) {
|
|
10
10
|
this.target = target;
|
|
11
|
+
// Holds optimistic open state when an Overlay is not yet present
|
|
12
|
+
this.isLazilyOpen = false;
|
|
11
13
|
this.isPersistent = false;
|
|
12
14
|
this.isPersistent = !!isPersistent;
|
|
13
15
|
this.handleOverlayReady = handleOverlayReady;
|
|
@@ -21,12 +23,14 @@ export class InteractionController {
|
|
|
21
23
|
}
|
|
22
24
|
get open() {
|
|
23
25
|
var _a, _b;
|
|
24
|
-
return (_b = (_a = this.overlay) == null ? void 0 : _a.open) != null ? _b :
|
|
26
|
+
return (_b = (_a = this.overlay) == null ? void 0 : _a.open) != null ? _b : this.isLazilyOpen;
|
|
25
27
|
}
|
|
26
28
|
/**
|
|
27
29
|
* Set `open` against the associated Overlay lazily.
|
|
28
30
|
*/
|
|
29
31
|
set open(open) {
|
|
32
|
+
if (open === this.open) return;
|
|
33
|
+
this.isLazilyOpen = open;
|
|
30
34
|
if (this.overlay) {
|
|
31
35
|
this.overlay.open = open;
|
|
32
36
|
return;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["InteractionController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 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 type { ReactiveController } from '@spectrum-web-components/base';\nimport { AbstractOverlay } from './AbstractOverlay.dev.js'\n\nexport enum InteractionTypes {\n 'click',\n 'hover',\n 'longpress',\n}\n\nexport type ControllerOptions = {\n overlay?: AbstractOverlay;\n handleOverlayReady?: (overlay: AbstractOverlay) => void;\n isPersistent?: boolean;\n};\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private handleOverlayReady?: (overlay: AbstractOverlay) => void;\n\n public get open(): boolean {\n return this.overlay?.open ??
|
|
5
|
-
"mappings": ";AAeO,WAAK,mBAAL,kBAAKA,sBAAL;AACH,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AAHQ,SAAAA;AAAA,GAAA;AAYL,aAAM,sBAAoD;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 type { ReactiveController } from '@spectrum-web-components/base';\nimport { AbstractOverlay } from './AbstractOverlay.dev.js'\n\nexport enum InteractionTypes {\n 'click',\n 'hover',\n 'longpress',\n}\n\nexport type ControllerOptions = {\n overlay?: AbstractOverlay;\n handleOverlayReady?: (overlay: AbstractOverlay) => void;\n isPersistent?: boolean;\n};\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private handleOverlayReady?: (overlay: AbstractOverlay) => void;\n\n // Holds optimistic open state when an Overlay is not yet present\n private isLazilyOpen = false;\n\n public get open(): boolean {\n return this.overlay?.open ?? this.isLazilyOpen;\n }\n\n /**\n * Set `open` against the associated Overlay lazily.\n */\n public set open(open: boolean) {\n if (open === this.open) return;\n this.isLazilyOpen = open;\n if (this.overlay) {\n // If there already is an Overlay, apply the value of `open` directly.\n this.overlay.open = open;\n return;\n }\n if (!open) {\n // When `open` moves to `false` and there is not yet an Overlay,\n // assume that no Overlay and a closed Overlay are the same and return early.\n return;\n }\n // When there is no Overlay and `open` is moving to `true`, lazily import/create\n // an Overlay and apply that state to it.\n customElements\n .whenDefined('sp-overlay')\n .then(async (): Promise<void> => {\n const { Overlay } = await import('./Overlay.dev.js');\n this.overlay = new Overlay();\n this.overlay.open = true;\n });\n import('@spectrum-web-components/overlay/sp-overlay.js');\n }\n\n public get overlay(): AbstractOverlay {\n return this._overlay;\n }\n\n public set overlay(overlay: AbstractOverlay | undefined) {\n if (!overlay) return;\n if (this.overlay === overlay) return;\n if (this.overlay) {\n this.overlay.removeController(this);\n }\n this._overlay = overlay;\n this.overlay.addController(this);\n this.initOverlay();\n this.prepareDescription(this.target);\n this.handleOverlayReady?.(this.overlay);\n }\n\n private _overlay!: AbstractOverlay;\n\n protected isPersistent = false;\n\n type!: InteractionTypes;\n\n constructor(\n public target: HTMLElement,\n { overlay, isPersistent, handleOverlayReady }: ControllerOptions\n ) {\n this.isPersistent = !!isPersistent;\n this.handleOverlayReady = handleOverlayReady;\n if (this.isPersistent) {\n this.init();\n }\n this.overlay = overlay;\n }\n\n prepareDescription(_: HTMLElement): void {}\n\n releaseDescription(): void {}\n\n shouldCompleteOpen(): void {}\n\n /* c8 ignore next 3 */\n init(): void {\n // Abstract init() method.\n }\n\n /* c8 ignore next 3 */\n initOverlay(): void {\n // Abstract initOverlay() method.\n }\n\n abort(): void {\n this.releaseDescription();\n this.abortController?.abort();\n }\n\n hostConnected(): void {\n this.init();\n }\n\n hostDisconnected(): void {\n if (!this.isPersistent) {\n this.abort();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAeO,WAAK,mBAAL,kBAAKA,sBAAL;AACH,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AAHQ,SAAAA;AAAA,GAAA;AAYL,aAAM,sBAAoD;AAAA,EAmE7D,YACW,QACP,EAAE,SAAS,cAAc,mBAAmB,GAC9C;AAFS;AA1DX;AAAA,SAAQ,eAAe;AAqDvB,SAAU,eAAe;AAQrB,SAAK,eAAe,CAAC,CAAC;AACtB,SAAK,qBAAqB;AAC1B,QAAI,KAAK,cAAc;AACnB,WAAK,KAAK;AAAA,IACd;AACA,SAAK,UAAU;AAAA,EACnB;AAAA,EA1EA,IAAI,kBAA2B;AAC3B,WAAO;AAAA,EACX;AAAA,EAOA,IAAW,OAAgB;AAvC/B;AAwCQ,YAAO,gBAAK,YAAL,mBAAc,SAAd,YAAsB,KAAK;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAW,KAAK,MAAe;AAC3B,QAAI,SAAS,KAAK,KAAM;AACxB,SAAK,eAAe;AACpB,QAAI,KAAK,SAAS;AAEd,WAAK,QAAQ,OAAO;AACpB;AAAA,IACJ;AACA,QAAI,CAAC,MAAM;AAGP;AAAA,IACJ;AAGA,mBACK,YAAY,YAAY,EACxB,KAAK,YAA2B;AAC7B,YAAM,EAAE,QAAQ,IAAI,MAAM,OAAO,kBAAkB;AACnD,WAAK,UAAU,IAAI,QAAQ;AAC3B,WAAK,QAAQ,OAAO;AAAA,IACxB,CAAC;AACL,WAAO,gDAAgD;AAAA,EAC3D;AAAA,EAEA,IAAW,UAA2B;AAClC,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,QAAQ,SAAsC;AA3E7D;AA4EQ,QAAI,CAAC,QAAS;AACd,QAAI,KAAK,YAAY,QAAS;AAC9B,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,iBAAiB,IAAI;AAAA,IACtC;AACA,SAAK,WAAW;AAChB,SAAK,QAAQ,cAAc,IAAI;AAC/B,SAAK,YAAY;AACjB,SAAK,mBAAmB,KAAK,MAAM;AACnC,eAAK,uBAAL,8BAA0B,KAAK;AAAA,EACnC;AAAA,EAoBA,mBAAmB,GAAsB;AAAA,EAAC;AAAA,EAE1C,qBAA2B;AAAA,EAAC;AAAA,EAE5B,qBAA2B;AAAA,EAAC;AAAA;AAAA,EAG5B,OAAa;AAAA,EAEb;AAAA;AAAA,EAGA,cAAoB;AAAA,EAEpB;AAAA,EAEA,QAAc;AA1HlB;AA2HQ,SAAK,mBAAmB;AACxB,eAAK,oBAAL,mBAAsB;AAAA,EAC1B;AAAA,EAEA,gBAAsB;AAClB,SAAK,KAAK;AAAA,EACd;AAAA,EAEA,mBAAyB;AACrB,QAAI,CAAC,KAAK,cAAc;AACpB,WAAK,MAAM;AAAA,IACf;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": ["InteractionTypes"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";export var InteractionTypes=(r=>(r[r.click=0]="click",r[r.hover=1]="hover",r[r.longpress=2]="longpress",r))(InteractionTypes||{});export class InteractionController{constructor(e,{overlay:t,isPersistent:r,handleOverlayReady:
|
|
1
|
+
"use strict";export var InteractionTypes=(r=>(r[r.click=0]="click",r[r.hover=1]="hover",r[r.longpress=2]="longpress",r))(InteractionTypes||{});export class InteractionController{constructor(e,{overlay:t,isPersistent:r,handleOverlayReady:i}){this.target=e;this.isLazilyOpen=!1;this.isPersistent=!1;this.isPersistent=!!r,this.handleOverlayReady=i,this.isPersistent&&this.init(),this.overlay=t}get activelyOpening(){return!1}get open(){var e,t;return(t=(e=this.overlay)==null?void 0:e.open)!=null?t:this.isLazilyOpen}set open(e){if(e!==this.open){if(this.isLazilyOpen=e,this.overlay){this.overlay.open=e;return}e&&(customElements.whenDefined("sp-overlay").then(async()=>{const{Overlay:t}=await import("./Overlay.js");this.overlay=new t,this.overlay.open=!0}),import("@spectrum-web-components/overlay/sp-overlay.js"))}}get overlay(){return this._overlay}set overlay(e){var t;e&&this.overlay!==e&&(this.overlay&&this.overlay.removeController(this),this._overlay=e,this.overlay.addController(this),this.initOverlay(),this.prepareDescription(this.target),(t=this.handleOverlayReady)==null||t.call(this,this.overlay))}prepareDescription(e){}releaseDescription(){}shouldCompleteOpen(){}init(){}initOverlay(){}abort(){var e;this.releaseDescription(),(e=this.abortController)==null||e.abort()}hostConnected(){this.init()}hostDisconnected(){this.isPersistent||this.abort()}}
|
|
2
2
|
//# sourceMappingURL=InteractionController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["InteractionController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 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 type { ReactiveController } from '@spectrum-web-components/base';\nimport { AbstractOverlay } from './AbstractOverlay.js';\n\nexport enum InteractionTypes {\n 'click',\n 'hover',\n 'longpress',\n}\n\nexport type ControllerOptions = {\n overlay?: AbstractOverlay;\n handleOverlayReady?: (overlay: AbstractOverlay) => void;\n isPersistent?: boolean;\n};\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private handleOverlayReady?: (overlay: AbstractOverlay) => void;\n\n public get open(): boolean {\n return this.overlay?.open ??
|
|
5
|
-
"mappings": "aAeO,WAAK,kBAAAA,IACRA,IAAA,iBACAA,IAAA,iBACAA,IAAA,yBAHQA,IAAA,sBAYL,aAAM,qBAAoD,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 type { ReactiveController } from '@spectrum-web-components/base';\nimport { AbstractOverlay } from './AbstractOverlay.js';\n\nexport enum InteractionTypes {\n 'click',\n 'hover',\n 'longpress',\n}\n\nexport type ControllerOptions = {\n overlay?: AbstractOverlay;\n handleOverlayReady?: (overlay: AbstractOverlay) => void;\n isPersistent?: boolean;\n};\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private handleOverlayReady?: (overlay: AbstractOverlay) => void;\n\n // Holds optimistic open state when an Overlay is not yet present\n private isLazilyOpen = false;\n\n public get open(): boolean {\n return this.overlay?.open ?? this.isLazilyOpen;\n }\n\n /**\n * Set `open` against the associated Overlay lazily.\n */\n public set open(open: boolean) {\n if (open === this.open) return;\n this.isLazilyOpen = open;\n if (this.overlay) {\n // If there already is an Overlay, apply the value of `open` directly.\n this.overlay.open = open;\n return;\n }\n if (!open) {\n // When `open` moves to `false` and there is not yet an Overlay,\n // assume that no Overlay and a closed Overlay are the same and return early.\n return;\n }\n // When there is no Overlay and `open` is moving to `true`, lazily import/create\n // an Overlay and apply that state to it.\n customElements\n .whenDefined('sp-overlay')\n .then(async (): Promise<void> => {\n const { Overlay } = await import('./Overlay.js');\n this.overlay = new Overlay();\n this.overlay.open = true;\n });\n import('@spectrum-web-components/overlay/sp-overlay.js');\n }\n\n public get overlay(): AbstractOverlay {\n return this._overlay;\n }\n\n public set overlay(overlay: AbstractOverlay | undefined) {\n if (!overlay) return;\n if (this.overlay === overlay) return;\n if (this.overlay) {\n this.overlay.removeController(this);\n }\n this._overlay = overlay;\n this.overlay.addController(this);\n this.initOverlay();\n this.prepareDescription(this.target);\n this.handleOverlayReady?.(this.overlay);\n }\n\n private _overlay!: AbstractOverlay;\n\n protected isPersistent = false;\n\n type!: InteractionTypes;\n\n constructor(\n public target: HTMLElement,\n { overlay, isPersistent, handleOverlayReady }: ControllerOptions\n ) {\n this.isPersistent = !!isPersistent;\n this.handleOverlayReady = handleOverlayReady;\n if (this.isPersistent) {\n this.init();\n }\n this.overlay = overlay;\n }\n\n prepareDescription(_: HTMLElement): void {}\n\n releaseDescription(): void {}\n\n shouldCompleteOpen(): void {}\n\n /* c8 ignore next 3 */\n init(): void {\n // Abstract init() method.\n }\n\n /* c8 ignore next 3 */\n initOverlay(): void {\n // Abstract initOverlay() method.\n }\n\n abort(): void {\n this.releaseDescription();\n this.abortController?.abort();\n }\n\n hostConnected(): void {\n this.init();\n }\n\n hostDisconnected(): void {\n if (!this.isPersistent) {\n this.abort();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "aAeO,WAAK,kBAAAA,IACRA,IAAA,iBACAA,IAAA,iBACAA,IAAA,yBAHQA,IAAA,sBAYL,aAAM,qBAAoD,CAmE7D,YACWC,EACP,CAAE,QAAAC,EAAS,aAAAC,EAAc,mBAAAC,CAAmB,EAC9C,CAFS,YAAAH,EA1DX,KAAQ,aAAe,GAqDvB,KAAU,aAAe,GAQrB,KAAK,aAAe,CAAC,CAACE,EACtB,KAAK,mBAAqBC,EACtB,KAAK,cACL,KAAK,KAAK,EAEd,KAAK,QAAUF,CACnB,CA1EA,IAAI,iBAA2B,CAC3B,MAAO,EACX,CAOA,IAAW,MAAgB,CAvC/B,IAAAG,EAAAC,EAwCQ,OAAOA,GAAAD,EAAA,KAAK,UAAL,YAAAA,EAAc,OAAd,KAAAC,EAAsB,KAAK,YACtC,CAKA,IAAW,KAAKC,EAAe,CAC3B,GAAIA,IAAS,KAAK,KAElB,IADA,KAAK,aAAeA,EAChB,KAAK,QAAS,CAEd,KAAK,QAAQ,KAAOA,EACpB,MACJ,CACKA,IAOL,eACK,YAAY,YAAY,EACxB,KAAK,SAA2B,CAC7B,KAAM,CAAE,QAAAC,CAAQ,EAAI,KAAM,QAAO,cAAc,EAC/C,KAAK,QAAU,IAAIA,EACnB,KAAK,QAAQ,KAAO,EACxB,CAAC,EACL,OAAO,gDAAgD,GAC3D,CAEA,IAAW,SAA2B,CAClC,OAAO,KAAK,QAChB,CAEA,IAAW,QAAQN,EAAsC,CA3E7D,IAAAG,EA4EaH,GACD,KAAK,UAAYA,IACjB,KAAK,SACL,KAAK,QAAQ,iBAAiB,IAAI,EAEtC,KAAK,SAAWA,EAChB,KAAK,QAAQ,cAAc,IAAI,EAC/B,KAAK,YAAY,EACjB,KAAK,mBAAmB,KAAK,MAAM,GACnCG,EAAA,KAAK,qBAAL,MAAAA,EAAA,UAA0B,KAAK,SACnC,CAoBA,mBAAmBI,EAAsB,CAAC,CAE1C,oBAA2B,CAAC,CAE5B,oBAA2B,CAAC,CAG5B,MAAa,CAEb,CAGA,aAAoB,CAEpB,CAEA,OAAc,CA1HlB,IAAAJ,EA2HQ,KAAK,mBAAmB,GACxBA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,OAC1B,CAEA,eAAsB,CAClB,KAAK,KAAK,CACd,CAEA,kBAAyB,CAChB,KAAK,cACN,KAAK,MAAM,CAEnB,CACJ",
|
|
6
6
|
"names": ["InteractionTypes", "target", "overlay", "isPersistent", "handleOverlayReady", "_a", "_b", "open", "Overlay", "_"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ElementPart, TemplateResult } from '@spectrum-web-components/base';
|
|
1
|
+
import { type ElementPart, type TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import type { OverlayOptions, TriggerInteraction } from './overlay-types.js';
|
|
3
3
|
import { type SlottableRequestEvent } from './slottable-request-event.js';
|
|
4
4
|
import { SlottableRequestDirective } from './slottable-request-directive.js';
|
|
@@ -13,6 +13,7 @@ export type OverlayTriggerOptions = {
|
|
|
13
13
|
insertionOptions?: InsertionOptions;
|
|
14
14
|
};
|
|
15
15
|
export declare class OverlayTriggerDirective extends SlottableRequestDirective {
|
|
16
|
+
private host?;
|
|
16
17
|
private overlay;
|
|
17
18
|
private strategy;
|
|
18
19
|
protected defaultOptions: OverlayTriggerOptions;
|
|
@@ -3,13 +3,14 @@ import {
|
|
|
3
3
|
nothing,
|
|
4
4
|
render
|
|
5
5
|
} from "@spectrum-web-components/base";
|
|
6
|
-
import { directive } from "
|
|
6
|
+
import { directive } from "@spectrum-web-components/base/src/async-directive.js";
|
|
7
7
|
import { strategies } from "./strategies.dev.js";
|
|
8
8
|
import {
|
|
9
9
|
removeSlottableRequest
|
|
10
10
|
} from "./slottable-request-event.dev.js";
|
|
11
11
|
import { SlottableRequestDirective } from "./slottable-request-directive.dev.js";
|
|
12
12
|
import { AbstractOverlay } from "./AbstractOverlay.dev.js";
|
|
13
|
+
import { InteractionTypes } from "./InteractionController.dev.js";
|
|
13
14
|
export class OverlayTriggerDirective extends SlottableRequestDirective {
|
|
14
15
|
constructor() {
|
|
15
16
|
super(...arguments);
|
|
@@ -29,22 +30,23 @@ export class OverlayTriggerDirective extends SlottableRequestDirective {
|
|
|
29
30
|
return nothing;
|
|
30
31
|
}
|
|
31
32
|
update(part, [template, options]) {
|
|
32
|
-
var _a, _b, _c;
|
|
33
|
+
var _a, _b, _c, _d;
|
|
33
34
|
this.options = {
|
|
34
35
|
...this.defaultOptions.overlayOptions,
|
|
35
36
|
...options == null ? void 0 : options.overlayOptions
|
|
36
37
|
};
|
|
37
38
|
this.insertionOptions = options == null ? void 0 : options.insertionOptions;
|
|
38
39
|
this.template = template;
|
|
40
|
+
this.host = (_a = part.options) == null ? void 0 : _a.host;
|
|
39
41
|
let newTarget = false;
|
|
40
42
|
const triggerInteraction = (options == null ? void 0 : options.triggerInteraction) || this.defaultOptions.triggerInteraction;
|
|
41
|
-
const newStrategy = (
|
|
43
|
+
const newStrategy = InteractionTypes[(_b = this.strategy) == null ? void 0 : _b.type] !== triggerInteraction;
|
|
42
44
|
if (this.target !== part.element) {
|
|
43
45
|
this.target = part.element;
|
|
44
46
|
newTarget = true;
|
|
45
47
|
}
|
|
46
48
|
if (newTarget || newStrategy) {
|
|
47
|
-
(
|
|
49
|
+
(_c = this.strategy) == null ? void 0 : _c.abort();
|
|
48
50
|
this.strategy = new strategies[triggerInteraction](this.target, {
|
|
49
51
|
isPersistent: true,
|
|
50
52
|
handleOverlayReady: (overlay) => {
|
|
@@ -53,13 +55,21 @@ export class OverlayTriggerDirective extends SlottableRequestDirective {
|
|
|
53
55
|
}
|
|
54
56
|
});
|
|
55
57
|
}
|
|
56
|
-
this.strategy.open = (
|
|
58
|
+
this.strategy.open = (_d = options == null ? void 0 : options.open) != null ? _d : false;
|
|
57
59
|
}
|
|
58
60
|
handleSlottableRequest(event) {
|
|
59
61
|
var _a, _b;
|
|
60
62
|
if (event.target !== event.currentTarget) return;
|
|
61
63
|
const willRemoveSlottable = event.data === removeSlottableRequest;
|
|
62
|
-
|
|
64
|
+
const options = {};
|
|
65
|
+
if (this.host) {
|
|
66
|
+
options.host = this.host;
|
|
67
|
+
}
|
|
68
|
+
render(
|
|
69
|
+
willRemoveSlottable ? void 0 : this.template(),
|
|
70
|
+
this.overlay,
|
|
71
|
+
options
|
|
72
|
+
);
|
|
63
73
|
if (willRemoveSlottable) {
|
|
64
74
|
this.overlay.remove();
|
|
65
75
|
} else {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger-directive.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 {\n ElementPart,\n nothing,\n render,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { directive } from '
|
|
5
|
-
"mappings": ";AAWA;AAAA,EAEI;AAAA,EACA;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 {\n type ElementPart,\n nothing,\n render,\n type RenderOptions,\n type TemplateResult,\n} from '@spectrum-web-components/base';\nimport { directive } from '@spectrum-web-components/base/src/async-directive.js';\nimport { strategies } from './strategies.dev.js'\nimport type { OverlayOptions, TriggerInteraction } from './overlay-types.dev.js'\nimport type { ClickController } from './ClickController.dev.js'\nimport type { HoverController } from './HoverController.dev.js'\nimport type { LongpressController } from './LongpressController.dev.js'\nimport {\n removeSlottableRequest,\n type SlottableRequestEvent,\n} from './slottable-request-event.dev.js'\nimport { SlottableRequestDirective } from './slottable-request-directive.dev.js'\nimport { AbstractOverlay } from './AbstractOverlay.dev.js'\nimport { InteractionTypes } from './InteractionController.dev.js'\n\nexport type InsertionOptions = {\n el: HTMLElement | (() => HTMLElement);\n where: InsertPosition;\n};\n\nexport type OverlayTriggerOptions = {\n open?: boolean;\n triggerInteraction: TriggerInteraction;\n overlayOptions: OverlayOptions;\n insertionOptions?: InsertionOptions;\n};\n\nexport class OverlayTriggerDirective extends SlottableRequestDirective {\n private host?: object;\n private overlay!: AbstractOverlay;\n private strategy!: ClickController | HoverController | LongpressController;\n\n protected defaultOptions: OverlayTriggerOptions = {\n triggerInteraction: 'click',\n overlayOptions: {\n type: 'auto',\n offset: 0,\n },\n };\n protected options: OverlayOptions = {\n ...this.defaultOptions.overlayOptions,\n };\n protected insertionOptions?: InsertionOptions;\n\n /* c8 ignore next 9 */\n override render(\n _template: () => TemplateResult,\n _options?: Partial<OverlayTriggerOptions>\n ): unknown {\n // render function here just defines the interface to the update call later\n // we don't have anything to render since this is intended to be an ElementPart directive\n // so will be used on an element and is not itself rendered\n return nothing;\n }\n\n override update(\n part: ElementPart,\n [template, options]: Parameters<this['render']>\n ): void {\n this.options = {\n ...this.defaultOptions.overlayOptions,\n ...options?.overlayOptions,\n };\n this.insertionOptions = options?.insertionOptions;\n this.template = template;\n this.host = part.options?.host;\n let newTarget = false;\n const triggerInteraction = (options?.triggerInteraction ||\n this.defaultOptions.triggerInteraction) as TriggerInteraction;\n const newStrategy =\n InteractionTypes[this.strategy?.type] !== triggerInteraction;\n if (this.target !== part.element) {\n this.target = part.element as HTMLElement;\n newTarget = true;\n }\n if (newTarget || newStrategy) {\n this.strategy?.abort();\n this.strategy = new strategies[\n triggerInteraction as TriggerInteraction\n ](this.target, {\n isPersistent: true,\n handleOverlayReady: (overlay: AbstractOverlay) => {\n this.listenerHost = this.overlay = overlay;\n this.init();\n },\n });\n }\n this.strategy.open = options?.open ?? false;\n }\n\n override handleSlottableRequest(event: SlottableRequestEvent): void {\n /* c8 ignore next 1 */\n if (event.target !== event.currentTarget) return;\n\n const willRemoveSlottable = event.data === removeSlottableRequest;\n const options = {} as RenderOptions;\n if (this.host) {\n options.host = this.host;\n }\n render(\n willRemoveSlottable ? undefined : this.template(),\n this.overlay,\n options\n );\n\n if (willRemoveSlottable) {\n this.overlay.remove();\n } else {\n AbstractOverlay.applyOptions(this.overlay, {\n ...this.options,\n trigger: this.target,\n });\n const insertionEl =\n typeof this.insertionOptions?.el === 'function'\n ? this.insertionOptions.el()\n : this.insertionOptions?.el || this.target;\n const { where = 'afterend' } = this.insertionOptions || {};\n insertionEl.insertAdjacentElement(where, this.overlay);\n }\n }\n}\n\nexport const trigger = directive(OverlayTriggerDirective);\n"],
|
|
5
|
+
"mappings": ";AAWA;AAAA,EAEI;AAAA,EACA;AAAA,OAGG;AACP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAK3B;AAAA,EACI;AAAA,OAEG;AACP,SAAS,iCAAiC;AAC1C,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAc1B,aAAM,gCAAgC,0BAA0B;AAAA,EAAhE;AAAA;AAKH,SAAU,iBAAwC;AAAA,MAC9C,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,QACZ,MAAM;AAAA,QACN,QAAQ;AAAA,MACZ;AAAA,IACJ;AACA,SAAU,UAA0B;AAAA,MAChC,GAAG,KAAK,eAAe;AAAA,IAC3B;AAAA;AAAA;AAAA,EAIS,OACL,WACA,UACO;AAIP,WAAO;AAAA,EACX;AAAA,EAES,OACL,MACA,CAAC,UAAU,OAAO,GACd;AA3EZ;AA4EQ,SAAK,UAAU;AAAA,MACX,GAAG,KAAK,eAAe;AAAA,MACvB,GAAG,mCAAS;AAAA,IAChB;AACA,SAAK,mBAAmB,mCAAS;AACjC,SAAK,WAAW;AAChB,SAAK,QAAO,UAAK,YAAL,mBAAc;AAC1B,QAAI,YAAY;AAChB,UAAM,sBAAsB,mCAAS,uBACjC,KAAK,eAAe;AACxB,UAAM,cACF,kBAAiB,UAAK,aAAL,mBAAe,IAAI,MAAM;AAC9C,QAAI,KAAK,WAAW,KAAK,SAAS;AAC9B,WAAK,SAAS,KAAK;AACnB,kBAAY;AAAA,IAChB;AACA,QAAI,aAAa,aAAa;AAC1B,iBAAK,aAAL,mBAAe;AACf,WAAK,WAAW,IAAI,WAChB,kBACJ,EAAE,KAAK,QAAQ;AAAA,QACX,cAAc;AAAA,QACd,oBAAoB,CAAC,YAA6B;AAC9C,eAAK,eAAe,KAAK,UAAU;AACnC,eAAK,KAAK;AAAA,QACd;AAAA,MACJ,CAAC;AAAA,IACL;AACA,SAAK,SAAS,QAAO,wCAAS,SAAT,YAAiB;AAAA,EAC1C;AAAA,EAES,uBAAuB,OAAoC;AA3GxE;AA6GQ,QAAI,MAAM,WAAW,MAAM,cAAe;AAE1C,UAAM,sBAAsB,MAAM,SAAS;AAC3C,UAAM,UAAU,CAAC;AACjB,QAAI,KAAK,MAAM;AACX,cAAQ,OAAO,KAAK;AAAA,IACxB;AACA;AAAA,MACI,sBAAsB,SAAY,KAAK,SAAS;AAAA,MAChD,KAAK;AAAA,MACL;AAAA,IACJ;AAEA,QAAI,qBAAqB;AACrB,WAAK,QAAQ,OAAO;AAAA,IACxB,OAAO;AACH,sBAAgB,aAAa,KAAK,SAAS;AAAA,QACvC,GAAG,KAAK;AAAA,QACR,SAAS,KAAK;AAAA,MAClB,CAAC;AACD,YAAM,cACF,SAAO,UAAK,qBAAL,mBAAuB,QAAO,aAC/B,KAAK,iBAAiB,GAAG,MACzB,UAAK,qBAAL,mBAAuB,OAAM,KAAK;AAC5C,YAAM,EAAE,QAAQ,WAAW,IAAI,KAAK,oBAAoB,CAAC;AACzD,kBAAY,sBAAsB,OAAO,KAAK,OAAO;AAAA,IACzD;AAAA,EACJ;AACJ;AAEO,aAAM,UAAU,UAAU,uBAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{nothing as
|
|
1
|
+
"use strict";import{nothing as y,render as h}from"@spectrum-web-components/base";import{directive as v}from"@spectrum-web-components/base/src/async-directive.js";import{strategies as O}from"./strategies.js";import{removeSlottableRequest as m}from"./slottable-request-event.js";import{SlottableRequestDirective as c}from"./slottable-request-directive.js";import{AbstractOverlay as d}from"./AbstractOverlay.js";import{InteractionTypes as f}from"./InteractionController.js";export class OverlayTriggerDirective extends c{constructor(){super(...arguments);this.defaultOptions={triggerInteraction:"click",overlayOptions:{type:"auto",offset:0}};this.options={...this.defaultOptions.overlayOptions}}render(e,r){return y}update(e,[r,t]){var n,l,a,p;this.options={...this.defaultOptions.overlayOptions,...t==null?void 0:t.overlayOptions},this.insertionOptions=t==null?void 0:t.insertionOptions,this.template=r,this.host=(n=e.options)==null?void 0:n.host;let i=!1;const o=(t==null?void 0:t.triggerInteraction)||this.defaultOptions.triggerInteraction,s=f[(l=this.strategy)==null?void 0:l.type]!==o;this.target!==e.element&&(this.target=e.element,i=!0),(i||s)&&((a=this.strategy)==null||a.abort(),this.strategy=new O[o](this.target,{isPersistent:!0,handleOverlayReady:g=>{this.listenerHost=this.overlay=g,this.init()}})),this.strategy.open=(p=t==null?void 0:t.open)!=null?p:!1}handleSlottableRequest(e){var i,o;if(e.target!==e.currentTarget)return;const r=e.data===m,t={};if(this.host&&(t.host=this.host),h(r?void 0:this.template(),this.overlay,t),r)this.overlay.remove();else{d.applyOptions(this.overlay,{...this.options,trigger:this.target});const s=typeof((i=this.insertionOptions)==null?void 0:i.el)=="function"?this.insertionOptions.el():((o=this.insertionOptions)==null?void 0:o.el)||this.target,{where:n="afterend"}=this.insertionOptions||{};s.insertAdjacentElement(n,this.overlay)}}}export const trigger=v(OverlayTriggerDirective);
|
|
2
2
|
//# sourceMappingURL=overlay-trigger-directive.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger-directive.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 {\n ElementPart,\n nothing,\n render,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { directive } from '
|
|
5
|
-
"mappings": "aAWA,OAEI,WAAAA,EACA,UAAAC,
|
|
6
|
-
"names": ["nothing", "render", "directive", "strategies", "removeSlottableRequest", "SlottableRequestDirective", "AbstractOverlay", "_template", "_options", "part", "template", "options", "_a", "_b", "_c", "newTarget", "triggerInteraction", "newStrategy", "overlay", "event", "willRemoveSlottable", "insertionEl", "where"]
|
|
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 {\n type ElementPart,\n nothing,\n render,\n type RenderOptions,\n type TemplateResult,\n} from '@spectrum-web-components/base';\nimport { directive } from '@spectrum-web-components/base/src/async-directive.js';\nimport { strategies } from './strategies.js';\nimport type { OverlayOptions, TriggerInteraction } from './overlay-types.js';\nimport type { ClickController } from './ClickController.js';\nimport type { HoverController } from './HoverController.js';\nimport type { LongpressController } from './LongpressController.js';\nimport {\n removeSlottableRequest,\n type SlottableRequestEvent,\n} from './slottable-request-event.js';\nimport { SlottableRequestDirective } from './slottable-request-directive.js';\nimport { AbstractOverlay } from './AbstractOverlay.js';\nimport { InteractionTypes } from './InteractionController.js';\n\nexport type InsertionOptions = {\n el: HTMLElement | (() => HTMLElement);\n where: InsertPosition;\n};\n\nexport type OverlayTriggerOptions = {\n open?: boolean;\n triggerInteraction: TriggerInteraction;\n overlayOptions: OverlayOptions;\n insertionOptions?: InsertionOptions;\n};\n\nexport class OverlayTriggerDirective extends SlottableRequestDirective {\n private host?: object;\n private overlay!: AbstractOverlay;\n private strategy!: ClickController | HoverController | LongpressController;\n\n protected defaultOptions: OverlayTriggerOptions = {\n triggerInteraction: 'click',\n overlayOptions: {\n type: 'auto',\n offset: 0,\n },\n };\n protected options: OverlayOptions = {\n ...this.defaultOptions.overlayOptions,\n };\n protected insertionOptions?: InsertionOptions;\n\n /* c8 ignore next 9 */\n override render(\n _template: () => TemplateResult,\n _options?: Partial<OverlayTriggerOptions>\n ): unknown {\n // render function here just defines the interface to the update call later\n // we don't have anything to render since this is intended to be an ElementPart directive\n // so will be used on an element and is not itself rendered\n return nothing;\n }\n\n override update(\n part: ElementPart,\n [template, options]: Parameters<this['render']>\n ): void {\n this.options = {\n ...this.defaultOptions.overlayOptions,\n ...options?.overlayOptions,\n };\n this.insertionOptions = options?.insertionOptions;\n this.template = template;\n this.host = part.options?.host;\n let newTarget = false;\n const triggerInteraction = (options?.triggerInteraction ||\n this.defaultOptions.triggerInteraction) as TriggerInteraction;\n const newStrategy =\n InteractionTypes[this.strategy?.type] !== triggerInteraction;\n if (this.target !== part.element) {\n this.target = part.element as HTMLElement;\n newTarget = true;\n }\n if (newTarget || newStrategy) {\n this.strategy?.abort();\n this.strategy = new strategies[\n triggerInteraction as TriggerInteraction\n ](this.target, {\n isPersistent: true,\n handleOverlayReady: (overlay: AbstractOverlay) => {\n this.listenerHost = this.overlay = overlay;\n this.init();\n },\n });\n }\n this.strategy.open = options?.open ?? false;\n }\n\n override handleSlottableRequest(event: SlottableRequestEvent): void {\n /* c8 ignore next 1 */\n if (event.target !== event.currentTarget) return;\n\n const willRemoveSlottable = event.data === removeSlottableRequest;\n const options = {} as RenderOptions;\n if (this.host) {\n options.host = this.host;\n }\n render(\n willRemoveSlottable ? undefined : this.template(),\n this.overlay,\n options\n );\n\n if (willRemoveSlottable) {\n this.overlay.remove();\n } else {\n AbstractOverlay.applyOptions(this.overlay, {\n ...this.options,\n trigger: this.target,\n });\n const insertionEl =\n typeof this.insertionOptions?.el === 'function'\n ? this.insertionOptions.el()\n : this.insertionOptions?.el || this.target;\n const { where = 'afterend' } = this.insertionOptions || {};\n insertionEl.insertAdjacentElement(where, this.overlay);\n }\n }\n}\n\nexport const trigger = directive(OverlayTriggerDirective);\n"],
|
|
5
|
+
"mappings": "aAWA,OAEI,WAAAA,EACA,UAAAC,MAGG,gCACP,OAAS,aAAAC,MAAiB,uDAC1B,OAAS,cAAAC,MAAkB,kBAK3B,OACI,0BAAAC,MAEG,+BACP,OAAS,6BAAAC,MAAiC,mCAC1C,OAAS,mBAAAC,MAAuB,uBAChC,OAAS,oBAAAC,MAAwB,6BAc1B,aAAM,gCAAgCF,CAA0B,CAAhE,kCAKH,KAAU,eAAwC,CAC9C,mBAAoB,QACpB,eAAgB,CACZ,KAAM,OACN,OAAQ,CACZ,CACJ,EACA,KAAU,QAA0B,CAChC,GAAG,KAAK,eAAe,cAC3B,EAIS,OACLG,EACAC,EACO,CAIP,OAAOT,CACX,CAES,OACLU,EACA,CAACC,EAAUC,CAAO,EACd,CA3EZ,IAAAC,EAAAC,EAAAC,EAAAC,EA4EQ,KAAK,QAAU,CACX,GAAG,KAAK,eAAe,eACvB,GAAGJ,GAAA,YAAAA,EAAS,cAChB,EACA,KAAK,iBAAmBA,GAAA,YAAAA,EAAS,iBACjC,KAAK,SAAWD,EAChB,KAAK,MAAOE,EAAAH,EAAK,UAAL,YAAAG,EAAc,KAC1B,IAAII,EAAY,GAChB,MAAMC,GAAsBN,GAAA,YAAAA,EAAS,qBACjC,KAAK,eAAe,mBAClBO,EACFZ,GAAiBO,EAAA,KAAK,WAAL,YAAAA,EAAe,IAAI,IAAMI,EAC1C,KAAK,SAAWR,EAAK,UACrB,KAAK,OAASA,EAAK,QACnBO,EAAY,KAEZA,GAAaE,MACbJ,EAAA,KAAK,WAAL,MAAAA,EAAe,QACf,KAAK,SAAW,IAAIZ,EAChBe,CACJ,EAAE,KAAK,OAAQ,CACX,aAAc,GACd,mBAAqBE,GAA6B,CAC9C,KAAK,aAAe,KAAK,QAAUA,EACnC,KAAK,KAAK,CACd,CACJ,CAAC,GAEL,KAAK,SAAS,MAAOJ,EAAAJ,GAAA,YAAAA,EAAS,OAAT,KAAAI,EAAiB,EAC1C,CAES,uBAAuBK,EAAoC,CA3GxE,IAAAR,EAAAC,EA6GQ,GAAIO,EAAM,SAAWA,EAAM,cAAe,OAE1C,MAAMC,EAAsBD,EAAM,OAASjB,EACrCQ,EAAU,CAAC,EAUjB,GATI,KAAK,OACLA,EAAQ,KAAO,KAAK,MAExBX,EACIqB,EAAsB,OAAY,KAAK,SAAS,EAChD,KAAK,QACLV,CACJ,EAEIU,EACA,KAAK,QAAQ,OAAO,MACjB,CACHhB,EAAgB,aAAa,KAAK,QAAS,CACvC,GAAG,KAAK,QACR,QAAS,KAAK,MAClB,CAAC,EACD,MAAMiB,EACF,QAAOV,EAAA,KAAK,mBAAL,YAAAA,EAAuB,KAAO,WAC/B,KAAK,iBAAiB,GAAG,IACzBC,EAAA,KAAK,mBAAL,YAAAA,EAAuB,KAAM,KAAK,OACtC,CAAE,MAAAU,EAAQ,UAAW,EAAI,KAAK,kBAAoB,CAAC,EACzDD,EAAY,sBAAsBC,EAAO,KAAK,OAAO,CACzD,CACJ,CACJ,CAEO,aAAM,QAAUtB,EAAU,uBAAuB",
|
|
6
|
+
"names": ["nothing", "render", "directive", "strategies", "removeSlottableRequest", "SlottableRequestDirective", "AbstractOverlay", "InteractionTypes", "_template", "_options", "part", "template", "options", "_a", "_b", "_c", "_d", "newTarget", "triggerInteraction", "newStrategy", "overlay", "event", "willRemoveSlottable", "insertionEl", "where"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
+
if (decorator = decorators[i])
|
|
8
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
10
|
+
return result;
|
|
11
|
+
};
|
|
12
|
+
import {
|
|
13
|
+
html,
|
|
14
|
+
LitElement
|
|
15
|
+
} from "@spectrum-web-components/base";
|
|
3
16
|
import "@spectrum-web-components/action-button/sp-action-button.js";
|
|
4
17
|
import "@spectrum-web-components/action-group/sp-action-group.js";
|
|
5
18
|
import "@spectrum-web-components/button/sp-button.js";
|
|
@@ -29,6 +42,7 @@ import "../../../projects/story-decorator/src/types.js";
|
|
|
29
42
|
import "./overlay-story-components.js";
|
|
30
43
|
import { tooltip } from "@spectrum-web-components/tooltip/src/tooltip-directive.js";
|
|
31
44
|
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
45
|
+
import { state } from "@spectrum-web-components/base/src/decorators.js";
|
|
32
46
|
const storyStyles = html`
|
|
33
47
|
<style>
|
|
34
48
|
html,
|
|
@@ -152,8 +166,8 @@ const template = ({
|
|
|
152
166
|
<sp-button
|
|
153
167
|
${tooltip(
|
|
154
168
|
() => html`
|
|
155
|
-
|
|
156
|
-
|
|
169
|
+
Click to open another popover.
|
|
170
|
+
`
|
|
157
171
|
)}
|
|
158
172
|
${trigger(
|
|
159
173
|
() => html`
|
|
@@ -229,4 +243,82 @@ insertionOptions.args = {
|
|
|
229
243
|
insertionOptions.swc_vrt = {
|
|
230
244
|
skip: true
|
|
231
245
|
};
|
|
246
|
+
class ManagedOverlayTrigger extends LitElement {
|
|
247
|
+
constructor() {
|
|
248
|
+
super(...arguments);
|
|
249
|
+
this.isRenderOverlay = false;
|
|
250
|
+
this.isOpenState = false;
|
|
251
|
+
}
|
|
252
|
+
render() {
|
|
253
|
+
return html`
|
|
254
|
+
<sp-button
|
|
255
|
+
@click=${() => {
|
|
256
|
+
this.isRenderOverlay = !this.isRenderOverlay;
|
|
257
|
+
}}
|
|
258
|
+
>
|
|
259
|
+
Toggle Overlay Render Button
|
|
260
|
+
</sp-button>
|
|
261
|
+
|
|
262
|
+
<sp-button
|
|
263
|
+
@click=${() => {
|
|
264
|
+
this.isRenderOverlay = true;
|
|
265
|
+
this.isOpenState = true;
|
|
266
|
+
}}
|
|
267
|
+
>
|
|
268
|
+
Create Overlay Render Button And Open Overlay
|
|
269
|
+
</sp-button>
|
|
270
|
+
|
|
271
|
+
${this.isRenderOverlay ? this.renderOverlayButton() : html``}
|
|
272
|
+
`;
|
|
273
|
+
}
|
|
274
|
+
renderOverlayButton() {
|
|
275
|
+
return html`
|
|
276
|
+
<sp-button
|
|
277
|
+
?selected=${this.isOpenState}
|
|
278
|
+
${trigger(
|
|
279
|
+
() => html`
|
|
280
|
+
<sp-popover
|
|
281
|
+
@sp-opened=${(event) => {
|
|
282
|
+
if (event.target !== event.currentTarget) {
|
|
283
|
+
return;
|
|
284
|
+
}
|
|
285
|
+
console.log("sp-opened");
|
|
286
|
+
this.isOpenState = true;
|
|
287
|
+
}}
|
|
288
|
+
@sp-closed=${(event) => {
|
|
289
|
+
if (event.target !== event.currentTarget) {
|
|
290
|
+
return;
|
|
291
|
+
}
|
|
292
|
+
console.log("sp-closed");
|
|
293
|
+
this.isOpenState = false;
|
|
294
|
+
}}
|
|
295
|
+
>
|
|
296
|
+
<h1>My Test Popover</h1>
|
|
297
|
+
</sp-popover>
|
|
298
|
+
`,
|
|
299
|
+
{
|
|
300
|
+
triggerInteraction: "click",
|
|
301
|
+
overlayOptions: { placement: "bottom-end" },
|
|
302
|
+
open: this.isOpenState
|
|
303
|
+
}
|
|
304
|
+
)}
|
|
305
|
+
>
|
|
306
|
+
Toggle Popover
|
|
307
|
+
</sp-button>
|
|
308
|
+
`;
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
__decorateClass([
|
|
312
|
+
state()
|
|
313
|
+
], ManagedOverlayTrigger.prototype, "isRenderOverlay", 2);
|
|
314
|
+
__decorateClass([
|
|
315
|
+
state()
|
|
316
|
+
], ManagedOverlayTrigger.prototype, "isOpenState", 2);
|
|
317
|
+
customElements.define("managed-overlay-trigger", ManagedOverlayTrigger);
|
|
318
|
+
export const managedOverlayTrigger = () => html`
|
|
319
|
+
<managed-overlay-trigger></managed-overlay-trigger>
|
|
320
|
+
`;
|
|
321
|
+
managedOverlayTrigger.swc_vrt = {
|
|
322
|
+
skip: true
|
|
323
|
+
};
|
|
232
324
|
//# sourceMappingURL=overlay-directive.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-directive.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\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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport {\n OverlayContentTypes,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n InsertionOptions,\n trigger,\n} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/picker/sp-picker.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/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nconst storyStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n overlay-trigger {\n flex: none;\n }\n\n #styled-div {\n background-color: var(--styled-div-background-color, blue);\n color: white;\n padding: 4px 10px;\n margin-bottom: 10px;\n }\n\n #inner-trigger {\n display: inline-block;\n }\n </style>\n`;\n\nexport default {\n title: 'Overlay Directive',\n argTypes: {\n offset: { control: 'number' },\n placement: {\n control: {\n type: 'inline-radio',\n options: [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end',\n 'none',\n ],\n },\n },\n type: {\n control: {\n type: 'inline-radio',\n options: ['modal', 'replace', 'inline'],\n },\n },\n colorStop: {\n control: {\n type: 'inline-radio',\n options: ['light', 'dark'],\n },\n },\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the second accordion item is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n placement: 'bottom',\n offset: 0,\n colorStop: 'light',\n triggerOn: 'click',\n open: false,\n },\n};\n\ninterface Properties {\n placement?: Placement;\n offset?: number;\n triggerOn?: OverlayContentTypes;\n type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n insertionOptions?: InsertionOptions;\n open?: boolean;\n}\n\nconst template = ({\n placement,\n offset,\n open,\n triggerOn,\n insertionOptions,\n}: Properties): TemplateResult => {\n const renderTooltip = (): TemplateResult => html`\n Click to open a popover.\n `;\n const renderPopover = (): TemplateResult => html`\n <sp-popover placement=\"${ifDefined(placement)}\" tip>\n <sp-dialog no-divider>\n <div class=\"options-popover-content\">\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <sp-button\n ${tooltip(\n () =>\n html`\n Click to open another popover.\n `\n )}\n ${trigger(\n () => html`\n <sp-popover placement=\"bottom\" tip open>\n <sp-dialog size=\"s\" no-divider>\n <div class=\"options-popover-content\">\n Another Popover\n </div>\n </sp-dialog>\n </sp-popover>\n `,\n {\n triggerInteraction: 'click',\n overlayOptions: {\n placement: 'bottom',\n },\n }\n )}\n >\n Press Me\n </sp-button>\n </div>\n </sp-dialog>\n </sp-popover>\n `;\n return html`\n ${storyStyles}\n <sp-button\n variant=\"primary\"\n ${tooltip(renderTooltip)}\n ${trigger(renderPopover, {\n open,\n triggerInteraction: triggerOn,\n overlayOptions: {\n placement,\n offset,\n },\n insertionOptions: insertionOptions,\n })}\n >\n Show Popover\n </sp-button>\n `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n const renderPopover = (): TemplateResult => html`\n <sp-popover>\n <sp-dialog no-divider>Popover content goes here</sp-dialog>\n </sp-popover>\n `;\n const options = typeof open !== 'undefined' ? { open } : undefined;\n return html`\n <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n `;\n};\n\nDefault.swc_vrt = {\n skip: true,\n};\n\nexport const congifured = (args: Properties): TemplateResult => template(args);\n\ncongifured.swc_vrt = {\n skip: true,\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n ${template(args)}\n <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n insertionOptions: {\n el: () => document.querySelector('#other-element'),\n where: 'afterbegin',\n },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n skip: true,\n};\n"],
|
|
5
|
-
"mappings": ";
|
|
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\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 {\n html,\n LitElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n OverlayContentTypes,\n OverlayOpenCloseDetail,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n InsertionOptions,\n trigger,\n} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/picker/sp-picker.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/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nconst storyStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n overlay-trigger {\n flex: none;\n }\n\n #styled-div {\n background-color: var(--styled-div-background-color, blue);\n color: white;\n padding: 4px 10px;\n margin-bottom: 10px;\n }\n\n #inner-trigger {\n display: inline-block;\n }\n </style>\n`;\n\nexport default {\n title: 'Overlay Directive',\n argTypes: {\n offset: { control: 'number' },\n placement: {\n control: {\n type: 'inline-radio',\n options: [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end',\n 'none',\n ],\n },\n },\n type: {\n control: {\n type: 'inline-radio',\n options: ['modal', 'replace', 'inline'],\n },\n },\n colorStop: {\n control: {\n type: 'inline-radio',\n options: ['light', 'dark'],\n },\n },\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the second accordion item is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n placement: 'bottom',\n offset: 0,\n colorStop: 'light',\n triggerOn: 'click',\n open: false,\n },\n};\n\ninterface Properties {\n placement?: Placement;\n offset?: number;\n triggerOn?: OverlayContentTypes;\n type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n insertionOptions?: InsertionOptions;\n open?: boolean;\n}\n\nconst template = ({\n placement,\n offset,\n open,\n triggerOn,\n insertionOptions,\n}: Properties): TemplateResult => {\n const renderTooltip = (): TemplateResult => html`\n Click to open a popover.\n `;\n const renderPopover = (): TemplateResult => html`\n <sp-popover placement=\"${ifDefined(placement)}\" tip>\n <sp-dialog no-divider>\n <div class=\"options-popover-content\">\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <sp-button\n ${tooltip(\n () => html`\n Click to open another popover.\n `\n )}\n ${trigger(\n () => html`\n <sp-popover placement=\"bottom\" tip open>\n <sp-dialog size=\"s\" no-divider>\n <div class=\"options-popover-content\">\n Another Popover\n </div>\n </sp-dialog>\n </sp-popover>\n `,\n {\n triggerInteraction: 'click',\n overlayOptions: {\n placement: 'bottom',\n },\n }\n )}\n >\n Press Me\n </sp-button>\n </div>\n </sp-dialog>\n </sp-popover>\n `;\n return html`\n ${storyStyles}\n <sp-button\n variant=\"primary\"\n ${tooltip(renderTooltip)}\n ${trigger(renderPopover, {\n open,\n triggerInteraction: triggerOn,\n overlayOptions: {\n placement,\n offset,\n },\n insertionOptions: insertionOptions,\n })}\n >\n Show Popover\n </sp-button>\n `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n const renderPopover = (): TemplateResult => html`\n <sp-popover>\n <sp-dialog no-divider>Popover content goes here</sp-dialog>\n </sp-popover>\n `;\n const options = typeof open !== 'undefined' ? { open } : undefined;\n return html`\n <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n `;\n};\n\nDefault.swc_vrt = {\n skip: true,\n};\n\nexport const congifured = (args: Properties): TemplateResult => template(args);\n\ncongifured.swc_vrt = {\n skip: true,\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n ${template(args)}\n <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n insertionOptions: {\n el: () => document.querySelector('#other-element'),\n where: 'afterbegin',\n },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n skip: true,\n};\n\nclass ManagedOverlayTrigger extends LitElement {\n @state()\n private isRenderOverlay = false;\n\n @state()\n private isOpenState = false;\n\n protected override render(): TemplateResult {\n return html`\n <sp-button\n @click=${() => {\n this.isRenderOverlay = !this.isRenderOverlay;\n }}\n >\n Toggle Overlay Render Button\n </sp-button>\n\n <sp-button\n @click=${() => {\n this.isRenderOverlay = true;\n this.isOpenState = true;\n }}\n >\n Create Overlay Render Button And Open Overlay\n </sp-button>\n\n ${this.isRenderOverlay ? this.renderOverlayButton() : html``}\n `;\n }\n\n private renderOverlayButton(): TemplateResult {\n return html`\n <sp-button\n ?selected=${this.isOpenState}\n ${trigger(\n () => html`\n <sp-popover\n @sp-opened=${(\n event: CustomEvent<OverlayOpenCloseDetail>\n ) => {\n if (event.target !== event.currentTarget) {\n return;\n }\n console.log('sp-opened');\n this.isOpenState = true;\n }}\n @sp-closed=${(\n event: CustomEvent<OverlayOpenCloseDetail>\n ) => {\n if (event.target !== event.currentTarget) {\n return;\n }\n console.log('sp-closed');\n this.isOpenState = false;\n }}\n >\n <h1>My Test Popover</h1>\n </sp-popover>\n `,\n {\n triggerInteraction: 'click',\n overlayOptions: { placement: 'bottom-end' },\n open: this.isOpenState,\n }\n )}\n >\n Toggle Popover\n </sp-button>\n `;\n }\n}\n\ncustomElements.define('managed-overlay-trigger', ManagedOverlayTrigger);\n\nexport const managedOverlayTrigger = (): TemplateResult => html`\n <managed-overlay-trigger></managed-overlay-trigger>\n`;\n\nmanagedOverlayTrigger.swc_vrt = {\n skip: true,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["insertionOptions"]
|
|
7
7
|
}
|