@ukic/web-components 2.29.1 → 3.0.0-alpha.2

package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-checkbox-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEjE,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,yBAAyB,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,8IAA8I;SACrJ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,+BAA+B,CAAC,CAAC;IACrE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,yBAAyB,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,SAAS,CAAC;YAChD,IAAI,EAAE;;;;2BAIe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,4BAA4B,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,SAAS,CAAC;YAChD,IAAI,EAAE;;;;2BAIe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,yCAAyC,CAC1C,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,SAAS,CAAC;YAChD,IAAI,EAAE;;;;2BAIe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,wCAAwC,CAAC,CAAC;IAC9E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC1F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,SAAS,CAAC;YAChD,IAAI,EAAE;;;;2BAIe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,oDAAoD,CACrD,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kHAAkH,EAAE,KAAK,IAAI,EAAE;QAChI,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;;2BAGe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAE7D,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC9B,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0FAA0F,EAAE,KAAK,IAAI,EAAE;QACxG,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;;2BAGe;SACtB,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAC3C,4BAA4B,CACJ,CAAC;QAC3B,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE/C,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAC3C,kCAAkC,CACV,CAAC;QAC3B,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,qEAAqE;SAC5E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,qEAAqE;SAC5E,CAAC,CAAC;QAEH,6EAA6E;QAC7E,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACrC,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAE3B,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAE/C,IAAI,CAAC,IAAI;aACN,aAAa,CAAC,aAAa,CAAC;aAC5B,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC;aACjC,KAAK,EAAE,CAAC;QAEX,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8EAA8E,EAAE,KAAK,IAAI,EAAE;QAC5F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,mFAAmF;SAC1F,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1D,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE3D,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1D,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE3D,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC/B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6EAA6E,EAAE,KAAK,IAAI,EAAE;QAC3F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,0GAA0G;SACjH,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1D,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE3D,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE3D,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC/B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1D,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;cAGE;SACT,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEtC,MAAM,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC;QAC1C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,4BAA4B;QAC5B,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC;YACrC,IAAI,EAAE;;yBAEa;SACpB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QAC9B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { CheckboxGroup } from \"../../ic-checkbox-group\";\nimport { Checkbox } from \"../../../ic-checkbox/ic-checkbox\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\ndescribe(\"ic-checkbox-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render as required\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" required>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-required\");\n  });\n\n  it(\"should render as helper text\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" helper-text=\"helper test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n  });\n\n  it(\"should test checkbox option as submit on form\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<form id=\"new-form\"></form><ic-checkbox id=\"ic-checkbox\" label=\"IC Checkbox Test\" value=\"test-value\" form=\"new-form\" selected></ic-checkbox>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-checked\");\n  });\n\n  it(\"should render indeterminate\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked indeterminate label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-indeterminate\");\n  });\n\n  it(\"should render an aria label when group label hidden\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-hidden-label\");\n  });\n\n  it(\"should render an aria label when checkbox label hidden\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\" hide-label></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-hidden-checkbox-label\");\n  });\n\n  it(\"should render in a disabled state\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" disabled label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-disabled\");\n  });\n\n  it(\"should render with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-validation\");\n  });\n\n  it(\"should render with hidden dynamic additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" additional-field-display=\"dynamic\" label=\"test label\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-dynamic-field\");\n  });\n\n  it(\"should render with dynamic additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"dynamic\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-dynamic-field-when-checked\"\n    );\n  });\n\n  it(\"should render with disabled static additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-disabled-additional-field\");\n  });\n\n  it(\"should remove disabled attribute from static additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-disabled-attribute-removed-from-field\"\n    );\n  });\n\n  it(\"should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"small\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const checkboxes = page.root.querySelectorAll(\"ic-checkbox\");\n\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox.classList.contains(\"small\")).toBe(true);\n    });\n  });\n\n  it(\"should prioritise the size on an individual checkbox over the size on the checkbox group\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"large\">\n        <ic-checkbox value=\"test\" label=\"test label\" id=\"large-checkbox\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\" size=\"small\" id=\"small-checkbox\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    const smallCheckbox = page.root.querySelector(\n      \"ic-checkbox#small-checkbox\"\n    ) as HTMLIcCheckboxElement;\n    expect(smallCheckbox[\"size\"]).toMatch(\"small\");\n\n    const largeCheckbox = page.root.querySelector(\n      \"ic-checkbox:not(#small-checkbox)\"\n    ) as HTMLIcCheckboxElement;\n    expect(largeCheckbox.classList.contains(\"large\")).toBe(true);\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should change checked state\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.rootInstance.handleClick();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n  });\n\n  it(\"should call 'setFocus' when checkbox is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should emit icCheck on click\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    const eventSpy = jest.fn();\n\n    page.win.addEventListener(\"icCheck\", eventSpy);\n\n    page.root\n      .querySelector(\"ic-checkbox\")\n      .shadowRoot.querySelector(\"input\")\n      .click();\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test indeterminate with 'nativeIndeterminateBehaviour' set to 'false'\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked indeterminate></ic-checkbox>`,\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.indeterminate = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.indeterminate = true;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n  });\n\n  it(\"should test indeterminate with 'nativeIndeterminateBehaviour' set to 'true'\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" indeterminate native-indeterminate-behaviour></ic-checkbox>`,\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.indeterminate = false;\n    await page.waitForChanges();\n\n    page.root.indeterminate = true;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n  });\n\n  it(\"should test form reset event\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<form>\n          <ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>    \n          <button id=\"resetButton\" type=\"reset\">Reset</button>  \n      </form>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.root.checked = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n\n    await page.rootInstance.handleFormReset();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should test labelNameHandler\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox, CheckboxGroup],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n      <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n    </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.root.label = \"new label\";\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}
+{"version":3,"file":"ic-checkbox-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { CheckboxGroup } from \"../../ic-checkbox-group\";\nimport { Checkbox } from \"../../../ic-checkbox/ic-checkbox\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\ndescribe(\"ic-checkbox-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render as required\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" required>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-required\");\n  });\n\n  it(\"should render as helper text\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" helper-text=\"helper test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n  });\n\n  it(\"should test checkbox option as submit on form\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<form id=\"new-form\"></form><ic-checkbox id=\"ic-checkbox\" label=\"IC Checkbox Test\" value=\"test-value\" form=\"new-form\" selected></ic-checkbox>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-checked\");\n  });\n\n  it(\"should render indeterminate\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked indeterminate label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-indeterminate\");\n  });\n\n  it(\"should render an aria label when group label hidden\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-hidden-label\");\n  });\n\n  it(\"should render an aria label when checkbox label hidden\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\" hide-label></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-hidden-checkbox-label\");\n  });\n\n  it(\"should render in a disabled state\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" disabled label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-disabled\");\n  });\n\n  it(\"should render with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-validation\");\n  });\n\n  it(\"should render with hidden dynamic additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" additional-field-display=\"dynamic\" label=\"test label\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-dynamic-field\");\n  });\n\n  it(\"should render with dynamic additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"dynamic\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-dynamic-field-when-checked\"\n    );\n  });\n\n  it(\"should render with disabled static additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-disabled-additional-field\");\n  });\n\n  it(\"should remove disabled attribute from static additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-disabled-attribute-removed-from-field\"\n    );\n  });\n\n  it(\"should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"small\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const checkboxes = page.root.querySelectorAll(\"ic-checkbox\");\n\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox.classList.contains(\"ic-checkbox-small\")).toBe(true);\n    });\n  });\n\n  it(\"should prioritise the size on an individual checkbox over the size on the checkbox group\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"large\">\n        <ic-checkbox value=\"test\" label=\"test label\" id=\"large-checkbox\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\" size=\"small\" id=\"small-checkbox\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    const smallCheckbox = page.root.querySelector(\n      \"ic-checkbox#small-checkbox\"\n    ) as HTMLIcCheckboxElement;\n    expect(smallCheckbox[\"size\"]).toMatch(\"small\");\n\n    const largeCheckbox = page.root.querySelector(\n      \"ic-checkbox:not(#small-checkbox)\"\n    ) as HTMLIcCheckboxElement;\n    expect(largeCheckbox.classList.contains(\"ic-checkbox-large\")).toBe(true);\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should change checked state\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.rootInstance.handleClick();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n  });\n\n  it(\"should call 'setFocus' when checkbox is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should emit icCheck on click\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    const eventSpy = jest.fn();\n\n    page.win.addEventListener(\"icCheck\", eventSpy);\n\n    page.root\n      .querySelector(\"ic-checkbox\")\n      .shadowRoot.querySelector(\"input\")\n      .click();\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test indeterminate with 'nativeIndeterminateBehaviour' set to 'false'\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked indeterminate></ic-checkbox>`,\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.indeterminate = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.indeterminate = true;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n  });\n\n  it(\"should test indeterminate with 'nativeIndeterminateBehaviour' set to 'true'\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" indeterminate native-indeterminate-behaviour></ic-checkbox>`,\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.indeterminate = false;\n    await page.waitForChanges();\n\n    page.root.indeterminate = true;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n  });\n\n  it(\"should test form reset event\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<form>\n          <ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>    \n          <button id=\"resetButton\" type=\"reset\">Reset</button>  \n      </form>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.root.checked = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n\n    await page.rootInstance.handleFormReset();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should test labelNameHandler\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox, CheckboxGroup],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n      <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n    </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.root.label = \"new label\";\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/components/ic-chip/ic-chip.css

@@ -444,17 +444,30 @@ video {
 :host {
   display: inline-block;
   max-width: 100%;
+  vertical-align: middle;
 }
 
 .chip {
+  --chip-bg-color: transparent;
+  --chip-hover-bg: var(--ic-chip-action-hover);
+  --chip-pressed-bg: var(--ic-chip-action-pressed);
+
   display: flex;
   padding: var(--ic-space-xxs);
   font-size: 0.875rem;
   border-radius: var(--ic-space-md);
   text-align: left;
   text-decoration: none;
-  transition: var(--ic-easing-transition-fast);
   position: relative;
+  background-color: var(--chip-bg-color);
+  border: var(--ic-border-width) solid transparent;
+  justify-content: space-between;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .chip {
+    transition: var(--ic-easing-transition-fast);
+  }
 }
 
 .chip.small {
@@ -471,71 +484,79 @@ video {
   padding: 0 var(--ic-space-xs);
 }
 
-.chip.hovered:not(:focus-within) {
-  background-color: var(--ic-architectural-300);
-}
-
 .chip:focus-within {
   box-shadow: var(--ic-border-focus);
   outline: var(--ic-hc-focus-outline);
   z-index: 1;
 }
 
-.chip.outline.hovered:not(:focus-within),
-.chip.outlined.hovered:not(:focus-within) {
-  background-color: var(--ic-action-dark-bg-hover);
-}
-
 ic-tooltip:focus-within {
   z-index: 1;
 }
 
 .filled {
-  background-color: var(--chip-custom-color, var(--ic-architectural-200));
-  color: var(--chip-custom-foreground-color, black);
-  border: none;
+  --chip-bg-color: var(
+    --chip-custom-color,
+    var(--ic-chip-background-filled-default)
+  );
+  --ic-typography-color: var(
+    --chip-custom-foreground-color,
+    var(--ic-chip-label)
+  );
+
+  color: var(--chip-custom-foreground-color, var(--ic-chip-label));
 }
 
 .filled.disabled {
-  background-color: var(--ic-architectural-100);
+  --chip-bg-color: var(--ic-chip-background-filled-inactive);
 }
 
-.outline,
-.outlined {
-  color: var(--ic-architectural-900);
-  border: var(--ic-border-width) solid
-    var(--chip-custom-color, var(--ic-architectural-900));
-  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));
+:host(.ic-chip-dark-text) {
+  --chip-custom-foreground-color: var(--ic-architectural-black);
+}
+
+:host(.ic-chip-light-text) {
+  --chip-custom-foreground-color: var(--ic-architectural-white);
+}
+
+:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within) {
+  --chip-hover-bg: var(--ic-action-dark-bg-hover);
 }
 
-.outline.small,
-.outlined.small {
-  padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));
+:host(.ic-chip-dark-text) .chip.filled:focus-within {
+  --chip-pressed-bg: var(--ic-action-dark-bg-pressed);
 }
 
-.outline.large,
-.outlined.large {
-  padding: calc(var(--ic-space-xs) - var(--ic-space-1px));
+:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within) {
+  --chip-hover-bg: var(--ic-action-light-bg-hover);
+}
+
+:host(.ic-chip-light-text) .chip.filled:focus-within {
+  --chip-pressed-bg: var(--ic-action-light-bg-pressed);
+}
+
+.outlined {
+  color: var(--ic-chip-label);
+  border-color: var(--chip-custom-color, var(--ic-chip-outline));
+  padding: calc(var(--ic-space-xxs));
+
+  --ic-typography-color: var(--ic-chip-label);
 }
 
-.outline.disabled,
 .outlined.disabled {
   border: var(--ic-border-disabled);
-  background: none;
+  border-color: var(--ic-chip-outline-inactive);
 }
 
 .chip.disabled ic-typography {
-  color: var(--ic-architectural-500);
-}
-
-.filled.disabled ic-typography {
-  color: var(--ic-architectural-600);
+  --ic-typography-color: var(--ic-chip-label-inactive);
 }
 
 .dismiss-icon {
   border: none;
   border-radius: 50%;
   padding: 0;
+  color: currentcolor;
   background: none;
   cursor: pointer;
   margin: var(--ic-space-xxxs);
@@ -549,7 +570,7 @@ ic-tooltip:focus-within {
 
 .dismiss-icon[disabled] {
   pointer-events: none;
-  color: var(--ic-architectural-200);
+  color: var(--ic-chip-icon-inactive);
 }
 
 .icon {
@@ -565,32 +586,24 @@ ic-tooltip {
 
 .chip.disabled path,
 .chip.disabled ::slotted(svg) {
-  fill: var(--ic-architectural-200);
+  fill: var(--ic-chip-icon-inactive);
 }
 
-.chip.white-background {
-  background-color: var(--ic-architectural-white);
+.outlined.non-transparent {
+  background-color: var(--ic-chip-outline-background);
 }
 
-.chip.white-background.hovered:not(:focus-within) {
-  background-color: var(--ic-action-dark-bg-hover-no-alpha) !important;
+:host .chip.hovered:not(:focus-within) {
+  background-image: linear-gradient(var(--chip-hover-bg) 0 0);
+}
+
+:host .chip:focus-within {
+  background-image: linear-gradient(var(--chip-pressed-bg) 0 0);
 }
 
 @media (forced-colors: active) {
   .chip {
-    border: var(--ic-hc-border);
-  }
-
-  .filled.small {
-    padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));
-  }
-
-  .filled {
-    padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));
-  }
-
-  .filled.large {
-    padding: calc(var(--ic-space-xs) - var(--ic-space-1px));
+    border: var(--ic-border-hc);
   }
 
   .chip.disabled {
@@ -601,7 +614,7 @@ ic-tooltip {
   }
 
   .chip.disabled ic-typography {
-    color: GrayText;
+    --ic-typography-color: GrayText;
   }
 
   .chip.disabled path,

package/dist/collection/components/ic-chip/ic-chip.js

@@ -1,4 +1,4 @@
-import { h, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { onComponentRequiredPropUndefined, isSlotUsed, removeDisabledFalse, convertToRGBA, isElInAGGrid, } from "../../utils/helpers";
 import dismissIcon from "../../assets/dismiss-icon.svg";
 /**
@@ -9,7 +9,6 @@ export class Chip {
     constructor() {
         this.inAGGrid = false;
         this.dismissAction = () => {
-            this.dismiss.emit();
             this.icDismiss.emit();
         };
         this.mouseEnterHandler = () => {
@@ -22,34 +21,34 @@ export class Chip {
             const colorRGBA = convertToRGBA(this.customColor);
             if (colorRGBA) {
                 const { r, g, b, a } = colorRGBA;
-                const foregroundColour = (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? "black" : "white";
-                this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`);
+                this.customColorClass =
+                    (r * 299 + g * 587 + b * 114) / 1000 > 133.3505
+                        ? "ic-chip-dark-text"
+                        : "ic-chip-light-text";
+                this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`);
+            }
+            else {
+                this.customColorClass = "";
             }
         };
+        this.customColorClass = "";
         this.hovered = false;
         this.visible = true;
-        this.appearance = undefined;
         this.customColor = null;
         this.disabled = false;
         this.dismissible = false;
         this.label = undefined;
-        this.size = "default";
+        this.size = "medium";
+        this.theme = "inherit";
         this.transparentBackground = true;
         this.variant = "filled";
     }
     customColorHandler() {
-        if (!this.dismissible) {
-            this.setChipColour();
-        }
+        this.setChipColour();
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
-        if (!this.dismissible) {
-            this.setChipColour();
-        }
-        if (this.appearance === "outline") {
-            this.variant = "outlined";
-        }
+        this.customColorHandler();
     }
     componentWillRender() {
         if (isElInAGGrid(this.el)) {
@@ -70,17 +69,19 @@ export class Chip {
         (_a = this.el.shadowRoot.querySelector("button")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { label, appearance, variant, size, dismissible, visible, disabled, hovered, } = this;
-        return (visible && (h("div", { class: {
+        const { label, variant, size, dismissible, visible, disabled, hovered, theme, customColorClass, } = this;
+        return (h(Host, { class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`${customColorClass}`]: variant === "filled" && customColorClass !== "",
+            } }, visible && (h("div", { class: {
                 chip: true,
-                [`${appearance}`]: appearance !== undefined,
                 [`${variant}`]: true,
                 [`${size}`]: true,
                 disabled,
                 dismissible,
                 hovered,
-                "white-background": this.variant === "outlined" && !this.transparentBackground,
-            } }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("ic-typography", { variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, h("span", null, label)), dismissible && (h("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }))));
+                "non-transparent": this.variant === "outlined" && !this.transparentBackground,
+            } }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("ic-typography", { variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, h("span", null, label)), dismissible && (h("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" })))));
     }
     static get is() { return "ic-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -97,32 +98,6 @@ export class Chip {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcChipAppearance",
-                    "resolved": "\"filled\" | \"outline\"",
-                    "references": {
-                        "IcChipAppearance": {
-                            "location": "import",
-                            "path": "./ic-chip.types",
-                            "id": "src/components/ic-chip/ic-chip.types.ts::IcChipAppearance"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Use variant prop instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "appearance",
-                "reflect": false
-            },
             "customColor": {
                 "type": "string",
                 "mutable": false,
@@ -141,7 +116,7 @@ export class Chip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+                    "text": "The custom chip colour. This will override the theme colour.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
                 },
                 "attribute": "custom-color",
                 "reflect": false,
@@ -205,7 +180,7 @@ export class Chip {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -222,7 +197,25 @@ export class Chip {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"dark\" | \"light\" | \"inherit\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\nSetting the \"customColor\" prop will override this."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             },
             "transparentBackground": {
                 "type": "boolean",
@@ -236,7 +229,7 @@ export class Chip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the outlined variant of chip will have a transparent background rather than white."
+                    "text": "If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color."
                 },
                 "attribute": "transparent-background",
                 "reflect": false,
@@ -270,30 +263,13 @@ export class Chip {
     }
     static get states() {
         return {
+            "customColorClass": {},
             "hovered": {},
             "visible": {}
         };
     }
     static get events() {
         return [{
-                "method": "dismiss",
-                "name": "dismiss",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This event should not be used anymore. Use icDismiss instead."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
                 "method": "icDismiss",
                 "name": "icDismiss",
                 "bubbles": true,

package/dist/collection/components/ic-chip/ic-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n  convertToRGBA,\n  isElInAGGrid,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcColor, IcEmphasisType, IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  private inAGGrid: boolean = false;\n\n  @Element() el: HTMLIcChipElement;\n\n  @State() hovered: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * @deprecated This prop should not be used anymore. Use variant prop instead.\n   */\n  @Prop() appearance?: IcChipAppearance;\n\n  /**\n   * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    if (!this.dismissible) {\n      this.setChipColour();\n    }\n  }\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * If `true`, the outlined variant of chip will have a transparent background rather than white.\n   */\n  @Prop() transparentBackground?: boolean = true;\n\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    if (!this.dismissible) {\n      this.setChipColour();\n    }\n\n    if (this.appearance === \"outline\") {\n      this.variant = \"outlined\";\n    }\n  }\n\n  componentWillRender(): void {\n    if (isElInAGGrid(this.el)) {\n      this.inAGGrid = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"button\")?.focus();\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.hovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.hovered = false;\n  };\n\n  private setChipColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      const foregroundColour =\n        (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? \"black\" : \"white\";\n      this.el.setAttribute(\n        \"style\",\n        `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`\n      );\n    }\n  };\n\n  render() {\n    const {\n      label,\n      appearance,\n      variant,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      hovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            chip: true,\n            [`${appearance}`]: appearance !== undefined,\n            [`${variant}`]: true,\n            [`${size}`]: true,\n            disabled,\n            dismissible,\n            hovered,\n            \"white-background\":\n              this.variant === \"outlined\" && !this.transparentBackground,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class={{ label: true, \"in-ag-grid\": this.inAGGrid }}\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ \"tooltip-disabled\": disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class=\"dismiss-icon\"\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </div>\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Watch,\n  Host,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n  convertToRGBA,\n  isElInAGGrid,\n} from \"../../utils/helpers\";\nimport { IcColor, IcEmphasisType, IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  private inAGGrid: boolean = false;\n\n  @Element() el: HTMLIcChipElement;\n\n  @State() customColorClass: string = \"\";\n  @State() hovered: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * The custom chip colour. This will override the theme colour.\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.setChipColour();\n  }\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n  /**\n   * Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n   * Setting the \"customColor\" prop will override this.\n   */\n  @Prop() theme?: \"dark\" | \"light\" | \"inherit\" = \"inherit\";\n\n  /**\n   * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n   */\n  @Prop() transparentBackground?: boolean = true;\n\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n    this.customColorHandler();\n  }\n\n  componentWillRender(): void {\n    if (isElInAGGrid(this.el)) {\n      this.inAGGrid = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"button\")?.focus();\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.hovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.hovered = false;\n  };\n\n  private setChipColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      this.customColorClass =\n        (r * 299 + g * 587 + b * 114) / 1000 > 133.3505\n          ? \"ic-chip-dark-text\"\n          : \"ic-chip-light-text\";\n      this.el.setAttribute(\n        \"style\",\n        `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`\n      );\n    } else {\n      this.customColorClass = \"\";\n    }\n  };\n\n  render() {\n    const {\n      label,\n      variant,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      hovered,\n      theme,\n      customColorClass,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`${customColorClass}`]:\n            variant === \"filled\" && customColorClass !== \"\",\n        }}\n      >\n        {visible && (\n          <div\n            class={{\n              chip: true,\n              [`${variant}`]: true,\n              [`${size}`]: true,\n              disabled,\n              dismissible,\n              hovered,\n              \"non-transparent\":\n                this.variant === \"outlined\" && !this.transparentBackground,\n            }}\n          >\n            {isSlotUsed(this.el, \"icon\") && (\n              <div class=\"icon\">\n                <slot name=\"icon\" />\n              </div>\n            )}\n            <ic-typography\n              variant=\"label\"\n              apply-vertical-margins={false}\n              class={{ label: true, \"in-ag-grid\": this.inAGGrid }}\n            >\n              <span>{label}</span>\n            </ic-typography>\n            {dismissible && (\n              <ic-tooltip\n                label=\"Dismiss\"\n                target=\"dismiss-icon\"\n                class={{ \"tooltip-disabled\": disabled }}\n              >\n                <button\n                  id=\"dismiss-icon\"\n                  class=\"dismiss-icon\"\n                  aria-label={`Dismiss ${label} chip`}\n                  disabled={disabled}\n                  tabindex={disabled ? -1 : 0}\n                  onClick={this.dismissAction}\n                  onMouseEnter={this.mouseEnterHandler}\n                  onMouseLeave={this.mouseLeaveHandler}\n                  innerHTML={dismissIcon}\n                ></button>\n              </ic-tooltip>\n            )}\n            {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js

@@ -79,6 +79,22 @@ describe("ic-chip component renders label", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
+    it("should render outlined variant", async () => {
+        const page = await newSpecPage({
+            components: [Chip],
+            html: `<ic-chip label="Label" variant="outlined">
+        </ic-chip>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render outlined variant with solid-background", async () => {
+        const page = await newSpecPage({
+            components: [Chip],
+            html: `<ic-chip label="Label" variant="outlined" transparent-background="false">
+        </ic-chip>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
     it("should apply 'hovered' style when cursor is on dismiss button", async () => {
         const page = await newSpecPage({
             components: [Chip],