npm - @zanichelli/albe-web-components - Versions diffs - 19.2.3-RC1 → 19.2.3 - Mend

@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1550) hide show

package/dist/collection/components/z-combobox/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAY,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AACvG,OAAO,EAAC,YAAY,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAQzD,MAAM,OAAO,SAAS;IA4FpB,UAAU;QACR,IAAI,CAAC,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACtF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;QAC5E,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAMO,kBAAkB;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAC,CAAC,CAAC;IACtE,CAAC;IAED;QAxBQ,cAAS,GAAgB,EAAE,CAAC;QAE5B,cAAS,GAAc,SAAS,CAAC,IAAI,CAAC;uBApFpC,SAAS,QAAQ,EAAE,EAAE;;;wBAYV,KAAK;yBAIJ,KAAK;;;;8BAgBD,kBAAkB;sBAInC,KAAK;uBAIJ,KAAK;2BAIS,KAAK;4BAIL,iBAAiB;8BAIf,mBAAmB;iCAIzB,CAAC;;oBAQA,WAAW,CAAC,GAAG;;;;+BAaL,EAAE;6BAGjB,EAAE;QA2BhB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IAC9E,CAAC;IAEO,oBAAoB;QAC1B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,WAAW,CAAC,OAAO;gBACtB,OAAO,QAAQ,CAAC,KAAK,CAAC;YACxB,KAAK,WAAW,CAAC,KAAK;gBACpB,OAAO,QAAQ,CAAC,MAAM,CAAC;YACzB;gBACE,OAAO,QAAQ,CAAC,KAAK,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,MAAc;QAChC,OAAO,GAAG,IAAI,CAAC,OAAO,WAAW,MAAM,EAAE,CAAC;IAC5C,CAAC;IAEO,mBAAmB;QACzB,OAAO,GAAG,IAAI,CAAC,OAAO,YAAY,CAAC;IACrC,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IACxD,CAAC;IAEO,uBAAuB;QAC7B,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACtF,CAAC;IAEO,mBAAmB,CAAC,CAAgB;QAC1C,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACzD,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QAED,QAAQ,CAAC,CAAC,IAAoB,EAAE,CAAC;YAC/B,KAAK,YAAY,CAAC,KAAK,CAAC;YACxB,KAAK,YAAY,CAAC,KAAK;gBACrB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACvC,CAAC;gBACD,MAAM;YACR,KAAK,YAAY,CAAC,GAAG;gBACnB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBACvB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;gBAC1B,CAAC;gBACD,MAAM;YACR,KAAK,YAAY,CAAC,UAAU,CAAC;YAC7B,KAAK,YAAY,CAAC,QAAQ;gBACxB,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;gBAC/B,MAAM;QACV,CAAC;IACH,CAAC;IAEO,kBAAkB,CAAC,CAAgB;QACzC,QAAQ,CAAC,CAAC,IAAoB,EAAE,CAAC;YAC/B,KAAK,YAAY,CAAC,KAAK,CAAC;YACxB,KAAK,YAAY,CAAC,KAAK;gBACrB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;oBACrC,MAAM;gBACR,CAAC;gBACD,MAAM;YACR,KAAK,YAAY,CAAC,UAAU,CAAC;YAC7B,KAAK,YAAY,CAAC,QAAQ;gBACxB,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;gBAC/B,MAAM;YACR,KAAK,YAAY,CAAC,GAAG;gBACnB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBACvB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;oBACxB,MAAM;gBACR,CAAC;gBACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACxB,MAAM;YACR,KAAK,YAAY,CAAC,GAAG;gBACnB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;gBACxB,MAAM;QACV,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,QAAgB;QAClC,IAAI,QAAQ,KAAK,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC;YAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,EAAE,CAAC,iCACpD,IAAI,KACP,OAAO,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,IACnC,CAAC,CAAC;YAEJ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAClD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAY,EAAE,EAAE;gBACnD,IAAI,QAAQ,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;oBACxC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;gBACzB,CAAC;gBAED,OAAO,CAAC,CAAC;YACX,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,sBAAsB,CAAC,CAAgB;QAC7C,IAAI,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACvG,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC7G,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAExF,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAClE,MAAM,cAAc,GAAG,CAAC,CAAC;QACzB,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QAEzC,IAAI,QAAQ,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,EAAE,CAAC;YACvC,QAAQ;gBACN,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC;QAC5G,CAAC;aAAM,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,EAAE,CAAC;YAC5C,QAAQ;gBACN,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,cAAc,CAAC,CAAC;QAC5G,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,EAAE,CAAC;QACjC,QAAQ,CAAC,cAAc,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,CAAC,CAAC;IACpE,CAAC;IAEO,qBAAqB;QAC3B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAEO,oBAAoB;QAC1B,MAAM,eAAe,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAe,EAAE,EAAE;YACzC,eAAe,CAAC,IAAI,mBAAK,IAAI,EAAE,CAAC;QAClC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;IACzC,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;YACnE,MAAM,GAAG,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;YACjC,MAAM,OAAO,GACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;gBAC7B,UAAU;gBACV,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC;gBAC/B,WAAW;gBACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAE7C,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YAEpB,OAAO,KAAK,IAAI,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;IAEO,yBAAyB,CAAC,QAAiB;QACjD,MAAM,IAAI,GAAG,UAAU,CAAC;QACxB,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;QACrC,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,oBAAoB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;QACnE,MAAM,YAAY,GAAG,GAAG,IAAI,CAAC,OAAO,OAAO,CAAC;QAE5C,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;gBACL,MAAM,EAAE,IAAI;gBACZ,YAAY,EAAE,SAAS;gBACvB,oBAAoB,EAAE,YAAY;gBAClC,4BAA4B,EAAE,oBAAoB;gBAClD,oBAAoB,EAAE,YAAY;aACnC,CAAC;QACJ,CAAC;QAED,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,SAAS;YACvB,eAAe,EAAE,YAAY;YAC7B,uBAAuB,EAAE,oBAAoB;YAC7C,eAAe,EAAE,YAAY;SAC9B,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,MAAM,sBAAsB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE5F,OAAO,CACL,yBACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,EACpC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAC5D,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACG,iBAAiB,mBAChB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzC,sBAAsB;YAE1B,YACE,KAAK,EAAC,QAAQ,gBAEZ,IAAI,CAAC,KAAK;oBACR,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC5F,CAAC,CAAC,SAAS;gBAGd,IAAI,CAAC,KAAK;gBACX,gBAAO,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,eAAe,GAAG,CAAQ,CAClE;YACP,cACE,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACE,CACP,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,OAAO,CACL,WACE,EAAE,EAAC,iBAAiB,EACpB,KAAK,EAAC,iBAAiB;YAEtB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC3C,WACE,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,KAAK,0BACD,MAAM,EAC3B,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,OAAO,eACf,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAE3I,IAAI,CAAC,WAAW,EAAE,CACf,CACF,CACP,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,WACE,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,QAAQ,EACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,cAAc,IAElB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAClC,CACP,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,IAAe,EAAE,KAAa,EAAE,MAAc;QAC/D,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC3C,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAEnE,OAAO,CACL,sBACE,YAAY,EAAE,CAAC,CAAC,EAChB,WAAW,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,EAClF,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACjC,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,CAAC,CAAC,UAAU;YAEtB,YACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;oBACxB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;gBAC7B,CAAC;gBAED,cACE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACpD,KAAK,EAAE,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GACvD;gBACF,YACE,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,mBAC7B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAClC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;oBAE5D,2BACc,MAAM,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,GACpB,CACG,CACF,CACQ,CAClB,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,KAAkB;QACnC,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACtC,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CACL,UAAI,IAAI,EAAC,cAAc;YACpB,IAAI,CAAC,cAAc,EAAE;YACrB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gBACrB,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAChD,CAAC,CAAC,CACC,CACN,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;;YAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,iBAAiB,CAAC;YACpD,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAE7D,KAAK,CAAC,QAAQ,CAAC,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,mCAAI,EAAE,CAAC;YACxC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAEhC,OAAO,KAAK,CAAC;QACf,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAqD,CAAC,CAAC,GAAG,CAC1F,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE;YACtB,OAAO,CACL,oBACE,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,kBACnB,eAAe,CAAC,OAAO,qBACpB,GAAG,IAAI,CAAC,OAAO,eAAe,KAAK,EAAE;gBAEtD,YACE,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,cAAc,EACnB,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,eAAe,KAAK,EAAE,iBAC7B,MAAM,IAEjB,GAAG,CACC;gBACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CACb,CAChB,CAAC;QACJ,CAAC,CACF,CAAC;QAEF,OAAO,CACL,UAAI,IAAI,EAAC,cAAc;YACpB,IAAI,CAAC,cAAc,EAAE;YACrB,UAAU,CACR,CACN,CAAC;IACJ,CAAC;IAEO,qBAAqB;QAC3B,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;YACrB,gBAAO,IAAI,CAAC,cAAc,CAAQ,CAC9B,CACP,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,CACL,6BACE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,OAAO,EAAE,KAAK,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,4BACQ,MAAM,IACzB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IACxC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAC3D,aAAa,EAAE,CAAC,CAAc,EAAE,EAAE;gBAChC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;gBAClC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;YAC1B,CAAC,IACD,CACH,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YAC1C,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC7C,MAAM,UAAU,GACd,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAE/G,OAAO,CACL,sBACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,cAAc,EACnB,YAAY,EAAE,CAAC,CAAC,EAChB,WAAW,EAAE,eAAe,CAAC,OAAO,EACpC,YAAY,EAAC,SAAS,EACtB,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACjC,QAAQ,EAAE,CAAC,CAAC,UAAU;YAEtB,YACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;gBAEzC,cACE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EAClD,KAAK,EAAE,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GACvD;gBACF,YACE,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,mBAC7B,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAE3C,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAChD,CACF,CACQ,CAClB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,2EACe,SAAS,IAAI,CAAC,OAAO,EAAE,EACpC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EACxE,EAAE,EAAE,IAAI,CAAC,OAAO;YAEf,IAAI,CAAC,YAAY,EAAE;YACnB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE,CACnC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {getPlainText, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id */\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /** list items array */\n @Prop()\n items: ComboItem[] | string;\n\n /** label text */\n @Prop()\n label: string;\n\n /** the combobox is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** show search input flag (optional) */\n @Prop()\n hassearch?: boolean = false;\n\n /** search input label text (optional) */\n @Prop()\n searchlabel?: string;\n\n /** search input placeholder text (optional) */\n @Prop()\n searchplaceholder?: string;\n\n /** search input title text (optional) */\n @Prop()\n searchtitle?: string;\n\n /** no result text message */\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /** toggle combo list opening flag */\n @Prop({mutable: true})\n isopen = false;\n\n /** fixed style flag */\n @Prop()\n isfixed = false;\n\n /** show \"check all\" checkbox (optional) */\n @Prop()\n hascheckall?: boolean = false;\n\n /** check all label (optional) */\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /** uncheck all label (optional) */\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /** max number of checkable items (0 = unlimited) */\n @Prop()\n maxcheckableitems = 0;\n\n /** group items by category */\n @Prop()\n hasgroupitems?: boolean;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /** the combobox aria-label */\n @Prop()\n htmlAriaLabel?: string;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId = \"\";\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n /** Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private getOptionId(itemId: string): string {\n return `${this.inputid}-option-${itemId}`;\n }\n\n private getCheckAllOptionId(): string {\n return `${this.inputid}-check-all`;\n }\n\n private allOptionsSelected(): boolean {\n return this.selectedCounter === this.itemsList.length;\n }\n\n private hasReachedMaxSelections(): boolean {\n return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);\n }\n\n private handleHeaderKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {\n this.toggleComboBox();\n }\n\n if (!this.isopen || this.hassearch) {\n return;\n }\n\n switch (e.code as KeyboardCode) {\n case KeyboardCode.SPACE:\n case KeyboardCode.ENTER:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n }\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n }\n }\n\n private handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.code as KeyboardCode) {\n case KeyboardCode.ENTER:\n case KeyboardCode.SPACE:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n break;\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n break;\n }\n this.closeFilterItems();\n break;\n case KeyboardCode.TAB:\n this.focusedItemId = \"\";\n break;\n }\n }\n\n private checkOption(optionId: string): void {\n if (optionId === this.getCheckAllOptionId()) {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: !this.allOptionsSelected(),\n }));\n\n this.focusedItemId = this.getCheckAllOptionId();\n } else {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (optionId === this.getOptionId(i.id)) {\n i.checked = !i.checked;\n }\n\n return i;\n });\n }\n\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code as KeyboardCode) || !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;\n const options = Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'));\n\n if (!options.length) {\n return;\n }\n\n const currElemIndex = currElem ? options.indexOf(currElem) : null;\n const firstElemIndex = 0;\n const lastElemIndex = options.length - 1;\n\n let nextElem = null;\n if (e.code === KeyboardCode.ARROW_DOWN) {\n nextElem =\n currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] || options[lastElemIndex];\n } else if (e.code === KeyboardCode.ARROW_UP) {\n nextElem =\n currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];\n }\n\n this.focusedItemId = nextElem.id;\n nextElem.scrollIntoView({block: \"nearest\", container: \"nearest\"});\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n const role = \"combobox\";\n const ariaLabel = this.htmlAriaLabel;\n const ariaExpanded = this.isopen ? \"true\" : \"false\";\n const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n const ariaControls = `${this.inputid}_list`;\n\n if (isZInput) {\n return {\n \"role\": role,\n \"aria-label\": ariaLabel,\n \"html-aria-expanded\": ariaExpanded,\n \"html-aria-activedescendant\": ariaActivedescendant,\n \"html-aria-controls\": ariaControls,\n };\n }\n\n return {\n \"role\": role,\n \"aria-label\": ariaLabel,\n \"aria-expanded\": ariaExpanded,\n \"aria-activedescendant\": ariaActivedescendant,\n \"aria-controls\": ariaControls,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};\n\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(e: KeyboardEvent) => this.handleHeaderKeyDown(e)}\n role=\"button\"\n tabindex={0}\n aria-controls=\"open-combo-data\"\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n {...comboboxA11yAttributes}\n >\n <span\n class=\"body-3\"\n aria-label={\n this.label\n ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`\n : undefined\n }\n >\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </span>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"open-combo-data\"\n class=\"open-combo-data\"\n >\n {this.hassearch && this.renderSearchInput()}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable=\"true\"\n id={`${this.inputid}_list`}\n aria-owns={`${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item.id)).join(\" \")}`}\n >\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div\n class={this.searchValue && \"search\"}\n tabIndex={-1}\n role=\"presentation\"\n >\n {this.renderList(this.renderItemsList)}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n const optionId = this.getOptionId(item.id);\n const isDisabled = !item.checked && this.hasReachedMaxSelections();\n\n return (\n <z-list-element\n htmlTabindex={-1}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n role=\"presentation\"\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => {\n this.focusedItemId = \"\";\n this.checkOption(optionId);\n }}\n >\n <z-icon\n name={item.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={item.checked ? \"true\" : \"false\"}\n aria-label={isDisabled ? undefined : getPlainText(item.name)}\n >\n <span\n aria-hidden=\"true\"\n innerHTML={item.name}\n />\n </span>\n </span>\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const category = item.category || \"Altra categoria\";\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(\n ([key, value], index) => {\n return (\n <z-list-group\n size={this.getControlToListSize()}\n divider-type={ListDividerType.ELEMENT}\n aria-labelledby={`${this.inputid}_list_group_${index}`}\n >\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n id={`${this.inputid}_list_group_${index}`}\n aria-hidden=\"true\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n }\n );\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {listGroups}\n </ul>\n );\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <span>{this.noresultslabel}</span>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n html-aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes(true)}\n onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n this.focusedItemId = \"\";\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (!this.hascheckall || this.searchValue) {\n return;\n }\n\n const optionId = this.getCheckAllOptionId();\n const allChecked = this.allOptionsSelected();\n const isDisabled =\n this.hasReachedMaxSelections() || (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);\n\n return (\n <z-list-element\n class=\"check-all-wrapper\"\n role=\"presentation\"\n htmlTabindex={-1}\n dividerType={ListDividerType.ELEMENT}\n dividerColor=\"gray800\"\n size={this.getControlToListSize()}\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => this.checkOption(optionId)}\n >\n <z-icon\n name={allChecked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={allChecked ? \"true\" : \"false\"}\n >\n {allChecked ? this.uncheckalltext : this.checkalltext}\n </span>\n </span>\n </z-list-element>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/z-combobox/index.stories.js CHANGED Viewed

@@ -75,3 +75,4 @@ export const Disabled = {
         disabled: true,
     },
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-combobox/index.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAY,WAAW,EAAC,MAAM,aAAa,CAAC;AACnD,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YAC1E,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;SACpD;QACvB,YAAY,EAAE,YAAY;QAC1B,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,gBAAgB;QACvB,iBAAiB,EAAE,CAAC;QACpB,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,cAAc;QAC3B,iBAAiB,EAAE,oBAAoB;QACvC,WAAW,EAAE,cAAc;QAC3B,cAAc,EAAE,aAAa;QAC7B,IAAI,EAAE,WAAW,CAAC,GAAG;QACrB,aAAa,EAAE,EAAE;KAClB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;qBACa,IAAI,CAAC,YAAY;iBACrB,IAAI,CAAC,QAAQ;oBACV,IAAI,CAAC,WAAW;kBAClB,IAAI,CAAC,SAAS;gBAChB,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,OAAO;eACb,IAAI,CAAC,MAAM;eACX,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,KAAK;0BACE,IAAI,CAAC,iBAAiB;sBAC1B,IAAI,CAAC,aAAa;uBACjB,IAAI,CAAC,cAAc;oBACtB,IAAI,CAAC,WAAW;0BACV,IAAI,CAAC,iBAAiB;oBAC5B,IAAI,CAAC,WAAW;uBACb,IAAI,CAAC,cAAc;aAC7B,IAAI,CAAC,IAAI;wBACE,IAAI,CAAC,aAAa;OACnC;CACoB,CAAC;AAE5B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE;QACJ,aAAa,EAAE,IAAI;KACpB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZCombobox} from \".\";\nimport {ComboItem, ControlSize} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZCombobox\",\n component: \"z-combobox\",\n argTypes: {\n items: {\n control: {\n type: \"object\",\n },\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n },\n args: {\n items: [\n {id: \"ite_m_1\", name: \"First item\", checked: false, category: \"Gruppo 1\"},\n {id: \"ite_m_2\", name: \"Second item\", checked: false, category: \"Gruppo 1\"},\n {id: \"it_em_3\", name: \"Other item\", checked: false, category: \"Gruppo 2\"},\n {id: \"it_e_m_5\", name: \"Last item\", checked: false, category: \"Gruppo 3\"},\n ] satisfies ComboItem[],\n checkalltext: \"Select all\",\n disabled: false,\n hascheckall: true,\n hassearch: true,\n inputid: \"combo_1\",\n isfixed: true,\n isopen: true,\n label: \"Combobox Label\",\n maxcheckableitems: 4,\n hasgroupitems: false,\n noresultslabel: \"No items\",\n searchlabel: \"Search Label\",\n searchplaceholder: \"Search Placeholder\",\n searchtitle: \"Search Title\",\n uncheckalltext: \"Uncheck All\",\n size: ControlSize.BIG,\n htmlAriaLabel: \"\",\n },\n render: (args) =>\n html`<z-combobox\n checkalltext=${args.checkalltext}\n disabled=${args.disabled}\n hascheckall=${args.hascheckall}\n hassearch=${args.hassearch}\n inputid=${args.inputid}\n isfixed=${args.isfixed}\n isopen=${args.isopen}\n .items=${args.items}\n label=${args.label}\n maxcheckableitems=${args.maxcheckableitems}\n hasgroupitems=${args.hasgroupitems}\n noresultslabel=${args.noresultslabel}\n searchlabel=${args.searchlabel}\n searchplaceholder=${args.searchplaceholder}\n searchtitle=${args.searchtitle}\n uncheckalltext=${args.uncheckalltext}\n size=${args.size}\n html-aria-label=${args.htmlAriaLabel}\n />`,\n} satisfies Meta<ZCombobox>;\n\nexport default StoryMeta;\ntype Story = StoryObj<ZCombobox>;\nexport const Default = {};\n\nexport const Groups = {\n args: {\n hasgroupitems: true,\n },\n} satisfies Story;\n\nexport const Disabled = {\n args: {\n disabled: true,\n },\n} satisfies Story;\n"]}

package/dist/collection/components/z-cover-hero/index.js CHANGED Viewed

@@ -13,20 +13,8 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  */
 export class ZCoverHero {
     constructor() {
-        /**
-         * Cover hero variant. Can be `OVERLAY` or `STACKED`.
-         */
         this.variant = CoverHeroVariant.OVERLAY;
-        /**
-         * Vertical content position (for `STACKED` variant).
-         */
         this.contentPosition = CoverHeroContentPosition.TOP;
-        /**
-         * Whether to keep the image aspect ratio.
-         * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;
-         * instead, the height of the component follows the content's one.
-         * Note: it may be necessary to set a min and/or max height to the component.
-         */
         this.preserveAspectRatio = true;
     }
     /**
@@ -47,9 +35,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '0e8ec76a2293bbf7044d2a5d0ec951ac096adcd1' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '1eb5d39f26e19f213d435c185167eb83500225f3' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'e2dd8963eb05d5a1a602b05d6275d52c01b8dbc9', class: "main-container" }, h("div", { key: '3b537c3b07906fd72795b105e4189252bf876b51', class: "cover-container" }, h("slot", { key: 'f99228a940cfc96ae4ff98a6b79df622d033e00d', name: "cover" })), h("slot", { key: '86b43980717df411f76b098628d83fa80c8dcff6', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '61c495773839b7741f674719325fe98a65956986', class: "main-container" }, h("div", { key: '0ea2f83f40f60017fb2e7a4501cb67c34d954f6c', class: "cover-container" }, h("slot", { key: '68a40d93440b22ce2afb9ff8db3cb9ca90ec7263', name: "cover" })), h("slot", { key: 'c29feaf859382807e0e55bcf2db27a98387c2e96', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }
@@ -77,8 +65,7 @@ export class ZCoverHero {
                         "CoverHeroVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CoverHeroVariant",
-                            "referenceLocation": "CoverHeroVariant"
+                            "id": "src/beans/index.tsx::CoverHeroVariant"
                         }
                     }
                 },
@@ -88,10 +75,8 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Cover hero variant. Can be `OVERLAY` or `STACKED`."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "variant",
+                "reflect": true,
                 "defaultValue": "CoverHeroVariant.OVERLAY"
             },
             "contentPosition": {
@@ -104,8 +89,7 @@ export class ZCoverHero {
                         "CoverHeroContentPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CoverHeroContentPosition",
-                            "referenceLocation": "CoverHeroContentPosition"
+                            "id": "src/beans/index.tsx::CoverHeroContentPosition"
                         }
                     }
                 },
@@ -115,10 +99,8 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Vertical content position (for `STACKED` variant)."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "content-position",
+                "reflect": true,
                 "defaultValue": "CoverHeroContentPosition.TOP"
             },
             "preserveAspectRatio": {
@@ -135,10 +117,8 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Whether to keep the image aspect ratio.\nIf set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\ninstead, the height of the component follows the content's one.\nNote: it may be necessary to set a min and/or max height to the component."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "preserve-aspect-ratio",
+                "reflect": true,
                 "defaultValue": "true"
             }
         };
@@ -154,3 +134,4 @@ export class ZCoverHero {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-cover-hero/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-cover-hero/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,wBAAwB,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEvE;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,UAAU;;uBAOO,gBAAgB,CAAC,OAAO;+BAMR,wBAAwB,CAAC,GAAG;mCASlD,IAAI;;IAE1B;;;;OAIG;IAEO,SAAS,CAAC,EAAC,MAAM,EAAQ;QACjC,IAAI,MAAM,YAAY,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;YAC9D,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC;YACzD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;YAC5B,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO;gBACxC,IAAI,CAAC,eAAe,KAAK,wBAAwB,CAAC,GAAG;gBACrD,IAAI,CAAC,aAAa,EAAE;YACtB,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,6DAAM,IAAI,EAAC,aAAa,GAAQ;gBAC/B,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAC9D;YACL,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO;gBACxC,IAAI,CAAC,eAAe,KAAK,wBAAwB,CAAC,MAAM;gBACxD,IAAI,CAAC,aAAa,EAAE,CACjB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Listen, Prop, h} from \"@stencil/core\";\nimport {CoverHeroContentPosition, CoverHeroVariant} from \"../../beans\";\n\n/**\n * Cover hero component.\n * Component to display a hero image with content.\n *\n * @slot cover - slot for the cover image.\n * @slot content - slot for the content.\n * @slot info-reveal - slot for the info reveal.\n * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.\n * @cssprop --cover-hero-text-color - color of the text.\n * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.\n */\n@Component({\n tag: \"z-cover-hero\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCoverHero {\n @Element() host: HTMLZCoverHeroElement;\n\n /**\n * Cover hero variant. Can be `OVERLAY` or `STACKED`.\n */\n @Prop({reflect: true})\n variant: CoverHeroVariant = CoverHeroVariant.OVERLAY;\n\n /**\n * Vertical content position (for `STACKED` variant).\n */\n @Prop({reflect: true})\n contentPosition: CoverHeroContentPosition = CoverHeroContentPosition.TOP;\n\n /**\n * Whether to keep the image aspect ratio.\n * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\n * instead, the height of the component follows the content's one.\n * Note: it may be necessary to set a min and/or max height to the component.\n */\n @Prop({reflect: true})\n preserveAspectRatio = true;\n\n /**\n * Store the intrinsic aspect ratio of the slotted image when loaded,\n * to have a default when `--cover-hero-aspect-ratio` is not set.\n * @param target The event target\n */\n @Listen(\"load\", {capture: true})\n protected onImgLoad({target}: Event): void {\n if (target instanceof Image && target.closest(\"[slot=cover]\")) {\n const ratio = target.naturalWidth / target.naturalHeight;\n this.host.style.setProperty(\"--image-aspect-ratio\", ratio.toString());\n }\n }\n\n /**\n * Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content-container\">\n <slot name=\"content\"></slot>\n </div>\n );\n }\n\n render(): HTMLZCoverHeroElement {\n return (\n <Host>\n {this.variant === CoverHeroVariant.STACKED &&\n this.contentPosition === CoverHeroContentPosition.TOP &&\n this.renderContent()}\n <div class=\"main-container\">\n <div class=\"cover-container\">\n <slot name=\"cover\"></slot>\n </div>\n <slot name=\"info-reveal\"></slot>\n {this.variant === CoverHeroVariant.OVERLAY && this.renderContent()}\n </div>\n {this.variant === CoverHeroVariant.STACKED &&\n this.contentPosition === CoverHeroContentPosition.BOTTOM &&\n this.renderContent()}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-cover-hero/index.stories.js CHANGED Viewed

@@ -253,3 +253,4 @@ export const StackedVariant = {
     </div>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-cover-hero/index.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-cover-hero/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZCoverHero} from \".\";\nimport {CoverHeroContentPosition, CoverHeroVariant} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-info-reveal/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCoverHeroStoriesArgs = ZCoverHero &\n CSSVarsArguments<\"cover-hero-text-color\" | \"cover-hero-overlay\" | \"cover-hero-aspect-ratio\">;\n\nconst StoryMeta = {\n title: \"ZCoverHero\",\n component: \"z-cover-hero\",\n argTypes: {\n \"variant\": {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CoverHeroVariant),\n },\n \"contentPosition\": {\n if: {\n arg: \"variant\",\n eq: CoverHeroVariant.STACKED,\n },\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CoverHeroContentPosition),\n },\n \"--cover-hero-text-color\": getColorTokenArgConfig(),\n \"--cover-hero-overlay\": {\n if: {\n arg: \"variant\",\n eq: CoverHeroVariant.OVERLAY,\n },\n },\n \"--cover-hero-aspect-ratio\": {\n if: {\n arg: \"preserveAspectRatio\",\n },\n control: {\n type: \"text\",\n },\n },\n },\n args: {\n \"variant\": CoverHeroVariant.OVERLAY,\n \"contentPosition\": CoverHeroContentPosition.TOP,\n \"preserveAspectRatio\": true,\n \"--cover-hero-aspect-ratio\": undefined,\n \"--cover-hero-overlay\": \"linear-gradient(270deg, #0000 0%, #000000e6 100%)\",\n \"--cover-hero-text-color\": \"var(--color-text-inverse)\",\n },\n} satisfies Meta<ZCoverHeroStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCoverHeroStoriesArgs>;\n\nexport const Default = {\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n .contentPosition=${args.contentPosition}\n .variant=${args.variant}\n .preserveAspectRatio=${args.preserveAspectRatio}\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n <z-info-reveal\n slot=\"info-reveal\"\n position=\"bottom_right\"\n >\n <span>Lorem ipsum dolor sit amet.</span>\n </z-info-reveal>\n </z-cover-hero>\n </div>\n `,\n} satisfies Story;\n\nexport const CustomAspectRatio = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"preserveAspectRatio\"],\n },\n },\n args: {\n \"--cover-hero-aspect-ratio\": \"16/8\",\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n <z-info-reveal\n slot=\"info-reveal\"\n position=\"bottom_right\"\n >\n <span>Lorem ipsum dolor sit amet.</span>\n </z-info-reveal>\n </z-cover-hero>\n </div>\n `,\n};\n\nexport const AutoAspectRatio = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"preserveAspectRatio\"],\n },\n },\n args: {\n \"--cover-hero-aspect-ratio\": \"\",\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container z-cover-hero-auto-ratio\">\n <z-cover-hero\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/4934920/pexels-photo-4934920.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n </z-cover-hero>\n </div>\n `,\n};\n\nexport const WithoutPreservingAspectRatio = {\n argTypes: {\n \"variant\": {table: {disable: true}},\n \"preserveAspectRatio\": {table: {disable: true}},\n \"--cover-hero-aspect-ratio\": {table: {disable: true}},\n },\n args: {\n textContent:\n \"Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\",\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n .preserveAspectRatio=${false}\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>${args.textContent}</div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n </z-cover-hero>\n </div>\n `,\n};\n\nexport const StackedVariant = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"preserveAspectRatio\", \"--cover-hero-aspect-ratio\", \"--cover-hero-text-color\"],\n },\n },\n args: {\n variant: CoverHeroVariant.STACKED,\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n .contentPosition=${args.contentPosition}\n .preserveAspectRatio=${args.preserveAspectRatio}\n .variant=${args.variant}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n <z-info-reveal\n slot=\"info-reveal\"\n position=\"bottom_right\"\n >\n <span>Lorem ipsum dolor sit amet.</span>\n </z-info-reveal>\n </z-cover-hero>\n </div>\n `,\n};\n"]}

package/dist/collection/components/z-divider/index.js CHANGED Viewed

@@ -2,15 +2,12 @@ import { Host, h } from "@stencil/core";
 import { DividerOrientation, DividerSize } from "../../beans";
 export class ZDivider {
     constructor() {
-        /** [optional] Divider size */
         this.size = DividerSize.SMALL;
-        /** [optional] Divider color */
         this.color = "gray200";
-        /** [optional] Divider orintation */
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '2be45be46ca78f9c49d78bb39d88a49a3e226074', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '84826110c0a563d1b6f2654c540df49cdd0dfc7c', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }
@@ -36,8 +33,7 @@ export class ZDivider {
                         "DividerSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::DividerSize",
-                            "referenceLocation": "DividerSize"
+                            "id": "src/beans/index.tsx::DividerSize"
                         }
                     }
                 },
@@ -47,10 +43,8 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider size"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "size",
+                "reflect": false,
                 "defaultValue": "DividerSize.SMALL"
             },
             "color": {
@@ -67,10 +61,8 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider color"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "color",
+                "reflect": false,
                 "defaultValue": "\"gray200\""
             },
             "orientation": {
@@ -83,8 +75,7 @@ export class ZDivider {
                         "DividerOrientation": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::DividerOrientation",
-                            "referenceLocation": "DividerOrientation"
+                            "id": "src/beans/index.tsx::DividerOrientation"
                         }
                     }
                 },
@@ -94,12 +85,11 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider orintation"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "orientation",
+                "reflect": false,
                 "defaultValue": "DividerOrientation.HORIZONTAL"
             }
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-divider/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAO5D,MAAM,OAAO,QAAQ;;oBAGE,WAAW,CAAC,KAAK;qBAIrB,SAAS;2BAIS,kBAAkB,CAAC,UAAU;;IAEhE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,WAAW,EAAE,EACzD,KAAK,EAAE,EAAC,eAAe,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG,EAAC,GAChD,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\n@Component({\n tag: \"z-divider\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZDivider {\n /** [optional] Divider size */\n @Prop()\n size?: DividerSize = DividerSize.SMALL;\n\n /** [optional] Divider color */\n @Prop()\n color?: string = \"gray200\";\n\n /** [optional] Divider orintation */\n @Prop()\n orientation?: DividerOrientation = DividerOrientation.HORIZONTAL;\n\n render(): HTMLZDividerElement {\n return (\n <Host\n class={`divider-${this.size} divider-${this.orientation}`}\n style={{backgroundColor: `var(--${this.color})`}}\n />\n );\n }\n}\n"]}

package/dist/collection/components/z-divider/index.stories.js CHANGED Viewed

@@ -42,3 +42,4 @@ export const Default = {
     </div>`,
     name: "ZDivider",
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-divider/index.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-divider/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC;SAC3C;QACD,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;SAClE;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,WAAW,CAAC,KAAK;QACvB,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,kBAAkB,CAAC,UAAU;KAC3C;CACuB,CAAC;AAC3B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;gBAEQ,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,KAAK;uBACJ,IAAI,CAAC,WAAW;;WAE5B;IACT,IAAI,EAAE,UAAU;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZDivider} from \".\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZDivider\",\n component: \"z-divider\",\n argTypes: {\n size: {\n control: {\n type: \"select\",\n },\n options: Object.values(DividerSize),\n },\n orientation: {\n control: {\n type: \"select\",\n },\n options: Object.values(DividerOrientation),\n },\n color: {\n control: {\n type: \"select\",\n },\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n },\n },\n args: {\n size: DividerSize.SMALL,\n color: \"gray200\",\n orientation: DividerOrientation.HORIZONTAL,\n },\n} satisfies Meta<ZDivider>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<div style=\"height: 300px; padding: 24px\">\n <z-divider\n size=\"${args.size}\"\n color=\"${args.color}\"\n orientation=\"${args.orientation}\"\n ></z-divider>\n </div>`,\n name: \"ZDivider\",\n} satisfies StoryObj<ZDivider>;\n"]}

package/dist/collection/components/z-ghost-loading/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: 'a966fb0e58408172c56e7bb48deb1b5c0e5e0bb8' });
+        return h(Host, { key: '597d6715119bb24d4a8427f9cb3ebd3b5a20f5fc' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -16,3 +16,4 @@ export class ZGhostLoading {
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-ghost-loading/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-ghost-loading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAMjD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host} from \"@stencil/core\";\n@Component({\n tag: \"z-ghost-loading\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZGhostLoading {\n render(): HTMLZGhostLoadingElement {\n return <Host />;\n }\n}\n"]}

package/dist/collection/components/z-ghost-loading/index.stories.js CHANGED Viewed

@@ -19,3 +19,4 @@ export const ZGhostLoading = {
         <div style="width:30%; height:50px;"><z-ghost-loading></z-ghost-loading></div>
       </div>`,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-ghost-loading/index.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-ghost-loading/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;aAYK;CACZ,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index\";\n\nexport default {\n title: \"ZGhostLoading\",\n component: \"z-ghost-loading\",\n};\n\nexport const ZGhostLoading = {\n render: () =>\n html`<div style=\"height:24px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:50%; height:24px\"><z-ghost-loading></z-ghost-loading></div>\n <br /><br />\n <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:50%; height:12px\"><z-ghost-loading></z-ghost-loading></div>\n <br /><br />\n <div style=\"display:flex\">\n <div style=\"width:30%; height:50px; padding-right:20px\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:30%; height:50px; padding-right:20px\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:30%; height:50px;\"><z-ghost-loading></z-ghost-loading></div>\n </div>`,\n};\n"]}

package/dist/collection/components/z-icon/index.js CHANGED Viewed

@@ -5,6 +5,14 @@ import { COLOR_INDICATOR_ICONS, ICONS } from "../../constants/iconset";
  * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.
  */
 export class ZIcon {
+    constructor() {
+        this.name = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.iconid = undefined;
+        this.fill = undefined;
+        this.indicatorColor = undefined;
+    }
     /**
      * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.
      * @param iconValue The SVG path data or polygon points from the ICONS set.
@@ -19,7 +27,7 @@ export class ZIcon {
         return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS[this.name])));
     }
     render() {
-        return (h(Host, { key: '65da13cefdf22f1935d9e1dbc171522955b24f1b', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: '8e6cee155a15fc1b19f9907a6f6155c8d607bfa4', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -49,10 +57,8 @@ export class ZIcon {
                     "tags": [],
                     "text": "Icon name"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
+                "attribute": "name",
+                "reflect": false
             },
             "height": {
                 "type": "any",
@@ -68,10 +74,8 @@ export class ZIcon {
                     "tags": [],
                     "text": "Icon height (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "height"
+                "attribute": "height",
+                "reflect": false
             },
             "width": {
                 "type": "any",
@@ -87,10 +91,8 @@ export class ZIcon {
                     "tags": [],
                     "text": "Icon width (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width"
+                "attribute": "width",
+                "reflect": false
             },
             "iconid": {
                 "type": "string",
@@ -106,10 +108,8 @@ export class ZIcon {
                     "tags": [],
                     "text": "HTML `id` attribute (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "iconid"
+                "attribute": "iconid",
+                "reflect": false
             },
             "fill": {
                 "type": "string",
@@ -125,10 +125,8 @@ export class ZIcon {
                     "tags": [],
                     "text": "Name of the CSS color token to use for the icon fill color (e.g. `blue500`)."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "fill"
+                "attribute": "fill",
+                "reflect": false
             },
             "indicatorColor": {
                 "type": "string",
@@ -144,11 +142,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "Color to use to fill the icon's color indicator, if it has one.\nCan be any valid value for the `fill` svg attribute.\nIf the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "indicator-color"
+                "attribute": "indicator-color",
+                "reflect": false
             }
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-icon/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,qBAAqB,EAAE,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAErE;;;GAGG;AAMH,MAAM,OAAO,KAAK;;;;;;;;;IA6BhB;;;OAGG;IACK,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,SAAS,GAAS,CAAC;QACrC,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,SAAS,GAAY,CAAC;IAChD,CAAC;IAEO,cAAc;QACpB,OAAO,CACL,WACE,EAAE,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,EACnD,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM,IACrB,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAC3C,WAAK,KAAK,EAAC,cAAc;YACvB,WACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,cAAc,IAAI,WAAW,EACxC,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAC5C;YAEL,IAAI,CAAC,cAAc,EAAE,CAClB,CACP,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,cAAc,EAAE,CACtB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\n\n/**\n * Component to render an SVG icon from the internal icon set, selected by `name`.\n * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.\n */\n@Component({\n tag: \"z-icon\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZIcon {\n /** Icon name */\n @Prop()\n name: string;\n\n /** Icon height (optional) */\n @Prop()\n height?: number | string;\n\n /** Icon width (optional) */\n @Prop()\n width?: number | string;\n\n /** HTML `id` attribute (optional) */\n @Prop()\n iconid?: string;\n\n /** Name of the CSS color token to use for the icon fill color (e.g. `blue500`). */\n @Prop()\n fill?: string;\n\n /**\n * Color to use to fill the icon's color indicator, if it has one.\n * Can be any valid value for the `fill` svg attribute.\n * If the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect.\n */\n @Prop()\n indicatorColor?: string;\n\n /**\n * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.\n * @param iconValue The SVG path data or polygon points from the ICONS set.\n */\n private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n if (iconValue?.startsWith(\"M\")) {\n return <path d={iconValue}></path>;\n }\n\n return <polygon points={iconValue}></polygon>;\n }\n\n private renderBaseIcon(): SVGElement {\n return (\n <svg\n id={this.iconid || undefined}\n fill={this.fill ? `var(--${this.fill})` : undefined}\n viewBox=\"0 0 1000 1000\"\n width={this.width}\n height={this.height}\n >\n {this.selectPathOrPolygon(ICONS[this.name])}\n </svg>\n );\n }\n\n render(): HTMLZIconElement {\n return (\n <Host aria-hidden=\"true\">\n {COLOR_INDICATOR_ICONS.includes(this.name) ? (\n <div class=\"icon-wrapper\">\n <svg\n class=\"color-indicator\"\n fill={this.indicatorColor || \"#FFFFFF00\"}\n viewBox=\"0 0 1000 1000\"\n width={this.width}\n height={this.height}\n >\n {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n </svg>\n\n {this.renderBaseIcon()}\n </div>\n ) : (\n this.renderBaseIcon()\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-icon/index.stories.js CHANGED Viewed

@@ -68,3 +68,4 @@ export const ColorIndicator = {
       .indicatorColor=${args.indicatorColor}
     ></z-icon>`,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-icon/index.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACjE,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,iBAAiB;KACxB;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;cACZ,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;eACP;CACE,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,iBAAiB;KACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;cACZ,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;eACP;CACE,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,qBAAqB;YAC9B,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,EAAC,IAAI,EAAE,OAAO,EAAC;SACzB;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC;QAC9B,IAAI,EAAE,aAAa;QACnB,cAAc,EAAE,SAAS;QACzB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;cACZ,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;wBACE,IAAI,CAAC,cAAc;eAC5B;CACE,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZIcon} from \".\";\nimport {COLOR_INDICATOR_ICONS} from \"../../constants/iconset\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZIcon\",\n component: \"z-icon\",\n argTypes: {\n fill: {\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n control: {\n type: \"select\",\n },\n },\n },\n args: {\n name: \"download\",\n height: 24,\n width: 24,\n fill: \"color-primary01\",\n },\n} satisfies Meta<ZIcon>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZIcon>;\n\nexport const Default = {\n render: (args) =>\n html`<z-icon\n name=${args.name}\n height=${args.height}\n width=${args.width}\n fill=${args.fill}\n ></z-icon>`,\n} satisfies Story;\n\nexport const ZIconRem = {\n args: {\n name: \"download\",\n height: \"1.125rem\",\n width: \"1.125rem\",\n fill: \"color-primary01\",\n },\n render: (args) =>\n html`<z-icon\n name=${args.name}\n height=${args.height}\n width=${args.width}\n fill=${args.fill}\n ></z-icon>`,\n} satisfies Story;\n\nexport const ColorIndicator = {\n argTypes: {\n name: {\n options: COLOR_INDICATOR_ICONS,\n control: {type: \"select\"},\n },\n indicatorColor: {\n control: {type: \"color\"},\n },\n },\n args: {\n name: COLOR_INDICATOR_ICONS[0],\n fill: \"color-black\",\n indicatorColor: \"#ff0000\",\n width: 64,\n height: 64,\n },\n render: (args) =>\n html`<z-icon\n name=${args.name}\n height=${args.height}\n width=${args.width}\n fill=${args.fill}\n .indicatorColor=${args.indicatorColor}\n ></z-icon>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-info-box/index.js CHANGED Viewed

@@ -4,14 +4,14 @@ import { h } from "@stencil/core";
  */
 export class ZInfoBox {
     constructor() {
-        /** render close icon flag */
+        this.boxid = undefined;
         this.isclosable = true;
     }
     emitInfoBoxClose() {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: 'fd98793fba98d03112f68de408227ecc8576ff1d', id: this.boxid }, h("slot", { key: '2bee1952cbc660bb9ff8bdbd0945e01f9204e019', name: "content" }), this.isclosable && (h("z-icon", { key: 'ec6380fd48bb52fb1aabca5d22af5641be539cf4', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '18298328abf8d0e88340408882bdc529b55c1a28', id: this.boxid }, h("slot", { key: '297bb1bbd8e6adc082e3552ac2222983b1b11211', name: "content" }), this.isclosable && (h("z-icon", { key: 'fa3fa5831984754d4c8533d23437a4773bf926a6', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }
@@ -41,10 +41,8 @@ export class ZInfoBox {
                     "tags": [],
                     "text": "info box unique id"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "boxid"
+                "attribute": "boxid",
+                "reflect": false
             },
             "isclosable": {
                 "type": "boolean",
@@ -60,10 +58,8 @@ export class ZInfoBox {
                     "tags": [],
                     "text": "render close icon flag"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "isclosable",
+                "reflect": false,
                 "defaultValue": "true"
             }
         };
@@ -87,3 +83,4 @@ export class ZInfoBox {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-info-box/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-info-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEtE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;0BAON,IAAI;;IAMT,gBAAgB;QACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,EAAE,EAAE,IAAI,CAAC,KAAK;YACjB,6DAAM,IAAI,EAAC,SAAS,GAAG;YACtB,IAAI,CAAC,UAAU,IAAI,CAClB,+DACE,IAAI,EAAC,UAAU,iBACH,cAAc,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GACtC,CACH,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot content - set the info box content\n */\n@Component({\n tag: \"z-info-box\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoBox {\n /** info box unique id */\n @Prop()\n boxid: string;\n\n /** render close icon flag */\n @Prop()\n isclosable = true;\n\n /** emitted on close icon click */\n @Event()\n infoBoxClose: EventEmitter;\n\n private emitInfoBoxClose(): void {\n this.infoBoxClose.emit({boxid: this.boxid});\n }\n\n render(): HTMLDivElement {\n return (\n <div id={this.boxid}>\n <slot name=\"content\" />\n {this.isclosable && (\n <z-icon\n name=\"multiply\"\n data-action=\"infoBoxClose\"\n onClick={() => this.emitInfoBoxClose()}\n />\n )}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/z-info-box/index.stories.js CHANGED Viewed

@@ -17,3 +17,4 @@ export const Default = {
       >
     </z-info-box>`,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-info-box/index.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-info-box/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;CACuB,CAAC;AAC3B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA,2BAA2B,IAAI,CAAC,UAAU;;;;;;kBAMhC;CACjB,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZInfoBox} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZInfoBox\",\n component: \"z-info-box\",\n args: {\n isclosable: true,\n },\n} satisfies Meta<ZInfoBox>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<z-info-box isclosable=\"${args.isclosable}\">\n <span slot=\"content\"\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum convallis ex, eu faucibus velit\n dignissim in. Quisque at risus accumsan, auctor enim a, varius tortor. Donec egestas sodales mi at imperdiet.\n Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span\n >\n </z-info-box>`,\n};\n"]}