@six-group/ui-library 0.0.0-insider.012ddb2

package/dist/collection/components/six-timepicker/six-timepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-timepicker.js","sourceRoot":"","sources":["../../../src/components/six-timepicker/six-timepicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,eAAe,GAIhB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,8BAA8B,EAAE,MAAM,+BAA+B,CAAC;AAEhH,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAkBtE,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,aAAa;;QAChB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAuRtC,uBAAkB,GAAG,CAAC,KAA8C,EAAE,QAAwB,EAAE,EAAE;YACxG,oGAAoG;YACpG,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;gBAC3B,OAAO;aACR;YAED,4BAA4B;YAC5B,6DAA6D;YAC7D,aAAa;YACb,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;YAEzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAElE,yBAAyB;YACzB,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;YAExB,oBAAoB;YACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,eAAe,EAAE,QAAQ;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU;gBACtB,aAAa,EAAE,UAAU;aAC1B,CAAC,CAAC;QACL,CAAC,CAAC;QAkIM,4BAAuB,GAAG,CAAC,KAAY,EAAE,EAAE;YACjD,qDAAqD;YACrD,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAmB,CAAC;YACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,OAAO;aACR;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,EAAE;gBACT,aAAa,EAAE,EAAE;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;sBAra2B,UAAU;yBAOnB,GAAG;qBAKU,EAAE;oBAGY,KAAK;sBAGlB,KAAK;wBAKpB,KAAK;wBAKL,KAAK;;oBAQqB,QAAQ;wBAGlC,KAAK;;yBAQe,EAAE;;qBAMzB,EAAE;uBAGiB,KAAK;oBAGR,EAAE;yBAGd,KAAK;4BAGgB,MAAM;qBAM/B,KAAK;uBAKH,qBAAqB;wBAKpB,8BAA8B;;wBAa9B,qBAAqB;gCAiBZ,KAAK;mCAEF,KAAK;0BAgCA,EAAE;;IA7BtC,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAGD,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED;;OAEG;IAEO,YAAY;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,2CAA2C;IAE3C,KAAK,CAAC,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAQD,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,uBAAuB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5E,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;SAC9E;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE,OAAO;QACtC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QAEvC,8BAA8B;QAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CACrB,IAAI,CAAC,IAAI,EACT,uBAAuB,EACvB,QAAQ,CAAC,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAE,KAAqB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CACvG,CAAC;QAEF,4DAA4D;QAC5D,IAAI,CAAC,cAAc,CAAC,GAAG,CACrB,YAAY,EACZ,iBAAiB,EACjB,QAAQ,CAAC,CAAC,KAAY,EAAE,EAAE;YACxB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,6CAA6C;YAC7C,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE;gBACvD,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;gBAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;oBAClB,KAAK,EAAE,EAAE;oBACT,aAAa,EAAE,EAAE;iBAClB,CAAC,CAAC;gBACH,OAAO;aACR;YAED,uDAAuD;YACvD,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACnE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,IAAI,CAAC,UAAU;gBACtB,aAAa,EAAE,gBAAgB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC;aAC9D,CAAC,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAClB,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,sBAAsB,CACpB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,OAAO,EACZ,gBAAgB,EAChB,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAC5C,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;IAClC,CAAC;IACO,WAAW;QACjB,kBAAkB;QAClB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE;YACjF,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;SACjB;QAED,qBAAqB;QACrB,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;gBAC5B,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;aACxD;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;aAClE;SACF;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SAC5D;IACH,CAAC;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,EAAE;YACrD,OAAO;SACR;QAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;QACpE,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACjE,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;QAE9E,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC;QACpE,IAAI,CAAC,gBAAgB,GAAG,cAAc,IAAI,MAAM,CAAC,WAAW,GAAG,iBAAiB,CAAC,MAAM,GAAG,cAAc,CAAC;IAC3G,CAAC;IAEO,oBAAoB;QAC1B,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;IAClG,CAAC;IA2BO,oBAAoB,CAAC,MAA+B;QAC1D,OAAO,CACL,uBACE,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,GAAG,EAAE,MAAM,CAAC,GAAG;YACf,6DAA6D;YAC7D,aAAa;YACb,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,EAC3C,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,cAAc,CAAC,MAAM,oBAC1B,MAAM,CAAC,aAAa,8BACV,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,GACvE,CACpB,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACzB,OAAO;SACR;QACD,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/E,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACzB,OAAO;SACR;QACD,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/E,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACzB,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC3B,OAAO,IAAI,CAAC,oBAAoB,CAAC;YAC/B,KAAK;YACL,IAAI,EAAE,cAAc,CAAC,MAAM;YAC3B,YAAY,EAAE,QAAQ;SACvB,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC;IACjF,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC;IACjF,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC;YAC/B,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,wBAAwB;YAC/B,aAAa,EAAE,CAAC;YAChB,YAAY,EAAE,cAAc;SAC7B,CAAC,CAAC;IACL,CAAC;IAEO,YAAY;QAClB,OAAO,CACL,WAAK,KAAK,EAAC,uBAAuB;YAChC,gBAAO,IAAI,CAAC,SAAS,CAAQ,CACzB,CACP,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,MAAM,eAAe,GAAG;YACtB,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,gBAAgB,EAAE;YACvB,IAAI,CAAC,qBAAqB,EAAE;SAC7B,CAAC;QAEF,MAAM,eAAe,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;QAEzE,OAAO,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE;YACrC,IAAI,GAAG,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE;gBACtC,OAAO,CAAC,EAAE,CAAC,CAAC;aACb;YAED,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;SAC9E;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAClF,CAAC;IAqBO,eAAe;QACrB,OAAO,CACL,IAAI,CAAC,SAAS,IAAI,CAChB,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,IAAI,CAAC,YAAY,KAAK,MAAM;gBACvD,wBAAwB,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO;aACxD,EACD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAC,IAAI;YAEb,gBAAU,IAAI,EAAC,OAAO,YAAiB,CAChC,CACV,CACF,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAC/C,YAAM,IAAI,EAAC,aAAa,GAAQ,CACjC,CAAC,CAAC,CAAC,CACF,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,kBAAwB,CACrF,CAAC;QAEF,OAAO,CACL,YACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,eAAe,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO;aAC/C,IAEA,IAAI,CACA,CACR,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,WAAK,IAAI,EAAC,WAAW,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,uBAAuB;YACnF,iBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;oBACjC,aAAa,EAAE,IAAI,CAAC,MAAM;iBAC3B;gBAEA,IAAI,CAAC,gBAAgB,EAAE;gBACvB,IAAI,CAAC,eAAe,EAAE;gBACtB,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAC7B,YAAM,IAAI,EAAC,OAAO;oBAChB,YAAM,IAAI,EAAC,OAAO,GAAG,CAChB,CACR,CAAC,CAAC,CAAC,IAAI;gBACP,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAClC,YAAM,IAAI,EAAC,YAAY;oBACrB,YAAM,IAAI,EAAC,YAAY,GAAG,CACrB,CACR,CAAC,CAAC,CAAC,IAAI,CACE;YACX,IAAI,CAAC,IAAI,IAAI,CACZ,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,0BAA0B,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB;oBACrG,8BAA8B,EAAE,IAAI,CAAC,MAAM;iBAC5C;mBAEG,IAAI,CAAC,UAAU,EAAE;gBACpB,IAAI,CAAC,aAAa,EAAE,CACjB,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n  createTimeString,\n  getCurrentTime,\n  isValidTimeString,\n  parseTimeString,\n  Time,\n  TimeFormat,\n  TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n  value?: Time;\n  valueAsString: string;\n  changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n  min?: number;\n  max?: number;\n  items?: string[];\n  type?: ItemPickerType;\n  class?: string;\n  paddingLength?: number;\n  propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n *\n */\n@Component({\n  tag: 'six-timepicker',\n  styleUrl: 'six-timepicker.scss',\n  shadow: true,\n})\nexport class SixTimepicker {\n  private eventListeners = new EventListeners();\n  private popup?: HTMLElement;\n  private wrapper?: HTMLElement;\n  private inputElement?: HTMLSixInputElement;\n\n  @Element() host!: HTMLSixTimepickerElement;\n\n  /**\n   * Define the time format. Valid formats are:\n   *\n   * HH:mm:ss\n   * hh:mm:ss:aa\n   * HH:mm:ss:ms\n   * hh:mm:ss:ms:aa\n   * HH:mm\n   * hh:mm:aa\n   * HH\n   * hh:aa\n   * mm\n   * ss\n   * ms\n   *\n   * where HH is the 24 hour format\n   * and hh is the 12 hour format\n   *\n   * Please notice that when using the 12-hour-clock (hh)\n   * you always need a period indicator (aa). So the time can be parsed as either am or pm\n   * */\n  @Prop() format: TimeFormat = 'HH:mm:ss';\n\n  /**\n   * Define the separator to be shown between the time unit pickers.\n   * Please be aware that this property will modify the displayed separator only.\n   * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n   * */\n  @Prop() separator = ':';\n\n  /**\n   * The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Indicates whether the timepicker should be shown as an inline (always open) component */\n  @Prop({ reflect: true }) inline = false;\n\n  /**\n   * If `true` the user can only select a time via the timepicker but not directly edit the input field.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true` the component is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The enforced placement of the dropdown panel.\n   */\n  @Prop() placement?: 'top' | 'bottom';\n\n  /** Timepicker size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /**\n   * The placeholder defines what text to be shown on the input element\n   */\n  @Prop() placeholder?: string;\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** The input's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Set the position of the icon */\n  @Prop() iconPosition: 'left' | 'right' = 'left';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n   */\n  @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n   */\n  @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n  /**\n   * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n   */\n  @Prop() defaultTime?: string;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n   * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n   * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n   * (and keep pressed) and once you release\n   */\n  @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Emitted when the timepicker's value changes\n   */\n  @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n  /**\n   * Emitted when the timepicker's value changes, but debounced\n   */\n  @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n  /**\n   * Emitted when the clear button is activated.\n   */\n  @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  @State() isPopupContentUp = false;\n\n  @State() isDropDownContentUp = false;\n\n  @Listen('resize', { target: 'window' })\n  async resizeHandler() {\n    this.calcIsPopupContentUp();\n    this.moveOpenHoistedPopup();\n  }\n\n  @Listen('scroll', { target: 'window' })\n  async scrollHandler() {\n    this.calcIsPopupContentUp();\n    this.moveOpenHoistedPopup();\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.updateValue();\n  }\n\n  /** Sets focus on the datepickers input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.setFocus(options);\n  }\n\n  /*\n   * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n   * when switching between formats\n   */\n  @State() private popupValue: Time = {};\n\n  connectedCallback() {\n    this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n  }\n\n  componentWillLoad() {\n    this.updateValue();\n\n    if (this.inline) {\n      this.open = true;\n    }\n\n    if (this.open) {\n      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n    const inputElement = this.inputElement;\n\n    // emit debounced change event\n    this.eventListeners.add(\n      this.host,\n      'six-timepicker-change',\n      debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n    );\n\n    // update value and popup value based on input-element value\n    this.eventListeners.add(\n      inputElement,\n      'six-input-input',\n      debounce((event: Event) => {\n        event.stopPropagation();\n\n        // emit empty event if time string is invalid\n        if (!isValidTimeString(inputElement.value, this.format)) {\n          this.value = inputElement.value;\n          this.sixChange.emit({\n            value: {},\n            valueAsString: '',\n          });\n          return;\n        }\n\n        // update value and popup value, and emit the new value\n        this.value = inputElement.value;\n        this.popupValue = parseTimeString(inputElement.value, this.format);\n        this.sixChange.emit({\n          value: this.popupValue,\n          valueAsString: createTimeString(this.popupValue, this.format),\n        });\n      }, this.debounce)\n    );\n  }\n\n  componentDidRender() {\n    adjustPopupForHoisting(\n      this.hoist,\n      this.popup,\n      this.inputElement,\n      this.wrapper,\n      MIN_POPUP_HEIGHT,\n      (isUp) => (this.isDropDownContentUp = isUp)\n    );\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n  private updateValue() {\n    // normalize value\n    if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {\n      this.value = '';\n    }\n\n    // update popup value\n    if (this.value === '') {\n      if (this.defaultTime == null) {\n        this.popupValue = getCurrentTime(this.is24HourClock());\n      } else {\n        this.popupValue = parseTimeString(this.defaultTime, this.format);\n      }\n    } else {\n      this.popupValue = parseTimeString(this.value, this.format);\n    }\n  }\n\n  private calcIsPopupContentUp() {\n    if (this.inputElement == null || this.wrapper == null) {\n      return;\n    }\n\n    const inputBoundingRect = this.inputElement.getBoundingClientRect();\n    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n    this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n  }\n\n  private moveOpenHoistedPopup() {\n    movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n  }\n\n  private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n    // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n    event.stopPropagation();\n    if (this.popupValue == null) {\n      return;\n    }\n\n    // update the internal state\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this.popupValue[property] = event.detail;\n\n    const timeString = createTimeString(this.popupValue, this.format);\n\n    // update the input value\n    this.value = timeString;\n\n    // emit change event\n    this.sixChange.emit({\n      changedProperty: property,\n      value: this.popupValue,\n      valueAsString: timeString,\n    });\n  };\n\n  private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n    return (\n      <six-item-picker\n        class={params.class}\n        timeout={this.timeout}\n        interval={this.interval}\n        padded\n        min={params.min}\n        max={params.max}\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        value={this.popupValue[params.propertyName]}\n        items={params.items}\n        type={params.type || ItemPickerType.NUMBER}\n        padding-length={params.paddingLength}\n        onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n      ></six-item-picker>\n    );\n  }\n\n  private getHour24Picker() {\n    if (!this.is24HourClock()) {\n      return;\n    }\n    return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n  }\n\n  private is24HourClock() {\n    return this.format.includes('HH');\n  }\n\n  private getHour12Picker() {\n    if (!this.is12HourClock()) {\n      return;\n    }\n    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n  }\n\n  private is12HourClock() {\n    return this.format.includes('hh');\n  }\n\n  private getAmPmPicker() {\n    if (!this.is12HourClock()) {\n      return;\n    }\n    const items = ['AM', 'PM'];\n    return this.getSixTimeUnitPicker({\n      items,\n      type: ItemPickerType.CUSTOM,\n      propertyName: 'period',\n    });\n  }\n\n  private getMinutePicker() {\n    if (!this.format.includes('mm')) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n  }\n\n  private getSecondsPicker() {\n    if (!this.format.includes('ss')) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n  }\n\n  private getMillisecondsPicker() {\n    if (!this.format.includes('ms')) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({\n      min: 0,\n      max: 999,\n      class: 'timepicker__item--wide',\n      paddingLength: 3,\n      propertyName: 'milliseconds',\n    });\n  }\n\n  private getSeparator() {\n    return (\n      <div class=\"timepicker__separator\">\n        <span>{this.separator}</span>\n      </div>\n    );\n  }\n\n  private getContent() {\n    const elementsInOrder = [\n      this.getHour24Picker(),\n      this.getHour12Picker(),\n      this.getMinutePicker(),\n      this.getSecondsPicker(),\n      this.getMillisecondsPicker(),\n    ];\n\n    const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n    return visibleElements.map((el, idx) => {\n      if (idx === visibleElements.length - 1) {\n        return [el];\n      }\n\n      return [el, this.getSeparator()];\n    });\n  }\n\n  private openPopup() {\n    if (!this.open && !this.disabled) {\n      this.open = true;\n      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n    }\n  }\n\n  private closePopup() {\n    if (this.inline) {\n      return;\n    }\n\n    this.open = false;\n    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n  }\n\n  private handleDocumentMouseDown = (event: Event) => {\n    // Close when clicking outside the containing element\n    const path = event.composedPath() as EventTarget[];\n    if (!path.includes(this.host)) {\n      this.closePopup();\n      return;\n    }\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.value = '';\n    this.sixClear.emit();\n    this.sixChange.emit({\n      value: {},\n      valueAsString: '',\n    });\n  };\n\n  private renderClearable() {\n    return (\n      this.clearable && (\n        <button\n          slot=\"suffix\"\n          class={{\n            timepicker_clear: true,\n            'timepicker_clear--right': this.iconPosition === 'left',\n            'timepicker_clear--left': this.iconPosition === 'right',\n          }}\n          type=\"button\"\n          onClick={this.handleClearClick}\n          tabindex=\"-1\"\n        >\n          <six-icon size=\"small\">clear</six-icon>\n        </button>\n      )\n    );\n  }\n\n  private renderCustomIcon() {\n    const icon = hasSlot(this.host, 'custom-icon') ? (\n      <slot name=\"custom-icon\"></slot>\n    ) : (\n      <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n    );\n\n    return (\n      <span\n        slot=\"prefix\"\n        part=\"icon\"\n        class={{\n          prefix: true,\n          'prefix--right': this.iconPosition === 'right',\n        }}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  render() {\n    return (\n      <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          part=\"input\"\n          onClick={() => this.openPopup()}\n          value={this.value}\n          placeholder={this.placeholder}\n          readonly={this.readonly}\n          disabled={this.disabled}\n          errorTextCount={this.errorTextCount}\n          errorText={this.errorText}\n          invalid={this.invalid}\n          size={this.size}\n          name={this.name}\n          label={this.label}\n          required={this.required}\n          class={{\n            'input--empty': this.value === '',\n            'input--hide': this.inline,\n          }}\n        >\n          {this.renderCustomIcon()}\n          {this.renderClearable()}\n          {hasSlot(this.host, 'label') ? (\n            <span slot=\"label\">\n              <slot name=\"label\" />\n            </span>\n          ) : null}\n          {hasSlot(this.host, 'error-text') ? (\n            <span slot=\"error-text\">\n              <slot name=\"error-text\" />\n            </span>\n          ) : null}\n        </six-input>\n        {this.open && (\n          <div\n            ref={(el) => (this.popup = el)}\n            part=\"popup\"\n            class={{\n              timepicker__popup: true,\n              'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n              'timepicker__popup--is-inline': this.inline,\n            }}\n          >\n            {...this.getContent()}\n            {this.getAmPmPicker()}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-timepicker/test/six-timepicker.spec.js

@@ -0,0 +1,496 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixTimepicker } from "../six-timepicker";
+describe('six-timepicker', () => {
+    it('should render default timepicker', async () => {
+        var _a, _b;
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker></six-timepicker>`,
+        };
+        // when initially loaded
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-timepicker>
+    <mock:shadow-root>
+      <div class="timepicker__container" part="container">
+        <six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
+          <span class="prefix" part="icon" slot="prefix">
+            <six-icon size="medium">
+              watch_later
+            </six-icon>
+          </span>
+        </six-input>
+      </div>
+    </mock:shadow-root>
+  </six-timepicker>
+   `);
+        // when setting a value and opening the popup
+        if (((_a = page.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) != null) {
+            page.root.value = '20:00:00';
+            (_b = page.root.shadowRoot.querySelector('six-input')) === null || _b === void 0 ? void 0 : _b.click();
+        }
+        await page.waitForChanges();
+        // then expect the correct time to be rendered
+        expect(page.root).toEqualHtml(`
+<six-timepicker open="">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input errortext="" label="" part="input" size="medium" value="20:00:00">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+      <div class="timepicker__popup" part="popup">
+        <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="0"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="0"></six-item-picker>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    });
+    it('should render open timepicker', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker open value="13:20:59"></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-timepicker open="" value="13:20:59">
+      <mock:shadow-root>
+        <div class="timepicker__container" part="container">
+          <six-input errortext="" label="" part="input" size="medium" value="13:20:59">
+            <span class="prefix" part="icon" slot="prefix">
+              <six-icon size="medium">
+                watch_later
+              </six-icon>
+            </span>
+          </six-input>
+          <div class="timepicker__popup" part="popup">
+            <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
+            <div class="timepicker__separator">
+              <span>
+                :
+              </span>
+            </div>
+            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+            <div class="timepicker__separator">
+              <span>
+                :
+              </span>
+            </div>
+            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-timepicker>
+   `);
+    });
+    it('should render inline timepicker', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker inline value="13:20:59"></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-timepicker inline="" open="" value="13:20:59">
+    <mock:shadow-root>
+      <div class="timepicker__container" part="container">
+        <six-input class="input--hide" errortext="" label="" part="input" size="medium" value="13:20:59">
+          <span class="prefix" part="icon" slot="prefix">
+            <six-icon size="medium">
+              watch_later
+            </six-icon>
+          </span>
+        </six-input>
+        <div class="timepicker__popup timepicker__popup--is-inline" part="popup">
+          <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
+          <div class="timepicker__separator">
+            <span>
+              :
+            </span>
+          </div>
+          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+          <div class="timepicker__separator">
+            <span>
+              :
+            </span>
+          </div>
+          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+        </div>
+      </div>
+    </mock:shadow-root>
+  </six-timepicker>
+   `);
+    });
+    it('should render open timepicker with default time', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker open default-time="13:20:59"></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-timepicker default-time="13:20:59" open="">
+    <mock:shadow-root>
+      <div class="timepicker__container" part="container">
+        <six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
+          <span class="prefix" part="icon" slot="prefix">
+            <six-icon size="medium">
+              watch_later
+            </six-icon>
+          </span>
+        </six-input>
+        <div class="timepicker__popup" part="popup">
+          <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
+          <div class="timepicker__separator">
+            <span>
+              :
+            </span>
+          </div>
+          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+          <div class="timepicker__separator">
+            <span>
+              :
+            </span>
+          </div>
+          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+        </div>
+      </div>
+    </mock:shadow-root>
+  </six-timepicker>
+   `);
+    });
+    it('should render timepicker with different separator', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker open value="11:59:20" separator="-"></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+    <six-timepicker open="" separator="-" value="11:59:20">
+      <mock:shadow-root>
+        <div class="timepicker__container" part="container">
+          <six-input errortext="" label="" part="input" size="medium" value="11:59:20">
+            <span class="prefix" part="icon" slot="prefix">
+              <six-icon size="medium">
+                watch_later
+              </six-icon>
+            </span>
+          </six-input>
+          <div class="timepicker__popup" part="popup">
+            <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="11"></six-item-picker>
+            <div class="timepicker__separator">
+              <span>
+                -
+              </span>
+            </div>
+            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+            <div class="timepicker__separator">
+              <span>
+                -
+              </span>
+            </div>
+            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-timepicker>
+   `);
+    });
+    it('should render timepicker with different format', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker open value="03:45:20:PM" format="hh:mm:ss:aa"></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+<six-timepicker format="hh:mm:ss:aa" open="" value="03:45:20:PM">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input errortext="" label="" part="input" size="medium" value="03:45:20:PM">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+      <div class="timepicker__popup" part="popup">
+        <six-item-picker interval="35" max="11" min="0" padded="" timeout="300" type="number" value="3"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="45"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+        <six-item-picker interval="35" padded="" timeout="300" type="custom" value="PM"></six-item-picker>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    });
+    it('should render timepicker with adjusted timeout and interval', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker open value="13:20:59" timeout="500" interval="150"></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+<six-timepicker interval="150" open="" timeout="500" value="13:20:59">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input errortext="" label="" part="input" size="medium" value="13:20:59">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+      <div class="timepicker__popup" part="popup">
+        <six-item-picker interval="150" max="23" min="0" padded="" timeout="500" type="number" value="13"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="150" max="59" min="0" padded="" timeout="500" type="number" value="20"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="150" max="59" min="0" padded="" timeout="500" type="number" value="59"></six-item-picker>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    });
+    it('should render timepicker with placeholder', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker placeholder="HH:mm:ss"></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+<six-timepicker placeholder="HH:mm:ss">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input class="input--empty" errortext="" label="" part="input" placeholder="HH:mm:ss" size="medium" value="">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    });
+    it('should render readonly timepicker', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker value="02:00:00" readonly></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+<six-timepicker readonly="" value="02:00:00">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input errortext="" label="" part="input" readonly="" size="medium" value="02:00:00">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    });
+    it('should render disabled timepicker', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker value="02:00:00" disabled></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+<six-timepicker disabled="" value="02:00:00">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input disabled="" errortext="" label="" part="input" size="medium" value="02:00:00">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    });
+    it('should render timepicker in correct sizes', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker size="small"></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+<six-timepicker size="small">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input class="input--empty" errortext="" label="" part="input" size="small" value="">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="small">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+        // when changing size
+        if (page.root != null) {
+            page.root.size = 'medium';
+        }
+        await page.waitForChanges();
+        // then expect medium sized timepicker
+        expect(page.root).toEqualHtml(`
+<six-timepicker size="small">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+        // when changing size
+        if (page.root != null) {
+            page.root.size = 'large';
+        }
+        await page.waitForChanges();
+        // then expect medium sized timepicker
+        expect(page.root).toEqualHtml(`
+<six-timepicker size="small">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input class="input--empty" errortext="" label="" part="input" size="large" value="">
+        <span class="prefix" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+      </six-input>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    });
+    it('should render open timepicker with icon on the right', async () => {
+        // given
+        const config = {
+            components: [SixTimepicker],
+            html: `<six-timepicker open value="13:20:59" icon-position="right" clearable></six-timepicker>`,
+        };
+        // when
+        const page = await newSpecPage(config);
+        // then
+        expect(page.root).toEqualHtml(`
+<six-timepicker clearable="" icon-position="right" open="" value="13:20:59">
+  <mock:shadow-root>
+    <div class="timepicker__container" part="container">
+      <six-input errortext="" label="" part="input" size="medium" value="13:20:59">
+        <span class="prefix prefix--right" part="icon" slot="prefix">
+          <six-icon size="medium">
+            watch_later
+          </six-icon>
+        </span>
+        <button class="timepicker_clear timepicker_clear--left" slot="suffix" tabindex="-1" type="button">
+          <six-icon size="small">
+            clear
+          </six-icon>
+        </button>
+      </six-input>
+      <div class="timepicker__popup" part="popup">
+        <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
+        <div class="timepicker__separator">
+          <span>
+            :
+          </span>
+        </div>
+        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-timepicker>
+   `);
+    });
+});
+//# sourceMappingURL=six-timepicker.spec.js.map

package/dist/collection/components/six-timepicker/test/six-timepicker.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-timepicker.spec.js","sourceRoot":"","sources":["../../../../src/components/six-timepicker/test/six-timepicker.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixTimepicker } from '../six-timepicker';\n\ndescribe('six-timepicker', () => {\n  it('should render default timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker></six-timepicker>`,\n    };\n\n    // when initially loaded\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker>\n    <mock:shadow-root>\n      <div class=\"timepicker__container\" part=\"container\">\n        <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"\">\n          <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n            <six-icon size=\"medium\">\n              watch_later\n            </six-icon>\n          </span>\n        </six-input>\n      </div>\n    </mock:shadow-root>\n  </six-timepicker>\n   `);\n\n    // when setting a value and opening the popup\n    if (page.root?.shadowRoot != null) {\n      page.root.value = '20:00:00';\n      page.root.shadowRoot.querySelector('six-input')?.click();\n    }\n    await page.waitForChanges();\n\n    // then expect the correct time to be rendered\n    expect(page.root).toEqualHtml(`\n<six-timepicker open=\"\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"20:00:00\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n      <div class=\"timepicker__popup\" part=\"popup\">\n        <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"0\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"0\"></six-item-picker>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render open timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"13:20:59\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker open=\"\" value=\"13:20:59\">\n      <mock:shadow-root>\n        <div class=\"timepicker__container\" part=\"container\">\n          <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"13:20:59\">\n            <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n              <six-icon size=\"medium\">\n                watch_later\n              </six-icon>\n            </span>\n          </six-input>\n          <div class=\"timepicker__popup\" part=\"popup\">\n            <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"13\"></six-item-picker>\n            <div class=\"timepicker__separator\">\n              <span>\n                :\n              </span>\n            </div>\n            <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n            <div class=\"timepicker__separator\">\n              <span>\n                :\n              </span>\n            </div>\n            <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-timepicker>\n   `);\n  });\n\n  it('should render inline timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker inline value=\"13:20:59\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker inline=\"\" open=\"\" value=\"13:20:59\">\n    <mock:shadow-root>\n      <div class=\"timepicker__container\" part=\"container\">\n        <six-input class=\"input--hide\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"13:20:59\">\n          <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n            <six-icon size=\"medium\">\n              watch_later\n            </six-icon>\n          </span>\n        </six-input>\n        <div class=\"timepicker__popup timepicker__popup--is-inline\" part=\"popup\">\n          <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"13\"></six-item-picker>\n          <div class=\"timepicker__separator\">\n            <span>\n              :\n            </span>\n          </div>\n          <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n          <div class=\"timepicker__separator\">\n            <span>\n              :\n            </span>\n          </div>\n          <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n        </div>\n      </div>\n    </mock:shadow-root>\n  </six-timepicker>\n   `);\n  });\n\n  it('should render open timepicker with default time', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open default-time=\"13:20:59\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker default-time=\"13:20:59\" open=\"\">\n    <mock:shadow-root>\n      <div class=\"timepicker__container\" part=\"container\">\n        <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"\">\n          <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n            <six-icon size=\"medium\">\n              watch_later\n            </six-icon>\n          </span>\n        </six-input>\n        <div class=\"timepicker__popup\" part=\"popup\">\n          <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"13\"></six-item-picker>\n          <div class=\"timepicker__separator\">\n            <span>\n              :\n            </span>\n          </div>\n          <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n          <div class=\"timepicker__separator\">\n            <span>\n              :\n            </span>\n          </div>\n          <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n        </div>\n      </div>\n    </mock:shadow-root>\n  </six-timepicker>\n   `);\n  });\n\n  it('should render timepicker with different separator', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"11:59:20\" separator=\"-\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker open=\"\" separator=\"-\" value=\"11:59:20\">\n      <mock:shadow-root>\n        <div class=\"timepicker__container\" part=\"container\">\n          <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"11:59:20\">\n            <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n              <six-icon size=\"medium\">\n                watch_later\n              </six-icon>\n            </span>\n          </six-input>\n          <div class=\"timepicker__popup\" part=\"popup\">\n            <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"11\"></six-item-picker>\n            <div class=\"timepicker__separator\">\n              <span>\n                -\n              </span>\n            </div>\n            <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n            <div class=\"timepicker__separator\">\n              <span>\n                -\n              </span>\n            </div>\n            <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-timepicker>\n   `);\n  });\n\n  it('should render timepicker with different format', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"03:45:20:PM\" format=\"hh:mm:ss:aa\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker format=\"hh:mm:ss:aa\" open=\"\" value=\"03:45:20:PM\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"03:45:20:PM\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n      <div class=\"timepicker__popup\" part=\"popup\">\n        <six-item-picker interval=\"35\" max=\"11\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"3\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"45\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n        <six-item-picker interval=\"35\" padded=\"\" timeout=\"300\" type=\"custom\" value=\"PM\"></six-item-picker>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render timepicker with adjusted timeout and interval', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"13:20:59\" timeout=\"500\" interval=\"150\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker interval=\"150\" open=\"\" timeout=\"500\" value=\"13:20:59\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"13:20:59\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n      <div class=\"timepicker__popup\" part=\"popup\">\n        <six-item-picker interval=\"150\" max=\"23\" min=\"0\" padded=\"\" timeout=\"500\" type=\"number\" value=\"13\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"150\" max=\"59\" min=\"0\" padded=\"\" timeout=\"500\" type=\"number\" value=\"20\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"150\" max=\"59\" min=\"0\" padded=\"\" timeout=\"500\" type=\"number\" value=\"59\"></six-item-picker>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render timepicker with placeholder', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker placeholder=\"HH:mm:ss\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker placeholder=\"HH:mm:ss\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" placeholder=\"HH:mm:ss\" size=\"medium\" value=\"\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render readonly timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker value=\"02:00:00\" readonly></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker readonly=\"\" value=\"02:00:00\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" readonly=\"\" size=\"medium\" value=\"02:00:00\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render disabled timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker value=\"02:00:00\" disabled></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker disabled=\"\" value=\"02:00:00\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input disabled=\"\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"02:00:00\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render timepicker in correct sizes', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker size=\"small\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker size=\"small\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"small\" value=\"\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"small\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n\n    // when changing size\n    if (page.root != null) {\n      page.root.size = 'medium';\n    }\n    await page.waitForChanges();\n\n    // then expect medium sized timepicker\n    expect(page.root).toEqualHtml(`\n<six-timepicker size=\"small\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n\n    // when changing size\n    if (page.root != null) {\n      page.root.size = 'large';\n    }\n    await page.waitForChanges();\n\n    // then expect medium sized timepicker\n    expect(page.root).toEqualHtml(`\n<six-timepicker size=\"small\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"large\" value=\"\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render open timepicker with icon on the right', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"13:20:59\" icon-position=\"right\" clearable></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker clearable=\"\" icon-position=\"right\" open=\"\" value=\"13:20:59\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"13:20:59\">\n        <span class=\"prefix prefix--right\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n        <button class=\"timepicker_clear timepicker_clear--left\" slot=\"suffix\" tabindex=\"-1\" type=\"button\">\n          <six-icon size=\"small\">\n            clear\n          </six-icon>\n        </button>\n      </six-input>\n      <div class=\"timepicker__popup\" part=\"popup\">\n        <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"13\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n});\n"]}