@ukic/web-components 3.29.0 → 3.31.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ic-accordion.js +53 -38
- package/components/ic-accordion.js.map +1 -1
- package/components/ic-button2.js +1 -1
- package/components/ic-button2.js.map +1 -1
- package/components/ic-link2.js +1 -1
- package/components/ic-link2.js.map +1 -1
- package/components/ic-menu-item2.js +1 -1
- package/components/ic-menu-item2.js.map +1 -1
- package/components/ic-menu2.js +276 -37
- package/components/ic-menu2.js.map +1 -1
- package/components/ic-navigation-button.js +8 -5
- package/components/ic-navigation-button.js.map +1 -1
- package/components/ic-navigation-group.js +9 -5
- package/components/ic-navigation-group.js.map +1 -1
- package/components/ic-radio-group.js +3 -3
- package/components/ic-radio-group.js.map +1 -1
- package/components/ic-side-navigation.js.map +1 -1
- package/components/ic-switch.js.map +1 -1
- package/dist/cjs/ic-accordion.cjs.entry.js +53 -38
- package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +276 -37
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-link.cjs.entry.js +1 -1
- package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +8 -5
- package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +9 -5
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +3 -3
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-section-container.cjs.entry.js.map +1 -1
- package/dist/collection/components/ic-accordion/ic-accordion.js +53 -38
- package/dist/collection/components/ic-accordion/ic-accordion.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.css +6 -0
- package/dist/collection/components/ic-link/ic-link.css +4 -0
- package/dist/collection/components/ic-menu/ic-menu.css +14 -5
- package/dist/collection/components/ic-menu-item/ic-menu-item.css +13 -6
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js +8 -5
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +9 -5
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +3 -3
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/utils/common-helpers.js +1 -1
- package/dist/collection/utils/common-helpers.js.map +1 -1
- package/dist/components/ic-accordion.js +53 -38
- package/dist/components/ic-accordion.js.map +1 -1
- package/dist/components/ic-button2.js +1 -1
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-link2.js +1 -1
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-menu-item2.js +1 -1
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu2.js +276 -37
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js +8 -5
- package/dist/components/ic-navigation-button.js.map +1 -1
- package/dist/components/ic-navigation-group.js +9 -5
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-radio-group.js +3 -3
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/{p-9ced00a7.entry.js → p-41bbdc4c.entry.js} +2 -2
- package/dist/core/{p-9ced00a7.entry.js.map → p-41bbdc4c.entry.js.map} +1 -1
- package/dist/core/p-51fc7809.entry.js +2 -0
- package/dist/core/p-51fc7809.entry.js.map +1 -0
- package/dist/core/{p-e5266c19.entry.js → p-67048b2e.entry.js} +2 -2
- package/dist/core/{p-e5266c19.entry.js.map → p-67048b2e.entry.js.map} +1 -1
- package/dist/core/p-756b4cb3.entry.js +2 -0
- package/dist/core/p-756b4cb3.entry.js.map +1 -0
- package/dist/core/p-78e56db1.entry.js +2 -0
- package/dist/core/p-78e56db1.entry.js.map +1 -0
- package/dist/core/{p-1cfaa962.entry.js → p-95849ac2.entry.js} +2 -2
- package/dist/core/p-95849ac2.entry.js.map +1 -0
- package/dist/core/{p-fc4b7d2b.entry.js → p-9cf35c23.entry.js} +2 -2
- package/dist/core/p-9cf35c23.entry.js.map +1 -0
- package/dist/core/p-a8d98164.entry.js.map +1 -1
- package/dist/core/p-e5178830.entry.js +3 -0
- package/dist/core/p-e5178830.entry.js.map +1 -0
- package/dist/esm/ic-accordion.entry.js +53 -38
- package/dist/esm/ic-accordion.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +1 -1
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +276 -37
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-link.entry.js +1 -1
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-menu-item.entry.js +1 -1
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +8 -5
- package/dist/esm/ic-navigation-button.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +9 -5
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +3 -3
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-section-container.entry.js.map +1 -1
- package/dist/types/components/ic-accordion/ic-accordion.d.ts +2 -0
- package/dist/types/components/ic-navigation-group/ic-navigation-group.d.ts +1 -0
- package/hydrate/index.js +351 -90
- package/hydrate/index.mjs +351 -90
- package/package.json +4 -2
- package/dist/core/p-1cfaa962.entry.js.map +0 -1
- package/dist/core/p-305d9639.entry.js +0 -3
- package/dist/core/p-305d9639.entry.js.map +0 -1
- package/dist/core/p-98dee727.entry.js +0 -2
- package/dist/core/p-98dee727.entry.js.map +0 -1
- package/dist/core/p-be8bbed8.entry.js +0 -2
- package/dist/core/p-be8bbed8.entry.js.map +0 -1
- package/dist/core/p-c0b70c08.entry.js +0 -2
- package/dist/core/p-c0b70c08.entry.js.map +0 -1
- package/dist/core/p-fc4b7d2b.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ic-navigation-group.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-group/ic-navigation-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,CAAC,EACD,MAAM,EACN,KAAK,GAEN,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,4BAA4B,EAC5B,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAS7B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAMxD,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AAChD,MAAM,+BAA+B,GAAG,GAAG,CAAC;AAC5C,MAAM,SAAS,GAAG,qBAAqB,CAAC;AASxC,MAAM,OAAO,eAAe;IAP5B;QAQU,oCAA+B,GAAG,EAAE,CAAC;QACrC,4BAAuB,GAAkB,IAAI,CAAC;QAE9C,2BAAsB,GAAkB,IAAI,CAAC;QAE7C,cAAS,GAAG,KAAK,CAAC;QAKjB,eAAU,GAAW,YAAY,CAAC,EAAE,CAAC;QACrC,iBAAY,GAAG,KAAK,CAAC;QACrB,eAAU,GACjB,4BAA4B,EAAE,CAAC;QACxB,qBAAgB,GAAG,KAAK,CAAC;QAGzB,sBAAiB,GAAG,KAAK,CAAC;QAEnC;;WAEG;QACK,eAAU,GAAG,KAAK,CAAC;QAE3B;;WAEG;QACsB,aAAQ,GAAG,IAAI,CAAC;QAOzC;;WAEG;QACK,UAAK,GAAgB,SAAS,CAAC;QAuG/B,yBAAoB,GAAG,CAAC,KAAkB,EAAE,EAAE;YACpD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;YAEtD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAEhD,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB;gBAC3C,CAAC,CAAC,IAAI,CAAC,sBAAsB;gBAC7B,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC;YAEjC,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,4BAA4B,CAAC,cAAc,CAAC,CAAC;YACpD,CAAC;iBAAM,CAAC;gBACN,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;wBAC3B,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,+BAA+B,CAAC;oBACrE,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,+BAA+B,CAAC;oBACtE,CAAC;oBAED,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;gBAC1E,CAAC,EAAE,+BAA+B,CAAC,CAAC;YACtC,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,EAC9B,MAAM,EAAE,EAAE,IAAI,EAAE,GACc,EAAE,EAAE;;YAClC,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU;gBAAE,OAAO;YAErC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,gBAAgB;gBACnB,IAAI;oBACJ,CAAC,CAAA,MAAC,IAAI,CAAC,QAAuC,0CAAE,sBAAsB;wBACpE,YAAY,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,CAAC;QASM,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAE9B,IAAI,CAAC,4BAA4B,CAC/B,CAAC,IAAI,CAAC,QAAQ;gBACZ,CAAC,CAAC,GAAG;gBACL,CAAC,CAAC,IAAI,CAAC,iBAAiB;oBACxB,CAAC,CAAC,IAAI,CAAC,sBAAsB;oBAC7B,CAAC,CAAC,IAAI,CAAC,uBAAuB,CACjC,CAAC;YAEF,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,EAAE;;gBACtE,MAAM,OAAO,GACX,CAAA,MAAA,cAAc,CAAC,UAAU,0CAAE,aAAa,CAAC,GAAG,CAAC;oBAC7C,cAAc,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;gBACpC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YAChE,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAmBM,gBAAW,GAAG,CAAC,EAAc,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,IAAI,EAAE,CAAC,MAAM,EAAE,CAAC;gBAC/C,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,EAAc,EAAE,EAAE;YACtC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,aAA4B,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,EAAiB,EAAE,EAAE;YAC5C,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;YACnB,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,QAAQ;gBAAE,OAAO;YAE/D,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC5B,KAAK,KAAK;oBACR,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;wBACnC,IAAI,CAAC,cAAc,EAAE,CAAC;oBACxB,CAAC;yBAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;wBAClC,IAAI,CAAC,YAAY,EAAE,CAAC;oBACtB,CAAC;oBACD,MAAM;gBACR,KAAK,MAAM;oBACT,IAAI,CAAC,cAAc,EAAE,CAAC;oBACtB,EAAE,CAAC,cAAc,EAAE,CAAC;oBACpB,MAAM;gBACR;oBACE,IAAI,CAAC,cAAc,EAAE,CAAC;oBACtB,MAAM;YACV,CAAC;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,EAAc,EAAE,EAAE;YAC5C,MAAM,SAAS,GAAG,EAAE,CAAC,aAA4B,CAAC;YAElD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YAEvB,IACE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC;gBAC3B,SAAS,KAAK,IAAI,CAAC,QAAQ;gBAC3B,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;gBAExC,OAAO;YAET,IACE,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE;gBAClC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,MAAK,SAAS;gBACjC,IAAI,CAAC,YAAY,EACjB,CAAC;gBACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;gBACjD,CAAC,EAAE,GAAG,CAAC,CAAC;YACV,CAAC;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,EAAc,EAAE,EAAE;YAC5C,MAAM,SAAS,GAAG,EAAE,CAAC,aAAmC,CAAC;YACzD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAEzD,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,MAAK,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACxD,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;iBAAM,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,IAAI,CAAC,SAAS;wBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;gBAC1C,CAAC,EAAE,GAAG,CAAC,CAAC;YACV,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAG,EAAE,CAAC,CACnC,qBACE,EAAE,EAAC,iBAAiB,EACpB,OAAO,EAAE,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,IAE5D,IAAI,CAAC,KAAK,CACG,CACjB,CAAC;QAEM,0BAAqB,GAAG,GAAG,EAAE;YACnC,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;gBACrE,OAAO,CACL,WACE,KAAK,EAAE;wBACL,CAAC,IAAI,CAAC,gBAAgB;4BACpB,CAAC,CAAC,qCAAqC;4BACvC,CAAC,CAAC,2BAA2B,CAAC,EAAE,IAAI;wBACtC,QAAQ,EAAE,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,gBAAgB;qBACtD,EACD,YAAY,EACV,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAE5D,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;oBAEjC,WACE,KAAK,EAAE;4BACL,iCAAiC,EAAE,CAAC,IAAI,CAAC,gBAAgB;yBAC1D,qBACe,iBAAiB;wBAEjC;4BACE,eAAa,CACV,CACD,CACF,CACP,CAAC;YACJ,CAAC;YAED,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE,CAAC;gBAClC,OAAO,CACL,UAAI,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,uBAAuB;oBACrE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;QAEM,iCAA4B,GAAG,CAAC,MAAqB,EAAE,EAAE;;YAC/D,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,WAAW,CACjC,iCAAiC,EACjC,MAAM,CACP,CAAC;QACJ,CAAC,CAAC;KA2EH;IAzXC,oBAAoB;;QAClB,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE,CAAC;YACnC,MAAA,IAAI,CAAC,QAAQ,0CAAE,mBAAmB,CAChC,mBAAmB,EACnB,IAAI,CAAC,oBAAqC,CAC3C,CAAC;QACJ,CAAC;aAAM,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE,CAAC;YACzC,MAAA,IAAI,CAAC,QAAQ,0CAAE,mBAAmB,CAChC,iBAAiB,EACjB,IAAI,CAAC,oBAAqC,CAC3C,CAAC;QACJ,CAAC;IACH,CAAC;IAED,iBAAiB;;QACf,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;QACzC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;QAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;QAEvB,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE,CAAC;YACnC,MAAA,IAAI,CAAC,QAAQ,0CAAE,gBAAgB,CAC7B,mBAAmB,EACnB,IAAI,CAAC,oBAAqC,CAC3C,CAAC;QACJ,CAAC;aAAM,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE,CAAC;YACzC,MAAA,IAAI,CAAC,QAAQ,0CAAE,gBAAgB,CAC7B,iBAAiB,EACjB,IAAI,CAAC,oBAAqC,CAC3C,CAAC;YACF,IACE,IAAI,CAAC,UAAU;gBACd,IAAI,CAAC,QAAuC,CAAC,sBAAsB;gBAEpE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QACjC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,+BAA+B,GAAG,GAAG,KAAK,CAAC,IAAI,CAClD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAC7C,CAAC,MAAM,CACN,CAAC,eAAe,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,EACrE,CAAC,CACF,IAAI,CAAC;QAEN;;;WAGG;QACH,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAEhD,IAAI,CAAC,IAAI,CAAC,iBAAiB;gBACzB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,+BAA+B,CAAC;;gBACjE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,+BAA+B,CAAC;YAExE,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;QAC1E,CAAC,EAAE,+BAA+B,CAAC,CAAC;IACtC,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAGD,2BAA2B,CAAC,KAAkB;QAC5C,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAGD,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAGD,kBAAkB,CAAC,EAAwB;QACzC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;IACnC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACxB,CAAC;IAsCO,cAAc;QACpB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QACrE,CAAC;IACH,CAAC;IAsBO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;gBAC9B,MAAM,EAAE,IAAI,CAAC,EAAE;aAChB,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAuID,MAAM;QACJ,MAAM,EACJ,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,KAAK,EACL,iBAAiB,EACjB,UAAU,GACX,GAAG,IAAI,CAAC;QAET,MAAM,sBAAsB,GAAG,CAAC,IAAa,EAAE,EAAE,CAC/C,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAElC,MAAM,uBAAuB,GAAG;YAC9B,kBAAkB,EAAE,IAAI;YACxB,CAAC,UAAU,CAAC,EAAE,CAAC,gBAAgB;YAC/B,CAAC,8BAA8B,sBAAsB,CAAC,YAAY,CAAC,EAAE,CAAC,EACpE,gBAAgB,IAAI,UAAU;YAChC,QAAQ,EAAE,YAAY,IAAI,CAAC,gBAAgB;SAC5C,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC;QACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,KAAK,KAAK,CAAC;QAC/C,MAAM,eAAe,GAAG,CAAC,gBAAgB,IAAI,QAAQ,CAAC;QAEtD,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,CAAC;QAE3E,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,cAAc,EAAE,gBAAgB;gBAChC,gCAAgC,EAAE,UAAU;gBAC5C,8BAA8B,EAAE,SAAS;gBACzC,CAAC,uBAAuB,sBAAsB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI;gBACjE,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C,EACD,IAAI,EAAC,UAAU;YAEd,UAAU,IAAI,eAAe,CAAC,CAAC,CAAC,CAC/B,cACE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EACjE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC1D,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,uBAAuB,EAC9B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,mBACjB,GAAG,YAAY,EAAE,mBACjB,GAAG,eAAe,EAAE;gBAElC,IAAI,CAAC,oBAAoB,EAAE;gBAC3B,SAAS,IAAI,UAAU,IAAI,CAC1B,WACE,KAAK,EAAE;wBACL,6BAA6B,EAAE,IAAI;wBACnC,4BAA4B,EAAE,CAAC,CAAC,QAAQ;qBACzC,EACD,SAAS,EAAE,WAAW,GACjB,CACR,CACM,CACV,CAAC,CAAC,CAAC,CACF,CAAC,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAAI,CACnC,WAAK,KAAK,EAAE,uBAAuB,IAChC,IAAI,CAAC,oBAAoB,EAAE,CACxB,CACP,CACF;YACA,IAAI,CAAC,qBAAqB,EAAE,CACxB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Listen,\n h,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n IcNavType,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n IcNavigationExpandEventDetail,\n IcNavigationOpenEventDetail,\n} from \"./ic-navigation-group.types\";\n\nconst IC_NAVIGATION_ITEM = \"ic-navigation-item\";\nconst DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;\nconst NODE_NAME = \"IC-NAVIGATION-GROUP\";\n\n@Component({\n tag: \"ic-navigation-group\",\n styleUrl: \"ic-navigation-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationGroup {\n private allGroupedNavigationItemHeights = \"\";\n private collapsedNavItemsHeight: string | null = null;\n private dropdown?: HTMLElement;\n private expandedNavItemsHeight: string | null = null;\n private groupEl?: HTMLElement;\n private mouseGate = false;\n private linkWrapper?: HTMLUListElement;\n\n @Element() el: HTMLIcNavigationGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() dropdownOpen = false;\n @State() focusStyle: IcBrandForegroundNoDefault | IcBrandForeground =\n getBrandForegroundAppearance();\n @State() inTopNavSideMenu = false;\n @State() navigationType: IcNavType | \"\";\n @State() parentEl: HTMLElement | null;\n @State() isSideNavExpanded = false;\n\n /**\n * If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes.\n */\n @Prop() expandable = false;\n\n /**\n * If `true`, the expandable group will be expanded by default when in an ic-side-navigation component. To enable this prop, `expandable` must also be set to `true`.\n */\n @Prop({ mutable: true }) expanded = true;\n\n /**\n * The label to display on the group.\n */\n @Prop() label!: 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 * @internal Emitted when a navigation group is opened - when within an ic-top-navigation at large screen sizes.\n */\n @Event() navigationGroupOpened: EventEmitter<IcNavigationOpenEventDetail>;\n\n /**\n * @internal Emitted when a navigation group is expanded - when within an ic-top-navigation at small screen sizes.\n */\n @Event() navigationGroupExpanded: EventEmitter<IcNavigationExpandEventDetail>;\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl?.removeEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.removeEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n }\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.parentEl = parent;\n\n if (this.navigationType === \"side\") {\n this.parentEl?.addEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.addEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n )\n this.inTopNavSideMenu = true;\n }\n }\n\n componentDidLoad(): void {\n this.allGroupedNavigationItemHeights = `${Array.from(\n this.el.querySelectorAll(IC_NAVIGATION_ITEM)\n ).reduce(\n (childrenHeights, { offsetHeight }) => childrenHeights + offsetHeight,\n 0\n )}px`;\n\n /**\n * debounce is required as the incorrect height was retrieved instantly after\n * componentDidLoad is invoked.\n */\n setTimeout(() => {\n if (!this.linkWrapper || !this.expanded) return;\n\n if (!this.isSideNavExpanded)\n this.collapsedNavItemsHeight = this.allGroupedNavigationItemHeights;\n else this.expandedNavItemsHeight = this.allGroupedNavigationItemHeights;\n\n this.setGroupedLinksElementHeight(this.allGroupedNavigationItemHeights);\n }, DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n\n @Listen(\"childBlur\")\n childBlurHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"navigationGroupOpened\", { target: \"document\" })\n handleNavigationGroupOpened(event: CustomEvent): void {\n if (event.detail.source !== this.el) {\n this.hideDropdown();\n }\n }\n\n @Listen(\"navItemClicked\")\n navItemClickHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.focusStyle = ev.detail.mode;\n }\n\n /**\n * Sets focus on the nav item.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.groupEl?.focus();\n }\n\n private sideNavExpandHandler = (event: CustomEvent) => {\n this.isSideNavExpanded = event.detail.sideNavExpanded;\n\n if (!this.linkWrapper || !this.expanded) return;\n\n const navItemsHeight = this.isSideNavExpanded\n ? this.expandedNavItemsHeight\n : this.collapsedNavItemsHeight;\n\n if (navItemsHeight) {\n this.setGroupedLinksElementHeight(navItemsHeight);\n } else {\n setTimeout(() => {\n if (this.isSideNavExpanded) {\n this.expandedNavItemsHeight = this.allGroupedNavigationItemHeights;\n } else {\n this.collapsedNavItemsHeight = this.allGroupedNavigationItemHeights;\n }\n\n this.setGroupedLinksElementHeight(this.allGroupedNavigationItemHeights);\n }, DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n };\n\n private topNavResizedHandler = ({\n detail: { size },\n }: CustomEvent<{ size: number }>) => {\n if (size === this.deviceSize) return;\n\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)?.customMobileBreakpoint ||\n DEVICE_SIZES.L);\n };\n\n private toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n if (this.inTopNavSideMenu) {\n this.navigationGroupExpanded.emit({ expanded: this.dropdownOpen });\n }\n }\n\n private toggleExpanded = () => {\n this.expanded = !this.expanded;\n if (!this.linkWrapper) return;\n\n this.setGroupedLinksElementHeight(\n !this.expanded\n ? \"0\"\n : this.isSideNavExpanded\n ? this.expandedNavItemsHeight\n : this.collapsedNavItemsHeight\n );\n\n this.el.querySelectorAll(IC_NAVIGATION_ITEM).forEach((navigationItem) => {\n const navItem =\n navigationItem.shadowRoot?.querySelector(\"a\") ||\n navigationItem.querySelector(\"a\");\n navItem?.setAttribute(\"tabindex\", this.expanded ? \"0\" : \"-1\");\n });\n };\n\n private showDropdown() {\n if (!this.dropdownOpen) {\n this.navigationGroupOpened.emit({\n source: this.el,\n });\n\n this.toggleDropdown();\n }\n }\n\n private hideDropdown() {\n document.removeEventListener(\"keydown\", this.handleKeydown);\n if (this.dropdownOpen) {\n this.toggleDropdown();\n }\n }\n\n private handleClick = (ev: MouseEvent) => {\n if (this.navigationType === \"top\" && ev.detail) {\n this.toggleDropdown();\n } else {\n this.toggleExpanded();\n }\n };\n\n private handleBlur = (ev: FocusEvent) => {\n if (!this.el.contains(ev.relatedTarget as HTMLElement)) {\n this.hideDropdown();\n }\n };\n\n private handleKeydown = (ev: KeyboardEvent) => {\n const { key } = ev;\n if (key !== \"Enter\" && key !== \" \" && key !== \"Escape\") return;\n\n switch (this.navigationType) {\n case \"top\":\n if (key === \" \" || key === \"Enter\") {\n this.toggleDropdown();\n } else if (!this.inTopNavSideMenu) {\n this.hideDropdown();\n }\n break;\n case \"side\":\n this.toggleExpanded();\n ev.preventDefault();\n break;\n default:\n this.toggleExpanded();\n break;\n }\n };\n\n private handleMouseLeave = (ev: MouseEvent) => {\n const relTarget = ev.relatedTarget as HTMLElement;\n\n this.mouseGate = false;\n\n if (\n this.el.contains(relTarget) ||\n relTarget === this.dropdown ||\n this.el.contains(document.activeElement)\n )\n return;\n\n if (\n document.activeElement !== this.el &&\n relTarget?.nodeName === NODE_NAME &&\n this.dropdownOpen\n ) {\n this.mouseGate = true;\n this.hideDropdown();\n } else {\n this.mouseGate = false;\n setTimeout(() => {\n this.dropdownOpen ? this.hideDropdown() : null;\n }, 500);\n }\n };\n\n private handleMouseEnter = (ev: MouseEvent) => {\n const relTarget = ev.relatedTarget as HTMLElement | null;\n document.addEventListener(\"keydown\", this.handleKeydown);\n\n if (relTarget?.nodeName === NODE_NAME && this.mouseGate) {\n this.showDropdown();\n } else if (!this.dropdownOpen && !this.mouseGate) {\n this.mouseGate = true;\n setTimeout(() => {\n if (this.mouseGate) this.showDropdown();\n }, 500);\n }\n };\n\n private renderGroupTitleText = () => (\n <ic-typography\n id=\"nav-group-title\"\n variant={this.navigationType === \"side\" ? \"caption\" : \"label\"}\n >\n {this.label}\n </ic-typography>\n );\n\n private renderNavigationItems = () => {\n if (this.dropdownOpen || (this.inTopNavSideMenu && !this.expandable)) {\n return (\n <div\n class={{\n [this.inTopNavSideMenu\n ? \"navigation-group-dropdown-side-menu\"\n : \"navigation-group-dropdown\"]: true,\n selected: this.dropdownOpen && !this.inTopNavSideMenu,\n }}\n onMouseLeave={\n !this.inTopNavSideMenu ? this.handleMouseLeave : undefined\n }\n ref={(el) => (this.dropdown = el)}\n >\n <nav\n class={{\n \"navigation-group-dropdown-items\": !this.inTopNavSideMenu,\n }}\n aria-labelledby=\"nav-group-title\"\n >\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </div>\n );\n }\n\n if (this.navigationType !== \"top\") {\n return (\n <ul ref={(el) => (this.linkWrapper = el)} class=\"grouped-links-wrapper\">\n <slot></slot>\n </ul>\n );\n }\n\n return null;\n };\n\n private setGroupedLinksElementHeight = (height: string | null) => {\n this.linkWrapper?.style.setProperty(\n \"--navigation-child-items-height\",\n height\n );\n };\n\n render() {\n const {\n dropdownOpen,\n expanded,\n inTopNavSideMenu,\n expandable,\n theme,\n isSideNavExpanded,\n focusStyle,\n } = this;\n\n const getExpandedClassSuffix = (prop: boolean) =>\n prop ? \"expanded\" : \"collapsed\";\n\n const navGroupTitleClassNames = {\n \"navigation-group\": true,\n [focusStyle]: !inTopNavSideMenu,\n [`navigation-group-side-menu-${getExpandedClassSuffix(dropdownOpen)}`]:\n inTopNavSideMenu && expandable,\n selected: dropdownOpen && !inTopNavSideMenu,\n };\n\n const isSideNav = this.navigationType === \"side\";\n const isTopNav = this.navigationType === \"top\";\n const isTopNavDesktop = !inTopNavSideMenu && isTopNav;\n\n const ariaExpanded = (isSideNav && expanded) || (isTopNav && dropdownOpen);\n\n return (\n <Host\n class={{\n \"in-side-menu\": inTopNavSideMenu,\n \"ic-navigation-group-expandable\": expandable,\n \"ic-navigation-group-side-nav\": isSideNav,\n [`ic-navigation-group-${getExpandedClassSuffix(expanded)}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n role=\"listitem\"\n >\n {expandable || isTopNavDesktop ? (\n <button\n onMouseEnter={isTopNavDesktop ? this.handleMouseEnter : undefined}\n onMouseLeave={isTopNav ? this.handleMouseLeave : undefined}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n class={navGroupTitleClassNames}\n ref={(el) => (this.groupEl = el)}\n aria-expanded={`${ariaExpanded}`}\n aria-haspopup={`${isTopNavDesktop}`}\n >\n {this.renderGroupTitleText()}\n {isSideNav && expandable && (\n <div\n class={{\n \"chevron-toggle-icon-wrapper\": true,\n \"chevron-toggle-icon-closed\": !!expanded,\n }}\n innerHTML={chevronIcon}\n ></div>\n )}\n </button>\n ) : (\n (!isSideNav || isSideNavExpanded) && (\n <div class={navGroupTitleClassNames}>\n {this.renderGroupTitleText()}\n </div>\n )\n )}\n {this.renderNavigationItems()}\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ic-navigation-group.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-group/ic-navigation-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Listen,\n h,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n IcNavType,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n IcNavigationExpandEventDetail,\n IcNavigationOpenEventDetail,\n} from \"./ic-navigation-group.types\";\n\nconst IC_NAVIGATION_ITEM = \"ic-navigation-item\";\nconst DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;\nconst NODE_NAME = \"IC-NAVIGATION-GROUP\";\n\n@Component({\n tag: \"ic-navigation-group\",\n styleUrl: \"ic-navigation-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationGroup {\n private allGroupedNavigationItemHeights = \"\";\n private collapsedNavItemsHeight: string | null = null;\n private dropdown?: HTMLElement;\n private expandedNavItemsHeight: string | null = null;\n private groupEl?: HTMLElement;\n private mouseGate = false;\n private linkWrapper?: HTMLUListElement;\n\n @Element() el: HTMLIcNavigationGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() dropdownOpen = false;\n @State() focusStyle: IcBrandForegroundNoDefault | IcBrandForeground =\n getBrandForegroundAppearance();\n @State() inTopNavSideMenu = false;\n @State() navigationType: IcNavType | \"\";\n @State() parentEl: HTMLElement | null;\n @State() isSideNavExpanded = false;\n\n /**\n * If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes.\n */\n @Prop() expandable = false;\n\n /**\n * If `true`, the expandable group will be expanded by default when in an ic-side-navigation component. To enable this prop, `expandable` must also be set to `true`.\n */\n @Prop({ mutable: true }) expanded = true;\n\n /**\n * The label to display on the group.\n */\n @Prop() label!: 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 * @internal Emitted when a navigation group is opened - when within an ic-top-navigation at large screen sizes.\n */\n @Event() navigationGroupOpened: EventEmitter<IcNavigationOpenEventDetail>;\n\n /**\n * @internal Emitted when a navigation group is expanded - when within an ic-top-navigation at small screen sizes.\n */\n @Event() navigationGroupExpanded: EventEmitter<IcNavigationExpandEventDetail>;\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl?.removeEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.removeEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n }\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.parentEl = parent;\n\n if (this.navigationType === \"side\") {\n this.parentEl?.addEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.addEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n )\n this.inTopNavSideMenu = true;\n }\n }\n\n private getGroupedNavigationItemsHeight = (): string =>\n `${Array.from(this.el.querySelectorAll(IC_NAVIGATION_ITEM)).reduce(\n (childrenHeights, { offsetHeight }) => childrenHeights + offsetHeight,\n 0\n )}px`;\n\n componentDidLoad(): void {\n /**\n * debounce is required as the incorrect height was retrieved instantly after\n * componentDidLoad is invoked.\n */\n setTimeout(() => {\n if (!this.linkWrapper || !this.expanded) return;\n\n this.allGroupedNavigationItemHeights =\n this.getGroupedNavigationItemsHeight();\n\n if (!this.isSideNavExpanded)\n this.collapsedNavItemsHeight = this.allGroupedNavigationItemHeights;\n else this.expandedNavItemsHeight = this.allGroupedNavigationItemHeights;\n\n this.setGroupedLinksElementHeight(this.allGroupedNavigationItemHeights);\n }, DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n\n @Listen(\"childBlur\")\n childBlurHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"navigationGroupOpened\", { target: \"document\" })\n handleNavigationGroupOpened(event: CustomEvent): void {\n if (event.detail.source !== this.el) {\n this.hideDropdown();\n }\n }\n\n @Listen(\"navItemClicked\")\n navItemClickHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.focusStyle = ev.detail.mode;\n }\n\n /**\n * Sets focus on the nav item.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.groupEl?.focus();\n }\n\n private sideNavExpandHandler = (event: CustomEvent) => {\n this.isSideNavExpanded = event.detail.sideNavExpanded;\n\n if (!this.linkWrapper || !this.expanded) return;\n\n const navItemsHeight = this.isSideNavExpanded\n ? this.expandedNavItemsHeight\n : this.collapsedNavItemsHeight;\n\n if (navItemsHeight) {\n this.setGroupedLinksElementHeight(navItemsHeight);\n } else {\n setTimeout(() => {\n const currentHeight = this.getGroupedNavigationItemsHeight();\n this.allGroupedNavigationItemHeights = currentHeight;\n\n if (this.isSideNavExpanded) {\n this.expandedNavItemsHeight = currentHeight;\n } else {\n this.collapsedNavItemsHeight = currentHeight;\n }\n\n this.setGroupedLinksElementHeight(currentHeight);\n }, DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n };\n\n private topNavResizedHandler = ({\n detail: { size },\n }: CustomEvent<{ size: number }>) => {\n if (size === this.deviceSize) return;\n\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)?.customMobileBreakpoint ||\n DEVICE_SIZES.L);\n };\n\n private toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n if (this.inTopNavSideMenu) {\n this.navigationGroupExpanded.emit({ expanded: this.dropdownOpen });\n }\n }\n\n private toggleExpanded = () => {\n this.expanded = !this.expanded;\n if (!this.linkWrapper) return;\n\n this.setGroupedLinksElementHeight(\n !this.expanded\n ? \"0\"\n : this.isSideNavExpanded\n ? this.expandedNavItemsHeight\n : this.collapsedNavItemsHeight\n );\n\n this.el.querySelectorAll(IC_NAVIGATION_ITEM).forEach((navigationItem) => {\n const navItem =\n navigationItem.shadowRoot?.querySelector(\"a\") ||\n navigationItem.querySelector(\"a\");\n navItem?.setAttribute(\"tabindex\", this.expanded ? \"0\" : \"-1\");\n });\n };\n\n private showDropdown() {\n if (!this.dropdownOpen) {\n this.navigationGroupOpened.emit({\n source: this.el,\n });\n\n this.toggleDropdown();\n }\n }\n\n private hideDropdown() {\n document.removeEventListener(\"keydown\", this.handleKeydown);\n if (this.dropdownOpen) {\n this.toggleDropdown();\n }\n }\n\n private handleClick = (ev: MouseEvent) => {\n if (this.navigationType === \"top\" && ev.detail) {\n this.toggleDropdown();\n } else {\n this.toggleExpanded();\n }\n };\n\n private handleBlur = (ev: FocusEvent) => {\n if (!this.el.contains(ev.relatedTarget as HTMLElement)) {\n this.hideDropdown();\n }\n };\n\n private handleKeydown = (ev: KeyboardEvent) => {\n const { key } = ev;\n if (key !== \"Enter\" && key !== \" \" && key !== \"Escape\") return;\n\n switch (this.navigationType) {\n case \"top\":\n if (key === \" \" || key === \"Enter\") {\n this.toggleDropdown();\n } else if (!this.inTopNavSideMenu) {\n this.hideDropdown();\n }\n break;\n case \"side\":\n this.toggleExpanded();\n ev.preventDefault();\n break;\n default:\n this.toggleExpanded();\n break;\n }\n };\n\n private handleMouseLeave = (ev: MouseEvent) => {\n const relTarget = ev.relatedTarget as HTMLElement;\n\n this.mouseGate = false;\n\n if (\n this.el.contains(relTarget) ||\n relTarget === this.dropdown ||\n this.el.contains(document.activeElement)\n )\n return;\n\n if (\n document.activeElement !== this.el &&\n relTarget?.nodeName === NODE_NAME &&\n this.dropdownOpen\n ) {\n this.mouseGate = true;\n this.hideDropdown();\n } else {\n this.mouseGate = false;\n setTimeout(() => {\n this.dropdownOpen ? this.hideDropdown() : null;\n }, 500);\n }\n };\n\n private handleMouseEnter = (ev: MouseEvent) => {\n const relTarget = ev.relatedTarget as HTMLElement | null;\n document.addEventListener(\"keydown\", this.handleKeydown);\n\n if (relTarget?.nodeName === NODE_NAME && this.mouseGate) {\n this.showDropdown();\n } else if (!this.dropdownOpen && !this.mouseGate) {\n this.mouseGate = true;\n setTimeout(() => {\n if (this.mouseGate) this.showDropdown();\n }, 500);\n }\n };\n\n private renderGroupTitleText = () => (\n <ic-typography\n id=\"nav-group-title\"\n variant={this.navigationType === \"side\" ? \"caption\" : \"label\"}\n >\n {this.label}\n </ic-typography>\n );\n\n private renderNavigationItems = () => {\n if (this.dropdownOpen || (this.inTopNavSideMenu && !this.expandable)) {\n return (\n <div\n class={{\n [this.inTopNavSideMenu\n ? \"navigation-group-dropdown-side-menu\"\n : \"navigation-group-dropdown\"]: true,\n selected: this.dropdownOpen && !this.inTopNavSideMenu,\n }}\n onMouseLeave={\n !this.inTopNavSideMenu ? this.handleMouseLeave : undefined\n }\n ref={(el) => (this.dropdown = el)}\n >\n <nav\n class={{\n \"navigation-group-dropdown-items\": !this.inTopNavSideMenu,\n }}\n aria-labelledby=\"nav-group-title\"\n >\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </div>\n );\n }\n\n if (this.navigationType !== \"top\") {\n return (\n <ul ref={(el) => (this.linkWrapper = el)} class=\"grouped-links-wrapper\">\n <slot></slot>\n </ul>\n );\n }\n\n return null;\n };\n\n private setGroupedLinksElementHeight = (height: string | null) => {\n this.linkWrapper?.style.setProperty(\n \"--navigation-child-items-height\",\n height\n );\n };\n\n render() {\n const {\n dropdownOpen,\n expanded,\n inTopNavSideMenu,\n expandable,\n theme,\n isSideNavExpanded,\n focusStyle,\n } = this;\n\n const getExpandedClassSuffix = (prop: boolean) =>\n prop ? \"expanded\" : \"collapsed\";\n\n const navGroupTitleClassNames = {\n \"navigation-group\": true,\n [focusStyle]: !inTopNavSideMenu,\n [`navigation-group-side-menu-${getExpandedClassSuffix(dropdownOpen)}`]:\n inTopNavSideMenu && expandable,\n selected: dropdownOpen && !inTopNavSideMenu,\n };\n\n const isSideNav = this.navigationType === \"side\";\n const isTopNav = this.navigationType === \"top\";\n const isTopNavDesktop = !inTopNavSideMenu && isTopNav;\n\n const ariaExpanded = (isSideNav && expanded) || (isTopNav && dropdownOpen);\n\n return (\n <Host\n class={{\n \"in-side-menu\": inTopNavSideMenu,\n \"ic-navigation-group-expandable\": expandable,\n \"ic-navigation-group-side-nav\": isSideNav,\n [`ic-navigation-group-${getExpandedClassSuffix(expanded)}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n role=\"listitem\"\n >\n {expandable || isTopNavDesktop ? (\n <button\n onMouseEnter={isTopNavDesktop ? this.handleMouseEnter : undefined}\n onMouseLeave={isTopNav ? this.handleMouseLeave : undefined}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n class={navGroupTitleClassNames}\n ref={(el) => (this.groupEl = el)}\n aria-expanded={`${ariaExpanded}`}\n aria-haspopup={`${isTopNavDesktop}`}\n >\n {this.renderGroupTitleText()}\n {isSideNav && expandable && (\n <div\n class={{\n \"chevron-toggle-icon-wrapper\": true,\n \"chevron-toggle-icon-closed\": !!expanded,\n }}\n innerHTML={chevronIcon}\n ></div>\n )}\n </button>\n ) : (\n (!isSideNav || isSideNavExpanded) && (\n <div class={navGroupTitleClassNames}>\n {this.renderGroupTitleText()}\n </div>\n )\n )}\n {this.renderNavigationItems()}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -233,13 +233,13 @@ export class RadioGroup {
|
|
|
233
233
|
return (h(Host, { key: 'df3176ecead3472c9cbc46f20b4398beb1cf0710', onKeyDown: handleKeyDown, class: {
|
|
234
234
|
[`ic-radio-group-${size}`]: size !== "medium",
|
|
235
235
|
[`ic-theme-${theme}`]: theme !== "inherit",
|
|
236
|
-
} }, h("fieldset", { key: '
|
|
236
|
+
} }, h("fieldset", { key: 'bc89a5a887cff0221456377608b0b9f74e2c8894', role: "radiogroup", id: this.name, "aria-required": `${required}`, "aria-label": hideLabel ? label : undefined }, !hideLabel && (h("legend", { key: 'ede3e6b433073b9f2c6f60d0e2afc9afbe35aa42' }, h("ic-input-label", { key: 'f41072703bab305f871b367cd60df057649d8b74', class: {
|
|
237
237
|
[`${validationStatus}`]: true,
|
|
238
238
|
["disabled"]: !!disabled,
|
|
239
|
-
}, label: label, helperText: helperText, required: required, disabled: disabled }, h("slot", { key: '
|
|
239
|
+
}, label: label, helperText: helperText, required: required, disabled: disabled }, h("slot", { key: '504993edffc8ed63fd178f7bfa3ff3852ff82e79', name: "helper-text", slot: "helper-text" })))), h("div", { key: 'dd030383abd9de87d0c93301ad11859947ac1ae9', class: {
|
|
240
240
|
"radio-buttons-container": true,
|
|
241
241
|
horizontal: currentOrientation === this.RADIO_HORIZONTAL,
|
|
242
|
-
}, ref: (el) => (this.radioContainer = el) }, h("slot", { key: '
|
|
242
|
+
}, ref: (el) => (this.radioContainer = el) }, h("slot", { key: 'd5294050d642a692b8e4f595b8ad07507d08a586' }))), h("ic-input-validation", { key: '25b17534a3a5058855938d6cf452cdd3bd5eb38c', class: {
|
|
243
243
|
"show-validation": showValidation,
|
|
244
244
|
}, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "" })));
|
|
245
245
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n slotHasContent,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcAriaLive,\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizes,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n/**\n * @slot helper-text - Content is set as the helper text for the radio group.\n */\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer?: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver | null = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * The label for the radio group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the radio group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n /**\n * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n */\n @Prop() orientation?: IcOrientation = \"vertical\";\n\n /**\n * If `true`, the radio group will require a value.\n */\n @Prop() required?: boolean = false;\n\n /**\n * The size of the radio group component.\n */\n @Prop() size?: IcSizes = \"medium\";\n\n /**\n * The value of the `aria-live` attribute on the validation message.\n */\n @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The text to display as the validation message.\n */\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation!;\n this.checkOrientation();\n }\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 @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));\n }\n\n /**\n * Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n\n this.watchThemeHandler(this.theme!);\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n const selectedOption = target as HTMLIcRadioOptionElement;\n if (selectedOption.parentElement === this.el) {\n this.checkedValue = detail.value as string;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = selectedOption === radioOption;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions?.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (this.radioContainer) {\n if (totalWidth >= this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const additionalFields = Array.from(\n this.el.querySelectorAll<HTMLElement>(\n 'ic-text-field[slot=\"additional-field\"]'\n )\n );\n const activeEl = document.activeElement;\n if (\n additionalFields.length > 0 &&\n this.radioOptions.map((el) =>\n slotHasContent(el, this.ADDITIONAL_FIELD)\n ) &&\n additionalFields.map((el) => el == activeEl)\n ) {\n return;\n }\n\n event.stopPropagation();\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.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 = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer?.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.children).filter(\n (el) => el.tagName === \"IC-RADIO-OPTION\"\n ) as HTMLIcRadioOptionElement[];\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n const {\n currentOrientation,\n disabled,\n handleKeyDown,\n helperText,\n hideLabel,\n label,\n required,\n size,\n validationAriaLive,\n validationStatus,\n validationText,\n theme,\n } = this;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n onKeyDown={handleKeyDown}\n class={{\n [`ic-radio-group-${size}`]: size !== \"medium\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <fieldset\n role=\"radiogroup\"\n id={this.name}\n aria-required={`${required}`}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{\n [`${validationStatus}`]: true,\n [\"disabled\"]: !!disabled,\n }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </fieldset>\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n ariaLiveMode={validationAriaLive}\n status={showValidation ? validationStatus : \"\"}\n message={showValidation ? validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n slotHasContent,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcAriaLive,\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizes,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n/**\n * @slot helper-text - Content is set as the helper text for the radio group.\n */\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer?: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver | null = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * The label for the radio group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the radio group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n /**\n * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n */\n @Prop() orientation?: IcOrientation = \"vertical\";\n\n /**\n * If `true`, the radio group will require a value.\n */\n @Prop() required?: boolean = false;\n\n /**\n * The size of the radio group component.\n */\n @Prop() size?: IcSizes = \"medium\";\n\n /**\n * The value of the `aria-live` attribute on the validation message.\n */\n @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The text to display as the validation message.\n */\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation!;\n this.checkOrientation();\n }\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 @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));\n }\n\n /**\n * Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n\n this.watchThemeHandler(this.theme!);\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n const selectedOption = target as HTMLIcRadioOptionElement;\n if (selectedOption.parentElement === this.el) {\n this.checkedValue = detail.value as string;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = selectedOption === radioOption;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions?.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (this.radioContainer) {\n if (totalWidth >= this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const additionalFields = Array.from(\n this.el.querySelectorAll<HTMLElement>(\n 'ic-text-field[slot=\"additional-field\"]'\n )\n );\n const activeEl = document.activeElement;\n if (\n additionalFields.length > 0 &&\n this.radioOptions.map((el) =>\n slotHasContent(el, this.ADDITIONAL_FIELD)\n ) &&\n additionalFields.map((el) => el == activeEl)\n ) {\n return;\n }\n\n event.stopPropagation();\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.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 = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer?.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.children).filter(\n (el) => el.tagName === \"IC-RADIO-OPTION\"\n ) as HTMLIcRadioOptionElement[];\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n const {\n currentOrientation,\n disabled,\n handleKeyDown,\n helperText,\n hideLabel,\n label,\n required,\n size,\n validationAriaLive,\n validationStatus,\n validationText,\n theme,\n } = this;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n onKeyDown={handleKeyDown}\n class={{\n [`ic-radio-group-${size}`]: size !== \"medium\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <fieldset\n role=\"radiogroup\"\n id={this.name}\n aria-required={`${required}`}\n aria-label={hideLabel ? label : undefined}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{\n [`${validationStatus}`]: true,\n [\"disabled\"]: !!disabled,\n }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </fieldset>\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n ariaLiveMode={validationAriaLive}\n status={showValidation ? validationStatus : \"\"}\n message={showValidation ? validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -5,7 +5,7 @@ const getCustomElementHandling = (allowICPrefix) => ({
|
|
|
5
5
|
CUSTOM_ELEMENT_HANDLING: {
|
|
6
6
|
tagNameCheck: (tagName) => (allowICPrefix && tagName.startsWith("ic-")) ||
|
|
7
7
|
IC_CUSTOM_ALLOWED_COMPONENTS.includes(tagName),
|
|
8
|
-
attributeNameCheck:
|
|
8
|
+
attributeNameCheck: /^(?!on).+$/i,
|
|
9
9
|
},
|
|
10
10
|
});
|
|
11
11
|
export const sanitizeHTMLString = (html) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common-helpers.js","sourceRoot":"","sources":["../../src/utils/common-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAE3D,0BAA0B;AAC1B,MAAM,wBAAwB,GAAG,CAAC,aAAsB,EAAE,EAAE,CAAC,CAAC;IAC5D,uBAAuB,EAAE;QACvB,YAAY,EAAE,CAAC,OAAe,EAAE,EAAE,CAChC,CAAC,aAAa,IAAI,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAC5C,4BAA4B,CAAC,QAAQ,CAAC,OAAO,CAAC;QAChD,kBAAkB,EAAE,
|
|
1
|
+
{"version":3,"file":"common-helpers.js","sourceRoot":"","sources":["../../src/utils/common-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAE3D,0BAA0B;AAC1B,MAAM,wBAAwB,GAAG,CAAC,aAAsB,EAAE,EAAE,CAAC,CAAC;IAC5D,uBAAuB,EAAE;QACvB,YAAY,EAAE,CAAC,OAAe,EAAE,EAAE,CAChC,CAAC,aAAa,IAAI,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAC5C,4BAA4B,CAAC,QAAQ,CAAC,OAAO,CAAC;QAChD,kBAAkB,EAAE,aAAa;KAClC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAU,EAAE;IACzD,OAAO,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,IAAY,EAAU,EAAE;IAC7D,OAAO,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import purifier from \"dompurify\";\nimport { IC_CUSTOM_ALLOWED_COMPONENTS } from \"./constants\";\n\n/* istanbul ignore next */\nconst getCustomElementHandling = (allowICPrefix: boolean) => ({\n CUSTOM_ELEMENT_HANDLING: {\n tagNameCheck: (tagName: string) =>\n (allowICPrefix && tagName.startsWith(\"ic-\")) ||\n IC_CUSTOM_ALLOWED_COMPONENTS.includes(tagName),\n attributeNameCheck: /^(?!on).+$/i,\n },\n});\n\nexport const sanitizeHTMLString = (html: string): string => {\n return purifier.sanitize(html, getCustomElementHandling(true));\n};\n\nexport const sanitizeHTMLIconString = (html: string): string => {\n return purifier.sanitize(html, getCustomElementHandling(false));\n};\n"]}
|
|
@@ -46,16 +46,9 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
|
|
|
46
46
|
};
|
|
47
47
|
// Set accordion animation
|
|
48
48
|
this.setAccordionAnimation = (el, duration, property, delay) => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
el.style.transitionDelay = delay;
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
el.style.transitionDuration = "0ms";
|
|
56
|
-
el.style.transitionProperty = "none";
|
|
57
|
-
el.style.transitionDelay = "0ms";
|
|
58
|
-
}
|
|
49
|
+
el.style.transitionDuration = `${duration}ms`;
|
|
50
|
+
el.style.transitionProperty = property;
|
|
51
|
+
el.style.transitionTimingFunction = delay;
|
|
59
52
|
};
|
|
60
53
|
this.setExpandedContentStyle = (ev, expandedContent) => {
|
|
61
54
|
if (ev.propertyName === "height" && expandedContent.clientHeight > 0) {
|
|
@@ -69,30 +62,52 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
|
|
|
69
62
|
}
|
|
70
63
|
};
|
|
71
64
|
this.animateExpandedContent = () => {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
65
|
+
const expandedContentEl = this.expandedContentEl;
|
|
66
|
+
if (!expandedContentEl)
|
|
67
|
+
return;
|
|
68
|
+
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
69
|
+
if (this.expanded) {
|
|
70
|
+
this.expandContent(expandedContentEl, prefersReducedMotion);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
this.collapseContent(expandedContentEl, prefersReducedMotion);
|
|
74
|
+
};
|
|
75
|
+
this.expandContent = (expandedContentEl, prefersReducedMotion) => {
|
|
76
|
+
const elementHeight = expandedContentEl.scrollHeight;
|
|
77
|
+
if (elementHeight <= 0)
|
|
78
|
+
return;
|
|
79
|
+
expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "visible");
|
|
80
|
+
if (prefersReducedMotion) {
|
|
81
|
+
expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);
|
|
82
|
+
expandedContentEl.style.height = "auto";
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
expandedContentEl.style.height = `${elementHeight}px`;
|
|
86
|
+
this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-out");
|
|
87
|
+
expandedContentEl.addEventListener("transitionend", (e) => {
|
|
88
|
+
this.setExpandedContentStyle(e, expandedContentEl);
|
|
89
|
+
}, { once: true });
|
|
90
|
+
};
|
|
91
|
+
this.collapseContent = (expandedContentEl, prefersReducedMotion) => {
|
|
92
|
+
const elementHeight = expandedContentEl.scrollHeight;
|
|
93
|
+
if (elementHeight <= 0)
|
|
94
|
+
return;
|
|
95
|
+
// Set the content panel as pixels from "auto" so it can be animated
|
|
96
|
+
expandedContentEl.style.height = `${elementHeight}px`;
|
|
97
|
+
if (prefersReducedMotion) {
|
|
98
|
+
expandedContentEl.style.height = "0";
|
|
99
|
+
expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);
|
|
100
|
+
expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "hidden");
|
|
101
|
+
return;
|
|
95
102
|
}
|
|
103
|
+
requestAnimationFrame(() => {
|
|
104
|
+
expandedContentEl.style.height = "0";
|
|
105
|
+
});
|
|
106
|
+
this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-in");
|
|
107
|
+
expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);
|
|
108
|
+
expandedContentEl.addEventListener("transitionend", (e) => {
|
|
109
|
+
this.hideExpandedContent(e, expandedContentEl);
|
|
110
|
+
}, { once: true });
|
|
96
111
|
};
|
|
97
112
|
}
|
|
98
113
|
watchDisabledHandler() {
|
|
@@ -129,19 +144,19 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
|
|
|
129
144
|
}
|
|
130
145
|
render() {
|
|
131
146
|
const { size, disabled, expanded, theme } = this;
|
|
132
|
-
return (h(Host, { key: '
|
|
147
|
+
return (h(Host, { key: '840baa7799dc4c48c232a7dc170937bb563900d5', id: this.accordionId, class: {
|
|
133
148
|
["ic-accordion-disabled"]: !!disabled,
|
|
134
149
|
[`ic-theme-${theme}`]: theme !== "inherit",
|
|
135
|
-
}, "aria-disabled": disabled ? "true" : "false" }, h("button", { key: '
|
|
150
|
+
}, "aria-disabled": disabled ? "true" : "false" }, h("button", { key: 'dce03cb5ba0f61a1d5b75ab1f648eaa970d5d78e', ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
|
|
136
151
|
[`${size}`]: true,
|
|
137
152
|
["section-button"]: true,
|
|
138
153
|
["section-button-open"]: !!expanded && !disabled,
|
|
139
|
-
}, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed(this.el, "icon") && (h("div", { key: '
|
|
154
|
+
}, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed(this.el, "icon") && (h("div", { key: '3301b5e4526831e7e8a4400d775f55d99ec29d27', class: "icon-container" }, h("slot", { key: 'aa49cdcd343009d6d5b7e68f5c1013cd7fcc7638', name: "icon" }))), h("ic-typography", { key: 'da324db78e29a81f0c5bb7209f870b8832c25d67', variant: "subtitle-large", class: "section-header" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (this.heading)), h("span", { key: '9eb1350c8ae3f9c940e1299a17b3b510ccb66ef6', class: {
|
|
140
155
|
["expand-chevron"]: true,
|
|
141
156
|
["content-expanded-chevron"]: !!expanded && !disabled,
|
|
142
|
-
}, "aria-hidden": "true", innerHTML: chevronIcon })), h("div", { key: '
|
|
157
|
+
}, "aria-hidden": "true", innerHTML: chevronIcon })), h("div", { key: '9b04e4a6df4def67189609215cd4849890900146', class: {
|
|
143
158
|
["expanded-content"]: true,
|
|
144
|
-
}, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, h("div", { key: '
|
|
159
|
+
}, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, h("div", { key: '594f88da687634cbbad7e12d8df21a3dc7961a64', class: "expanded-content-inner" }, this.message ? (h("ic-typography", { variant: "body" }, this.message)) : (h("slot", null))))));
|
|
145
160
|
}
|
|
146
161
|
get el() { return this; }
|
|
147
162
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ic-accordion.js","mappings":"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","names":[],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n border-bottom: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:host .expand-chevron {\n color: var(--ic-accordion-chevron);\n}\n\n:host(.ic-accordion-disabled) .expand-chevron {\n color: var(--ic-accordion-chevron-disabled);\n}\n\n.section-button.small {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n border-top: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:focus {\n outline: none;\n}\n\n.section-button {\n background-color: transparent;\n display: flex;\n align-items: center;\n width: 100%;\n padding: var(--ic-space-xs);\n font-weight: var(--ic-font-weight-bold);\n border: none;\n}\n\n.section-header {\n --ic-typography-color: var(--ic-accordion-heading-text);\n\n color: var(--ic-accordion-heading-text);\n text-align: left;\n flex: 1 0;\n}\n\n:host(.ic-accordion-disabled) .section-header {\n --ic-typography-color: var(--ic-accordion-heading-text-disabled);\n\n color: var(--ic-accordion-heading-text-disabled);\n}\n\nbutton:hover {\n background-color: var(--ic-accordion-background-hover);\n cursor: pointer;\n}\n\nbutton:active {\n background-color: var(--ic-accordion-background-pressed);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n pointer-events: none;\n}\n\n.icon-container {\n margin: 0 var(--ic-space-xs) 0 0;\n display: flex;\n align-items: center;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n color: var(--ic-accordion-icon);\n}\n\n:host(.ic-accordion-disabled) .icon-container {\n color: var(--ic-accordion-icon-disabled);\n}\n\n::slotted(svg) {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n.expand-chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n transform: rotate(90deg);\n justify-self: end;\n}\n\n.content-expanded-chevron {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n --ic-typography-color: var(--ic-accordion-body-text);\n\n color: var(--ic-accordion-body-text);\n height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n overflow: visible;\n}\n\n@media (forced-colors: active) {\n button:focus {\n border: var(--ic-border-hc) !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n button:focus {\n transition: none;\n }\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\nconst EXPANDED_CONTENT_OPENED_CLASS = \"expanded-content-opened\";\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl?: HTMLDivElement;\n private accordionBtnHeading?: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n @Element() el: HTMLIcAccordionElement;\n\n /**\n * If `true`, the accordion will be disabled.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the accordion appears expanded.\n */\n @Prop({ mutable: true }) expanded?: boolean = false;\n\n /**\n * The section header outlining section content.\n */\n @Prop() heading?: string = \"\";\n\n /**\n * The main body message of the accordion.\n */\n @Prop() message?: string = \"\";\n\n /**\n * The size of the accordion.\n */\n @Prop() size?: IcSizes = \"medium\";\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 * @internal Emitted when accordion is clicked.\n */\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /**\n * Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.accordionBtnHeading?.focus();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n disconnectedCallback(): void {\n const expandedContentEl = this.expandedContentEl;\n if (expandedContentEl) {\n expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, expandedContentEl),\n true\n );\n expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded && this.expandedContentEl) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n this.expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n if (!window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionDelay = delay;\n } else {\n el.style.transitionDuration = \"0ms\";\n el.style.transitionProperty = \"none\";\n el.style.transitionDelay = \"0ms\";\n }\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n if (this.expandedContentEl) {\n const expandedContentEl = this.expandedContentEl;\n const elementHeight = expandedContentEl.scrollHeight;\n if (elementHeight > 0 && this.expanded) {\n expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n expandedContentEl.style.height = `${elementHeight}px`;\n this.setAccordionAnimation(\n expandedContentEl,\n \"300\",\n \"height\",\n \"ease-out\"\n );\n\n expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, expandedContentEl);\n }\n );\n } else if (!this.expanded) {\n const expandedContentEl = this.expandedContentEl;\n expandedContentEl.style.height = `${expandedContentEl.scrollHeight}px`;\n if (expandedContentEl.scrollHeight > 0 && !this.expanded) {\n expandedContentEl.style.height = \"0\";\n this.setAccordionAnimation(\n expandedContentEl,\n \"300\",\n \"height\",\n \"ease-in\"\n );\n expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);\n }\n expandedContentEl.addEventListener(\"transitionend\", (e) => {\n this.hideExpandedContent(e, expandedContentEl);\n });\n }\n }\n };\n\n render() {\n const { size, disabled, expanded, theme } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [\"ic-accordion-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: !!expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: !!expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ic-accordion.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,glJAAglJ,CAAC;AACxmJ,0BAAe,cAAc;;ACc7B,IAAI,YAAY,GAAG,CAAC,CAAC;AACrB,MAAM,6BAA6B,GAAG,yBAAyB,CAAC;MAYnD,SAAS;IALtB;;;;;QAMU,gBAAW,GAAG,gBAAgB,YAAY,EAAE,EAAE,CAAC;QAG/C,gCAA2B,GAAG,kCAAkC,CAAC;;;;QAOjE,aAAQ,GAAa,KAAK,CAAC;;;;QASV,aAAQ,GAAa,KAAK,CAAC;;;;QAK5C,YAAO,GAAY,EAAE,CAAC;;;;QAKtB,YAAO,GAAY,EAAE,CAAC;;;;QAKtB,SAAI,GAAa,QAAQ,CAAC;;;;QAK1B,UAAK,GAAiB,SAAS,CAAC;QAqDhC,mBAAc,GAAG;YACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;SACtD,CAAC;;QAGM,0BAAqB,GAAG,CAC9B,EAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,KAAa;YAEb,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,GAAG,QAAQ,IAAI,CAAC;YAC9C,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,QAAQ,CAAC;YACvC,EAAE,CAAC,KAAK,CAAC,wBAAwB,GAAG,KAAK,CAAC;SAC3C,CAAC;QAEM,4BAAuB,GAAG,CAChC,EAAmB,EACnB,eAA+B;YAE/B,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,GAAG,CAAC,EAAE;gBACpE,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;gBAC7D,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;aACvC;SACF,CAAC;QAEM,wBAAmB,GAAG,CAC5B,EAAmB,EACnB,eAA+B;YAE/B,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,KAAK,CAAC,EAAE;gBACtE,eAAe,CAAC,KAAK,CAAC,WAAW,CAC/B,IAAI,CAAC,2BAA2B,EAChC,QAAQ,CACT,CAAC;aACH;SACF,CAAC;QAEM,2BAAsB,GAAG;YAC/B,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,iBAAiB;gBAAE,OAAO;YAE/B,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAC5C,kCAAkC,CACnC,CAAC,OAAO,CAAC;YAEV,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC;gBAC5D,OAAO;aACR;YAED,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC;SAC/D,CAAC;QAEM,kBAAa,GAAG,CACtB,iBAAiC,EACjC,oBAA6B;YAE7B,MAAM,aAAa,GAAG,iBAAiB,CAAC,YAAY,CAAC;YACrD,IAAI,aAAa,IAAI,CAAC;gBAAE,OAAO;YAE/B,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACjC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;YAEF,IAAI,oBAAoB,EAAE;gBACxB,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;gBAC/D,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBACxC,OAAO;aACR;YAED,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC;YAEtD,IAAI,CAAC,qBAAqB,CAAC,iBAAiB,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;YAE3E,iBAAiB,CAAC,gBAAgB,CAChC,eAAe,EACf,CAAC,CAAkB;gBACjB,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC;aACpD,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;SACH,CAAC;QAEM,oBAAe,GAAG,CACxB,iBAAiC,EACjC,oBAA6B;YAE7B,MAAM,aAAa,GAAG,iBAAiB,CAAC,YAAY,CAAC;YAErD,IAAI,aAAa,IAAI,CAAC;gBAAE,OAAO;;YAG/B,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC;YAEtD,IAAI,oBAAoB,EAAE;gBACxB,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;gBACrC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC;gBAClE,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACjC,IAAI,CAAC,2BAA2B,EAChC,QAAQ,CACT,CAAC;gBACF,OAAO;aACR;YAED,qBAAqB,CAAC;gBACpB,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;aACtC,CAAC,CAAC;YAEH,IAAI,CAAC,qBAAqB,CAAC,iBAAiB,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;YAC1E,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC;YAClE,iBAAiB,CAAC,gBAAgB,CAChC,eAAe,EACf,CAAC,CAAC;gBACA,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC;aAChD,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;SACH,CAAC;KAqEH;IA7QC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;;IAkCD,mBAAmB;QACjB,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;;;;IAMD,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,mBAAmB,0CAAE,KAAK,EAAE,CAAC;KACnC;IAED,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,oBAAoB;QAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACjD,IAAI,iBAAiB,EAAE;YACrB,iBAAiB,CAAC,mBAAmB,CACnC,eAAe,EACf,CAAC,CAAC,KAAK,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,iBAAiB,CAAC,EACzD,IAAI,CACL,CAAC;YACF,iBAAiB,CAAC,mBAAmB,CACnC,eAAe,EACf,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,iBAAiB,CAAC,EACrD,IAAI,CACL,CAAC;SACH;KACF;IAED,gBAAgB;;QAEd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC3C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC7C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;SACrE;KACF;IA4HD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACjD,QACE,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,EAAE;gBACL,CAAC,uBAAuB,GAAG,CAAC,CAAC,QAAQ;gBACrC,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,mBACc,QAAQ,GAAG,MAAM,GAAG,OAAO,IAE1C,+DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,EAC5C,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,SAAS,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,KAAK,EAAE;gBACL,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;gBACjB,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,qBAAqB,GAAG,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ;aACjD,mBACc,GAAG,QAAQ,EAAE,mBACd,uBAAuB,EACrC,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACD,sEAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,gBAAgB,IAC3D,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAC7B,YAAM,IAAI,EAAC,SAAS,GAAG,KAEvB,IAAI,CAAC,OAAO,CACb,CACa,EAChB,6DACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,0BAA0B,GAAG,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ;aACtD,iBACW,MAAM,EAClB,SAAS,EAAE,WAAW,GACtB,CACK,EACT,4DACE,KAAK,EAAE;gBACL,CAAC,kBAAkB,GAAG,IAAI;aAC3B,qBACgB,GAAG,IAAI,CAAC,WAAW,SAAS,EAC7C,IAAI,EAAC,QAAQ,iBACA,GAAG,CAAC,QAAQ,EAAE,EAC3B,EAAE,EAAC,uBAAuB,EAC1B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,IAE1C,4DAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,OAAO,IACX,qBAAe,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,CAAiB,KAE5D,eAAQ,CACT,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n border-bottom: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:host .expand-chevron {\n color: var(--ic-accordion-chevron);\n}\n\n:host(.ic-accordion-disabled) .expand-chevron {\n color: var(--ic-accordion-chevron-disabled);\n}\n\n.section-button.small {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n border-top: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:focus {\n outline: none;\n}\n\n.section-button {\n background-color: transparent;\n display: flex;\n align-items: center;\n width: 100%;\n padding: var(--ic-space-xs);\n font-weight: var(--ic-font-weight-bold);\n border: none;\n}\n\n.section-header {\n --ic-typography-color: var(--ic-accordion-heading-text);\n\n color: var(--ic-accordion-heading-text);\n text-align: left;\n flex: 1 0;\n}\n\n:host(.ic-accordion-disabled) .section-header {\n --ic-typography-color: var(--ic-accordion-heading-text-disabled);\n\n color: var(--ic-accordion-heading-text-disabled);\n}\n\nbutton:hover {\n background-color: var(--ic-accordion-background-hover);\n cursor: pointer;\n}\n\nbutton:active {\n background-color: var(--ic-accordion-background-pressed);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n pointer-events: none;\n}\n\n.icon-container {\n margin: 0 var(--ic-space-xs) 0 0;\n display: flex;\n align-items: center;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n color: var(--ic-accordion-icon);\n}\n\n:host(.ic-accordion-disabled) .icon-container {\n color: var(--ic-accordion-icon-disabled);\n}\n\n::slotted(svg) {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n.expand-chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n transform: rotate(90deg);\n justify-self: end;\n}\n\n.content-expanded-chevron {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n --ic-typography-color: var(--ic-accordion-body-text);\n\n color: var(--ic-accordion-body-text);\n height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n overflow: visible;\n}\n\n@media (forced-colors: active) {\n button:focus {\n border: var(--ic-border-hc) !important;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n button:focus {\n transition: none;\n }\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\nconst EXPANDED_CONTENT_OPENED_CLASS = \"expanded-content-opened\";\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl?: HTMLDivElement;\n private accordionBtnHeading?: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n @Element() el: HTMLIcAccordionElement;\n\n /**\n * If `true`, the accordion will be disabled.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the accordion appears expanded.\n */\n @Prop({ mutable: true }) expanded?: boolean = false;\n\n /**\n * The section header outlining section content.\n */\n @Prop() heading?: string = \"\";\n\n /**\n * The main body message of the accordion.\n */\n @Prop() message?: string = \"\";\n\n /**\n * The size of the accordion.\n */\n @Prop() size?: IcSizes = \"medium\";\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 * @internal Emitted when accordion is clicked.\n */\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /**\n * Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.accordionBtnHeading?.focus();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n disconnectedCallback(): void {\n const expandedContentEl = this.expandedContentEl;\n if (expandedContentEl) {\n expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, expandedContentEl),\n true\n );\n expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded && this.expandedContentEl) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n this.expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionTimingFunction = delay;\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n const expandedContentEl = this.expandedContentEl;\n if (!expandedContentEl) return;\n\n const prefersReducedMotion = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\"\n ).matches;\n\n if (this.expanded) {\n this.expandContent(expandedContentEl, prefersReducedMotion);\n return;\n }\n\n this.collapseContent(expandedContentEl, prefersReducedMotion);\n };\n\n private expandContent = (\n expandedContentEl: HTMLDivElement,\n prefersReducedMotion: boolean\n ) => {\n const elementHeight = expandedContentEl.scrollHeight;\n if (elementHeight <= 0) return;\n\n expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n\n if (prefersReducedMotion) {\n expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n expandedContentEl.style.height = \"auto\";\n return;\n }\n\n expandedContentEl.style.height = `${elementHeight}px`;\n\n this.setAccordionAnimation(expandedContentEl, \"300\", \"height\", \"ease-out\");\n\n expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, expandedContentEl);\n },\n { once: true }\n );\n };\n\n private collapseContent = (\n expandedContentEl: HTMLDivElement,\n prefersReducedMotion: boolean\n ) => {\n const elementHeight = expandedContentEl.scrollHeight;\n\n if (elementHeight <= 0) return;\n\n // Set the content panel as pixels from \"auto\" so it can be animated\n expandedContentEl.style.height = `${elementHeight}px`;\n\n if (prefersReducedMotion) {\n expandedContentEl.style.height = \"0\";\n expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);\n expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n return;\n }\n\n requestAnimationFrame(() => {\n expandedContentEl.style.height = \"0\";\n });\n\n this.setAccordionAnimation(expandedContentEl, \"300\", \"height\", \"ease-in\");\n expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);\n expandedContentEl.addEventListener(\n \"transitionend\",\n (e) => {\n this.hideExpandedContent(e, expandedContentEl);\n },\n { once: true }\n );\n };\n\n render() {\n const { size, disabled, expanded, theme } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [\"ic-accordion-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: !!expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: !!expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|