@api-client/ui 0.0.5 → 0.0.8

package/dist/ui/tabs/UiTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiTabs.js","sourceRoot":"","sources":["../../../src/ui/tabs/UiTabs.ts"],"names":[],"mappings":";AAAA,oCAAoC;AACpC,sCAAsC;AACtC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAClF,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AAUpC;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,CAAS,EAAE,EAAU;IAC/C,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;AACxB,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAA9C;;QACE,UAAK,GAAY,EAAE,CAAC;QAEpB,eAAU,GAAiB,IAAI,CAAC;QAQhC;;;;;WAKG;QACwC,aAAQ,GAAiB,SAAS,CAAC;QAe9E;;;;;;WAMG;QACyB,sBAAiB,GAAG,eAAe,CAAC;QAM7C,cAAS,GAAG,KAAK,CAAC;IAgZvC,CAAC;IA9YC,kBAAkB;IAClB,aAAa;IAEb,wEAAwE;IACxE,oEAAoE;IACpE,IAAI;IAEK,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;SACtC;IACH,CAAC;IAES,KAAK,CAAC,WAAW;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC;QAC7C,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QACpD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACvD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;QACD,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;OAEG;IACO,SAAS,CAAC,OAAgB;QAClC,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;YAC1C,OAAO,KAAK,CAAC;SACd;QACD,OAAO,OAAO,CAAC,SAAS,KAAK,QAAQ,CAAC;IACxC,CAAC;IAES,YAAY,CAAC,OAAc;QACnC,IAAI,OAAO,CAAC,QAAQ,EAAE;YACpB,OAAO,KAAK,CAAC;SACd;QACD,IAAI,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;YACpD,OAAO,KAAK,CAAC;SACd;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAES,eAAe;QACvB,MAAM,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAChE,IAAI,CAAC,iBAAiB,EAAE;YACtB,OAAO;SACR;QACD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC,KAAK,QAAQ,CAAC,CAAC;QAC7E,IAAI,IAAI,IAAI,IAAI,KAAK,UAAU,EAAE;YAC/B,OAAO;SACR;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAES,aAAa,CAAC,GAAW,EAAE,KAAK,GAAG,KAAK;QAChD,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,IAAI,UAAU,KAAK,GAAG,EAAE;YACtB,GAAG,CAAC,SAAS,EAAE,CAAC;YAChB,OAAO;SACR;QACD,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;SAC/B;QACD,IAAI,GAAG,EAAE;YACP,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YAC5B,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;YACtC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,mEAAmE;gBACnE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;aACxB;SACF;IACH,CAAC;IAED,YAAY,CAAC,IAAW;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,OAAO;SACR;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5D,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAqB,QAAQ,EAAE;YAC/D,MAAM,EAAE;gBACN,IAAI;gBACJ,KAAK;gBACL,MAAM,EAAE,SAAS;aAClB;SACF,CAAC,CAAC,CAAC;IACN,CAAC;IAES,UAAU,CAAC,GAAU,EAAE,KAAK,GAAG,KAAK;QAC5C,IAAI,IAAI,CAAC,UAAU,KAAK,GAAG,EAAE;YAC3B,OAAO;SACR;QACD,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;YACjC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SAClC;QACD,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC1C,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAClC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;QACtB,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC7B,GAAG,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC9E,IAAI,KAAK,EAAE;YACT,GAAG,CAAC,KAAK,EAAE,CAAC;SACb;IACH,CAAC;IAES,YAAY,CAAC,GAAU;QAC/B,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QAC3C,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACnC,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;QACrB,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC;IACxB,CAAC;IAES,KAAK,CAAC,eAAe,CAAC,GAAU,EAAE,GAAkB;QAC5D,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAChC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACjC,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;YAC/B,OAAO;SACR;QAED,IAAI,CAAC,GAAG,EAAE;YACR,2CAA2C;YAC3C,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC;YACrB,OAAO;SACR;QAED,6DAA6D;QAC7D,8CAA8C;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC;QAC9C,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAC/E,IAAI,CAAC,aAAa,GAAG,EAAE,IAAI,EAAE,CAAC;QAC9B,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAChF,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAE3G,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;SAC7B;QACD,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE;YAC5C,QAAQ,EAAE,GAAG;YACb,UAAU,EAAE,CAAC;YACb,MAAM,EAAE,MAAM,CAAC,YAAY;SAC5B,CACA,CAAC;QACF,MAAM,WAAW,GAAc;YAC7B,IAAI,EAAE,GAAG,KAAK,IAAI;SACnB,CAAC;QACF,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YAC5C,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;YAC/B,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;QACH,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YAC5C,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC;QACnC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;IACrC,CAAC;IAIS,cAAc,CAAC,GAAU;QACjC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACxD,MAAM,OAAO,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc;QACvD,MAAM,IAAI,GAAG,cAAc,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC;QAChE,OAAO,GAAG,IAAI,IAAI,CAAC;IACrB,CAAC;IAES,gBAAgB,CAAC,GAAU;QACnC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACxD,MAAM,OAAO,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc;QACvD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC;QACzD,OAAO,GAAG,cAAc,IAAI,CAAC;IAC/B,CAAC;IAES,mBAAmB,CAAC,KAAa,EAAE,KAAa;QACxD,OAAO;YACL;gBACE,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,MAAM;aACd;YACD;gBACE,KAAK,EAAE,MAAM;aACd;YACD;gBACE,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,MAAM;aACd;SACF,CAAC;IACJ,CAAC;IAES,qBAAqB,CAAC,KAAa,EAAE,KAAa;QAC1D,OAAO;YACL;gBACE,IAAI,EAAE,KAAK;aACZ;YACD;gBACE,IAAI,EAAE,KAAK;aACZ;SACF,CAAC;IACJ,CAAC;IAES,mBAAmB,CAAC,CAAe;QAC3C,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC5B,CAAC;IAES,qBAAqB,CAAC,CAAgB;QAC9C,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE;YACvC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;SAC3B;IACH,CAAC;IAES,iBAAiB,CAAC,CAAQ;QAClC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvB,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;QAC9B,IAAI,IAAuB,CAAC;QAC5B,OAAO,CAAC,IAAI,EAAE;YACZ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAW,CAAC;YACnC,IAAI,CAAC,IAAI,EAAE;gBACT,MAAM;aACP;YACD,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBACxB,IAAI,GAAG,IAAI,CAAC;aACb;SACF;QACD,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACjC,CAAC;IAES,gBAAgB;QACxB,MAAM,EAAE,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC5C,IAAI,aAAa,KAAK,CAAC,EAAE;YACvB,OAAO;SACR;QACD,IAAI,IAAI,GAAG,aAAa,GAAG,EAAE,CAAC;QAC9B,IAAI,IAAI,GAAG,CAAC,EAAE;YACZ,IAAI,GAAG,CAAC,CAAC;SACV;QACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,OAAO,CAAC,QAAQ,CAAC;YACf,QAAQ,EAAE,QAAQ;YAClB,IAAI;SACL,CAAC,CAAC;IACL,CAAC;IAES,iBAAiB;QACzB,MAAM,EAAE,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC5C,IAAI,IAAI,GAAG,aAAa,GAAG,EAAE,CAAC;QAC9B,IAAI,IAAI,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE;YACpD,IAAI,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;SAClD;QACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,OAAO,CAAC,QAAQ,CAAC;YACf,QAAQ,EAAE,QAAQ;YAClB,IAAI;SACL,CAAC,CAAC;IACL,CAAC;IAES,YAAY,CAAC,CAAQ;QAC7B,MAAM,GAAG,GAAG,CAAC,CAAC,MAAqB,CAAC;QACpC,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,UAAU,CAAC;IACtC,CAAC;IAES,aAAa,CAAC,CAAgB;QACtC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAChF,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;SAC/B;aAAM,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE;YACjC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpF,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;SAC/B;IACH,CAAC;IAED,eAAe,CAAC,IAAW;QACzB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,QAAQ,GAAG,CAAC,EAAE;YAChB,OAAO,IAAI,CAAC;SACb;QACD,IAAI,CAAC,GAAG,QAAQ,CAAC;QACjB,IAAI,MAA+B,CAAC;QACpC,GAAG;YACD,CAAC,EAAE,CAAC;YACJ,IAAI,CAAC,KAAK,QAAQ,EAAE;gBAClB,uDAAuD;gBACvD,OAAO,IAAI,CAAC;aACb;YACD,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,CAAC,GAAG,EAAE;gBACR,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;gBACjB,SAAS;aACV;YACD,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE;gBAC1B,MAAM,GAAG,GAAG,CAAC;aACd;SACF,QAAQ,CAAC,MAAM,EAAE;QAClB,OAAO,MAAe,IAAI,IAAI,CAAC;IACjC,CAAC;IAED,WAAW,CAAC,IAAW;QACrB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,QAAQ,GAAG,CAAC,EAAE;YAChB,OAAO,IAAI,CAAC;SACb;QACD,IAAI,CAAC,GAAG,QAAQ,CAAC;QACjB,IAAI,IAA6B,CAAC;QAClC,GAAG;YACD,CAAC,EAAE,CAAC;YACJ,IAAI,CAAC,KAAK,QAAQ,EAAE;gBAClB,yDAAyD;gBACzD,OAAO,IAAI,CAAC;aACb;YACD,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,CAAC,GAAG,EAAE;gBACR,CAAC,GAAG,CAAC,CAAC,CAAC;gBACP,SAAS;aACV;YACD,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE;gBAC1B,IAAI,GAAG,GAAG,CAAC;aACZ;SACF,QAAQ,CAAC,IAAI,EAAE;QAChB,OAAO,IAAa,IAAI,IAAI,CAAC;IAC/B,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAc;YACzB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;SAC9B,CAAA;QACD,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,uBAAuB,EAAE;sCACA,IAAI,CAAC,YAAY,eAAe,IAAI,CAAC,aAAa;UAC9E,IAAI,CAAC,UAAU,EAAE;;QAEnB,IAAI,CAAC,kBAAkB,EAAE;QACzB,IAAI,CAAC,eAAe,EAAE;;;KAGzB,CAAC;IACJ,CAAC;IAES,UAAU;QAClB,OAAO,IAAI,CAAA;qBACM,IAAI,CAAC,WAAW;gBACrB,IAAI,CAAC,mBAAmB;kBACtB,IAAI,CAAC,qBAAqB,WAAW,CAAC;IACtD,CAAC;IAES,eAAe;QACvB,MAAM,OAAO,GAAc;YACzB,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS;YACpC,SAAS,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW;SACzC,CAAA;QACD,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,OAAO,CAAC;yDACsB,QAAQ,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;;KAEtF,CAAC;IACJ,CAAC;IAES,uBAAuB;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;uFAEwE,IAAI,CAAC,gBAAgB;;;WAGjG,CAAC;IACV,CAAC;IAES,kBAAkB;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;yFAC0E,IAAI,CAAC,iBAAiB;;;WAGpG,CAAC;IACV,CAAC;CACF;AAxb2C;IAAzC,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAmD;AAEzE;IAAlB,KAAK,CAAC,UAAU,CAAC;uCAAiC;AAEhC;IAAlB,KAAK,CAAC,UAAU,CAAC;uCAAiC;AAQR;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAoC;AAMjD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAsB;AAOtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAmB;AASlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqC;AAEvD;IAAR,KAAK,EAAE;6CAAqC;AAIpC;IAAR,KAAK,EAAE;yCAA6B","sourcesContent":["/* eslint-disable import/no-cycle */\n/* eslint-disable no-param-reassign */\nimport { html, LitElement, nothing, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { StyleInfo, styleMap } from \"lit/directives/style-map.js\";\nimport { Easing } from \"../motion/animation.js\";\nimport UiTab from \"./UiTab.js\";\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-divider.js';\nimport '../../define/ui/ui-icon.js';\n\nexport type TabsPriority = 'primary' | 'secondary';\n\nexport interface TabSelectionDetail {\n  item: UiTab;\n  index: number;\n  select: string | null;\n}\n\n/**\n * Calculates value in percentages\n * @param w Element width\n * @param w0 Parent width\n * @return The percentage of element's width relative to parent.\n */\nexport function calcPercent(w: number, w0: number): number {\n  return (100 * w) / w0;\n}\n\n/**\n * A container for tabs.\n * \n * @fires select - A non bubbling event when selection change through user interaction. The `event.detail` object contains the `item` and `index` properties. It also has the `select` property with the value of the `selectedAttribute` on the tab.\n */\nexport default class UiTabs extends LitElement {\n  items: UiTab[] = [];\n\n  activeItem: UiTab | null = null;\n\n  @queryAssignedElements({ flatten: true }) protected assignedElements!: HTMLElement[] | null;\n\n  @query('.pointer') protected pointer!: HTMLElement;\n\n  @query('.content') protected content!: HTMLElement;\n\n  /**\n   * The priority of the tabs.\n   * \n   * @default primary\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) priority: TabsPriority = 'primary';\n\n  /**\n   * If true, tabs are scrollable and the tab width is based on the label width.\n   * @attribute\n   */\n  @property({ type: Boolean }) scrollable?: boolean;\n\n  /**\n   * The value of the selected tab.\n   * This is matched with the `aria-controls` of the tab.\n   * @attribute\n   */\n  @property({ type: String }) selected?: string;\n\n  /**\n   * The attribute on the `ui-tab` that indicates which value for `selected` \n   * corresponds to which tab. \n   * \n   * @default aria-controls\n   * @attribute\n   */\n  @property({ type: String }) selectedAttribute = `aria-controls`;\n\n  @state() protected pointerStyles?: StyleInfo;\n\n  protected contentScroll?: number;\n\n  @state() protected indicated = false;\n\n  // constructor() {\n  //   super();\n\n  //   // this.addEventListener('keydown', this.handleKeydown.bind(this));\n  //   // this.addEventListener('click', this.handleClick.bind(this));\n  // }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tablist');\n    }\n  }\n\n  protected async updateItems(): Promise<void> {\n    const elements = this.assignedElements || [];\n    const items = elements.filter(this.isTabItem, this);\n    this.items = items;\n    if (this.activeItem && !items.includes(this.activeItem)) {\n      this.activeItem = null;\n    }\n    await this.updateComplete;\n    this.ensureSelection();\n  }\n\n  /** \n   * @return Whether the given element is a list item element. \n   */\n  protected isTabItem(element: Element): element is UiTab {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false;\n    }\n    return element.localName === 'ui-tab';\n  }\n\n  protected isSelectable(element: UiTab): boolean {\n    if (element.disabled) {\n      return false;\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false;\n    }\n    return true;\n  }\n\n  protected ensureSelection(): void {\n    const { selected, selectedAttribute, activeItem, items } = this;\n    if (!selectedAttribute) {\n      return;\n    }\n    const item = items.find(i => i.getAttribute(selectedAttribute) === selected);\n    if (item && item === activeItem) {\n      return;\n    }\n    this.makeSelection(item);\n  }\n\n  protected makeSelection(tab?: UiTab, focus = false): void {\n    const { activeItem } = this;\n    if (activeItem === tab) {\n      tab.highlight();\n      return;\n    }\n    if (activeItem) {\n      this.deselectItem(activeItem);\n    }\n    if (tab) {\n      this.selectItem(tab, focus);\n      this.positionPointer(tab, activeItem);\n      if (this.activeItem) {\n        // we set this here so we won't notify selection when initializing.\n        this.notifySelect(tab);\n      }\n    }\n  }\n\n  notifySelect(item: UiTab): void {\n    const index = this.items.indexOf(item);\n    if (index === -1) {\n      return;\n    }\n    const attrValue = item.getAttribute(this.selectedAttribute);\n    this.dispatchEvent(new CustomEvent<TabSelectionDetail>('select', {\n      detail: {\n        item,\n        index,\n        select: attrValue,\n      }\n    }));\n  }\n\n  protected selectItem(tab: UiTab, focus = false): void {\n    if (this.activeItem === tab) {\n      return;\n    }\n    if (this.hasAttribute('tabindex')) {\n      this.removeAttribute('tabindex');\n    }\n    tab.setAttribute('aria-selected', 'true');\n    tab.setAttribute('tabindex', '0');\n    tab.selected = true;\n    this.activeItem = tab;\n    tab.priority = this.priority;\n    tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' });\n    if (focus) {\n      tab.focus();\n    }\n  }\n\n  protected deselectItem(tab: UiTab): void {\n    tab.setAttribute('aria-selected', 'false');\n    tab.setAttribute('tabindex', '-1');\n    tab.selected = false;\n    tab.indicated = false;\n  }\n\n  protected async positionPointer(tab: UiTab, old?: UiTab | null): Promise<void> {\n    const { items, pointer } = this;\n    const index = items.indexOf(tab);\n    if (index < 0 || !pointer) {\n      this.pointerStyles = undefined;\n      return;\n    }\n\n    if (!old) {\n      // no start animation, just show indicator.\n      tab.indicated = true;\n      return;\n    }\n\n    // first position this indicator in the place of the old one.\n    // update the view and then run the animation.\n    this.indicated = true;\n    const isPrimary = this.priority === 'primary';\n    const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old);\n    this.pointerStyles = { left };\n    await this.updateComplete;\n    const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab);\n    const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final);\n    \n    if (this.moveAnimation) {\n      this.moveAnimation.cancel();\n    }\n    const moveAnimation = pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.DECELERATION,\n    }\n    );\n    const finalStyles: StyleInfo = {\n      left: `${final}px`,\n    };\n    moveAnimation.addEventListener('finish', () => {\n      this.pointerStyles = finalStyles;\n      this.moveAnimation = undefined;\n      tab.indicated = true;\n      this.indicated = false;\n    });\n    moveAnimation.addEventListener('cancel', () => {\n      this.pointerStyles = finalStyles;\n    });\n    this.moveAnimation = moveAnimation;\n  }\n\n  protected moveAnimation?: Animation;\n\n  protected getPrimaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const leftFromParent = tabRect.x - contentBox.x;\n    const offset = this.scrollable ? 48 : 0; // left button\n    const left = leftFromParent + (tabRect.width / 2) - 20 + offset;\n    return `${left}px`;\n  }\n\n  protected getSecondaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const offset = this.scrollable ? 48 : 0; // left button\n    const leftFromParent = tabRect.x - contentBox.x + offset;\n    return `${leftFromParent}px`;\n  }\n\n  protected getPrimaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        left: final,\n        width: `40px`,\n      }\n    ];\n  }\n\n  protected getSecondaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n      },\n      {\n        left: final,\n      }\n    ];\n  }\n\n  protected contentClickHandler(e: PointerEvent): void {\n    this.activateFromEvent(e);\n  }\n\n  protected contentKeyDownHandler(e: KeyboardEvent): void {\n    if (['Enter', 'Space'].includes(e.code)) {\n      this.activateFromEvent(e);\n    }\n  }\n\n  protected activateFromEvent(e: Event): void {\n    const { items } = this;\n    const path = e.composedPath();\n    let item: UiTab | undefined;\n    while (!item) {\n      const next = path.shift() as UiTab;\n      if (!next) {\n        break;\n      }\n      if (items.includes(next)) {\n        item = next;\n      }\n    }\n    if (!item) {\n      return;\n    }\n    this.makeSelection(item, true);\n  }\n\n  protected handleScrollLeft(): void {\n    const { contentScroll = 0, content } = this;\n    if (contentScroll === 0) {\n      return;\n    }\n    let left = contentScroll - 80;\n    if (left < 0) {\n      left = 0;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScrollRight(): void {\n    const { contentScroll = 0, content } = this;\n    let left = contentScroll + 80;\n    if (left + content.clientWidth > content.scrollWidth) {\n      left = content.scrollWidth - content.clientWidth;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScroll(e: Event): void {\n    const div = e.target as HTMLElement;\n    this.contentScroll = div.scrollLeft;\n  }\n\n  protected handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === 'ArrowRight') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getNextItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    } else if (e.code === 'ArrowLeft') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getPreviousItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    }\n  }\n\n  getPreviousItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let result: HTMLElement | undefined;\n    do {\n      i--;\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = items.length;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp;\n      }\n    } while (!result);\n    return result as UiTab || item;\n  }\n\n  getNextItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let next: HTMLElement | undefined;\n    do {\n      i++;\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = -1;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp;\n      }\n    } while (!next);\n    return next as UiTab || item;\n  }\n\n  override render(): TemplateResult {\n    const classes: ClassInfo = {\n      surface: true,\n      scrollable: !!this.scrollable,\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      ${this.renderLeftScrollControl()}\n      <div class=\"content\" @scroll=\"${this.handleScroll}\" @keydown=\"${this.handleKeyDown}\">\n        ${this.renderSlot()}\n      </div>\n      ${this.rightScrollControl()}\n      ${this.renderIndicator()}\n      <div class=\"divider\"></div>\n    </div>\n    `;\n  }\n\n  protected renderSlot(): TemplateResult {\n    return html`<slot \n      @slotchange=\"${this.updateItems}\" \n      @click=\"${this.contentClickHandler}\" \n      @keydown=\"${this.contentKeyDownHandler}\"></slot>`;\n  }\n\n  protected renderIndicator(): TemplateResult {\n    const classes: ClassInfo = {\n      indicator: true,\n      indicated: this.indicated,\n      primary: this.priority === 'primary',\n      secondary: this.priority === 'secondary',\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      <span role=\"presentation\" class=\"pointer\" style=\"${styleMap(this.pointerStyles || {})}\"></span>\n    </div>\n    `;\n  }\n\n  protected renderLeftScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`\n    <div class=\"scroll-control left\">\n      <ui-icon-button aria-label=\"Scroll tabs left\" title=\"Scroll tabs left\" @click=\"${this.handleScrollLeft}\">\n        <ui-icon icon=\"chevronLeft\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n\n  protected rightScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`<div class=\"scroll-control right\">\n      <ui-icon-button aria-label=\"Scroll tabs right\" title=\"Scroll tabs right\" @click=\"${this.handleScrollRight}\">\n        <ui-icon icon=\"chevronRight\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"UiTabs.js","sourceRoot":"","sources":["../../../src/ui/tabs/UiTabs.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-cycle */\n/* eslint-disable no-param-reassign */\nimport { html, LitElement, nothing, PropertyValues, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { StyleInfo, styleMap } from \"lit/directives/style-map.js\";\nimport { Easing } from \"../motion/animation.js\";\nimport UiTab from \"./UiTab.js\";\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-divider.js';\nimport '../../define/ui/ui-icon.js';\n\nexport type TabsPriority = 'primary' | 'secondary';\n\nexport interface TabSelectionDetail {\n  item: UiTab;\n  index: number;\n  select: string | null;\n}\n\n/**\n * Calculates value in percentages\n * @param w Element width\n * @param w0 Parent width\n * @return The percentage of element's width relative to parent.\n */\nexport function calcPercent(w: number, w0: number): number {\n  return (100 * w) / w0;\n}\n\n/**\n * A container for tabs.\n * \n * @fires select - A non bubbling event when selection change through user interaction. The `event.detail` object contains the `item` and `index` properties. It also has the `select` property with the value of the `selectedAttribute` on the tab.\n */\nexport default class UiTabs extends LitElement {\n  items: UiTab[] = [];\n\n  activeItem: UiTab | null = null;\n\n  previousItem: UiTab | null = null;\n\n  @queryAssignedElements({ flatten: true }) protected assignedElements!: HTMLElement[] | null;\n\n  @query('.pointer') protected pointer!: HTMLElement;\n\n  @query('.content') protected content!: HTMLElement;\n\n  /**\n   * The priority of the tabs.\n   * \n   * @default primary\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) priority: TabsPriority = 'primary';\n\n  /**\n   * If true, tabs are scrollable and the tab width is based on the label width.\n   * @attribute\n   */\n  @property({ type: Boolean }) scrollable?: boolean;\n\n  /**\n   * The value of the selected tab.\n   * This is matched with the `aria-controls` of the tab.\n   * @attribute\n   */\n  @property({ type: String }) selected?: string;\n\n  /**\n   * The attribute on the `ui-tab` that indicates which value for `selected` \n   * corresponds to which tab. \n   * \n   * @default aria-controls\n   * @attribute\n   */\n  @property({ type: String }) selectedAttribute = `aria-controls`;\n\n  @state() protected pointerStyles?: StyleInfo;\n\n  protected contentScroll?: number;\n\n  @state() protected indicated = false;\n\n  protected observer: IntersectionObserver;\n\n  /**\n   * This is set by the intersection observer. Once the tabs are in the view it turns to `true`.\n   * This we can properly visualize selection.\n   */\n  @state() isVisible?: boolean;\n\n  constructor() {\n    super();\n\n    this.observer = new IntersectionObserver(this.intersectionCallback.bind(this), {\n      threshold: 1.0,\n      rootMargin: '0px',\n    });\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('isVisible')) {\n      this.handleVisibility();\n    }\n    super.willUpdate(cp);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tablist');\n    }\n    this.observer.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.observer.unobserve(this);\n  }\n\n  protected intersectionCallback(entries: IntersectionObserverEntry[]): void {\n    const [entry] = entries;\n    this.isVisible = entry.isIntersecting;\n  }\n\n  protected async updateItems(): Promise<void> {\n    const elements = this.assignedElements || [];\n    const items = elements.filter(this.isTabItem, this);\n    this.items = items;\n    if (this.activeItem && !items.includes(this.activeItem)) {\n      this.activeItem = null;\n    }\n    await this.updateComplete;\n    this.ensureSelection();\n  }\n\n  /** \n   * @return Whether the given element is a list item element. \n   */\n  protected isTabItem(element: Element): element is UiTab {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false;\n    }\n    return element.localName === 'ui-tab';\n  }\n\n  protected isSelectable(element: UiTab): boolean {\n    if (element.disabled) {\n      return false;\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false;\n    }\n    return true;\n  }\n\n  protected ensureSelection(): void {\n    const { selected, selectedAttribute, activeItem, items } = this;\n    if (!selectedAttribute) {\n      return;\n    }\n    const item = items.find(i => i.getAttribute(selectedAttribute) === selected);\n    if (item && item === activeItem) {\n      return;\n    }\n    this.makeSelection(item);\n  }\n\n  protected makeSelection(tab?: UiTab, focus = false): void {\n    const { activeItem } = this;\n    if (activeItem === tab) {\n      tab.highlight();\n      return;\n    }\n    this.previousItem = activeItem;\n    if (activeItem) {\n      this.deselectItem(activeItem);\n    }\n    if (tab) {\n      this.selectItem(tab, focus);\n      this.positionPointer(tab, activeItem);\n      if (this.activeItem) {\n        // we set this here so we won't notify selection when initializing.\n        this.notifySelect(tab);\n      }\n    }\n  }\n\n  notifySelect(item: UiTab): void {\n    const index = this.items.indexOf(item);\n    if (index === -1) {\n      return;\n    }\n    const attrValue = item.getAttribute(this.selectedAttribute);\n    this.dispatchEvent(new CustomEvent<TabSelectionDetail>('select', {\n      detail: {\n        item,\n        index,\n        select: attrValue,\n      }\n    }));\n  }\n\n  protected selectItem(tab: UiTab, focus = false): void {\n    this.activeItem = tab;\n    if (this.hasAttribute('tabindex')) {\n      this.removeAttribute('tabindex');\n    }\n    tab.setAttribute('aria-selected', 'true');\n    tab.setAttribute('tabindex', '0');\n    tab.selected = true;\n    tab.priority = this.priority;\n    tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' });\n    if (focus) {\n      tab.focus();\n    }\n  }\n\n  protected deselectItem(tab: UiTab): void {\n    tab.setAttribute('aria-selected', 'false');\n    tab.setAttribute('tabindex', '-1');\n    tab.selected = false;\n    tab.indicated = false;\n  }\n\n  protected handleVisibility(): void {\n    const { previousItem, activeItem } = this;\n    if (!activeItem) {\n      return;\n    }\n    this.positionPointer(activeItem, previousItem);\n  }\n\n  protected async positionPointer(tab: UiTab, old?: UiTab | null): Promise<void> {\n    const { items, pointer, isVisible } = this;\n    if (!isVisible) {\n      return;\n    }\n    const index = items.indexOf(tab);\n    if (index < 0 || !pointer) {\n      this.pointerStyles = undefined;\n      return;\n    }\n\n    if (!old) {\n      // no start animation, just show indicator.\n      tab.indicated = true;\n      return;\n    }\n    const isPrimary = this.priority === 'primary';\n    const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab);\n    if (this.pointerStyles && this.pointerStyles.left === `${final}px`) {\n      return;\n    }\n\n    // first position this indicator in the place of the old one.\n    // update the view and then run the animation.\n    this.indicated = true;\n    const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old);\n    this.pointerStyles = { left };\n    await this.updateComplete;\n    const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final);\n    \n    if (this.moveAnimation) {\n      this.moveAnimation.cancel();\n    }\n    const moveAnimation = pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.DECELERATION,\n    }\n    );\n    const finalStyles: StyleInfo = {\n      left: `${final}px`,\n    };\n    moveAnimation.addEventListener('finish', () => {\n      this.pointerStyles = finalStyles;\n      this.moveAnimation = undefined;\n      tab.indicated = true;\n      this.indicated = false;\n    });\n    moveAnimation.addEventListener('cancel', () => {\n      this.pointerStyles = finalStyles;\n    });\n    this.moveAnimation = moveAnimation;\n  }\n\n  protected moveAnimation?: Animation;\n\n  protected getPrimaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const leftFromParent = tabRect.x - contentBox.x;\n    const offset = this.scrollable ? 48 : 0; // left button\n    const left = leftFromParent + (tabRect.width / 2) - 20 + offset;\n    return `${left}px`;\n  }\n\n  protected getSecondaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const offset = this.scrollable ? 48 : 0; // left button\n    const leftFromParent = tabRect.x - contentBox.x + offset;\n    return `${leftFromParent}px`;\n  }\n\n  protected getPrimaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        left: final,\n        width: `40px`,\n      }\n    ];\n  }\n\n  protected getSecondaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n      },\n      {\n        left: final,\n      }\n    ];\n  }\n\n  protected contentClickHandler(e: PointerEvent): void {\n    this.activateFromEvent(e);\n  }\n\n  protected contentKeyDownHandler(e: KeyboardEvent): void {\n    if (['Enter', 'Space'].includes(e.code)) {\n      this.activateFromEvent(e);\n    }\n  }\n\n  protected activateFromEvent(e: Event): void {\n    const { items } = this;\n    const path = e.composedPath();\n    let item: UiTab | undefined;\n    while (!item) {\n      const next = path.shift() as UiTab;\n      if (!next) {\n        break;\n      }\n      if (items.includes(next)) {\n        item = next;\n      }\n    }\n    if (!item) {\n      return;\n    }\n    this.makeSelection(item, true);\n  }\n\n  protected handleScrollLeft(): void {\n    const { contentScroll = 0, content } = this;\n    if (contentScroll === 0) {\n      return;\n    }\n    let left = contentScroll - 80;\n    if (left < 0) {\n      left = 0;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScrollRight(): void {\n    const { contentScroll = 0, content } = this;\n    let left = contentScroll + 80;\n    if (left + content.clientWidth > content.scrollWidth) {\n      left = content.scrollWidth - content.clientWidth;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScroll(e: Event): void {\n    const div = e.target as HTMLElement;\n    this.contentScroll = div.scrollLeft;\n  }\n\n  protected handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === 'ArrowRight') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getNextItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    } else if (e.code === 'ArrowLeft') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getPreviousItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    }\n  }\n\n  getPreviousItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let result: HTMLElement | undefined;\n    do {\n      i--;\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = items.length;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp;\n      }\n    } while (!result);\n    return result as UiTab || item;\n  }\n\n  getNextItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let next: HTMLElement | undefined;\n    do {\n      i++;\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = -1;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp;\n      }\n    } while (!next);\n    return next as UiTab || item;\n  }\n\n  override render(): TemplateResult {\n    const classes: ClassInfo = {\n      surface: true,\n      scrollable: !!this.scrollable,\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      ${this.renderLeftScrollControl()}\n      <div class=\"content\" @scroll=\"${this.handleScroll}\" @keydown=\"${this.handleKeyDown}\">\n        ${this.renderSlot()}\n      </div>\n      ${this.rightScrollControl()}\n      ${this.renderIndicator()}\n      <div class=\"divider\"></div>\n    </div>\n    `;\n  }\n\n  protected renderSlot(): TemplateResult {\n    return html`<slot \n      @slotchange=\"${this.updateItems}\" \n      @click=\"${this.contentClickHandler}\" \n      @keydown=\"${this.contentKeyDownHandler}\"></slot>`;\n  }\n\n  protected renderIndicator(): TemplateResult {\n    const classes: ClassInfo = {\n      indicator: true,\n      indicated: this.indicated,\n      primary: this.priority === 'primary',\n      secondary: this.priority === 'secondary',\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      <span role=\"presentation\" class=\"pointer\" style=\"${styleMap(this.pointerStyles || {})}\"></span>\n    </div>\n    `;\n  }\n\n  protected renderLeftScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`\n    <div class=\"scroll-control left\">\n      <ui-icon-button aria-label=\"Scroll tabs left\" title=\"Scroll tabs left\" @click=\"${this.handleScrollLeft}\">\n        <ui-icon icon=\"chevronLeft\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n\n  protected rightScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`<div class=\"scroll-control right\">\n      <ui-icon-button aria-label=\"Scroll tabs right\" title=\"Scroll tabs right\" @click=\"${this.handleScrollRight}\">\n        <ui-icon icon=\"chevronRight\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "description": "UI for API Client.",
   "license": "CC-BY-2.0",
   "main": "dist/index.js",

package/src/bindings/base/StoreBindings.ts

@@ -181,10 +181,10 @@ export abstract class StoreBindings extends PlatformBindings {
 
     // project runs
     target.addEventListener(EventTypes.Store.ProjectRuns.add, this.handleAddProjectExecution.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.ProjectRuns.delete, this.handleProjectExecutionRead.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.ProjectRuns.deleteBulk, this.handleProjectExecutionList.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.ProjectRuns.list, this.handleProjectExecutionDelete.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.ProjectRuns.read, this.handleProjectExecutionDeleteBulk.bind(this) as EventListener);
+    target.addEventListener(EventTypes.Store.ProjectRuns.list, this.handleProjectExecutionList.bind(this) as EventListener);
+    target.addEventListener(EventTypes.Store.ProjectRuns.read, this.handleProjectExecutionRead.bind(this) as EventListener);
+    target.addEventListener(EventTypes.Store.ProjectRuns.delete, this.handleProjectExecutionDelete.bind(this) as EventListener);
+    target.addEventListener(EventTypes.Store.ProjectRuns.deleteBulk, this.handleProjectExecutionDeleteBulk.bind(this) as EventListener);
     target.addEventListener(EventTypes.Store.ProjectRuns.clearSpace, this.handleProjectExecutionClearSpace.bind(this) as EventListener);
     target.addEventListener(EventTypes.Store.ProjectRuns.clearProject, this.handleProjectExecutionClearProject.bind(this) as EventListener);
     target.addEventListener(EventTypes.Store.ProjectRuns.clearParent, this.handleProjectExecutionClearFolder.bind(this) as EventListener);

package/src/define/dialog/delete-cookie-action-dialog.ts

@@ -0,0 +1,16 @@
+import { customElement } from "lit/decorators.js";
+import Element from "../../elements/dialog/DeleteCookieAction.element.js";
+import elementStyles from '../../elements/dialog/DeleteCookieAction.styles.js';
+import dialogStyles from '../../ui/dialog/UiDialog.styles.js';
+import typography from '../../styles/m3/typography.module.js';
+
+@customElement('delete-cookie-action-dialog')
+export class ConfirmDeleteDialogElement extends Element {
+  static override styles = [dialogStyles, typography, elementStyles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'delete-cookie-action-dialog': Element;
+  }
+}

package/src/define/dialog/set-cookie-action-dialog.ts

@@ -0,0 +1,16 @@
+import { customElement } from "lit/decorators.js";
+import Element from "../../elements/dialog/SetCookieAction.element.js";
+import elementStyles from '../../elements/dialog/DeleteCookieAction.styles.js';
+import dialogStyles from '../../ui/dialog/UiDialog.styles.js';
+import typography from '../../styles/m3/typography.module.js';
+
+@customElement('set-cookie-action-dialog')
+export class ConfirmDeleteDialogElement extends Element {
+  static override styles = [dialogStyles, typography, elementStyles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'set-cookie-action-dialog': Element;
+  }
+}

package/src/define/http/http-assertions.ts

@@ -1,11 +1,11 @@
 import { customElement } from 'lit/decorators.js';
-import Element from '../../elements/http/HttpAssertions.js';
+import Element from '../../elements/http/HttpAssertions.element.js';
 import styles from '../../elements/http/HttpAssertions.styles.js';
-import typographyStyles from '../../styles/m3/typography.module.js';
+import common from '../../elements/http/HttpFlows.common.js';
 
 @customElement('http-assertions')
 export class HttpAssertionsElement extends Element {
-  static override styles = [styles, typographyStyles];
+  static override styles = [styles, ...common];
 }
 
 declare global {

package/src/define/http/http-flows.ts

@@ -0,0 +1,15 @@
+import { customElement } from 'lit/decorators.js';
+import Element from '../../elements/http/HttpFlows.element.js';
+import styles from '../../elements/http/HttpFlows.styles.js';
+import common from '../../elements/http/HttpFlows.common.js';
+
+@customElement('http-flows')
+export class HttpFlowsElement extends Element {
+  static override styles = [styles, ...common];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'http-flows': Element;
+  }
+}

package/src/define/ui/ui-divider.ts

@@ -1,6 +1,11 @@
-import Element from "../../ui/list/DividerElement.js";
+import { customElement } from "lit/decorators.js";
+import Element from "../../ui/list/UiDivider.element.js";
+import styles from "../../ui/list/UiDivider.styles.js";
 
-window.customElements.define('ui-divider', Element);
+@customElement('ui-divider')
+export class UiDividerElement extends Element {
+  static override styles = [styles];
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/elements/ApiElement.ts

@@ -18,4 +18,11 @@ export default class ApiElement extends LitElement {
     super();
     this.eventsTarget = window;
   }
+
+  /**
+   * A common way for an element to notify a change.
+   */
+  notifyChange(): void {
+    this.dispatchEvent(new Event('change'));
+  }
 }

package/src/elements/amf/ApiAuthorizationEditor.element.ts

@@ -146,7 +146,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
    */
   protected changeHandler(): void {
     this.validate();
-    this.dispatchEvent(new Event('change'));
+    this.notifyChange();
   }
 
   /**

package/src/elements/amf/ApiOperationDocument.element.ts

@@ -872,10 +872,11 @@ export default class ApiOperationDocument extends ApiDocumentationBase {
     const { selectedStatus } = this;
     const response = responses.find((item) => item.statusCode === selectedStatus);
     if (!response) {
-      return html`<div class="empty-info">Select a response to render the documentation.</div>`;
+      return html`<div class="empty-info" id="status${selectedStatus}">Select a response to render the documentation.</div>`;
     }
     return html`
     <api-response-document 
+      id="status${selectedStatus}"
       .domainId="${response.id}" 
       .response="${response}" 
       class="method-response"

package/src/elements/amf/ApiRequest.element.ts

@@ -194,7 +194,7 @@ export default class ApiRequest extends ApiElement {
    * Retargets the change event from the editor.
    */
   protected changeHandler(): void {
-    this.dispatchEvent(new Event('change'));
+    this.notifyChange();
   }
 
   protected handleResponse(e: CustomEvent<IRequestLog>): void {

package/src/elements/amf/ApiRequestEditor.element.ts

@@ -423,10 +423,6 @@ export default class ApiRequestEditor extends ApiElement {
     this.addEventListener(UiEventTypes.Http.Request.send, this.internalSendHandler.bind(this));
   }
 
-  notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   override connectedCallback(): void {
     super.connectedCallback();
     this.processDebounce();

package/src/elements/authorization/ui/Authorization.ts

@@ -47,11 +47,13 @@ export class Authorization extends ApiElement {
 
   /**
    * Whether the UI should render the toggle button to toggle the enabled state of the security scheme
+   * @attribute
    */
   @property({ type: Boolean }) canToggle?: boolean;
 
   /**
    * Whether the UI should render the delete button
+   * @attribute
    */
   @property({ type: Boolean }) canDelete?: boolean;
 
@@ -68,11 +70,7 @@ export class Authorization extends ApiElement {
     this.requestUpdate();
     this.notifyChange();
   }
-
-  notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
+  
   protected handleDelete(): void {
     this.dispatchEvent(new Event('delete'))
   }

package/src/elements/dialog/DeleteCookieAction.element.ts

@@ -0,0 +1,100 @@
+import { TemplateResult, html, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
+import { IDeleteCookieStep, DeleteCookieStep } from "@api-client/core/build/browser.js";
+import UiDialog from "../../ui/dialog/UiDialog.js";
+import type Input from '../../ui/input/Input.js';
+import '../../define/ui/ui-text-field.js';
+
+/**
+ * A dialog used by the Flow builder to configure the Delete Cookie action.
+ */
+export default class DeleteCookieAction extends UiDialog {
+  @property({ type: Object }) step?: IDeleteCookieStep;
+
+  override dialogValue: IDeleteCookieStep = new DeleteCookieStep().toJSON();
+
+  constructor() {
+    super();
+    this.dismissLabel = 'Cancel';
+    this.confirmLabel = 'Save';
+  }
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    if (cp.has('step')) {
+      this.setupDialogValue();
+    }
+    super.willUpdate(cp);
+  }
+
+  protected setupDialogValue(): void {
+    const { step } = this;
+    if (!step) {
+      this.dialogValue = new DeleteCookieStep().toJSON();
+    } else {
+      this.dialogValue = new DeleteCookieStep(step).toJSON();
+    }
+  }
+
+  protected handleUrlChange(e: Event): void {
+    const input = e.target as Input;
+    this.dialogValue.url = input.value;
+  }
+
+  protected handleNameChange(e: Event): void {
+    const input = e.target as Input;
+    this.dialogValue.name = input.value;
+  }
+
+  override renderIcon(): TemplateResult {
+    const classes: ClassInfo = {
+      icon: true,
+      'with-icon': true,
+    };
+    return html`
+    <div class="${classMap(classes)}" part="icon"><ui-icon icon="tune" role="presentation"></ui-icon></div>
+    `;
+  }
+
+  override renderTitle(): TemplateResult {
+    const classes: ClassInfo = {
+      title: true,
+      'with-title': true,
+    };
+    return html`
+    <div class="${classMap(classes)}" part="title"><span>Configure Delete Cookie Action</span></div>
+    `;
+  }
+
+  override renderBody(): TemplateResult {
+    const { name = '', url = '' } = this.dialogValue;
+
+    return html`
+    <div class="content">
+      <div class="param-row">
+        <ui-text-field
+          name="name"
+          label="Cookie name"
+          type="text"
+          .value="${live(name)}"
+          @change="${this.handleNameChange}"
+          class="input"
+          supportingText="Leave empty to delete all cookies for the URL."
+        ></ui-text-field>
+      </div>
+      <div class="param-row">
+        <ui-text-field
+          name="url"
+          label="Cookie URL"
+          type="url"
+          .value="${live(url)}"
+          @change="${this.handleUrlChange}"
+          class="input"
+          supportingText="When the URL is not set then the request URL is used."
+        ></ui-text-field>
+      </div>
+    </div>
+    `;
+  }
+}

package/src/elements/dialog/DeleteCookieAction.styles.ts

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+// These are shared with the set cookie action dialog.
+
+export default css`
+.input {
+  max-width: 520px;
+  width: 100%;
+}
+
+.param-row:not(:last-of-type) {
+  margin-bottom: 20px;
+}
+`;

package/src/elements/dialog/Rename.ts

@@ -3,10 +3,10 @@ import { property, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';
 import UiDialog from '../../ui/dialog/UiDialog.js';
+import type Input from '../../ui/input/Input.js';
 import '../../define/ui/ui-button.js';
 import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-text-field.js';
-import Input from '../../ui/input/Input.js';
 
 /**
  * A dialog that requests the user for the new name.
@@ -20,15 +20,16 @@ import Input from '../../ui/input/Input.js';
  * The application should handle the event and trigger name change flow.
  * 
  * ```javascript
- * const dialog = document.createElement('rename-file-dialog');
- * dialog.opened = true;
+ * const dialog = document.createElement('rename-dialog');
+ * dialog.name = 'old name';
  * document.body.appendChild(dialog);
+ * dialog.open = true;
  * dialog.addEventListener('closed', (ev: Event) => {
  *   document.body.removeChild(dialog);
- *   const event = ev as CustomEvent;
- *   const { canceled, confirmed, value } = event.detail;
- *   if (!canceled && confirmed && value) {
- *     // trigger the flow
+ *   const event = ev as CustomEvent<UiDialogClosingReason>;
+ *   const { cancelled, value } = event.detail;
+ *   if (!cancelled && value) {
+ *     // trigger the flow, value is the new value
  *   }
  * });
  * ```

package/src/elements/dialog/SetCookieAction.element.ts

@@ -0,0 +1,183 @@
+import { TemplateResult, html, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
+import { ISetCookieStep, SetCookieStep } from "@api-client/core/build/browser.js";
+import type { SameSiteValue } from "@api-client/core/build/src/cookies/CookieParser.js";
+import UiDialog from "../../ui/dialog/UiDialog.js";
+import type Input from '../../ui/input/Input.js';
+import type CheckboxElement from '../../ui/input/CheckboxElement.js';
+import '../../define/ui/ui-text-field.js';
+import '../../define/ui/ui-checkbox.js';
+
+/**
+ * A dialog used by the Flow builder to configure the Set Cookie action.
+ */
+export default class SetCookieAction extends UiDialog {
+  @property({ type: Object }) step?: ISetCookieStep;
+
+  override dialogValue: ISetCookieStep = new SetCookieStep().toJSON();
+
+  constructor() {
+    super();
+    this.dismissLabel = 'Cancel';
+    this.confirmLabel = 'Save';
+  }
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    if (cp.has('step')) {
+      this.setupDialogValue();
+    }
+    super.willUpdate(cp);
+  }
+
+  protected setupDialogValue(): void {
+    const { step } = this;
+    if (!step) {
+      this.dialogValue = new SetCookieStep().toJSON();
+    } else {
+      this.dialogValue = new SetCookieStep(step).toJSON();
+    }
+  }
+
+  protected handleValueChange(e: Event): void {
+    const input = e.target as Input;
+    const name = input.name as 'name' | 'url' | 'expires';
+    this.dialogValue[name] = input.value;
+  }
+
+  protected handleBooleanChange(e: Event): void {
+    const input = e.target as CheckboxElement;
+    const name = input.name as 'hostOnly' | 'httpOnly' | 'secure' | 'session';
+    this.dialogValue[name] = input.checked as boolean;
+  }
+
+  protected handleSameSiteChange(e: Event): void {
+    const input = e.target as Input;
+    this.dialogValue.sameSite = input.value as SameSiteValue;
+  }
+
+  override renderIcon(): TemplateResult {
+    const classes: ClassInfo = {
+      icon: true,
+      'with-icon': true,
+    };
+    return html`
+    <div class="${classMap(classes)}" part="icon"><ui-icon icon="tune" role="presentation"></ui-icon></div>
+    `;
+  }
+
+  override renderTitle(): TemplateResult {
+    const classes: ClassInfo = {
+      title: true,
+      'with-title': true,
+    };
+    return html`
+    <div class="${classMap(classes)}" part="title"><span>Configure Set Cookie Action</span></div>
+    `;
+  }
+
+  override renderBody(): TemplateResult {
+    const { name = '', url = '', expires = '', hostOnly = false, httpOnly = false, sameSite = 'None', secure = false, session = false } = this.dialogValue;
+
+    return html`
+    <div class="content">
+      <div class="param-row">
+        <ui-text-field
+          name="name"
+          label="Cookie name"
+          type="text"
+          required
+          .value="${live(name)}"
+          @change="${this.handleValueChange}"
+          class="input"
+          supportingText="The name of the cookie to set."
+        ></ui-text-field>
+      </div>
+
+      <div class="param-row">
+        <ui-text-field
+          name="url"
+          label="Cookie URL"
+          type="url"
+          .value="${live(url)}"
+          @change="${this.handleValueChange}"
+          class="input"
+          supportingText="When the URL is not set then the request URL is used."
+        ></ui-text-field>
+      </div>
+
+      <div class="param-row">
+        <ui-text-field
+          name="expires"
+          label="Expires"
+          .value="${live(expires)}"
+          @change="${this.handleValueChange}"
+          class="input"
+          supportingText="A valid cookie date or relative time like 4d, 600s, etc."
+        ></ui-text-field>
+      </div>
+
+      <div class="param-row">
+        <ui-text-field
+          name="sameSite"
+          label="Same site"
+          .value="${live(sameSite)}"
+          @change="${this.handleSameSiteChange}"
+          class="input"
+          .list="${['Lax', 'Strict', 'None']}"
+        ></ui-text-field>
+      </div>
+
+      <div class="checkbox-row">
+        <label>
+          <ui-checkbox
+            name="hostOnly"
+            .checked="${hostOnly}"
+            @change="${this.handleBooleanChange}"
+            aria-label="Host only cookie"
+          ></ui-checkbox>
+          Host only
+        </label>
+      </div>
+
+      <div class="checkbox-row">
+        <label>
+          <ui-checkbox
+            name="httpOnly"
+            .checked="${httpOnly}"
+            @change="${this.handleBooleanChange}"
+            aria-label="HTTP only cookie"
+          ></ui-checkbox>
+          HTTP only
+        </label>
+      </div>
+
+      <div class="checkbox-row">
+        <label>
+          <ui-checkbox
+            name="secure"
+            .checked="${secure}"
+            @change="${this.handleBooleanChange}"
+            aria-label="Secure cookie"
+          ></ui-checkbox>
+          Secure
+        </label>
+      </div>
+
+      <div class="checkbox-row">
+        <label>
+          <ui-checkbox
+            name="session"
+            .checked="${session}"
+            @change="${this.handleBooleanChange}"
+            aria-label="Session cookie"
+          ></ui-checkbox>
+          Session
+        </label>
+      </div>
+
+    </div>
+    `;
+  }
+}