@epa-wg/custom-element-dist 0.0.29 → 0.0.31
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/.idea/custom-element-dist.iml +11 -0
- package/.idea/inspectionProfiles/Project_Default.xml +24 -0
- package/.idea/misc.xml +6 -0
- package/.idea/modules.xml +8 -0
- package/.idea/vcs.xml +6 -0
- package/.storybook/main.ts +21 -19
- package/.storybook/preview.ts +25 -25
- package/README.md +4 -4
- package/coverage/coverage-final.json +21 -21
- package/coverage/index.html +24 -24
- package/coverage/src/custom-element/coverage.svg +1 -1
- package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
- package/coverage/src/custom-element/custom-element.js.html +247 -241
- package/coverage/src/custom-element/http-request.js.html +3 -3
- package/coverage/src/custom-element/index.html +14 -14
- package/coverage/src/custom-element/local-storage.js.html +52 -52
- package/coverage/src/custom-element/location-element.js.html +4 -4
- package/coverage/src/custom-element/module-url.js.html +1 -1
- package/coverage/src/index.html +1 -1
- package/coverage/src/mocks/handlers.ts.html +1 -1
- package/coverage/src/mocks/index.html +1 -1
- package/coverage/src/stories/attributes.test.stories.ts.html +28 -28
- package/coverage/src/stories/coverage.svg +1 -1
- package/coverage/src/stories/css.test.stories.ts.html +1 -1
- package/coverage/src/stories/dom-merge.test.stories.ts.html +1 -1
- package/coverage/src/stories/external-template.test.stories.ts.html +1 -1
- package/coverage/src/stories/form.test.stories.ts.html +1 -1
- package/coverage/src/stories/http-request.stories.ts.html +1 -1
- package/coverage/src/stories/index.html +19 -19
- package/coverage/src/stories/local-storage.test.stories.ts.html +17 -17
- package/coverage/src/stories/location-element.test.stories.ts.html +3 -6
- package/coverage/src/stories/module-url.test.stories.ts.html +1 -1
- package/coverage/src/stories/set-url.test.stories.ts.html +1 -1
- package/coverage/src/stories/slice-events.test.stories.ts/coverage.svg +1 -1
- package/coverage/src/stories/slice-events.test.stories.ts.html +284 -23
- package/coverage/src/stories/slots.test.stories.ts.html +1 -1
- package/coverage/src/stories/testStoryBook.ts.html +7 -7
- package/coverage/src/stories/version-select.test.stories.ts.html +1 -1
- package/coverage/src/sum.ts.html +1 -1
- package/dist/custom-element-BbJMY20-.cjs +97 -0
- package/dist/{custom-element-BOIPgtxz.js → custom-element-CoRNKeEP.js} +122 -120
- package/dist/custom-element-bundle.cjs +1 -1
- package/dist/custom-element-bundle.js +2 -2
- package/dist/demo/a.svg +26 -26
- package/dist/demo/data-slices.html +37 -0
- package/package.json +13 -13
- package/public/demo/a.svg +26 -26
- package/public/demo/data-slices.html +37 -0
- package/src/custom-element/custom-element.js +4 -2
- package/src/custom-element/demo/a.svg +26 -26
- package/src/custom-element/demo/data-slices.html +37 -0
- package/src/custom-element/ide/web-types-dce.json +1 -1
- package/src/custom-element/ide/web-types-xsl.json +1 -1
- package/src/material/angular.css +987 -987
- package/src/material/components/autocomplete.html +239 -240
- package/src/material/components/dropdown.html +92 -45
- package/src/material/components/icon-link.html +160 -160
- package/src/material/components/menu.html +234 -234
- package/src/material/components.html +121 -120
- package/src/material/demo.css +36 -31
- package/src/material/index.html +110 -110
- package/src/material/material.css +356 -356
- package/src/material/theme/README.md +17 -17
- package/src/material/theme/semantic.css +113 -112
- package/src/mocks/versions.mock.ts +8 -8
- package/src/stories/attributes.test.stories.ts +20 -20
- package/src/stories/location-element.test.stories.ts +1 -2
- package/src/stories/slice-events.test.stories.ts +87 -0
- package/storybook-static/assets/Color-F6OSRLHC-CFyd3TND.js +1 -0
- package/storybook-static/assets/{Configure-DOhzHFEs.js → Configure-UGTbPRKK.js} +1 -1
- package/storybook-static/assets/{DocsRenderer-CFRXHY34-BSJkbsd6.js → DocsRenderer-CFRXHY34-Dpr5iB0o.js} +2 -2
- package/storybook-static/assets/{attributes.test.stories-BJBuuXgZ.js → attributes.test.stories-DSOLHHOW.js} +38 -36
- package/storybook-static/assets/{css.test.stories-pgbBc17d.js → css.test.stories-Cgn6ICr0.js} +1 -1
- package/storybook-static/assets/custom-element-D59Fok1f.js +97 -0
- package/storybook-static/assets/{dom-merge.test.stories-CXcYP_-J.js → dom-merge.test.stories-CBObfPWg.js} +1 -1
- package/storybook-static/assets/entry-preview-DHVXbf3x.js +26 -0
- package/storybook-static/assets/entry-preview-docs-BbcIMweR.js +2 -0
- package/storybook-static/assets/{external-template.test.stories-CpJ68Ghy.js → external-template.test.stories-VfKUQ8eu.js} +1 -1
- package/storybook-static/assets/{form.test.stories-D35lyqd8.js → form.test.stories-CnuGN7Zw.js} +1 -1
- package/storybook-static/assets/{handlers-CW9pDZnt.js → handlers-V_T7WjNK.js} +21 -21
- package/storybook-static/assets/{http-request.stories-CBbknCOO.js → http-request.stories-8NN1Coqm.js} +1 -1
- package/storybook-static/assets/iframe-DnhkgdtG.js +2 -0
- package/storybook-static/assets/index-3Sfy-t3H.js +769 -0
- package/storybook-static/assets/index-BcZLpTeD.js +8 -0
- package/storybook-static/assets/index-CIBI7sCB.js +1 -0
- package/storybook-static/assets/{index-BSz1w4Gl.js → index-CxRwF5Or.js} +130 -130
- package/storybook-static/assets/{index-YxUFxnQR.js → index-DN1RoK17.js} +1 -1
- package/storybook-static/assets/{index-B3QjF0Ed.js → index-DjJD7gkO.js} +1 -1
- package/storybook-static/assets/{local-storage.test.stories-BY-PWhuk.js → local-storage.test.stories-Dk5Yqc7m.js} +1 -1
- package/storybook-static/assets/{location-element.test.stories-3auBYEaU.js → location-element.test.stories-56um6s5L.js} +1 -1
- package/storybook-static/assets/{module-url.test.stories-B7L9cL60.js → module-url.test.stories-DEponQ7l.js} +1 -1
- package/storybook-static/assets/{preview-BRPR-UXC.js → preview-CNKoaWES.js} +1 -1
- package/storybook-static/assets/preview-Czc-sw5H.js +2 -0
- package/storybook-static/assets/preview-DAeyCMnM.js +1 -0
- package/storybook-static/assets/{preview-CfWMRsRq.js → preview-vbpHsp94.js} +2 -2
- package/storybook-static/assets/{set-url.test.stories-CuSuDLIx.js → set-url.test.stories-B4E6hIe-.js} +1 -1
- package/storybook-static/assets/{slice-events.test.stories-BkRKsKem.js → slice-events.test.stories-BR0F-B6I.js} +138 -13
- package/storybook-static/assets/{slots.test.stories-BJCUWFkE.js → slots.test.stories-CgfJIyCr.js} +1 -1
- package/storybook-static/assets/tiny-invariant-CopsF_GD.js +1 -0
- package/storybook-static/assets/{version-select.test.stories-B3ybJn_Z.js → version-select.test.stories-nmxATIwv.js} +1 -1
- package/storybook-static/demo/a.svg +26 -26
- package/storybook-static/demo/data-slices.html +37 -0
- package/storybook-static/iframe.html +2 -2
- package/storybook-static/index.html +4 -0
- package/storybook-static/index.json +1 -1
- package/storybook-static/project.json +1 -1
- package/storybook-static/sb-addons/chromatic-com-storybook-10/manager-bundle.js +333 -0
- package/storybook-static/sb-addons/chromatic-com-storybook-10/manager-bundle.js.LEGAL.txt +40 -0
- package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
- package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +8 -8
- package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +82 -85
- package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +1 -1
- package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +1 -1
- package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
- package/storybook-static/sb-addons/interactions-9/manager-bundle.js +66 -67
- package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +1 -1
- package/storybook-static/sb-manager/globals-module-info.js +25 -3
- package/storybook-static/sb-manager/globals-runtime.js +29585 -43124
- package/storybook-static/sb-manager/runtime.js +10647 -9399
- package/storybook-static/sb-preview/runtime.js +3536 -5860
- package/test-runner-jest.config.js +15 -0
- package/dist/custom-element-CUsSENWc.cjs +0 -97
- package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png +0 -0
- package/storybook-static/assets/Color-ERTF36HU-CQkSD2nd.js +0 -1
- package/storybook-static/assets/custom-element-BDGsYgbP.js +0 -97
- package/storybook-static/assets/entry-preview-C313OLrj.js +0 -26
- package/storybook-static/assets/entry-preview-docs-B7ORr9w5.js +0 -2
- package/storybook-static/assets/iframe-DOi4N7qI.js +0 -2
- package/storybook-static/assets/index-BdcJ-iJ7.js +0 -8
- package/storybook-static/assets/index-CaL3Qp7t.js +0 -634
- package/storybook-static/assets/index-DgFM0Ce3.js +0 -1
- package/storybook-static/assets/preview-C992A1Y-.js +0 -2
- package/storybook-static/assets/preview-CcS4DQh8.js +0 -1
- package/storybook-static/assets/tiny-invariant-BxWVcicq.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{m as p,a as i,G as l,K as m,P as c,g as T,L as b,b as d,v as S,w as B,c as L,E as C,$ as H,y as u,d as g,N as y,e as I,D as h,x as k,C as P,f as W,S as A,R as F,I as x,h as D,i as R,A as f,F as v,j as E,k as M,l as N,W as q,n as w,T as O,t as U,o as Z,p as j,q as z,r as G,s as J,u as K,z as Q,B as V,H as X,J as Y,M as _,V as $,O as aa,Q as sa,U as oa,X as ta,Y as ea,Z as ra,_ as na,a0 as pa,a1 as ia,a2 as la,a3 as ma,a4 as ca,a5 as Ta,a6 as ba,a7 as da,a8 as Sa,a9 as Ba,aa as La,ab as Ca,ac as Ha,ad as ua}from"./index-3Sfy-t3H.js";import"./iframe-DnhkgdtG.js";import"../sb-preview/runtime.js";import"./index-BcZLpTeD.js";import"./index-D-8MO0q_.js";import"./index-DrFu-skq.js";export{p as A,i as ActionBar,l as AddonPanel,m as Badge,c as Bar,T as Blockquote,b as Button,d as ClipboardCode,S as Code,B as DL,L as Div,C as DocumentWrapper,H as EmptyTabContent,u as ErrorFormatter,g as FlexBar,y as Form,I as H1,h as H2,k as H3,P as H4,W as H5,A as H6,F as HR,x as IconButton,D as IconButtonSkeleton,R as Icons,f as Img,v as LI,E as Link,M as ListItem,N as Loader,q as Modal,w as OL,O as P,U as Placeholder,Z as Pre,j as ResetWrapper,z as ScrollArea,G as Separator,J as Spaced,K as Span,Q as StorybookIcon,V as StorybookLogo,X as Symbols,Y as SyntaxHighlighter,_ as TT,$ as TabBar,aa as TabButton,sa as TabWrapper,oa as Table,ta as Tabs,ea as TabsState,ra as TooltipLinkList,na as TooltipMessage,pa as TooltipNote,ia as UL,la as WithTooltip,ma as WithTooltipPure,ca as Zoom,Ta as codeCommon,ba as components,da as createCopyToClipboardFunction,Sa as getStoryHref,Ba as icons,La as interleaveSeparators,Ca as nameSpaceClassNames,Ha as resetComponents,ua as withReset};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{af as e}from"./index-3Sfy-t3H.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function f(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{f as M,u};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{w as x,u as y,e as c}from"./index-
|
|
1
|
+
import{w as x,u as y,e as c}from"./index-CxRwF5Or.js";import"./custom-element-D59Fok1f.js";import"./http-request-DNq59pnj.js";import"./location-element-hKpcXCdn.js";const g=(l,t)=>{if(l==="text")return t;if(l==="json")try{return JSON.parse(t)}catch{return null}const a=document.createElement("input");return a.setAttribute("type",l),l==="number"?(a.value=t,a.valueAsNumber):l==="date"?t?(a.valueAsDate=new Date(t),a.value):null:(a.value=t,a.value)};let b,S,w;function I(l,t){b.call(localStorage,l,t),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l,value:t}}))}function B(l){S.call(localStorage,l),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l}}))}function p(){w.call(localStorage),window.dispatchEvent(new CustomEvent("local-storage",{detail:{}}))}function T(){b||(b=localStorage.setItem,localStorage.setItem=I,S=localStorage.removeItem,localStorage.removeItem=B,w=localStorage.clear,localStorage.clear=p)}T();function V(l,t){I(l,t)}class K extends HTMLElement{static observedAttributes=["value","slice","key","type","live"];#e;get value(){return this.#e===null?void 0:this.#e}set value(t){return this.#e=t}async connectedCallback(){const t=i=>this.getAttribute(i),a=()=>{this.#e=g(t("type"),localStorage.getItem(t("key"))),this.dispatchEvent(new Event("change"))};if(this.#e=g(t("type"),localStorage.getItem(t("key"))),this.hasAttribute("value")?V(t("key"),this.#e=t("value")):a(),this.hasAttribute("live")){const i=e=>(e.detail.key===t("key")||!e.detail.key)&&a();window.addEventListener("local-storage",i),T(),this._destroy=()=>window.removeEventListener("local-storage",i)}}disconnectedCallback(){this._destroy?.()}}window.customElements.define("local-storage",K);const r={title:"",slice:"ls-slice",key:"sb-ls-key",value:"",live:"",body:""};function o(l){return new Promise(t=>setTimeout(t,l))}function f(l){const{title:t,slice:a,key:i,value:e,live:n,body:u}={...r,...l};return`
|
|
2
2
|
<fieldset>
|
|
3
3
|
<legend>${t}</legend>
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{w as m,e}from"./index-
|
|
1
|
+
import{w as m,e}from"./index-CxRwF5Or.js";import"./custom-element-D59Fok1f.js";import"./location-element-hKpcXCdn.js";const u={title:"",slice:"url-slice",href:"",live:"",body:""};function h(c){return new Promise(o=>setTimeout(o,c))}function x(c){const{title:o,slice:t,href:l,live:r,body:i}={...u,...c};return`
|
|
2
2
|
<fieldset>
|
|
3
3
|
<legend>${o}</legend>
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{w as s,e as a}from"./index-
|
|
1
|
+
import{w as s,e as a}from"./index-CxRwF5Or.js";import"./custom-element-D59Fok1f.js";const c=(t,e)=>t.getAttribute(e);class b extends HTMLElement{static observedAttributes=["slice","src"];sliceInit(){let e=c(this,"src");try{const l=e.charAt(0)==="."?new URL(e,this.closest("[base]")?.getAttribute("base")||location.href).href:import.meta.resolve(e);this.setAttribute("value",this.value=l)}catch(l){this.setAttribute("error",l.message),this.setAttribute("value",e),console.error(l.message??l,e)}this.dispatchEvent(new Event("change"))}attributeChangedCallback(e,l,u){e==="src"&&this.sliceInit()}}window.customElements.define("module-url",b);function d(t){const{title:e,body:l}=t;return`
|
|
2
2
|
<fieldset>
|
|
3
3
|
<legend>${e}</legend>
|
|
4
4
|
${l}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{i as r}from"./index-
|
|
1
|
+
import{i as r}from"./index-CxRwF5Or.js";var{step:a}=r({step:(p,t,e)=>t(e)},{intercept:!0}),i={throwPlayFunctionExceptions:!1};export{i as parameters,a as runStep};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-Dpr5iB0o.js","./iframe-DnhkgdtG.js","./index-3Sfy-t3H.js","./index-BcZLpTeD.js","./index-D-8MO0q_.js","./index-DrFu-skq.js"])))=>i.map(i=>d[i]);
|
|
2
|
+
import{_ as a}from"./iframe-DnhkgdtG.js";import"../sb-preview/runtime.js";var i=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((e,r)=>{let[t,o]=r;return o.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await a(()=>import("./DocsRenderer-CFRXHY34-Dpr5iB0o.js"),__vite__mapDeps([0,1,2,3,4,5]),import.meta.url);return new e},stories:{filter:e=>(e.tags||[]).filter(r=>i[r]).length===0&&!e.parameters.docs?.disable}}};export{d as parameters};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{i as S}from"./tiny-invariant-CopsF_GD.js";const{useEffect:T}=__STORYBOOK_MODULE_PREVIEW_API__,{global:u}=__STORYBOOK_MODULE_GLOBAL__;var j="measureEnabled";function Y(){let e=u.document.documentElement,t=Math.max(e.scrollHeight,e.offsetHeight);return{width:Math.max(e.scrollWidth,e.offsetWidth),height:t}}function K(){let e=u.document.createElement("canvas");e.id="storybook-addon-measure";let t=e.getContext("2d");S(t!=null);let{width:o,height:l}=Y();return A(e,t,{width:o,height:l}),e.style.position="absolute",e.style.left="0",e.style.top="0",e.style.zIndex="2147483647",e.style.pointerEvents="none",u.document.body.appendChild(e),{canvas:e,context:t,width:o,height:l}}function A(e,t,{width:o,height:l}){e.style.width=`${o}px`,e.style.height=`${l}px`;let i=u.window.devicePixelRatio;e.width=Math.floor(o*i),e.height=Math.floor(l*i),t.scale(i,i)}var h={};function G(){h.canvas||(h=K())}function H(){h.context&&h.context.clearRect(0,0,h.width??0,h.height??0)}function U(e){H(),e(h.context)}function V(){S(h.canvas),S(h.context),A(h.canvas,h.context,{width:0,height:0});let{width:e,height:t}=Y();A(h.canvas,h.context,{width:e,height:t}),h.width=e,h.height=t}function Z(){h.canvas&&(H(),h.canvas.parentNode?.removeChild(h.canvas),h={})}var w={margin:"#f6b26b",border:"#ffe599",padding:"#93c47d",content:"#6fa8dc",text:"#232020"},c=6;function W(e,{x:t,y:o,w:l,h:i,r:n}){t=t-l/2,o=o-i/2,l<2*n&&(n=l/2),i<2*n&&(n=i/2),e.beginPath(),e.moveTo(t+n,o),e.arcTo(t+l,o,t+l,o+i,n),e.arcTo(t+l,o+i,t,o+i,n),e.arcTo(t,o+i,t,o,n),e.arcTo(t,o,t+l,o,n),e.closePath()}function J(e,{padding:t,border:o,width:l,height:i,top:n,left:r}){let f=l-o.left-o.right-t.left-t.right,a=i-t.top-t.bottom-o.top-o.bottom,s=r+o.left+t.left,m=n+o.top+t.top;return e==="top"?s+=f/2:e==="right"?(s+=f,m+=a/2):e==="bottom"?(s+=f/2,m+=a):e==="left"?m+=a/2:e==="center"&&(s+=f/2,m+=a/2),{x:s,y:m}}function Q(e,t,{margin:o,border:l,padding:i},n,r){let f=d=>0,a=0,s=0,m=r?1:.5,g=r?n*2:0;return e==="padding"?f=d=>i[d]*m+g:e==="border"?f=d=>i[d]+l[d]*m+g:e==="margin"&&(f=d=>i[d]+l[d]+o[d]*m+g),t==="top"?s=-f("top"):t==="right"?a=f("right"):t==="bottom"?s=f("bottom"):t==="left"&&(a=-f("left")),{offsetX:a,offsetY:s}}function x(e,t){return Math.abs(e.x-t.x)<Math.abs(e.w+t.w)/2&&Math.abs(e.y-t.y)<Math.abs(e.h+t.h)/2}function tt(e,t,o){return e==="top"?t.y=o.y-o.h-c:e==="right"?t.x=o.x+o.w/2+c+t.w/2:e==="bottom"?t.y=o.y+o.h+c:e==="left"&&(t.x=o.x-o.w/2-c-t.w/2),{x:t.x,y:t.y}}function X(e,t,{x:o,y:l,w:i,h:n},r){return W(e,{x:o,y:l,w:i,h:n,r:3}),e.fillStyle=`${w[t]}dd`,e.fill(),e.strokeStyle=w[t],e.stroke(),e.fillStyle=w.text,e.fillText(r,o,l),W(e,{x:o,y:l,w:i,h:n,r:3}),e.fillStyle=`${w[t]}dd`,e.fill(),e.strokeStyle=w[t],e.stroke(),e.fillStyle=w.text,e.fillText(r,o,l),{x:o,y:l,w:i,h:n}}function C(e,t){e.font="600 12px monospace",e.textBaseline="middle",e.textAlign="center";let o=e.measureText(t),l=o.actualBoundingBoxAscent+o.actualBoundingBoxDescent,i=o.width+c*2,n=l+c*2;return{w:i,h:n}}function et(e,t,{type:o,position:l="center",text:i},n,r=!1){let{x:f,y:a}=J(l,t),{offsetX:s,offsetY:m}=Q(o,l,t,c+1,r);f+=s,a+=m;let{w:g,h:d}=C(e,i);if(n&&x({x:f,y:a,w:g,h:d},n)){let M=tt(l,{x:f,y:a,w:g,h:d},n);f=M.x,a=M.y}return X(e,o,{x:f,y:a,w:g,h:d},i)}function ot(e,{w:t,h:o}){let l=t*.5+c,i=o*.5+c;return{offsetX:(e.x==="left"?-1:1)*l,offsetY:(e.y==="top"?-1:1)*i}}function it(e,t,{type:o,text:l}){let{floatingAlignment:i,extremities:n}=t,r=n[i.x],f=n[i.y],{w:a,h:s}=C(e,l),{offsetX:m,offsetY:g}=ot(i,{w:a,h:s});return r+=m,f+=g,X(e,o,{x:r,y:f,w:a,h:s},l)}function E(e,t,o,l){let i=[];o.forEach((n,r)=>{let f=l&&n.position==="center"?it(e,t,n):et(e,t,n,i[r-1],l);i[r]=f})}function lt(e,t,o,l){let i=o.reduce((n,r)=>(Object.prototype.hasOwnProperty.call(n,r.position)||(n[r.position]=[]),n[r.position]?.push(r),n),{});i.top&&E(e,t,i.top,l),i.right&&E(e,t,i.right,l),i.bottom&&E(e,t,i.bottom,l),i.left&&E(e,t,i.left,l),i.center&&E(e,t,i.center,l)}var L={margin:"#f6b26ba8",border:"#ffe599a8",padding:"#93c47d8c",content:"#6fa8dca8"},B=30;function p(e){return parseInt(e.replace("px",""),10)}function b(e){return Number.isInteger(e)?e:e.toFixed(2)}function P(e){return e.filter(t=>t.text!==0&&t.text!=="0")}function nt(e){let t={top:u.window.scrollY,bottom:u.window.scrollY+u.window.innerHeight,left:u.window.scrollX,right:u.window.scrollX+u.window.innerWidth},o={top:Math.abs(t.top-e.top),bottom:Math.abs(t.bottom-e.bottom),left:Math.abs(t.left-e.left),right:Math.abs(t.right-e.right)};return{x:o.left>o.right?"left":"right",y:o.top>o.bottom?"top":"bottom"}}function ft(e){let t=u.getComputedStyle(e),{top:o,left:l,right:i,bottom:n,width:r,height:f}=e.getBoundingClientRect(),{marginTop:a,marginBottom:s,marginLeft:m,marginRight:g,paddingTop:d,paddingBottom:M,paddingLeft:k,paddingRight:F,borderBottomWidth:D,borderTopWidth:I,borderLeftWidth:$,borderRightWidth:N}=t;o=o+u.window.scrollY,l=l+u.window.scrollX,n=n+u.window.scrollY,i=i+u.window.scrollX;let y={top:p(a),bottom:p(s),left:p(m),right:p(g)},q={top:p(d),bottom:p(M),left:p(k),right:p(F)},z={top:p(I),bottom:p(D),left:p($),right:p(N)},_={top:o-y.top,bottom:n+y.bottom,left:l-y.left,right:i+y.right};return{margin:y,padding:q,border:z,top:o,left:l,bottom:n,right:i,width:r,height:f,extremities:_,floatingAlignment:nt(_)}}function rt(e,{margin:t,width:o,height:l,top:i,left:n,bottom:r,right:f}){let a=l+t.bottom+t.top;e.fillStyle=L.margin,e.fillRect(n,i-t.top,o,t.top),e.fillRect(f,i-t.top,t.right,a),e.fillRect(n,r,o,t.bottom),e.fillRect(n-t.left,i-t.top,t.left,a);let s=[{type:"margin",text:b(t.top),position:"top"},{type:"margin",text:b(t.right),position:"right"},{type:"margin",text:b(t.bottom),position:"bottom"},{type:"margin",text:b(t.left),position:"left"}];return P(s)}function at(e,{padding:t,border:o,width:l,height:i,top:n,left:r,bottom:f,right:a}){let s=l-o.left-o.right,m=i-t.top-t.bottom-o.top-o.bottom;e.fillStyle=L.padding,e.fillRect(r+o.left,n+o.top,s,t.top),e.fillRect(a-t.right-o.right,n+t.top+o.top,t.right,m),e.fillRect(r+o.left,f-t.bottom-o.bottom,s,t.bottom),e.fillRect(r+o.left,n+t.top+o.top,t.left,m);let g=[{type:"padding",text:t.top,position:"top"},{type:"padding",text:t.right,position:"right"},{type:"padding",text:t.bottom,position:"bottom"},{type:"padding",text:t.left,position:"left"}];return P(g)}function st(e,{border:t,width:o,height:l,top:i,left:n,bottom:r,right:f}){let a=l-t.top-t.bottom;e.fillStyle=L.border,e.fillRect(n,i,o,t.top),e.fillRect(n,r-t.bottom,o,t.bottom),e.fillRect(n,i+t.top,t.left,a),e.fillRect(f-t.right,i+t.top,t.right,a);let s=[{type:"border",text:t.top,position:"top"},{type:"border",text:t.right,position:"right"},{type:"border",text:t.bottom,position:"bottom"},{type:"border",text:t.left,position:"left"}];return P(s)}function ht(e,{padding:t,border:o,width:l,height:i,top:n,left:r}){let f=l-o.left-o.right-t.left-t.right,a=i-t.top-t.bottom-o.top-o.bottom;return e.fillStyle=L.content,e.fillRect(r+o.left+t.left,n+o.top+t.top,f,a),[{type:"content",position:"center",text:`${b(f)} x ${b(a)}`}]}function mt(e){return t=>{if(e&&t){let o=ft(e),l=rt(t,o),i=at(t,o),n=st(t,o),r=ht(t,o),f=o.width<=B*3||o.height<=B;lt(t,o,[...r,...i,...n,...l],f)}}}function ut(e){U(mt(e))}var dt=(e,t)=>{let o=u.document.elementFromPoint(e,t),l=i=>{if(i&&i.shadowRoot){let n=i.shadowRoot.elementFromPoint(e,t);return i.isEqualNode(n)?i:n.shadowRoot?l(n):n}return i};return l(o)||o},O,v={x:0,y:0};function R(e,t){O=dt(e,t),ut(O)}var gt=(e,t)=>{let{measureEnabled:o}=t.globals;return T(()=>{let l=i=>{window.requestAnimationFrame(()=>{i.stopPropagation(),v.x=i.clientX,v.y=i.clientY})};return document.addEventListener("pointermove",l),()=>{document.removeEventListener("pointermove",l)}},[]),T(()=>{let l=n=>{window.requestAnimationFrame(()=>{n.stopPropagation(),R(n.clientX,n.clientY)})},i=()=>{window.requestAnimationFrame(()=>{V()})};return t.viewMode==="story"&&o&&(document.addEventListener("pointerover",l),G(),window.addEventListener("resize",i),R(v.x,v.y)),()=>{window.removeEventListener("resize",i),Z()}},[o,t.viewMode]),e()},ct=[gt],wt={[j]:!1};export{ct as decorators,wt as initialGlobals};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{i as F,d,E as N,t as ye,I as G,k as ve,c as we,R as be,h as Ee}from"./handlers-
|
|
1
|
+
import{i as F,d,E as N,t as ye,I as G,k as ve,c as we,R as be,h as Ee}from"./handlers-V_T7WjNK.js";function Re(e,t){const r=e.emit;if(r._isPiped)return;const s=function(n,...i){return t.emit(n,...i),r.call(this,n,...i)};s._isPiped=!0,e.emit=s}function ke(e){const t=[...e];return Object.freeze(t),t}class qe{subscriptions=[];dispose(){let t;for(;t=this.subscriptions.shift();)t()}}class Se{constructor(t){this.initialHandlers=t,this.handlers=[...t]}handlers;prepend(t){this.handlers.unshift(...t)}reset(t){this.handlers=t.length>0?[...t]:[...this.initialHandlers]}currentHandlers(){return this.handlers}}class Le extends qe{handlersController;emitter;publicEmitter;events;constructor(...t){super(),F(this.validateHandlers(t),d.formatMessage("Failed to apply given request handlers: invalid input. Did you forget to spread the request handlers Array?")),this.handlersController=new Se(t),this.emitter=new N,this.publicEmitter=new N,Re(this.emitter,this.publicEmitter),this.events=this.createLifeCycleEvents(),this.subscriptions.push(()=>{this.emitter.removeAllListeners(),this.publicEmitter.removeAllListeners()})}validateHandlers(t){return t.every(r=>!Array.isArray(r))}use(...t){F(this.validateHandlers(t),d.formatMessage('Failed to call "use()" with the given request handlers: invalid input. Did you forget to spread the array of request handlers?')),this.handlersController.prepend(t)}restoreHandlers(){this.handlersController.currentHandlers().forEach(t=>{t.isUsed=!1})}resetHandlers(...t){this.handlersController.reset(t)}listHandlers(){return ke(this.handlersController.currentHandlers())}createLifeCycleEvents(){return{on:(...t)=>this.publicEmitter.on(...t),removeListener:(...t)=>this.publicEmitter.removeListener(...t),removeAllListeners:(...t)=>this.publicEmitter.removeAllListeners(...t)}}}var Te=async e=>{try{return{error:null,data:await e().catch(r=>{throw r})}}catch(t){return{error:t,data:null}}};const xe=async({request:e,requestId:t,handlers:r,resolutionContext:s})=>{let o=null,n=null;for(const i of r)if(n=await i.run({request:e,requestId:t,resolutionContext:s}),n!==null&&(o=i),n?.response)break;return o?{handler:o,parsedResult:n?.parsedResult,response:n?.response}:null};async function Pe(e,t="warn"){const r=new URL(e.url),s=ye(r)+r.search,o=e.method==="HEAD"||e.method==="GET"?null:await e.clone().text(),i=`intercepted a request without a matching request handler:${`
|
|
2
2
|
|
|
3
3
|
• ${e.method} ${s}
|
|
4
4
|
|
|
@@ -49,4 +49,4 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
|
|
|
49
49
|
[msw-storybook-addon] You are using parameters.msw as an Array instead of an Object with a property "handlers". This usage is deprecated and will be removed in the next release. Please use the Object syntax instead.
|
|
50
50
|
|
|
51
51
|
More info: https://github.com/mswjs/msw-storybook-addon/blob/main/MIGRATION.md#parametersmsw-array-notation-deprecated-in-favor-of-object-notation
|
|
52
|
-
`);function or(e){if(E?.resetHandlers(),e!=null){if(Array.isArray(e)&&e.length>0){nr(),E.use(...e);return}if("handlers"in e&&e.handlers){const t=Object.values(e.handlers).filter(Boolean).reduce((r,s)=>r.concat(s),[]);t.length>0&&E.use(...t);return}}}var ir=async e=>(await Zt(),or(e.parameters.msw),{});Qt({onUnhandledRequest:"bypass"});const lr={parameters:{controls:{matchers:{color:/(background|color)$/i,date:/Date$/i}},msw:{handlers:{auth:null,others:Ee}}},loaders:[ir],tags:["autodocs","autodocs"]};export{lr as default};
|
|
52
|
+
`);function or(e){if(E?.resetHandlers(),e!=null){if(Array.isArray(e)&&e.length>0){nr(),E.use(...e);return}if("handlers"in e&&e.handlers){const t=Object.values(e.handlers).filter(Boolean).reduce((r,s)=>r.concat(s),[]);t.length>0&&E.use(...t);return}}}var ir=async e=>(await Zt(),or(e.parameters.msw),{});Qt({onUnhandledRequest:"bypass"});const lr={parameters:{controls:{matchers:{color:/(background|color)$/i,date:/Date$/i}},msw:{handlers:{auth:null,others:Ee}}},loaders:[ir],tags:["autodocs","autodocs","autodocs"]};export{lr as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{w as u,u as s,e as n}from"./index-
|
|
1
|
+
import{w as u,u as s,e as n}from"./index-CxRwF5Or.js";import"./custom-element-D59Fok1f.js";import"./location-element-hKpcXCdn.js";const b={title:"",slice:"url-slice",href:"",live:"",body:""};function l(e){return new Promise(t=>setTimeout(t,e))}function y(e){const{title:t,body:i}={...b,...e};return`
|
|
2
2
|
<fieldset>
|
|
3
3
|
<legend>${t}</legend>
|
|
4
4
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import{w as
|
|
1
|
+
import{w as n,e as t,u as s}from"./index-CxRwF5Or.js";import"./custom-element-D59Fok1f.js";function l(a){return new Promise(e=>setTimeout(e,a))}function B(a){const{title:e,body:c}=a;return`
|
|
2
2
|
<fieldset>
|
|
3
|
-
<legend>${
|
|
4
|
-
${
|
|
3
|
+
<legend>${e}</legend>
|
|
4
|
+
${c}
|
|
5
5
|
</fieldset>
|
|
6
|
-
`}const
|
|
6
|
+
`}const C={title:"slice-events",render:B},u={args:{title:"Slice initialization, change on event",body:`
|
|
7
7
|
<p>initial value should be 0; + and - should change the number in input field</p>
|
|
8
8
|
<custom-element>
|
|
9
9
|
<template>
|
|
@@ -13,7 +13,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
|
|
|
13
13
|
<code data-testid="slice-value">{ //clickcount }</code>
|
|
14
14
|
</template>
|
|
15
15
|
</custom-element>
|
|
16
|
-
`},play:async({canvasElement:
|
|
16
|
+
`},play:async({canvasElement:a})=>{const e=u.args.title,c=n(a);await c.findByText(e);const i=await c.findByTestId("slice-value"),o=await a.querySelector('[type="number"]');await t(i).toBeInTheDocument(),t(i.textContent).to.equal("0","initial slot value 0"),t(o.value).to.equal("0","initial input value 0"),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),t(i.textContent).to.equal("1","increment to 1"),t(o.value).to.equal("1","increment input 1"),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),t(i.textContent).to.equal("3","double increment to 3"),t(o.value).to.equal("3","double increment input to 3"),a.querySelector('[slice-value="//clickcount - 1"]').click(),await l(10),t(i.textContent).to.equal("2","decrement to 2"),t(o.value).to.equal("2","decrement input to 2")}},p={args:{title:"Realtime Slice data on event",body:`
|
|
17
17
|
<p>move the mouse over TEXTAREA and click to see slice and slice event changed</p>
|
|
18
18
|
<custom-element>
|
|
19
19
|
<template>
|
|
@@ -24,7 +24,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
|
|
|
24
24
|
event type : <code data-testid="//slice/s/event/@type" >{ //slice/s/event/@type }</code>
|
|
25
25
|
</template>
|
|
26
26
|
</custom-element>
|
|
27
|
-
`},play:async({canvasElement:
|
|
27
|
+
`},play:async({canvasElement:a})=>{const e=p.args.title,c=n(a);await c.findByText(e);const i=()=>c.getByTestId("//slice/s").textContent,o=()=>c.getByTestId("//slice/s/event/@offsetY").textContent,w=()=>c.getByTestId("//slice/s/event/@type").textContent,k=await a.querySelector("textarea");t(i()).to.equal("","initial slot value blank"),t(o()).to.equal("","initial slot offsetY blank"),t(w()).to.equal("","initial slot event blank"),((h,x,T)=>{const g=new MouseEvent(T,{screenX:h,screenY:x,clientX:h,clientY:x,offsetX:h,offsetY:x});k.dispatchEvent(g)})(20,20,"click"),await l(10),t(i()).to.equal("x:20","click slot value 20"),t(Number(o())).to.be.lessThan(0,"offsetY click"),t(w()).to.equal("click","click event type")}},d={args:{title:'slice-event="change submit change submit" ',body:`
|
|
28
28
|
<p> double same event should be treated as one.</p>
|
|
29
29
|
<custom-element>
|
|
30
30
|
<template>
|
|
@@ -35,7 +35,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
|
|
|
35
35
|
</form>
|
|
36
36
|
</template>
|
|
37
37
|
</custom-element>
|
|
38
|
-
`},play:async({canvasElement:
|
|
38
|
+
`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("f1");c.focus(),await s.type(c,"AB"),e.getByRole("button").focus(),await s.clear(c),await s.click(e.getByRole("button")),t(await e.findByText("slices count 2")).toBeInTheDocument()}},r={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
|
|
39
39
|
<p> double same event should be treated as one.</p>
|
|
40
40
|
<custom-element>
|
|
41
41
|
<template>
|
|
@@ -48,7 +48,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
|
|
|
48
48
|
slice <code>s2: {//slice/s2}</code><br/>
|
|
49
49
|
</template>
|
|
50
50
|
</custom-element>
|
|
51
|
-
`},play:async({canvasElement:
|
|
51
|
+
`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("f1");c.focus(),await s.type(c,"AB"),await t(await e.findByText("s1: AB")).toBeInTheDocument(),await t(await e.findByText("s2: AB")).toBeInTheDocument()}},m={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
|
|
52
52
|
<p> double same event should be treated as one.</p>
|
|
53
53
|
<custom-element>
|
|
54
54
|
<template>
|
|
@@ -59,7 +59,40 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
|
|
|
59
59
|
<p>slice: {//slice/s1}</p>
|
|
60
60
|
</template>
|
|
61
61
|
</custom-element>
|
|
62
|
-
`},play:async({canvasElement:
|
|
62
|
+
`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("f1");c.focus(),await s.type(c,"AB"),await t(await e.findByText("emotion attribute: AB")).toBeInTheDocument()}},v={args:{title:"Checkbox value in slice ",body:`
|
|
63
|
+
<p> Checked value propagated into slice</p>
|
|
64
|
+
<custom-element>
|
|
65
|
+
<template>
|
|
66
|
+
<input type="checkbox" slice="s1" value="V1" checked/>
|
|
67
|
+
<p>slice: {//s1}</p>
|
|
68
|
+
</template>
|
|
69
|
+
</custom-element>
|
|
70
|
+
`},play:async({canvasElement:a})=>{const e=n(a);await t(await e.findByText("slice: V1")).toBeInTheDocument()}},y={args:{title:"UncheckedCheckbox value not in slice ",body:`
|
|
71
|
+
<p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
|
|
72
|
+
<custom-element>
|
|
73
|
+
<template>
|
|
74
|
+
<input type="checkbox" slice="s1" value="V1" data-testid="i1"/>
|
|
75
|
+
<p data-testid="t1">slice: {//s1}</p>
|
|
76
|
+
</template>
|
|
77
|
+
</custom-element>
|
|
78
|
+
`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("t1");await t(c.textContent).toEqual("slice: ");const i=await e.findByTestId("i1");await s.click(i),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await s.click(i),await t(c.textContent).toEqual("slice: ")}},b={args:{title:"UncheckedCheckbox slice-value not in slice ",body:`
|
|
79
|
+
<p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
|
|
80
|
+
<custom-element>
|
|
81
|
+
<template>
|
|
82
|
+
<input type="checkbox" slice="s1" slice-value="'V1'" data-testid="i1"/>
|
|
83
|
+
<p data-testid="t1">slice: {//s1}</p>
|
|
84
|
+
</template>
|
|
85
|
+
</custom-element>
|
|
86
|
+
`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("t1");await t(c.textContent).toEqual("slice: ");const i=await e.findByTestId("i1");await s.click(i),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await s.click(i),await t(c.textContent).toEqual("slice: ")}},f={args:{title:"Radiogroup value",body:`
|
|
87
|
+
<p> The value propagated into slice from the last checked radiobutton. </p>
|
|
88
|
+
<custom-element>
|
|
89
|
+
<template>
|
|
90
|
+
<p>V1: <input type="radio" slice="s1" value="V1" data-testid="i1" name="group1"/></p>
|
|
91
|
+
<p>V2: <input type="radio" slice="s1" value="V2" data-testid="i2" name="group1"/></p>
|
|
92
|
+
<p data-testid="t1">slice: {//s1}</p>
|
|
93
|
+
</template>
|
|
94
|
+
</custom-element>
|
|
95
|
+
`},play:async({canvasElement:a})=>{const e=n(a);await s.click(await e.findByTestId("i1")),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await s.click(await e.findByTestId("i2")),await t(await e.findByText("slice: V2")).toBeInTheDocument()}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
|
|
63
96
|
args: {
|
|
64
97
|
title: 'Slice initialization, change on event',
|
|
65
98
|
body: \`
|
|
@@ -100,7 +133,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
|
|
|
100
133
|
expect(code.textContent).to.equal('2', 'decrement to 2');
|
|
101
134
|
expect(input.value).to.equal('2', 'decrement input to 2');
|
|
102
135
|
}
|
|
103
|
-
}`,...
|
|
136
|
+
}`,...u.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
|
|
104
137
|
args: {
|
|
105
138
|
title: 'Realtime Slice data on event',
|
|
106
139
|
body: \`
|
|
@@ -147,7 +180,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
|
|
|
147
180
|
expect(Number(offsetY())).to.be.lessThan(0, 'offsetY click');
|
|
148
181
|
expect(eventType()).to.equal('click', 'click event type');
|
|
149
182
|
}
|
|
150
|
-
}`,...
|
|
183
|
+
}`,...p.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
|
|
151
184
|
args: {
|
|
152
185
|
title: 'slice-event="change submit change submit" ',
|
|
153
186
|
body: \`
|
|
@@ -175,7 +208,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
|
|
|
175
208
|
await userEvent.click(canvas.getByRole('button'));
|
|
176
209
|
expect(await canvas.findByText('slices count 2')).toBeInTheDocument();
|
|
177
210
|
}
|
|
178
|
-
}`,...
|
|
211
|
+
}`,...d.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
|
179
212
|
args: {
|
|
180
213
|
title: 'slice="/datadom/attributes/emotion | s1" ',
|
|
181
214
|
body: \`
|
|
@@ -228,4 +261,96 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
|
|
|
228
261
|
await userEvent.type(input, 'AB');
|
|
229
262
|
await expect(await canvas.findByText('emotion attribute: AB')).toBeInTheDocument();
|
|
230
263
|
}
|
|
231
|
-
}`,...m.parameters?.docs?.source}}};
|
|
264
|
+
}`,...m.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
|
|
265
|
+
args: {
|
|
266
|
+
title: 'Checkbox value in slice ',
|
|
267
|
+
body: \`
|
|
268
|
+
<p> Checked value propagated into slice</p>
|
|
269
|
+
<custom-element>
|
|
270
|
+
<template>
|
|
271
|
+
<input type="checkbox" slice="s1" value="V1" checked/>
|
|
272
|
+
<p>slice: {//s1}</p>
|
|
273
|
+
</template>
|
|
274
|
+
</custom-element>
|
|
275
|
+
\`
|
|
276
|
+
},
|
|
277
|
+
play: async ({
|
|
278
|
+
canvasElement
|
|
279
|
+
}) => {
|
|
280
|
+
const canvas = within(canvasElement);
|
|
281
|
+
await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
|
|
282
|
+
}
|
|
283
|
+
}`,...v.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
|
|
284
|
+
args: {
|
|
285
|
+
title: 'UncheckedCheckbox value not in slice ',
|
|
286
|
+
body: \`
|
|
287
|
+
<p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
|
|
288
|
+
<custom-element>
|
|
289
|
+
<template>
|
|
290
|
+
<input type="checkbox" slice="s1" value="V1" data-testid="i1"/>
|
|
291
|
+
<p data-testid="t1">slice: {//s1}</p>
|
|
292
|
+
</template>
|
|
293
|
+
</custom-element>
|
|
294
|
+
\`
|
|
295
|
+
},
|
|
296
|
+
play: async ({
|
|
297
|
+
canvasElement
|
|
298
|
+
}) => {
|
|
299
|
+
const canvas = within(canvasElement);
|
|
300
|
+
const p = await canvas.findByTestId('t1');
|
|
301
|
+
await expect(p.textContent).toEqual("slice: ");
|
|
302
|
+
const cb = await canvas.findByTestId('i1');
|
|
303
|
+
await userEvent.click(cb);
|
|
304
|
+
await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
|
|
305
|
+
await userEvent.click(cb);
|
|
306
|
+
await expect(p.textContent).toEqual('slice: ');
|
|
307
|
+
}
|
|
308
|
+
}`,...y.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
|
|
309
|
+
args: {
|
|
310
|
+
title: 'UncheckedCheckbox slice-value not in slice ',
|
|
311
|
+
body: \`
|
|
312
|
+
<p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
|
|
313
|
+
<custom-element>
|
|
314
|
+
<template>
|
|
315
|
+
<input type="checkbox" slice="s1" slice-value="'V1'" data-testid="i1"/>
|
|
316
|
+
<p data-testid="t1">slice: {//s1}</p>
|
|
317
|
+
</template>
|
|
318
|
+
</custom-element>
|
|
319
|
+
\`
|
|
320
|
+
},
|
|
321
|
+
play: async ({
|
|
322
|
+
canvasElement
|
|
323
|
+
}) => {
|
|
324
|
+
const canvas = within(canvasElement);
|
|
325
|
+
const p = await canvas.findByTestId('t1');
|
|
326
|
+
await expect(p.textContent).toEqual("slice: ");
|
|
327
|
+
const cb = await canvas.findByTestId('i1');
|
|
328
|
+
await userEvent.click(cb);
|
|
329
|
+
await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
|
|
330
|
+
await userEvent.click(cb);
|
|
331
|
+
await expect(p.textContent).toEqual('slice: ');
|
|
332
|
+
}
|
|
333
|
+
}`,...b.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
|
|
334
|
+
args: {
|
|
335
|
+
title: 'Radiogroup value',
|
|
336
|
+
body: \`
|
|
337
|
+
<p> The value propagated into slice from the last checked radiobutton. </p>
|
|
338
|
+
<custom-element>
|
|
339
|
+
<template>
|
|
340
|
+
<p>V1: <input type="radio" slice="s1" value="V1" data-testid="i1" name="group1"/></p>
|
|
341
|
+
<p>V2: <input type="radio" slice="s1" value="V2" data-testid="i2" name="group1"/></p>
|
|
342
|
+
<p data-testid="t1">slice: {//s1}</p>
|
|
343
|
+
</template>
|
|
344
|
+
</custom-element>
|
|
345
|
+
\`
|
|
346
|
+
},
|
|
347
|
+
play: async ({
|
|
348
|
+
canvasElement
|
|
349
|
+
}) => {
|
|
350
|
+
const canvas = within(canvasElement);
|
|
351
|
+
await userEvent.click(await canvas.findByTestId('i1'));
|
|
352
|
+
await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
|
|
353
|
+
await userEvent.click(await canvas.findByTestId('i2'));
|
|
354
|
+
await expect(await canvas.findByText('slice: V2')).toBeInTheDocument();
|
|
355
|
+
}
|
|
356
|
+
}`,...f.parameters?.docs?.source}}};const S=["SliceInitChangeEvent","RealtimeEventInSlice","DoubleEventInSlice","MultipleSlices","SlicesInAttrAndName","CheckboxChecked","CheckboxUnchecked","CheckboxSliceValue","RadiogroupSliceValue"];export{v as CheckboxChecked,b as CheckboxSliceValue,y as CheckboxUnchecked,d as DoubleEventInSlice,r as MultipleSlices,f as RadiogroupSliceValue,p as RealtimeEventInSlice,u as SliceInitChangeEvent,m as SlicesInAttrAndName,S as __namedExportsOrder,C as default};
|
package/storybook-static/assets/{slots.test.stories-BJCUWFkE.js → slots.test.stories-CgfJIyCr.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{w as o,e as l}from"./index-
|
|
1
|
+
import{w as o,e as l}from"./index-CxRwF5Or.js";import"./custom-element-D59Fok1f.js";function y(t){const{title:a,tag:n,attributes:e,slot:s,payload:g}=t;return`
|
|
2
2
|
<fieldset>
|
|
3
3
|
<legend>${a}</legend>
|
|
4
4
|
<custom-element
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var a="Invariant failed";function n(r,i){if(!r)throw new Error(a)}export{n as i};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{w as r}from"./index-
|
|
1
|
+
import{w as r}from"./index-CxRwF5Or.js";import"./custom-element-D59Fok1f.js";import"./http-request-DNq59pnj.js";import"./location-element-hKpcXCdn.js";function o(e){return new Promise(s=>setTimeout(s,e))}function n(e){const{title:s,body:i}=e;return`
|
|
2
2
|
<fieldset>
|
|
3
3
|
<legend>${s}</legend>
|
|
4
4
|
${i}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
|
2
|
-
<defs>
|
|
3
|
-
|
|
4
|
-
</defs>
|
|
5
|
-
<polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
|
|
6
|
-
<path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
|
|
7
|
-
<path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
8
|
-
<path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
|
|
9
|
-
<path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
|
|
10
|
-
<path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
|
|
11
|
-
<path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
|
|
12
|
-
<path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
|
|
13
|
-
<path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
|
|
14
|
-
<path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
15
|
-
<path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
|
|
16
|
-
<path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
17
|
-
<path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
18
|
-
<path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
19
|
-
<path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
|
|
20
|
-
<path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
|
|
21
|
-
<path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
|
|
22
|
-
<path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
|
|
23
|
-
<path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
|
|
24
|
-
<path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
|
|
25
|
-
<path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
26
|
-
<path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
|
|
1
|
+
<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
|
2
|
+
<defs>
|
|
3
|
+
|
|
4
|
+
</defs>
|
|
5
|
+
<polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
|
|
6
|
+
<path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
|
|
7
|
+
<path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
8
|
+
<path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
|
|
9
|
+
<path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
|
|
10
|
+
<path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
|
|
11
|
+
<path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
|
|
12
|
+
<path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
|
|
13
|
+
<path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
|
|
14
|
+
<path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
15
|
+
<path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
|
|
16
|
+
<path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
17
|
+
<path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
18
|
+
<path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
19
|
+
<path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
|
|
20
|
+
<path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
|
|
21
|
+
<path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
|
|
22
|
+
<path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
|
|
23
|
+
<path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
|
|
24
|
+
<path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
|
|
25
|
+
<path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
|
|
26
|
+
<path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
|
|
27
27
|
</svg>
|
|
@@ -210,6 +210,43 @@
|
|
|
210
210
|
</template>
|
|
211
211
|
</html-demo-element>
|
|
212
212
|
|
|
213
|
+
<html-demo-element legend="12. checkbox use"
|
|
214
|
+
description="The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.">
|
|
215
|
+
<p>Check the box to see the value in slice</p>
|
|
216
|
+
<template>
|
|
217
|
+
<custom-element>
|
|
218
|
+
<template>
|
|
219
|
+
<input type="checkbox" slice="is-checked" value="V0" checked/>
|
|
220
|
+
slice: {/datadom/slice/is-checked} <br/>
|
|
221
|
+
<xsl:variable name="v1">V1</xsl:variable> <br/>
|
|
222
|
+
$v1={$v1}<br/>
|
|
223
|
+
|
|
224
|
+
<!-- slice-variable is XPath. $v1 is available only in template, embedding trick -->
|
|
225
|
+
<input type="checkbox" slice="s2" slice-value="'{$v1}'"/>
|
|
226
|
+
slice 2: {//s2} <br/>
|
|
227
|
+
|
|
228
|
+
<!-- variable is used in template scope -->
|
|
229
|
+
<input type="checkbox" slice="s3" value="{$v1}"/>
|
|
230
|
+
slice 3: {//s3}
|
|
231
|
+
</template>
|
|
232
|
+
</custom-element>
|
|
233
|
+
</template>
|
|
234
|
+
</html-demo-element>
|
|
235
|
+
|
|
236
|
+
<html-demo-element legend="13. Radio buttons use"
|
|
237
|
+
description="The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.">
|
|
238
|
+
<p>Check the radiobutton to see the value in slice</p>
|
|
239
|
+
<template>
|
|
240
|
+
<custom-element>
|
|
241
|
+
<template>
|
|
242
|
+
V0: <input type="radio" slice="radio-group" value="V0" name="g1"/> <br/>
|
|
243
|
+
V1: <input type="radio" slice="radio-group" value="V1" name="g1" checked/> <br/>
|
|
244
|
+
slice: {//radio-group} <br/>
|
|
245
|
+
</template>
|
|
246
|
+
</custom-element>
|
|
247
|
+
</template>
|
|
248
|
+
</html-demo-element>
|
|
249
|
+
|
|
213
250
|
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
|
214
251
|
|
|
215
252
|
</body>
|
|
@@ -517,7 +517,7 @@
|
|
|
517
517
|
}
|
|
518
518
|
}
|
|
519
519
|
</script>
|
|
520
|
-
<script type="module" crossorigin src="./assets/iframe-
|
|
520
|
+
<script type="module" crossorigin src="./assets/iframe-DnhkgdtG.js"></script>
|
|
521
521
|
</head>
|
|
522
522
|
|
|
523
523
|
<body>
|
|
@@ -616,7 +616,7 @@
|
|
|
616
616
|
<strong>Missing Context/Providers</strong>: You can use decorators to supply specific
|
|
617
617
|
contexts or providers, which are sometimes necessary for components to render correctly. For
|
|
618
618
|
detailed instructions on using decorators, please visit the
|
|
619
|
-
<a href="https://storybook.js.org/docs/
|
|
619
|
+
<a href="https://storybook.js.org/docs/writing-stories/decorators"
|
|
620
620
|
>Decorators documentation</a
|
|
621
621
|
>.
|
|
622
622
|
</li>
|
|
@@ -65,6 +65,8 @@
|
|
|
65
65
|
<link href="./sb-addons/essentials-outline-8/manager-bundle.js" rel="modulepreload" />
|
|
66
66
|
|
|
67
67
|
<link href="./sb-addons/interactions-9/manager-bundle.js" rel="modulepreload" />
|
|
68
|
+
|
|
69
|
+
<link href="./sb-addons/chromatic-com-storybook-10/manager-bundle.js" rel="modulepreload" />
|
|
68
70
|
|
|
69
71
|
|
|
70
72
|
<style>
|
|
@@ -166,6 +168,8 @@
|
|
|
166
168
|
|
|
167
169
|
import './sb-addons/interactions-9/manager-bundle.js';
|
|
168
170
|
|
|
171
|
+
import './sb-addons/chromatic-com-storybook-10/manager-bundle.js';
|
|
172
|
+
|
|
169
173
|
|
|
170
174
|
import './sb-manager/runtime.js';
|
|
171
175
|
</script>
|