npm - @ukic/web-components - Versions diffs - 3.1.0 → 3.2.0 - Mend

@ukic/web-components 3.1.0 → 3.2.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.

Files changed (536) hide show

package/dist/components/ic-popover-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-popover-menu.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,skIAAskI,CAAC;AAChmI,4BAAe,gBAAgB;;MCuBlB,WAAW;IAPxB;;;;;QASU,eAAU,GAAW,YAAY,CAAC;QAGlC,mBAAc,GAA4B,EAAE,CAAC;QAK5C,qBAAgB,GAAY,KAAK,CAAC;QAClC,sBAAiB,GAAY,KAAK,CAAC;;;;QAyBpC,iBAAY,GAAY,CAAC,CAAC;;;;QAK1B,UAAK,GAAiB,SAAS,CAAC;;;;QAKA,SAAI,GAC1C,SAAS,CAAC;QA8KJ,mBAAc,GAAG;;YACvB,MAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,0CAAE,KAAK,EAAE,CAAC;SACjD,CAAC;;QAGM,iBAAY,GAAG,CAAC,MAA0B;YAChD,IAAI,aAAa,GAAuB,IAAI,CAAC;YAC7C,IAAI,CAAC,MAAM,EAAE;gBACX,IAAI,CAAC,SAAS,KAAK,SAAS;oBAC1B,OAAO,CAAC,KAAK,CAAC,2CAA2C,CAAC,CAAC;aAC9D;iBAAM;gBACL,aAAa,GAAG,QAAQ,CAAC,aAAa,CACpC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,GAAG,GAAG,MAAM,CAClD,CAAC;gBACF,IAAI,aAAa,KAAK,IAAI,EAAE;oBAC1B,OAAO,CAAC,KAAK,CAAC,2BAA2B,MAAM,aAAa,CAAC,CAAC;iBAC/D;aACF;YACD,OAAO,aAAa,CAAC;SACtB,CAAC;QAEM,uBAAkB,GAAG,CAAC,EAAS;YACrC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAqB,CAAC;YACjD,QACE,EAAE,KAAK,IAAI,CAAC,MAAM;gBAClB,OAAO,KAAK,cAAc;gBAC1B,OAAO,KAAK,eAAe;gBAC3B,OAAO,KAAK,iBAAiB,EAC7B;SACH,CAAC;QAsBM,wBAAmB,GAAG,CAC5B,WAAmB,EACnB,UAAmB;YAEnB,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;YAElD,IAAI,WAAW,GAAG,CAAC,EAAE;gBACnB,WAAW,GAAG,CAAC,CAAC;aACjB;YAED,IAAI,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC;;YAG9D,IAAI,QAAQ,GAAG,CAAC,EAAE;gBAChB,QAAQ,GAAG,UAAU,CAAC;aACvB;iBAAM,IAAI,QAAQ,GAAG,UAAU,EAAE;gBAChC,QAAQ,GAAG,CAAC,CAAC;aACd;YAED,OAAO,QAAQ,CAAC;SACjB,CAAC;QAEM,iBAAY,GAAG,CAAC,QAA2C;;YACjE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACxC,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAA0B,CAAC;gBAChD,IAAI,EAAE,CAAC,OAAO,KAAK,cAAc,EAAE;oBACjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;iBAC9B;qBAAM,IAAI,EAAE,CAAC,OAAO,KAAK,eAAe,EAAE;oBACzC,MAAM,gBAAgB,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CACnD,qBAAqB,CACtB,CAAC;oBACF,IAAI,gBAAgB,EAAE;wBACpB,MAAM,iBAAiB,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;wBAC5D,iBAAiB,IAAI,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;qBAC3D;iBACF;aACF;SACF,CAAC;QAEM,qBAAgB,GAAG;YACzB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAExD,IAAI,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBACjC,OAAO,GAAG,SAAS,yBAAyB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW,WAAW,CAAC;aAC9F;iBAAM;gBACL,OAAO,SAAS,CAAC;aAClB;SACF,CAAC;QAEM,0BAAqB,GAAG;;YAC9B,MAAA,IAAI,CAAC,aAAa,0CAAE,aAAa,EAAE,CAAC;YACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;QAEM,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;oBACzD,SAAS,EAAE,cAAc;oBACzB,SAAS,EAAE;wBACT;4BACE,IAAI,EAAE,QAAQ;4BACd,OAAO,EAAE;gCACP,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;6BACf;yBACF;wBACD;4BACE,IAAI,EAAE,MAAM;4BACZ,OAAO,EAAE;gCACP,kBAAkB,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC;gCAC1D,YAAY,EAAE,UAAU;6BACzB;yBACF;qBACF;iBACF,CAAC,CAAC;aACJ;SACF,CAAC;KA+DH;IAxWC,gBAAgB;;QACd,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,gBAAgB,CACxD,iBAAiB,CACsB,CAAC;QAC1C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;gBACzB,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO;oBACzB,IAAI,OAAO,KAAK,IAAI,CAAC,EAAE,EAAE;wBACvB,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;qBACtB;iBACF,CAAC,CAAC;aACJ;YACD,IACE,IAAI,CAAC,aAAa,KAAK,SAAS;gBAChC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,EAAE,CAAC,EACpD;gBACA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;aACjE;YAED,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;;YAEtB,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;SACrC;aAAM,IAAI,IAAI,CAAC,cAAc,EAAE;YAC9B,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;gBACzB,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO;oBACzB,IAAI,OAAO,KAAK,IAAI,CAAC,EAAE,EAAE;wBACvB,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;qBACtB;iBACF,CAAC,CAAC;aACJ;YACD,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;KACF;IAOD,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;KACF;IAED,gBAAgB;;QACd,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,CAAC;QACnE,IAAI,WAAW,EAAE;YACf,MAAM,mBAAmB,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;YAEzD,IAAI,mBAAmB,KAAK,IAAI,EAAE;gBAChC,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;aACxC;SACF;QAED,IACE,IAAI,CAAC,SAAS,KAAK,SAAS;YAC5B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,EAC9C;YACA,OAAO,CAAC,KAAK,CACX,0EAA0E,CAC3E,CAAC;SACH;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChD;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACrC,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAGD,mBAAmB,CAAC,EAAsC;QACxD,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,iBAAiB,IAAI,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,MAAM,EAAE;YAC9D,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;SAClC;KACF;;IAID,mBAAmB,CAAC,EAAS;;QAE3B,MAAM,MAAM,GAAG,EAAE,CAAC,MAA+B,CAAC;QAClD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;;QAGlB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CACpC,8BAA8B,MAAM,CAAC,iBAAiB,GAAG,CAC9B,CAAC;;QAE9B,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC;QAChC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC7B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1D,OAAO,CAAC,cAAc,EAAE,CAAC;QACzB,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,YAAa,GAAG,CAAC,CAAC;;QAE9C,OAAO,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;KACpC;IAGD,WAAW,CAAC,EAAS;QACnB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC,EAAE;;YAE5C,IAAI,CAAC,SAAS,EAAE,CAAC;SAClB;KACF;;IAID,aAAa,CAAC,EAAiB;QAC7B,QAAQ,EAAE,CAAC,GAAG;YACZ,KAAK,WAAW,CAAC;YACjB,KAAK,SAAS;gBACZ,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAC1C,IAAI,CAAC,YAAY,EACjB,EAAE,CAAC,GAAG,KAAK,WAAW,CACvB,CAAC;gBACF,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,MAAM;YACR,KAAK,MAAM;;gBAET,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;gBACtB,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,MAAM;YACR,KAAK,KAAK;;gBAER,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;gBACnD,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,MAAM;YACR,KAAK,QAAQ,CAAC;YACd,KAAK,KAAK;gBACR,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,IAAI,CAAC,IAAI,EAAE;oBACb,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;oBACrB,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;iBAChB;gBACD,MAAM;SACT;KACF;;;;IAMD,MAAM,aAAa;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAE7B,UAAU,CAAC,OAAO,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;KACzD;;;;IAMD,MAAM,cAAc;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAE9B,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;KAC1D;;;;;IAsCD,MAAM,SAAS,CACb,gBAAgB,GAAG,KAAK,EACxB,WAAmC;;QAEnC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;SAC7D;aAAM;YACL,IAAI,gBAAgB,EAAE;gBACpB,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;aACxB;YACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACxC;KACF;IA+ED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,sBAAsB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBACrC,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS;aACrD,IAED,4DACE,EAAE,EACA,IAAI,CAAC,aAAa,KAAK,SAAS;kBAC5B,sBAAsB,IAAI,CAAC,SAAS,EAAE;kBACtC,EAAE,EAER,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;aACX,IAED,6DACE,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,iBAAiB;gBAC7C,oBAAoB,EAAE,IAAI,CAAC,gBAAgB;aAC5C,IAEA,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,KAC5B,+DACE,6DAAM,IAAI,EAAC,MAAM,IACf,qEACE,KAAK,EAAC,gCAAgC,EACtC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACnC,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,EAAE,EAAE,kCAAkC,IAAI,CAAC,YAAY,EAAE,IAEzD,4DACE,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,mBAAmB,IAEzB,6DACE,CAAC,EAAC,mEAAmE,EACrE,IAAI,EAAC,cAAc,GACnB,CACE,CACO,CACV,EACP,sEAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,cAAc,IACzD,IAAI,CAAC,WAAW,CACH,CACX,CACR,EACD,2DAAI,KAAK,EAAC,QAAQ,gBAAa,IAAI,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAC,MAAM,IACjE,8DAAa,CACV,CACA,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /\n\n/* Document\n ========================================================================== /\n\n/\n 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n /\n\nhtml {\n line-height: 1.15; / 1 /\n -webkit-text-size-adjust: 100%; / 2 /\n}\n\n/ Sections\n ========================================================================== /\n\n/\n Remove the margin in all browsers.\n /\n\nbody {\n margin: 0;\n}\n\n/\n Render the `main` element consistently in IE.\n /\n\nmain {\n display: block;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n /\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n ========================================================================== /\n\n/\n 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n /\n\nhr {\n box-sizing: content-box; / 1 /\n height: 0; / 1 /\n overflow: visible; / 2 /\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\npre {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/ Text-level semantics\n ========================================================================== /\n\n/\n Remove the gray background on active links in IE 10.\n /\n\na {\n background-color: transparent;\n}\n\n/\n 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n /\n\nabbr[title] {\n border-bottom: none; / 1 /\n text-decoration: underline; / 2 /\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted; / 2 /\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\n\nsmall {\n font-size: 80%;\n}\n\n/\n Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n /\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/ Embedded content\n ========================================================================== /\n\n/\n Remove the border on images inside links in IE 10.\n /\n\nimg {\n border-style: none;\n}\n\n/ Forms\n ========================================================================== /\n\n/\n 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n /\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; / 1 /\n font-size: 100%; / 1 /\n line-height: 1.15; / 1 /\n margin: 0; / 2 /\n}\n\n/\n Show the overflow in IE.\n * 1. Show the overflow in Edge.\n /\n\nbutton,\ninput {\n / 1 /\n overflow: visible;\n}\n\n/\n Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n /\n\nbutton,\nselect {\n / 1 /\n text-transform: none;\n}\n\n/\n Correct the inability to style clickable types in iOS and Safari.\n /\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/\n Remove the inner border and padding in Firefox.\n /\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/\n Restore the focus styles unset by the previous rule.\n /\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/\n Correct the padding in Firefox.\n /\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/\n 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n /\n\nlegend {\n box-sizing: border-box; / 1 /\n color: inherit; / 2 /\n display: table; / 1 /\n max-width: 100%; / 1 /\n padding: 0; / 3 /\n white-space: normal; / 1 /\n}\n\n/\n Add the correct vertical alignment in Chrome, Firefox, and Opera.\n /\n\nprogress {\n vertical-align: baseline;\n}\n\n/\n Remove the default vertical scrollbar in IE 10+.\n /\n\ntextarea {\n overflow: auto;\n}\n\n/\n 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n /\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; / 1 /\n padding: 0; / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Chrome.\n /\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n /\n\n[type=\"search\"] {\n -webkit-appearance: textfield; / 1 /\n outline-offset: -2px; / 2 /\n}\n\n/\n Remove the inner padding in Chrome and Safari on macOS.\n /\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; / 1 /\n font: inherit; / 2 /\n}\n\n/ Interactive\n ========================================================================== /\n\n/\n * Add the correct display in Edge, IE 10+, and Firefox.\n /\n\ndetails {\n display: block;\n}\n\n/\n * Add the correct display in all browsers.\n /\n\nsummary {\n display: list-item;\n}\n\n/ Misc\n ========================================================================== /\n\n/\n Add the correct display in IE 10+.\n /\n\ntemplate {\n display: none;\n}\n\n/\n Add the correct display in IE 10.\n /\n\n[hidden] {\n display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font-style: inherit;\n vertical-align: baseline;\n}\n\n\n/\n @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n}\n\n.button {\n text-decoration: none;\n list-style-type: none;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: -moz-fit-content;\n height: fit-content;\n max-height: var(--max-height, -moz-fit-content);\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement \| null;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton?: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance \| null;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /*\n The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n /\n @Prop() anchor?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentLabel?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /\n The unique identifier for a popover submenu.\n /\n @Prop() submenuId?: string;\n\n /\n @internal The level of menu being displayed.\n /\n @Prop() submenuLevel?: number = 1;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the popover menu will be displayed.\n /\n @Prop({ reflect: true, mutable: true }) open?: boolean \| undefined =\n undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n const popoverArr = this.el.parentElement?.querySelectorAll(\n `ic-popover-menu`\n ) as NodeListOf<HTMLIcPopoverMenuElement>;\n if (this.open) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.backButton && this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /\n Emitted when the popover menu is closed.\n /\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot?.querySelector(\"ul.button\");\n if (slotWrapper) {\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n\n this.watchOpenHandler();\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel! + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /\n @internal Opens the menu from the child menu.\n /\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /\n @internal Opens the menu from the parent menu.\n /\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string \| undefined): HTMLElement \| null => {\n let anchorElement: HTMLElement \| null = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /\n @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] \| NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot?.querySelector(\n \".menu-items-wrapper\"\n );\n if (groupSlotWrapper) {\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n menuGroupElements && this.addMenuItems(menuGroupElements);\n }\n }\n }\n };\n\n private getMenuAriaLabel = (): string \| null => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover?.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n if (this.anchorEl) {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n }\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: !!this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n <slot></slot>\n </ul>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-popover-menu.js","mappings":"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","names":[],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n}\n\n.button {\n text-decoration: none;\n list-style-type: none;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement \| null;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton?: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance \| null;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /*\n The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n /\n @Prop() anchor?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentLabel?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /\n The unique identifier for a popover submenu.\n /\n @Prop() submenuId?: string;\n\n /\n @internal The level of menu being displayed.\n /\n @Prop() submenuLevel?: number = 1;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the popover menu will be displayed.\n /\n @Prop({ reflect: true, mutable: true }) open?: boolean \| undefined =\n undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n const popoverArr = this.el.parentElement?.querySelectorAll(\n `ic-popover-menu`\n ) as NodeListOf<HTMLIcPopoverMenuElement>;\n if (this.open) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.backButton && this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /\n Emitted when the popover menu is closed.\n /\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot?.querySelector(\"ul.button\");\n if (slotWrapper) {\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n\n this.watchOpenHandler();\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel! + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /\n @internal Opens the menu from the child menu.\n /\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /\n @internal Opens the menu from the parent menu.\n /\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string \| undefined): HTMLElement \| null => {\n let anchorElement: HTMLElement \| null = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /\n @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] \| NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot?.querySelector(\n \".menu-items-wrapper\"\n );\n if (groupSlotWrapper) {\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n menuGroupElements && this.addMenuItems(menuGroupElements);\n }\n }\n }\n };\n\n private getMenuAriaLabel = (): string \| null => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover?.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n if (this.anchorEl) {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n }\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: !!this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n <slot></slot>\n </ul>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-radio-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as slotHasContent, r as removeDisabledFalse, c as checkResizeObserver, o as onComponentRequiredPropUndefined, v as hasValidationStatus } from './helpers.js';
+import { E as slotHasContent, r as removeDisabledFalse, c as checkResizeObserver, o as onComponentRequiredPropUndefined, w as hasValidationStatus } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-input-label2.js';
 import { d as defineCustomElement$3 } from './ic-input-validation2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
@@ -233,16 +233,16 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
     }
     render() {
         const { currentOrientation, disabled, handleKeyDown, helperText, hideLabel, label, required, size, validationStatus, validationText, theme, } = this;
-        return (h(Host, { key: 'a2be8db5421324c2472c9bfd3358ab60eb94c8f0', onKeyDown: handleKeyDown, class: {
+        return (h(Host, { key: 'db83cc9de43015de4c06e3ed5b35c59262c2058d', onKeyDown: handleKeyDown, class: {
                 "ic-radio-group-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '08c660c22bd427d0dc36a569617ec3b288c0b2df', role: "radiogroup", "aria-label": `${label}${required ? ", required" : ""}` }, !hideLabel && (h("ic-input-label", { key: '49270136f37944161e2d8c7a13c997a72ce7228d', class: {
+            } }, h("div", { key: 'e11f551827b7a774965876a1021294411b16f6ec', role: "radiogroup", "aria-label": `${label}${required ? ", required" : ""}` }, !hideLabel && (h("ic-input-label", { key: '7e4a2d8f187ab28fa362d55c47eb3d4ae7d784fd', class: {
                 [`${validationStatus}`]: true,
                 ["disabled"]: !!disabled,
-            }, label: label, helperText: helperText, required: required, disabled: disabled })), h("div", { key: '91c6b269bd61a898b51c08a8b33cde311679bced', class: {
+            }, label: label, helperText: helperText, required: required, disabled: disabled })), h("div", { key: 'b2d6d9845a82f7f10dcaa5dbbed0bf5481dd696f', class: {
                 "radio-buttons-container": true,
                 horizontal: currentOrientation === this.RADIO_HORIZONTAL,
-            }, ref: (el) => (this.radioContainer = el) }, h("slot", { key: '1fc06b8010e17ddd4ec38c424ecbf2c44d81aee8' }))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '857d44767a37fedbcf2f67f8edb50121b28e81bf', ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
+            }, ref: (el) => (this.radioContainer = el) }, h("slot", { key: 'bab10c5275b6f71de87310c3ec04bacb894be115' }))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '3c6b84cfce970db11c8e958abd82904931654f3d', ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-radio-option.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as removeDisabledFalse, q as removeFormResetListener, i as isSlotUsed, p as addFormResetListener, o as onComponentRequiredPropUndefined, C as slotHasContent, l as isPropDefined } from './helpers.js';
+import { r as removeDisabledFalse, s as removeFormResetListener, i as isSlotUsed, q as addFormResetListener, o as onComponentRequiredPropUndefined, E as slotHasContent, l as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const icRadioOptionCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}ic-radio-option{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}.additional-field-wrapper [slot=\"additional-field\"]{margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}ic-radio-option.ic-radio-option-disabled,ic-radio-option.ic-radio-option-disabled .radio-label{--ic-typography-color:var(--ic-radio-button-text-option-disabled)}.container input:focus+span.checkmark,.container:hover input:focus+span.checkmark,.container:active input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-radio-button-background-default);border:var(--ic-space-1px) solid var(--ic-radio-button-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:var(--ic-border-width) solid var(--ic-radio-button-default-hover)}.container:hover input:checked~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:0.125rem solid var(--ic-radio-button-default-hover)}.container:hover:not(.disabled) input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-hover)}.container:active input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed);border:var(--ic-border-width) solid var(--ic-radio-button-default-pressed)}.container:active input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-pressed);box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed)}.container:active input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-pressed)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-active)}.container input:checked:disabled~.checkmark{border:0.125rem solid var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark{border:var(--ic-border-width) dashed var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark::after{background:var(--ic-radio-button-disabled)}.container:hover input:disabled~.checkmark{box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-radio-button-disabled)}.container .checkmark::after{content:\"\";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-radio-button-default-active)}.radio-label{margin-left:var(--ic-space-md);--ic-typography-color:var(--ic-radio-button-text-option)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-radio-button-required-bar);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-radio-button-required-bar);border-left:0.125rem solid var(--ic-radio-button-required-bar);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-radio-button-required-text);--ic-typography-color:var(--ic-radio-button-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){ic-text-field{--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}input[type=\"radio\"]:dir(rtl){right:0}.radio-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.branch-corner:dir(rtl){border-radius:0 0 0.188rem 0;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}";
+const icRadioOptionCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}ic-radio-option{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}.additional-field-wrapper [slot=\"additional-field\"]{margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}ic-radio-option.ic-radio-option-disabled,ic-radio-option.ic-radio-option-disabled .radio-label{--ic-typography-color:var(--ic-radio-button-text-option-disabled)}.container input:focus+span.checkmark,.container:hover input:focus+span.checkmark,.container:active input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-radio-button-background-default);border:var(--ic-space-1px) solid var(--ic-radio-button-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:var(--ic-border-width) solid var(--ic-radio-button-default-hover)}.container:hover input:checked~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:0.125rem solid var(--ic-radio-button-default-hover)}.container:hover:not(.disabled) input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-hover)}.container:active input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed);border:var(--ic-border-width) solid var(--ic-radio-button-default-pressed)}.container:active input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-pressed);box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed)}.container:active input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-pressed)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-active)}.container input:checked:disabled~.checkmark{border:0.125rem solid var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark{border:var(--ic-border-width) dashed var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark::after{background:var(--ic-radio-button-disabled)}.container:hover input:disabled~.checkmark{box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-radio-button-disabled)}.container .checkmark::after{content:\"\";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-radio-button-default-active)}.radio-label{margin-left:var(--ic-space-md);--ic-typography-color:var(--ic-radio-button-text-option)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-radio-button-required-bar);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-radio-button-required-bar);border-left:0.125rem solid var(--ic-radio-button-required-bar);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-radio-button-required-text);--ic-typography-color:var(--ic-radio-button-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){ic-text-field{--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}input[type=\"radio\"]:dir(rtl){right:0}.radio-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.branch-corner:dir(rtl){border-radius:0 0 0.188rem;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}";
 const IcRadioOptionStyle0 = icRadioOptionCss;
 const ADDITIONAL_FIELD = "additional-field";
@@ -145,15 +145,15 @@ const RadioOption = /*@__PURE__*/ proxyCustomElement(class RadioOption extends H
     render() {
         const { additionalFieldDisplay, disabled, dynamicText, form, groupLabel, handleClick, handleKeyDown, hasAdditionalField, label, name, selected, value, theme, } = this;
         const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;
-        return (h(Host, { key: 'e51c6f675adeb824cebdd004e5c28a9f726cb5eb', onClick: handleClick, onKeyDown: handleKeyDown, class: {
+        return (h(Host, { key: 'ee36e924b1c248c87724903313bc778976c36522', onClick: handleClick, onKeyDown: handleKeyDown, class: {
                 ["ic-radio-option-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '5cfdadaeb79d3a7338231e1653e42751bd1d89bd', class: { container: true, disabled: !!disabled } }, h("div", { key: '917cfdee6607ecd950fd4c09e54ed02a3f6945c4' }, h("input", { key: '9ca5649b90f8f6c087710595842f38cadecd901c', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { key: '8670450d9fa0cb5db352f60b6e0feff048604dbd', class: "checkmark" })), h("ic-typography", { key: '44c544df2f59735c82e01ad3d1e7892f47e53523', class: "radio-label", variant: "body" }, h("label", { key: '55e93f4241c0fdc6831fb6da6a670c2a44311412', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: 'bfa342e1dda96334553cc65752e6c41a64c19f5a', class: {
+            } }, h("div", { key: '35871b7136c8dd16432e2a0683b13db53f2a1bd0', class: { container: true, disabled: !!disabled } }, h("div", { key: 'daead4b95901afb27be2d2640d1210783ec4c14e' }, h("input", { key: '69d0c5dec724714118475529e021ed9d30350383', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { key: '7ae687fb075f60e33fb7edd48b1f323c5833b9fb', class: "checkmark" })), h("ic-typography", { key: 'a3990ac2ea9a3898a436f2fd05966f920a493fa4', class: "radio-label", variant: "body" }, h("label", { key: '0b83a00e2f215d9d051e71650584fb1e0aad55a4', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: '47b6a141f6956e78d4516985d2e70f00c1bdf1cf', class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
-            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'd9ab0bbac6d2f66dd363877b169ee2823802730b', class: "branch-corner" })), h("div", { key: 'a02719781e2362eef43f0b97b28f4e653a21eaa8' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: 'a1bfbd7ef7425ae4df7edca3ca07592263198cd9', variant: "caption" }, h("p", { key: 'd363e1bb13954c43b2a24f052594c661fb914935', class: "dynamic-text" }, dynamicText))), h("div", { key: '7229c529054fefe4b7d697c09eda18ce0e614ce7', class: {
+            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: '2c06cbb85ba445972698c02757a07e048a09ce40', class: "branch-corner" })), h("div", { key: 'ecc00a96cfb580b9f386ea148106a1dae5a31332' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: 'eeacd2d66085bd2bdb16698e6050e552d410d11b', variant: "caption" }, h("p", { key: 'da0327cfe9a9a09405c86e268e7a84ca090b437f', class: "dynamic-text" }, dynamicText))), h("div", { key: 'c9177d6cd8174c92665a3c59a1fe38aeedf6e17b', class: {
                 "additional-field-wrapper": additionalFieldDisplay === "static",
-            } }, h("slot", { key: '2e57b46d37a3430b8849e62db427bb7be66091fd', name: ADDITIONAL_FIELD })))))));
+            } }, h("slot", { key: '1f4fdd0f5eeca0900aeaa04d49191e0b65d843ab', name: ADDITIONAL_FIELD })))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-radio-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-radio-option.js","mappings":"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","names":[],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nic-radio-option {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n.additional-field-wrapper [slot=\"additional-field\"] {\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled /\nic-radio-option.ic-radio-option-disabled,\nic-radio-option.ic-radio-option-disabled .radio-label {\n --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/ Focus states /\n\n.container input:focus + span.checkmark,\n.container:hover input:focus + span.checkmark,\n.container:active input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n box-shadow: var(--ic-border-focus);\n}\n\n/ The container /\n.container {\n display: grid;\n grid-template-columns: min-content auto;\n position: relative;\n cursor: pointer;\n align-items: center;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n cursor: default;\n}\n\n/ Hide the browser's default radio button /\n.container input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n position: absolute;\n cursor: pointer;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n border-radius: 50%;\n border: none;\n}\n\n/ Create a custom radio button /\n.checkmark {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-radio-button-background-default);\n border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);\n border-radius: 50%;\n transition: var(--ic-easing-transition-fast);\n box-sizing: border-box;\n}\n\n/ Show the indicator (dot/circle) when checked /\n.container input:checked ~ .checkmark::after {\n display: inline-block;\n}\n\n/ On mouse-over, add a light blue background color /\n.container:hover input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover input:checked ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: 0.125rem solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover:not(.disabled) input:checked ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-hover);\n}\n\n/ When pressed, adds the active colours /\n.container:active input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);\n}\n\n/ When pressed, adds the active colours /\n.container:active input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-pressed);\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n}\n\n/ When pressed and selected, adds the active colours /\n.container:active input:checked ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-pressed);\n}\n\n/ When the radio button is checked /\n.container input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-active);\n}\n\n/ When the radio button is checked and disabled /\n.container input:checked:disabled ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-border-disabled);\n}\n\n/ When the radio button is disabled /\n.container input:disabled ~ .checkmark {\n border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);\n}\n\n/ When the radio button is disabled /\n.container input:disabled ~ .checkmark::after {\n background: var(--ic-radio-button-disabled);\n}\n\n/ On mouse-over inactive /\n.container:hover input:disabled ~ .checkmark {\n box-shadow: none;\n border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n background-color: var(--ic-radio-button-disabled);\n}\n\n/ Style the indicator (dot/circle) /\n.container .checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n top: calc(50% - var(--ic-space-xs));\n left: calc(50% - var(--ic-space-xs));\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n border-radius: 50%;\n background: var(--ic-radio-button-default-active);\n}\n\n.radio-label {\n margin-left: var(--ic-space-md);\n --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n.additional-field-wrapper {\n margin-left: var(--ic-space-xs);\n}\n\n/ The line /\n.branch-corner {\n color: var(--ic-radio-button-required-bar);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);\n border-left: 0.125rem solid var(--ic-radio-button-required-bar);\n margin-left: calc(-1 var(--ic-space-1px));\n}\n\n/* The dynamic container /\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n display: none;\n}\n\n.dynamic-text {\n color: var(--ic-radio-button-required-text);\n\n --ic-typography-color: var(--ic-radio-button-required-text);\n\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ic-text-field {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n\n .container input:checked ~ .checkmark,\n .container:active input:checked ~ .checkmark {\n border-color: Highlight;\n }\n\n .container input:checked ~ .checkmark::after,\n .container:active input:checked ~ .checkmark::after {\n background-color: Highlight;\n }\n\n .container input:disabled ~ .checkmark,\n .container input:checked:disabled ~ .checkmark {\n border-color: GrayText;\n }\n\n .container input:disabled ~ .checkmark::after,\n .container:active input:disabled ~ .checkmark::after {\n background-color: GrayText;\n }\n}\n\n/ Right to left /\ninput[type=\"radio\"]:dir(rtl) {\n right: 0;\n}\n\n.radio-label:dir(rtl) {\n padding-right: var(--ic-space-sm);\n padding-left: 0;\n}\n\n.branch-corner:dir(rtl) {\n border-radius: 0 0 0.188rem 0;\n border-right: 0.125rem solid var(--ic-action-default);\n border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n isSlotUsed,\n slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/\n @slot additional-field - Content to displayed alongside a radio option.\n /\n@Component({\n tag: \"ic-radio-option\",\n styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n private defaultRadioValue: string = \"\";\n private hasAdditionalField: boolean = false;\n private radioElement?: HTMLInputElement;\n private skipFocus = false;\n\n @Element() el: HTMLIcRadioOptionElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay?: IcAdditionalFieldTypes =\n \"static\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The text to be displayed when dynamic.\n /\n @Prop() dynamicText?: string = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the radio with.\n /\n @Prop() form?: string;\n\n /\n The group label for the radio option.\n /\n @Prop() groupLabel?: string;\n\n /\n The label for the radio option.\n /\n @Prop() label?: string;\n\n /\n The name for the radio option.\n /\n @Prop() name?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The value for the radio option.\n /\n @Prop({ mutable: true }) value!: string;\n\n /\n If `true`, the radio option will be displayed in a selected state.\n /\n @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n @State() initiallySelected = this.selected;\n\n @Watch(\"selected\")\n watchSelectedHandler(): void {\n this.icSelectedChange.emit();\n }\n\n /\n Emitted when the radio option is selected.\n /\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n @Listen(\"icCheck\")\n handleCheck(ev: CustomEvent<IcValueEventDetail>): void {\n if (\n this.additionalFieldDisplay === \"static\" &&\n Array.from(this.el.querySelectorAll(\"ic-radio-option\")).includes(\n ev.target as HTMLIcRadioOptionElement\n )\n )\n this.icCheck.emit({ value: this.value });\n }\n\n /\n Emitted when the radio option is selected or deselected.\n /\n @Event() icSelectedChange: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentWillRender(): void {\n const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n if (hasSlot && !this.hasAdditionalField) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n } else if (!hasSlot && this.hasAdditionalField) {\n this.hasAdditionalField = false;\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const additionalField = this.getAdditionalField();\n if (!this.selected \|\| this.disabled) {\n additionalField?.setAttribute(\"disabled\", \"\");\n } else {\n additionalField?.removeAttribute(\"disabled\");\n }\n }\n }\n\n @Listen(\"icChange\")\n additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n if (this.selected) {\n this.value = event.detail.value \|\| this.defaultRadioValue;\n this.icCheck.emit({\n value: this.value,\n });\n }\n\n event.stopImmediatePropagation();\n }\n\n /\n Sets focus on the radio option.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.radioElement?.focus();\n }\n\n /\n @internal Sets the tabIndex of the radio option.\n /\n @Method()\n async setTabIndex(value: number): Promise<void> {\n this.radioElement?.setAttribute(\"tabIndex\", value.toString());\n }\n\n private getAdditionalField(): HTMLIcTextFieldElement {\n const additionalField = this.el.querySelector(\n 'ic-text-field[slot=\"additional-field\"]'\n ) as HTMLIcTextFieldElement;\n if (additionalField) additionalField.hiddenInput = false;\n return additionalField;\n }\n\n private handleClick = (event: MouseEvent) => {\n const clickedAdditionalField = (event.target as Element).matches(\n \".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container :not(ic-radio-option, .checkmark)\"\n );\n\n if (\n !this.disabled &&\n (!clickedAdditionalField \|\| event.target === this.radioElement)\n ) {\n event.stopPropagation();\n if (this.skipFocus === false) {\n this.radioElement?.focus();\n }\n this.skipFocus = false;\n\n if (this.hasAdditionalField) {\n this.value = this.getAdditionalField()?.value \|\| this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n if (\n this.getAdditionalField() == document.activeElement &&\n preventPropagationElements.includes(this.getAdditionalField().nodeName)\n ) {\n event.stopPropagation();\n }\n };\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n disabled,\n dynamicText,\n form,\n groupLabel,\n handleClick,\n handleKeyDown,\n hasAdditionalField,\n label,\n name,\n selected,\n value,\n theme,\n } = this;\n\n const id = `ic-radio-option-${isPropDefined(label) \|\| value}-${groupLabel}`;\n\n return (\n <Host\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n class={{\n [\"ic-radio-option-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class={{ container: true, disabled: !!disabled }}>\n <div>\n <input\n tabindex={selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={name}\n id={id}\n value={value}\n disabled={disabled}\n checked={selected}\n ref={(el) => (this.radioElement = el)}\n form={form}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n </div>\n\n {hasAdditionalField && (\n <div\n class={{\n \"dynamic-container\": true,\n hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n }}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">{dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name={ADDITIONAL_FIELD}></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-radio-option.js","mappings":"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","names":[],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nic-radio-option {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n.additional-field-wrapper [slot=\"additional-field\"] {\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled /\nic-radio-option.ic-radio-option-disabled,\nic-radio-option.ic-radio-option-disabled .radio-label {\n --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/ Focus states /\n\n.container input:focus + span.checkmark,\n.container:hover input:focus + span.checkmark,\n.container:active input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n box-shadow: var(--ic-border-focus);\n}\n\n/ The container /\n.container {\n display: grid;\n grid-template-columns: min-content auto;\n position: relative;\n cursor: pointer;\n align-items: center;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n cursor: default;\n}\n\n/ Hide the browser's default radio button /\n.container input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n position: absolute;\n cursor: pointer;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n border-radius: 50%;\n border: none;\n}\n\n/ Create a custom radio button /\n.checkmark {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-radio-button-background-default);\n border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);\n border-radius: 50%;\n transition: var(--ic-easing-transition-fast);\n box-sizing: border-box;\n}\n\n/ Show the indicator (dot/circle) when checked /\n.container input:checked ~ .checkmark::after {\n display: inline-block;\n}\n\n/ On mouse-over, add a light blue background color /\n.container:hover input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover input:checked ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: 0.125rem solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover:not(.disabled) input:checked ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-hover);\n}\n\n/ When pressed, adds the active colours /\n.container:active input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);\n}\n\n/ When pressed, adds the active colours /\n.container:active input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-pressed);\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n}\n\n/ When pressed and selected, adds the active colours /\n.container:active input:checked ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-pressed);\n}\n\n/ When the radio button is checked /\n.container input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-active);\n}\n\n/ When the radio button is checked and disabled /\n.container input:checked:disabled ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-border-disabled);\n}\n\n/ When the radio button is disabled /\n.container input:disabled ~ .checkmark {\n border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);\n}\n\n/ When the radio button is disabled /\n.container input:disabled ~ .checkmark::after {\n background: var(--ic-radio-button-disabled);\n}\n\n/ On mouse-over inactive /\n.container:hover input:disabled ~ .checkmark {\n box-shadow: none;\n border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n background-color: var(--ic-radio-button-disabled);\n}\n\n/ Style the indicator (dot/circle) /\n.container .checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n top: calc(50% - var(--ic-space-xs));\n left: calc(50% - var(--ic-space-xs));\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n border-radius: 50%;\n background: var(--ic-radio-button-default-active);\n}\n\n.radio-label {\n margin-left: var(--ic-space-md);\n\n --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n.additional-field-wrapper {\n margin-left: var(--ic-space-xs);\n}\n\n/ The line /\n.branch-corner {\n color: var(--ic-radio-button-required-bar);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);\n border-left: 0.125rem solid var(--ic-radio-button-required-bar);\n margin-left: calc(-1 var(--ic-space-1px));\n}\n\n/* The dynamic container /\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n display: none;\n}\n\n.dynamic-text {\n color: var(--ic-radio-button-required-text);\n\n --ic-typography-color: var(--ic-radio-button-required-text);\n\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ic-text-field {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n\n .container input:checked ~ .checkmark,\n .container:active input:checked ~ .checkmark {\n border-color: Highlight;\n }\n\n .container input:checked ~ .checkmark::after,\n .container:active input:checked ~ .checkmark::after {\n background-color: Highlight;\n }\n\n .container input:disabled ~ .checkmark,\n .container input:checked:disabled ~ .checkmark {\n border-color: GrayText;\n }\n\n .container input:disabled ~ .checkmark::after,\n .container:active input:disabled ~ .checkmark::after {\n background-color: GrayText;\n }\n}\n\n/ Right to left /\ninput[type=\"radio\"]:dir(rtl) {\n right: 0;\n}\n\n.radio-label:dir(rtl) {\n padding-right: var(--ic-space-sm);\n padding-left: 0;\n}\n\n.branch-corner:dir(rtl) {\n border-radius: 0 0 0.188rem;\n border-right: 0.125rem solid var(--ic-action-default);\n border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n isSlotUsed,\n slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/\n @slot additional-field - Content to displayed alongside a radio option.\n /\n@Component({\n tag: \"ic-radio-option\",\n styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n private defaultRadioValue: string = \"\";\n private hasAdditionalField: boolean = false;\n private radioElement?: HTMLInputElement;\n private skipFocus = false;\n\n @Element() el: HTMLIcRadioOptionElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay?: IcAdditionalFieldTypes =\n \"static\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The text to be displayed when dynamic.\n /\n @Prop() dynamicText?: string = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the radio with.\n /\n @Prop() form?: string;\n\n /\n The group label for the radio option.\n /\n @Prop() groupLabel?: string;\n\n /\n The label for the radio option.\n /\n @Prop() label?: string;\n\n /\n The name for the radio option.\n /\n @Prop() name?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The value for the radio option.\n /\n @Prop({ mutable: true }) value!: string;\n\n /\n If `true`, the radio option will be displayed in a selected state.\n /\n @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n @State() initiallySelected = this.selected;\n\n @Watch(\"selected\")\n watchSelectedHandler(): void {\n this.icSelectedChange.emit();\n }\n\n /\n Emitted when the radio option is selected.\n /\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n @Listen(\"icCheck\")\n handleCheck(ev: CustomEvent<IcValueEventDetail>): void {\n if (\n this.additionalFieldDisplay === \"static\" &&\n Array.from(this.el.querySelectorAll(\"ic-radio-option\")).includes(\n ev.target as HTMLIcRadioOptionElement\n )\n )\n this.icCheck.emit({ value: this.value });\n }\n\n /\n Emitted when the radio option is selected or deselected.\n /\n @Event() icSelectedChange: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentWillRender(): void {\n const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n if (hasSlot && !this.hasAdditionalField) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n } else if (!hasSlot && this.hasAdditionalField) {\n this.hasAdditionalField = false;\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const additionalField = this.getAdditionalField();\n if (!this.selected \|\| this.disabled) {\n additionalField?.setAttribute(\"disabled\", \"\");\n } else {\n additionalField?.removeAttribute(\"disabled\");\n }\n }\n }\n\n @Listen(\"icChange\")\n additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n if (this.selected) {\n this.value = event.detail.value \|\| this.defaultRadioValue;\n this.icCheck.emit({\n value: this.value,\n });\n }\n\n event.stopImmediatePropagation();\n }\n\n /\n Sets focus on the radio option.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.radioElement?.focus();\n }\n\n /\n @internal Sets the tabIndex of the radio option.\n /\n @Method()\n async setTabIndex(value: number): Promise<void> {\n this.radioElement?.setAttribute(\"tabIndex\", value.toString());\n }\n\n private getAdditionalField(): HTMLIcTextFieldElement {\n const additionalField = this.el.querySelector(\n 'ic-text-field[slot=\"additional-field\"]'\n ) as HTMLIcTextFieldElement;\n if (additionalField) additionalField.hiddenInput = false;\n return additionalField;\n }\n\n private handleClick = (event: MouseEvent) => {\n const clickedAdditionalField = (event.target as Element).matches(\n \".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container :not(ic-radio-option, .checkmark)\"\n );\n\n if (\n !this.disabled &&\n (!clickedAdditionalField \|\| event.target === this.radioElement)\n ) {\n event.stopPropagation();\n if (this.skipFocus === false) {\n this.radioElement?.focus();\n }\n this.skipFocus = false;\n\n if (this.hasAdditionalField) {\n this.value = this.getAdditionalField()?.value \|\| this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n if (\n this.getAdditionalField() == document.activeElement &&\n preventPropagationElements.includes(this.getAdditionalField().nodeName)\n ) {\n event.stopPropagation();\n }\n };\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n disabled,\n dynamicText,\n form,\n groupLabel,\n handleClick,\n handleKeyDown,\n hasAdditionalField,\n label,\n name,\n selected,\n value,\n theme,\n } = this;\n\n const id = `ic-radio-option-${isPropDefined(label) \|\| value}-${groupLabel}`;\n\n return (\n <Host\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n class={{\n [\"ic-radio-option-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class={{ container: true, disabled: !!disabled }}>\n <div>\n <input\n tabindex={selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={name}\n id={id}\n value={value}\n disabled={disabled}\n checked={selected}\n ref={(el) => (this.radioElement = el)}\n form={form}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n </div>\n\n {hasAdditionalField && (\n <div\n class={{\n \"dynamic-container\": true,\n hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n }}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">{dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name={ADDITIONAL_FIELD}></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-search-bar.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P as getFilteredMenuOptions, Q as handleHiddenFormButtonClick, r as removeDisabledFalse, R as debounceEvent, S as getLabelFromValue, o as onComponentRequiredPropUndefined, u as getInputDescribedByText, s as renderHiddenInput } from './helpers.js';
+import { Q as getFilteredMenuOptions, R as handleHiddenFormButtonClick, r as removeDisabledFalse, S as debounceEvent, T as getLabelFromValue, o as onComponentRequiredPropUndefined, v as getInputDescribedByText, t as renderHiddenInput } from './helpers.js';
 import { d as defineCustomElement$9 } from './ic-button2.js';
 import { d as defineCustomElement$8 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$7 } from './ic-input-container2.js';
@@ -547,41 +547,41 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         const menuRendered = menuOpen && value.length >= this.charactersUntilSuggestion;
         const labelValue = getLabelFromValue(value, options, this.valueField, this.labelField);
         renderHiddenInput(true, this.el, name, value, disabledMode);
-        return (h(Host, { key: 'a1e560e97f324268abb887ac3b8188acc1c6d42f', class: {
+        return (h(Host, { key: '00d7c200dadef58f3be6eeae1299f255da97e79a', class: {
                 ["ic-search-bar-search"]: true,
                 ["ic-search-bar-full-width"]: !!fullWidth,
                 ["ic-search-bar-disabled"]: !!disabled,
                 ["ic-search-bar-small"]: size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: '327a761189705de2cd7b4f4163f494701a34276c', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '80f4bb67acb9232b36014d34f320471bedcc1ad3', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { key: '0fb2a97aad0bd1f185ed3fc456c589dbcb7ce99d', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '3af78e40aa89ce0bad6693f6371015486c1cd103', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: 'e9620617be40182b556185417647b0ba298116d3', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '02fcdd33f0bb62ac24ca12aa09c6c5e188f20c06', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { key: '0649a65ad29290c2a60bd33c90552e8bbc875e66', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '80b924a66fe7f7aa5193ae0e64b6e4d143ee713a', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
                 "no-left-pad": !!readonly,
                 readonly: !!readonly,
                 "truncate-value": truncateValue,
-            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": label, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { key: '23d4349d4b0f905bbf90bf1826a3a90559c62b9d', class: {
+            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": label, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { key: '0feabdeed8caa3ac63634fdf52221c9cd8a0ea15', class: {
                 "clear-button-container": true,
                 "clear-button-visible": !!value && !disabledMode && this.showClearButton,
-            } }, h("ic-button", { key: '90cd4ab4601fabfca86d92d9c6cb7d5751d43758', id: "clear-button", class: {
+            } }, h("ic-button", { key: '3e7e1f8e39c50eb45595d8eddc6cbc1dfd624e5c', id: "clear-button", class: {
                 "clear-button": true,
                 "clear-button-unfocused": !this.clearButtonFocused,
-            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), h("div", { key: '79c1bb38267e6ebef413f7f9a6ba0ac8a28b5f12', class: "divider" })), h("div", { key: '91b16ca2d959cf2d36cbbe75eb210fd254cff723', class: {
+            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), h("div", { key: '793bf0fd78a2bfce32b78885f0478e2eb214d337', class: "divider" })), h("div", { key: '828edde2b4c950fc0e2c1faff736ee021ab6d49c', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: '3b2aac9b7ae9ba4e78979d5ecc64a8aa2035e23a', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, h("ic-button", { key: 'c84ee2e7957b7a9d326598af93bb50e78a41ccd2', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
                 ["search-submit-button"]: true,
                 ["search-submit-button-small"]: size === "small",
                 ["search-submit-button-unfocused"]: !this.searchSubmitFocused,
                 ["search-submit-button-disabled"]: this.isSubmitDisabled(),
-            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", theme: this.searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '548b4ee1e050efd6a8d50d7640e3cad32ac3002c', class: {
+            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", theme: this.searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '2d00bc902d0b81b245348735d7e258939f98e369', class: {
                 "menu-container": true,
                 fullwidth: !!fullWidth,
-            } }, menuRendered && (h("ic-menu", { key: '3d495b2ee381d30984316f0143c148731b179304', class: {
+            } }, menuRendered && (h("ic-menu", { key: '16049726b55a6a7775343b5a74c6c8c86939ad20', class: {
                 "no-results": this.hadNoOptions() ||
                     (filteredOptions.length === 1 &&
                         (filteredOptions[0][this.labelField] ===
                             this.loadingLabel ||
                             filteredOptions[0][this.labelField] ===
                                 this.loadingErrorLabel)),
-            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: !!menuRendered, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: this.labelField, valueField: this.valueField })))), h("div", { key: 'd3a4abf5d1d7ca686b696c283e86a6c84ff39f92', "aria-live": "polite", role: "status", class: "search-results-status" })));
+            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: !!menuRendered, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: this.labelField, valueField: this.valueField })))), h("div", { key: '9844297f2d4ed1dd4e168685da928b44eeeb4698', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-section-container2.js CHANGED Viewed

@@ -19,12 +19,12 @@ const SectionContainer = /*@__PURE__*/ proxyCustomElement(class SectionContainer
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: 'a826359cf3cf5d7f9f37b0bdac2ab58ae79c9df4', class: {
+        return (h(Host, { key: 'cdf7f84dced1f88952eb1a496a065a2df53f16e3', class: {
                 ["aligned-left"]: aligned === "left" || aligned === null,
                 ["aligned-center"]: aligned === "center",
                 ["aligned-full-width"]: aligned === "full-width",
                 ["no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: 'cc1c0250e0e19864f093ff72bfa312a72f4bdd75' })));
+            } }, h("slot", { key: 'af0e17e0faf507b4cd4da392b3b998175e209024' })));
     }
     static get style() { return IcSectionContainerStyle0; }
 }, [1, "ic-section-container", {