@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/collection/components/pane/pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.js","sourceRoot":"","sources":["../../../src/components/pane/pane.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AAwBjC;;GAEG;AAMH,MAAM,OAAO,IAAI;IALjB;QAaE;;;WAGG;QACK,YAAO,GAA0B,QAAQ,CAAC;QAElD;;WAEG;QACK,mBAAc,GAAY,KAAK,CAAC;QAExC;;WAEG;QACK,SAAI,GAOA,OAAO,CAAC;QAEpB;;;WAGG;QACK,eAAU,GAAY,KAAK,CAAC;QAEpC;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;;WAGG;QACsB,gBAAW,GAAgB,KAAK,CAAC;QAO1D;;;WAGG;QACK,yBAAoB,GAAY,KAAK,CAAC;QAE9C;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QA2BlC,eAAU,GAAG,EAAE,CAAC;QAChB,gBAAW,GAAG,KAAK,CAAC;QACpB,iBAAY,GAAG,EAAE,CAAC;QAClB,aAAQ,GAAG,KAAK,CAAC;QACjB,kBAAa,GAAG,CAAC,CAAC;QAClB,mBAAc,GAAG,CAAC,CAAC;QAKnB,eAAU,GAAqC,IAAI,GAAG,EAAE,CAAC;QAClE,qBAAgB,GAAG,CAAC,CAAC;KAqgB9B;IAhgBC,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAC/C,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC;IACrE,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,OAAO,CAAC;IACrE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC;IACnE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAE5C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;QACtC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YACzD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC7B,IACE,QAAQ,CAAC,IAAI,KAAK,YAAY;oBAC9B,QAAQ,CAAC,aAAa,KAAK,MAAM,EACjC,CAAC;oBACD,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;oBACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC;oBAElC,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;wBACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;4BACpB,IAAI,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE;4BACnB,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE;yBACvB,CAAC,CAAC;wBAEH,IAAI,OAAO,EAAE,CAAC;4BACZ,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;wBAC5B,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YAC9C,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI;SACxB,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QACrD,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACnD,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;YAC5D,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9D,CAAC,CAAC,CAAC;QACH,IAAI,aAAa;YAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAChE,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,WAAW,GAAG,KAAoB,CAAC;QAC1C,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,cAAsB,CAAC;QAE3B,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7B,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;gBAC3D,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;gBAEzD,IAAI,cAAc,IAAI,cAAc,GAAG,YAAY,EAAE,CAAC;oBACpD,cAAc,GAAG,GAAG,cAAc,IAAI,CAAC;gBACzC,CAAC;qBAAM,CAAC;oBACN,cAAc,GAAG,GAAG,YAAY,IAAI,CAAC;gBACvC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACxB,cAAc,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC;gBAC9D,CAAC;qBAAM,CAAC;oBACN,cAAc,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC;gBAC9D,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7B,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBAC1D,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;gBAEzD,IAAI,cAAc,IAAI,cAAc,GAAG,YAAY,EAAE,CAAC;oBACpD,cAAc,GAAG,GAAG,cAAc,IAAI,CAAC;gBACzC,CAAC;qBAAM,CAAC;oBACN,cAAc,GAAG,GAAG,YAAY,IAAI,CAAC;gBACvC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACxB,cAAc,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC;gBAC7D,CAAC;qBAAM,CAAC;oBACN,cAAc,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC;gBAC7D,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,cAAc,CAAC;IACxB,CAAC;IAEO,QAAQ;QACd,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACzD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAEO,YAAY;QAClB,IAAI,UAAU,GAAG,EAAE,CAAC;QACpB,IAAI,YAAY,GAAG,EAAE,CAAC;QAEtB,QAAQ,IAAI,CAAC,WAAW,EAAE,CAAC;YACzB,KAAK,MAAM;gBACT,UAAU,GAAG,IAAI,CAAC,QAAQ;oBACxB,CAAC,CAAC,mBAAmB;oBACrB,CAAC,CAAC,qBAAqB,CAAC;gBAC1B,YAAY,GAAG,IAAI,CAAC,QAAQ;oBAC1B,CAAC,CAAC,qBAAqB;oBACvB,CAAC,CAAC,sBAAsB,CAAC;gBAC3B,MAAM;YACR,KAAK,OAAO;gBACV,UAAU,GAAG,IAAI,CAAC,QAAQ;oBACxB,CAAC,CAAC,qBAAqB;oBACvB,CAAC,CAAC,sBAAsB,CAAC;gBAC3B,YAAY,GAAG,IAAI,CAAC,QAAQ;oBAC1B,CAAC,CAAC,mBAAmB;oBACrB,CAAC,CAAC,qBAAqB,CAAC;gBAC1B,MAAM;YACR,KAAK,QAAQ;gBACX,UAAU,GAAG,qBAAqB,CAAC;gBACnC,YAAY,GAAG,mBAAmB,CAAC;gBACnC,MAAM;YACR,KAAK,KAAK;gBACR,UAAU,GAAG,mBAAmB,CAAC;gBACjC,YAAY,GAAG,qBAAqB,CAAC;gBACrC,MAAM;QACV,CAAC;QAED,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC;IACtC,CAAC;IAEO,MAAM;QACZ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC9C,CAAC;IAEO,qBAAqB,CAAC,IAAY;QACxC,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QACxB,IAAI,SAAS,GAAG,KAAK,CAAC;YACpB,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,QAAQ,EAAE,SAAS,CAAC,UAAU;YAC9B,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,eAAe;YACvB,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,GAAG,EAAE;gBACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACnB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;oBACzB,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;YACH,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE;gBACb,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC1B,CAAC;gBAED,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAEO,uBAAuB,CAAC,IAAY;QAC1C,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QACxB,IAAI,SAAS,GAAG,KAAK,CAAC;YACpB,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,QAAQ,EAAE,SAAS,CAAC,UAAU;YAC9B,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,eAAe;YACvB,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,GAAG,EAAE;gBACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACnB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;oBACzB,IAAI,CAAC,IAAI,CAAC,QAAQ;wBAAE,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;gBAC3D,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,IAAI,CAAC,QAAQ;wBAAE,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;gBAC3D,CAAC;YACH,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE;gBACb,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC1B,CAAC;gBAED,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAEO,aAAa;QACnB,KAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,YAAY,CAAC;YACjE,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,CAAC;YAChB,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,KAAK,EAAE,CAAC;SACT,CAAC,CAAC;IACL,CAAC;IAEO,wBAAwB,CAC9B,IAAY,EACZ,QAAQ,GAAG,SAAS,CAAC,UAAU;QAE/B,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QACxB,IAAI,SAAS,GAAG,KAAK,CAAC;YACpB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,YAAY,CAAC;YACjE,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,IAAI;YAChB,aAAa,EAAE,IAAI;YACnB,MAAM,EAAE,eAAe;YACvB,KAAK,EAAE,CAAC;YACR,QAAQ,EAAE,GAAG,EAAE;gBACb,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAEO,sBAAsB,CAC5B,IAAY,EACZ,QAAQ,GAAG,SAAS,CAAC,UAAU;QAE/B,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QACxB,IAAI,SAAS,GAAG,KAAK,CAAC;YACpB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,YAAY,CAAC;YACjE,QAAQ,EAAE,QAAQ;YAClB,WAAW,EAAE,IAAI;YACjB,YAAY,EAAE,IAAI;YAClB,MAAM,EAAE,eAAe;YACvB,KAAK,EAAE,CAAC;YACR,QAAQ,EAAE,GAAG,EAAE;gBACb,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QACxB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;IAC5B,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;QACpD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAGD,sBAAsB,CAAC,KAAc;;QACnC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,IAAI,EAAE,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE;YAC5B,cAAc,EAAE,KAAK;SACtB,CAAC,CAAC;IACL,CAAC;IAGD,eAAe,CAAC,KAA4B;;QAC1C,IAAI,CAAC,QAAQ,GAAG,KAAK,KAAK,UAAU,CAAC;QAErC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,IAAI,EAAE,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE;YAC5B,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;IACL,CAAC;IAGD,kBAAkB,CAAC,KAAc;;QAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,IAAI,EAAE,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE;YAC5B,UAAU,EAAE,KAAK;SAClB,CAAC,CAAC;IACL,CAAC;IAEO,4BAA4B;;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACtC,IAAI,EAAE,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE;YAC5B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC5B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC;IACH,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAEhD,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;oBACzB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC;oBAC/C,IAAI,CAAC,wBAAwB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBAC1C,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;oBAC9C,IAAI,CAAC,sBAAsB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBACxC,CAAC;YACH,CAAC;YAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc;oBACjD,CAAC,CAAC,GAAG;oBACL,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACN,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;oBACzB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc;wBACjD,CAAC,CAAC,GAAG;wBACL,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;gBACzB,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc;wBAChD,CAAC,CAAC,GAAG;wBACL,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAID,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc;oBACpD,CAAC,CAAC,GAAG;oBACL,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC;gBAC7B,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACN,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAEhD,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;oBACzB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc;wBACjD,CAAC,CAAC,GAAG;wBACL,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;oBACvB,IAAI,CAAC,uBAAuB,CAAC,cAAc,CAAC,CAAC;gBAC/C,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc;wBAChD,CAAC,CAAC,GAAG;wBACL,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;oBACvB,IAAI,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC;gBAC7C,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;oBACzB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACnD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACjD,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ;gBAC9B,gBAAgB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;gBAChD,cAAc,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ;gBAClE,iBAAiB,EACf,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ;gBACrD,iBAAiB,EAAE,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACzD,iBAAiB,EAAE,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACzD,CAAC,GAAG,IAAI,CAAC,WAAW,cAAc,CAAC,EACjC,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACtD,iBAAiB,EACf,CAAC,IAAI,CAAC,UAAU;oBAChB,CAAC,IAAI,CAAC,QAAQ;oBACd,IAAI,CAAC,WAAW,KAAK,OAAO;oBAC5B,IAAI,CAAC,QAAQ;gBACf,mBAAmB,EACjB,CAAC,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,WAAW;oBAChB,IAAI,CAAC,QAAQ;oBACb,CAAC,IAAI,CAAC,QAAQ;oBACd,CAAC,IAAI,CAAC,QAAQ;gBAChB,sBAAsB,EACpB,CAAC,IAAI,CAAC,UAAU;oBAChB,CAAC,IAAI,CAAC,WAAW;oBACjB,IAAI,CAAC,QAAQ;oBACb,CAAC,IAAI,CAAC,QAAQ;oBACd,CAAC,IAAI,CAAC,QAAQ;gBAChB,YAAY,EAAE,IAAI,CAAC,QAAQ;gBAC3B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,aAAa,EAAE,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ;aACrD;YAED,8DACE,EAAE,EAAE,QAAQ,IAAI,CAAC,WAAW,EAAE,EAC9B,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,QAAQ;oBACzD,iBAAiB,EAAE,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,QAAQ;oBACzD,aAAa,EAAE,IAAI,CAAC,QAAQ;oBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED,4DACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAE;wBACL,KAAK,EACH,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,WAAW;wBAC7D,gBAAgB,EACd,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,WAAW;wBAC5D,gBAAgB,EACd,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ;wBACzD,wBAAwB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc;wBAC/D,cAAc,EAAE,IAAI,CAAC,QAAQ;wBAC7B,YAAY,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc;qBACrD;oBAED,uEACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,IAAI,EACT,IAAI,EACF,IAAI,CAAC,QAAQ;4BACX,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc;gCACpC,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,IAAI,CAAC,UAAU;4BACnB,CAAC,CAAC,IAAI,CAAC,YAAY,EAEvB,KAAK,QACL,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,mBACnC,QAAQ,IAAI,CAAC,WAAW,EAAE,GACzC;oBACF,6DACE,KAAK,EAAE;4BACL,YAAY,EAAE,IAAI;4BAClB,MAAM,EACJ,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe;yBAC3D;wBAEA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAC/C,CAAC,CAAC,CAAC,IAAI;wBACR,4DAAK,KAAK,EAAC,qBAAqB;4BAC9B,sEAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,CACrD,CACD,CACH;gBACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,MAAM,EAAE,CAAC,IAAI,CAAC,WAAW;oBACtD,8DAAa,CACT,CACA,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxgBuB,mBAAc,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,AAArC,CAAsC;AACpD,kBAAa,GAAG,MAAM,AAAT,CAAU;AACvB,wBAAmB,GAAG,MAAM,AAAT,CAAU","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\nimport {\n  iconClose,\n  iconDoubleChevronDown,\n  iconDoubleChevronLeft,\n  iconDoubleChevronRight,\n  iconDoubleChevronUp,\n} from '@siemens/ix-icons/icons';\n\nexport type Composition = 'top' | 'left' | 'bottom' | 'right';\nexport type ExpandedChangedEvent = {\n  slot: string;\n  expanded: boolean;\n};\nexport type SlotChangedEvent = {\n  slot: string;\n  newSlot: string;\n};\nexport type HideOnCollapseChangedEvent = {\n  slot: string;\n  hideOnCollapse: boolean;\n};\nexport type VariantChangedEvent = {\n  slot: string;\n  variant: 'floating' | 'inline';\n};\nexport type BorderlessChangedEvent = {\n  slot: string;\n  borderless: boolean;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-pane',\n  styleUrl: 'pane.scss',\n  shadow: true,\n})\nexport class Pane {\n  @Element() hostElement!: HTMLIxPaneElement;\n\n  /**\n   * Title of the side panel\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Variant of the side pane.\n   * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n   */\n  @Prop() variant: 'floating' | 'inline' = 'inline';\n\n  /**\n   * Define if the pane should have a collapsed state\n   */\n  @Prop() hideOnCollapse: boolean = false;\n\n  /**\n   * The maximum size of the sidebar, when it is expanded\n   */\n  @Prop() size:\n    | '240px'\n    | '320px'\n    | '360px'\n    | '480px'\n    | '600px'\n    | '33%'\n    | '50%' = '240px';\n\n  /**\n   * Toggle the border of the pane.\n   * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n   */\n  @Prop() borderless: boolean = false;\n\n  /**\n   * State of the pane\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * Defines the position of the pane inside it's container.\n   * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n   */\n  @Prop({ mutable: true }) composition: Composition = 'top';\n\n  /**\n   * Name of the icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * @internal\n   * Prevents overwriting of the variant and borderless property when used inside layout\n   */\n  @Prop() ignoreLayoutSettings: boolean = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) isMobile: boolean = false;\n\n  /**\n   * This event is triggered when the pane either expands or contracts\n   */\n  @Event() expandedChanged!: EventEmitter<ExpandedChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() variantChanged!: EventEmitter<VariantChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() borderlessChanged!: EventEmitter<BorderlessChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() hideOnCollapseChanged!: EventEmitter<HideOnCollapseChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() slotChanged!: EventEmitter<SlotChangedEvent>;\n\n  @State() private expandIcon = '';\n  @State() private showContent = false;\n  @State() private minimizeIcon = '';\n  @State() private floating = false;\n  @State() private parentWidthPx = 0;\n  @State() private parentHeightPx = 0;\n\n  private static readonly validPositions = ['top', 'left', 'bottom', 'right'];\n  private static readonly collapsedPane = '40px';\n  private static readonly collapsedPaneMobile = '48px';\n  private readonly animations: Map<string, anime.AnimeInstance> = new Map();\n  private animationCounter = 0;\n\n  private mutationObserver?: MutationObserver;\n  private resizeObserver?: ResizeObserver;\n\n  get currentSlot() {\n    return this.hostElement.getAttribute('slot');\n  }\n\n  get isBottomTopPane() {\n    return this.composition === 'bottom' || this.composition === 'top';\n  }\n\n  get isLeftRightPane() {\n    return this.composition === 'left' || this.composition === 'right';\n  }\n\n  get isMobileTop() {\n    return this.composition === 'top' || this.composition === 'left';\n  }\n\n  componentWillLoad() {\n    this.setIcons();\n\n    this.floating = this.variant === 'floating';\n\n    if (this.expanded) {\n      this.onParentSizeChange();\n    }\n\n    this.isMobile = matchBreakpoint('sm');\n    applicationLayoutService.onChange.on(() => {\n      this.isMobile = matchBreakpoint('sm');\n    });\n\n    if (this.currentSlot) {\n      this.setPosition(this.currentSlot);\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === 'slot'\n        ) {\n          const newSlot = this.currentSlot;\n          const oldSlot = mutation.oldValue;\n\n          if (newSlot !== oldSlot) {\n            this.slotChanged.emit({\n              slot: oldSlot ?? '',\n              newSlot: newSlot ?? '',\n            });\n\n            if (newSlot) {\n              this.setPosition(newSlot);\n            }\n          }\n        }\n      });\n    });\n    this.mutationObserver.observe(this.hostElement, {\n      attributes: true,\n      attributeOldValue: true,\n    });\n\n    const parentElement = this.hostElement.parentElement;\n    this.resizeObserver = new ResizeObserver((entries) => {\n      this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n      this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n    });\n    if (parentElement) this.resizeObserver.observe(parentElement);\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  private setPosition(value: string) {\n    if (Pane.validPositions.includes(value)) {\n      this.composition = value as Composition;\n    }\n  }\n\n  private getExpandPaneSize() {\n    let expandPaneSize: string;\n\n    if (this.isBottomTopPane) {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentHeightPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n        }\n      }\n    } else {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentWidthPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n        }\n      }\n    }\n\n    return expandPaneSize;\n  }\n\n  private setIcons() {\n    const { expandIcon, minimizeIcon } = this.getIconNames();\n    this.expandIcon = expandIcon;\n    this.minimizeIcon = minimizeIcon;\n  }\n\n  private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n    let expandIcon = '';\n    let minimizeIcon = '';\n\n    switch (this.composition) {\n      case 'left':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        break;\n      case 'right':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        break;\n      case 'bottom':\n        expandIcon = iconDoubleChevronDown;\n        minimizeIcon = iconDoubleChevronUp;\n        break;\n      case 'top':\n        expandIcon = iconDoubleChevronUp;\n        minimizeIcon = iconDoubleChevronDown;\n        break;\n    }\n\n    return { expandIcon, minimizeIcon };\n  }\n\n  private getKey() {\n    return (this.animationCounter++).toString();\n  }\n\n  private animateVerticalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement,\n      duration: Animation.mediumTime,\n      width: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          this.animateVerticalPadding('0px');\n        } else {\n          this.animateVerticalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateHorizontalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement,\n      duration: Animation.mediumTime,\n      height: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          if (!this.isMobile) this.animateHorizontalPadding('0px');\n        } else {\n          if (!this.isMobile) this.animateHorizontalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private removePadding() {\n    anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: 0,\n      paddingTop: 0,\n      paddingBottom: 0,\n      paddingLeft: 0,\n      paddingRight: 0,\n      delay: 0,\n    });\n  }\n\n  private animateHorizontalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: duration,\n      paddingTop: size,\n      paddingBottom: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      complete: () => {\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateVerticalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: duration,\n      paddingLeft: size,\n      paddingRight: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      complete: () => {\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private clearAnimations() {\n    this.animations.forEach((animation) => animation.pause());\n    this.animations.clear();\n    this.animationCounter = 0;\n  }\n\n  @Watch('isMobile')\n  onMobileChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.hostElement.style.removeProperty('min-height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('composition')\n  onPositionChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('hideOnCollapse')\n  onHideOnCollapseChange(value: boolean) {\n    this.onParentSizeChange();\n\n    this.hideOnCollapseChanged.emit({\n      slot: this.currentSlot ?? '',\n      hideOnCollapse: value,\n    });\n  }\n\n  @Watch('variant')\n  onVariantChange(value: 'inline' | 'floating') {\n    this.floating = value === 'floating';\n\n    this.variantChanged.emit({\n      slot: this.currentSlot ?? '',\n      variant: value,\n    });\n  }\n\n  @Watch('borderless')\n  onBorderlessChange(value: boolean) {\n    this.borderlessChanged.emit({\n      slot: this.currentSlot ?? '',\n      borderless: value,\n    });\n  }\n\n  private dispatchExpandedChangedEvent() {\n    const event = this.expandedChanged.emit({\n      slot: this.currentSlot ?? '',\n      expanded: !this.expanded,\n    });\n\n    if (!event.defaultPrevented) {\n      this.expanded = !this.expanded;\n    }\n  }\n\n  @Watch('parentHeightPx')\n  @Watch('parentWidthPx')\n  onParentSizeChange() {\n    this.clearAnimations();\n    this.removePadding();\n\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.height = '100%';\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = expandPaneSize;\n          this.animateHorizontalPadding('8px', 0);\n        } else {\n          this.hostElement.style.width = expandPaneSize;\n          this.animateVerticalPadding('8px', 0);\n        }\n      }\n\n      this.showContent = true;\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        }\n      }\n    }\n  }\n\n  @Watch('expanded')\n  @Watch('size')\n  onSizeChange() {\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.minHeight = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n        this.animateHorizontalFadeIn('100%');\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateHorizontalFadeIn(expandPaneSize);\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateVerticalFadeIn(expandPaneSize);\n        }\n      }\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.animateHorizontalFadeIn(Pane.collapsedPane);\n        } else {\n          this.animateVerticalFadeIn(Pane.collapsedPane);\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'inline-color': !this.floating,\n          'mobile-overlay': this.expanded && this.isMobile,\n          'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n          'bottom-expanded':\n            this.expanded && !this.isMobileTop && this.isMobile,\n          'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n          'left-right-pane': this.isLeftRightPane && !this.isMobile,\n          [`${this.composition}-pane-border`]:\n            !this.borderless && !this.isMobile && !this.floating,\n          'nav-left-border':\n            !this.borderless &&\n            !this.isMobile &&\n            this.composition !== 'right' &&\n            this.floating,\n          'mobile-border-top':\n            !this.borderless &&\n            this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'mobile-border-bottom':\n            !this.borderless &&\n            !this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'box-shadow': this.floating,\n          'aria-expanded': this.expanded,\n          'not-visible': this.hideOnCollapse && !this.expanded,\n        }}\n      >\n        <aside\n          id={`pane-${this.composition}`}\n          class={{\n            'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n            'left-right-pane': this.isLeftRightPane && !this.isMobile,\n            'mobile-pane': this.isMobile,\n            expanded: this.expanded,\n          }}\n        >\n          <div\n            id=\"title-div\"\n            class={{\n              title:\n                !this.isMobile && !this.hideOnCollapse && !this.showContent,\n              'title-finished':\n                !this.isMobile && !this.hideOnCollapse && this.showContent,\n              'title-expanded':\n                !this.isMobile && !this.hideOnCollapse && this.expanded,\n              'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n              'title-mobile': this.isMobile,\n              'header-gap': !this.isMobile && !this.hideOnCollapse,\n            }}\n          >\n            <ix-icon-button\n              class=\"title-icon\"\n              size=\"24\"\n              icon={\n                this.expanded\n                  ? this.isMobile || this.hideOnCollapse\n                    ? iconClose\n                    : this.expandIcon\n                  : this.minimizeIcon\n              }\n              ghost\n              onClick={() => this.dispatchExpandedChangedEvent()}\n              aria-controls={`pane-${this.composition}`}\n            />\n            <span\n              class={{\n                'title-text': true,\n                rotate:\n                  !this.expanded && !this.isMobile && this.isLeftRightPane,\n              }}\n            >\n              {this.icon ? (\n                <ix-icon size=\"24\" name={this.icon}></ix-icon>\n              ) : null}\n              <div class=\"title-text-overflow\">\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              </div>\n            </span>\n          </div>\n          <div class=\"side-pane-content\" hidden={!this.showContent}>\n            <slot></slot>\n          </div>\n        </aside>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pane/test/panes.ct.js

@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from "@playwright/test";
+import { iconStar } from "@siemens/ix-icons/icons";
+import { regressionTest } from "../../../tests/utils/test/index";
+regressionTest('renders', async ({ mount, page }) => {
+    await mount(`<ix-pane></ix-pane>`);
+    const pane = page.locator('ix-pane');
+    await expect(pane).toHaveClass(/hydrated/);
+});
+regressionTest('expanded', async ({ mount, page }) => {
+    await mount(`
+    <ix-pane
+      heading="LEFT"
+      composition="left"
+      icon="star"
+      expanded="true"
+    >
+      <h1>Test Heading</h1>
+    </ix-pane>
+  `, {
+        icons: { iconStar },
+    });
+    const title = page.locator('h1');
+    await expect(title).toBeVisible();
+});
+regressionTest('prevent pane expansion', async ({ mount, page }) => {
+    await mount(`
+    <ix-pane
+      heading="LEFT"
+      composition="left"
+      variant="inline"
+      icon="star"
+      expanded="false"
+    >
+      <h1>Test Heading</h1>
+    </ix-pane>
+  `, {
+        icons: { iconStar },
+    });
+    const pane = page.locator('ix-pane');
+    await page.evaluate(() => {
+        const paneElement = document.querySelector('ix-pane');
+        paneElement === null || paneElement === void 0 ? void 0 : paneElement.addEventListener('expandedChanged', (event) => {
+            event.preventDefault();
+        });
+    });
+    const iconButton = page.locator('ix-icon-button');
+    await iconButton.click();
+    const isExpanded = await pane.evaluate((el) => el.expanded);
+    expect(isExpanded).toBe(false);
+});
+//# sourceMappingURL=panes.ct.js.map

package/dist/collection/components/pane/test/panes.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panes.ct.js","sourceRoot":"","sources":["../../../../src/components/pane/test/panes.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClD,MAAM,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACnC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACnD,MAAM,KAAK,CACT;;;;;;;;;GASD,EACC;QACE,KAAK,EAAE,EAAE,QAAQ,EAAE;KACpB,CACF,CAAC;IAEF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;AACpC,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,wBAAwB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACjE,MAAM,KAAK,CACT;;;;;;;;;;GAUD,EACC;QACE,KAAK,EAAE,EAAE,QAAQ,EAAE;KACpB,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAErC,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;QACvB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QACtD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,iBAAiB,EAAE,CAAC,KAAY,EAAE,EAAE;YAChE,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAClD,MAAM,UAAU,CAAC,KAAK,EAAE,CAAC;IAEzB,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,QAAQ,CACpC,CAAC,EAAqB,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CACvC,CAAC;IACF,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACjC,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { expect } from '@playwright/test';\nimport { iconStar } from '@siemens/ix-icons/icons';\nimport { regressionTest } from '@utils/test';\n\nregressionTest('renders', async ({ mount, page }) => {\n  await mount(`<ix-pane></ix-pane>`);\n  const pane = page.locator('ix-pane');\n  await expect(pane).toHaveClass(/hydrated/);\n});\n\nregressionTest('expanded', async ({ mount, page }) => {\n  await mount(\n    `\n    <ix-pane\n      heading=\"LEFT\"\n      composition=\"left\"\n      icon=\"star\"\n      expanded=\"true\"\n    >\n      <h1>Test Heading</h1>\n    </ix-pane>\n  `,\n    {\n      icons: { iconStar },\n    }\n  );\n\n  const title = page.locator('h1');\n  await expect(title).toBeVisible();\n});\n\nregressionTest('prevent pane expansion', async ({ mount, page }) => {\n  await mount(\n    `\n    <ix-pane\n      heading=\"LEFT\"\n      composition=\"left\"\n      variant=\"inline\"\n      icon=\"star\"\n      expanded=\"false\"\n    >\n      <h1>Test Heading</h1>\n    </ix-pane>\n  `,\n    {\n      icons: { iconStar },\n    }\n  );\n\n  const pane = page.locator('ix-pane');\n\n  await page.evaluate(() => {\n    const paneElement = document.querySelector('ix-pane');\n    paneElement?.addEventListener('expandedChanged', (event: Event) => {\n      event.preventDefault();\n    });\n  });\n\n  const iconButton = page.locator('ix-icon-button');\n  await iconButton.click();\n\n  const isExpanded = await pane.evaluate(\n    (el: HTMLIxPaneElement) => el.expanded\n  );\n  expect(isExpanded).toBe(false);\n});\n"]}

package/dist/collection/components/pane-layout/pane-layout.css

@@ -0,0 +1,148 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .side-panes-wrapper {
+  height: 100%;
+  width: 100%;
+}
+:host .row {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  position: relative;
+}
+:host .col {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+:host .content {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+:host .absolute-top {
+  width: 100%;
+  position: absolute;
+  top: 0;
+}
+:host .absolute-bottom {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+}
+:host .absolute-left {
+  height: 100%;
+  position: absolute;
+  left: 0;
+}
+:host .absolute-right {
+  height: 100%;
+  position: absolute;
+  right: 0;
+}
+:host .padding-top {
+  padding-top: 2.5rem;
+}
+:host .padding-bottom {
+  padding-bottom: 2.5rem;
+}
+:host .padding-left {
+  padding-left: 2.5rem;
+}
+:host .padding-right {
+  padding-right: 2.5rem;
+}