@breadstone/mosaik-elements-foundation 0.1.47 → 0.1.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/Controls/Components/Overlays/Drawer/DrawerContainerElement.d.ts +19 -0
  2. package/Controls/Components/Overlays/Drawer/DrawerContainerElement.d.ts.map +1 -1
  3. package/Controls/Components/Overlays/Drawer/DrawerContainerElement.js +44 -1
  4. package/Controls/Components/Overlays/Drawer/DrawerContainerElement.js.map +1 -1
  5. package/Controls/Components/Overlays/Drawer/DrawerContentElement.d.ts +12 -7
  6. package/Controls/Components/Overlays/Drawer/DrawerContentElement.d.ts.map +1 -1
  7. package/Controls/Components/Overlays/Drawer/DrawerContentElement.js +24 -19
  8. package/Controls/Components/Overlays/Drawer/DrawerContentElement.js.map +1 -1
  9. package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts +5 -0
  10. package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts.map +1 -1
  11. package/Controls/Components/Overlays/Drawer/DrawerElement.js +9 -0
  12. package/Controls/Components/Overlays/Drawer/DrawerElement.js.map +1 -1
  13. package/Controls/Components/Overlays/Drawer/IDrawerContainerElementProps.d.ts +7 -0
  14. package/Controls/Components/Overlays/Drawer/IDrawerContainerElementProps.d.ts.map +1 -1
  15. package/Controls/Components/Overlays/Drawer/IDrawerContentElementProps.d.ts +1 -1
  16. package/Controls/Components/Overlays/Drawer/Themes/DrawerContainerElement.Cosmopolitan.d.ts.map +1 -1
  17. package/Controls/Components/Overlays/Drawer/Themes/DrawerContainerElement.Cosmopolitan.js +2 -1
  18. package/Controls/Components/Overlays/Drawer/Themes/DrawerContainerElement.Cosmopolitan.js.map +1 -1
  19. package/Controls/Components/Overlays/Drawer/Themes/DrawerContainerElement.Joy.d.ts.map +1 -1
  20. package/Controls/Components/Overlays/Drawer/Themes/DrawerContainerElement.Joy.js +2 -1
  21. package/Controls/Components/Overlays/Drawer/Themes/DrawerContainerElement.Joy.js.map +1 -1
  22. package/Controls/Components/Overlays/Drawer/Themes/DrawerContainerElement.Memphis.d.ts.map +1 -1
  23. package/Controls/Components/Overlays/Drawer/Themes/DrawerContainerElement.Memphis.js +2 -1
  24. package/Controls/Components/Overlays/Drawer/Themes/DrawerContainerElement.Memphis.js.map +1 -1
  25. package/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Cosmopolitan.d.ts.map +1 -1
  26. package/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Cosmopolitan.js +10 -3
  27. package/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Cosmopolitan.js.map +1 -1
  28. package/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Joy.d.ts.map +1 -1
  29. package/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Joy.js +10 -3
  30. package/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Joy.js.map +1 -1
  31. package/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Memphis.d.ts.map +1 -1
  32. package/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Memphis.js +10 -3
  33. package/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Memphis.js.map +1 -1
  34. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Cosmopolitan.d.ts.map +1 -1
  35. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Cosmopolitan.js +4 -0
  36. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Cosmopolitan.js.map +1 -1
  37. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.d.ts.map +1 -1
  38. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.js +4 -0
  39. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.js.map +1 -1
  40. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Memphis.d.ts.map +1 -1
  41. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Memphis.js +4 -0
  42. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Memphis.js.map +1 -1
  43. package/Controls/Components/Primitives/Paginator/IPaginatorElementProps.d.ts +38 -0
  44. package/Controls/Components/Primitives/Paginator/IPaginatorElementProps.d.ts.map +1 -1
  45. package/Controls/Components/Primitives/Paginator/IPaginatorElementProps.js +10 -1
  46. package/Controls/Components/Primitives/Paginator/IPaginatorElementProps.js.map +1 -1
  47. package/Controls/Components/Primitives/Paginator/PaginatorElement.d.ts +104 -8
  48. package/Controls/Components/Primitives/Paginator/PaginatorElement.d.ts.map +1 -1
  49. package/Controls/Components/Primitives/Paginator/PaginatorElement.js +288 -32
  50. package/Controls/Components/Primitives/Paginator/PaginatorElement.js.map +1 -1
  51. package/Controls/Components/Primitives/Paginator/PaginatorElementTemplate.d.ts.map +1 -1
  52. package/Controls/Components/Primitives/Paginator/PaginatorElementTemplate.js +35 -28
  53. package/Controls/Components/Primitives/Paginator/PaginatorElementTemplate.js.map +1 -1
  54. package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Cosmopolitan.d.ts.map +1 -1
  55. package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Cosmopolitan.js +28 -2
  56. package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Cosmopolitan.js.map +1 -1
  57. package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.d.ts.map +1 -1
  58. package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.js +28 -2
  59. package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.js.map +1 -1
  60. package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.d.ts.map +1 -1
  61. package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.js +28 -2
  62. package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.js.map +1 -1
  63. package/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.d.ts +9 -0
  64. package/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.d.ts.map +1 -1
  65. package/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.js +14 -0
  66. package/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.js.map +1 -1
  67. package/Controls/Components/Selectors/Tab/TabPanelElement.d.ts +11 -12
  68. package/Controls/Components/Selectors/Tab/TabPanelElement.d.ts.map +1 -1
  69. package/Controls/Components/Selectors/Tab/TabPanelElement.js +24 -24
  70. package/Controls/Components/Selectors/Tab/TabPanelElement.js.map +1 -1
  71. package/Controls/Components/Selectors/Tab/TabPanelElementTemplate.d.ts.map +1 -1
  72. package/Controls/Components/Selectors/Tab/TabPanelElementTemplate.js +14 -22
  73. package/Controls/Components/Selectors/Tab/TabPanelElementTemplate.js.map +1 -1
  74. package/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.d.ts.map +1 -1
  75. package/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.js +4 -0
  76. package/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.js.map +1 -1
  77. package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.d.ts.map +1 -1
  78. package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.js +4 -0
  79. package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.js.map +1 -1
  80. package/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.d.ts.map +1 -1
  81. package/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.js +4 -0
  82. package/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.js.map +1 -1
  83. package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.d.ts.map +1 -1
  84. package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.js +24 -12
  85. package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.js.map +1 -1
  86. package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.d.ts.map +1 -1
  87. package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.js +24 -12
  88. package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.js.map +1 -1
  89. package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Memphis.d.ts.map +1 -1
  90. package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Memphis.js +24 -12
  91. package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Memphis.js.map +1 -1
  92. package/Controls/Components/Shell/AppElement.d.ts +17 -8
  93. package/Controls/Components/Shell/AppElement.d.ts.map +1 -1
  94. package/Controls/Components/Shell/AppElement.js +19 -10
  95. package/Controls/Components/Shell/AppElement.js.map +1 -1
  96. package/Controls/Components/Shell/AppElementTemplate.d.ts.map +1 -1
  97. package/Controls/Components/Shell/AppElementTemplate.js +8 -6
  98. package/Controls/Components/Shell/AppElementTemplate.js.map +1 -1
  99. package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.d.ts.map +1 -1
  100. package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.js +37 -19
  101. package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.js.map +1 -1
  102. package/Controls/Components/Shell/Themes/AppElement.Joy.d.ts.map +1 -1
  103. package/Controls/Components/Shell/Themes/AppElement.Joy.js +38 -20
  104. package/Controls/Components/Shell/Themes/AppElement.Joy.js.map +1 -1
  105. package/Controls/Components/Shell/Themes/AppElement.Memphis.d.ts.map +1 -1
  106. package/Controls/Components/Shell/Themes/AppElement.Memphis.js +37 -19
  107. package/Controls/Components/Shell/Themes/AppElement.Memphis.js.map +1 -1
  108. package/Controls/events/PaginatorEvents.d.ts +20 -0
  109. package/Controls/events/PaginatorEvents.d.ts.map +1 -1
  110. package/custom-elements.json +330 -38
  111. package/package.json +3 -3
@@ -64,12 +64,38 @@ export function paginatorElementCosmopolitanStyle() {
64
64
  display: none !important;
65
65
  }
66
66
 
67
- :host [part^="page"], :host [part="page more"] {
67
+ :host [part~="container"] {
68
+ flex-wrap: nowrap;
69
+ align-items: center;
70
+ gap: 8px;
71
+ min-width: 0;
72
+ display: flex;
73
+ }
74
+
75
+ :host [part~="pages-container"], :host [part~="size-selector-container"], :host [part~="range-container"] {
76
+ flex: none;
77
+ align-items: center;
78
+ min-width: 0;
79
+ display: flex;
80
+ }
81
+
82
+ :host [part~="pages-container"], :host [part~="range-container"] {
83
+ flex-wrap: nowrap;
84
+ }
85
+
86
+ :host [part~="range"] {
87
+ white-space: nowrap;
88
+ }
89
+
90
+ :host [part~="page"] {
91
+ flex: none;
68
92
  min-width: 40px;
69
93
  }
70
94
 
71
- :host [part="size-selector"] {
95
+ :host [part~="size-selector"] {
96
+ flex: none;
72
97
  width: 160px;
98
+ min-width: 160px;
73
99
  }
74
100
 
75
101
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"PaginatorElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"PaginatorElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"PaginatorElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CA+DpD"}
1
+ {"version":3,"file":"PaginatorElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAyFpD"}
@@ -64,12 +64,38 @@ export function paginatorElementJoyStyle() {
64
64
  display: none !important;
65
65
  }
66
66
 
67
- :host [part^="page"], :host [part="page more"] {
67
+ :host [part~="container"] {
68
+ flex-wrap: nowrap;
69
+ align-items: center;
70
+ gap: 8px;
71
+ min-width: 0;
72
+ display: flex;
73
+ }
74
+
75
+ :host [part~="pages-container"], :host [part~="size-selector-container"], :host [part~="range-container"] {
76
+ flex: none;
77
+ align-items: center;
78
+ min-width: 0;
79
+ display: flex;
80
+ }
81
+
82
+ :host [part~="pages-container"], :host [part~="range-container"] {
83
+ flex-wrap: nowrap;
84
+ }
85
+
86
+ :host [part~="range"] {
87
+ white-space: nowrap;
88
+ }
89
+
90
+ :host [part~="page"] {
91
+ flex: none;
68
92
  min-width: 40px;
69
93
  }
70
94
 
71
- :host [part="size-selector"] {
95
+ :host [part~="size-selector"] {
96
+ flex: none;
72
97
  width: 160px;
98
+ min-width: 160px;
73
99
  }
74
100
 
75
101
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"PaginatorElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"PaginatorElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"PaginatorElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CA+DxD"}
1
+ {"version":3,"file":"PaginatorElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CAyFxD"}
@@ -64,12 +64,38 @@ export function paginatorElementMemphisStyle() {
64
64
  display: none !important;
65
65
  }
66
66
 
67
- :host [part^="page"], :host [part="page more"] {
67
+ :host [part~="container"] {
68
+ flex-wrap: nowrap;
69
+ align-items: center;
70
+ gap: 8px;
71
+ min-width: 0;
72
+ display: flex;
73
+ }
74
+
75
+ :host [part~="pages-container"], :host [part~="size-selector-container"], :host [part~="range-container"] {
76
+ flex: none;
77
+ align-items: center;
78
+ min-width: 0;
79
+ display: flex;
80
+ }
81
+
82
+ :host [part~="pages-container"], :host [part~="range-container"] {
83
+ flex-wrap: nowrap;
84
+ }
85
+
86
+ :host [part~="range"] {
87
+ white-space: nowrap;
88
+ }
89
+
90
+ :host [part~="page"] {
91
+ flex: none;
68
92
  min-width: 40px;
69
93
  }
70
94
 
71
- :host [part="size-selector"] {
95
+ :host [part~="size-selector"] {
96
+ flex: none;
72
97
  width: 160px;
98
+ min-width: 160px;
73
99
  }
74
100
 
75
101
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"PaginatorElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"PaginatorElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}
@@ -11,6 +11,7 @@ export declare class PaginatorElementIntl extends ElementIntlBase {
11
11
  private _nextPageLabel;
12
12
  private _previousPageLabel;
13
13
  private _itemsPerPageLabel;
14
+ private _pageLabel;
14
15
  /**
15
16
  * Constructs a new instance of the `PaginatorElementIntl` class.
16
17
  *
@@ -60,5 +61,13 @@ export declare class PaginatorElementIntl extends ElementIntlBase {
60
61
  */
61
62
  get itemsPerPageLabel(): string;
62
63
  set itemsPerPageLabel(value: string);
64
+ /**
65
+ * Gets or sets the page button label template.
66
+ * Use {0} for the page number.
67
+ *
68
+ * @public
69
+ */
70
+ get pageLabel(): string;
71
+ set pageLabel(value: string);
63
72
  }
64
73
  //# sourceMappingURL=PaginatorElementIntl.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"PaginatorElementIntl.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAIhF;;;;GAIG;AACH,qBAAa,oBACT,SAAQ,eAAe;IAIvB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,kBAAkB,CAAS;IAMnC;;;;OAIG;gBACgB,MAAM,CAAC,EAAE,MAAM;IAelC;;;;;OAKG;IACH,IAAW,UAAU,IAAI,MAAM,CAE9B;IACD,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAElC;IAED;;;;OAIG;IACH,IAAW,cAAc,IAAI,MAAM,CAElC;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAEtC;IAED;;;;OAIG;IACH,IAAW,aAAa,IAAI,MAAM,CAEjC;IACD,IAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IAED;;;;OAIG;IACH,IAAW,aAAa,IAAI,MAAM,CAEjC;IACD,IAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IAED;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,MAAM,CAErC;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAEzC;IAED;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,MAAM,CAErC;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAEzC;CAIJ"}
1
+ {"version":3,"file":"PaginatorElementIntl.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAIhF;;;;GAIG;AACH,qBAAa,oBACT,SAAQ,eAAe;IAIvB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,UAAU,CAAS;IAM3B;;;;OAIG;gBACgB,MAAM,CAAC,EAAE,MAAM;IAgBlC;;;;;OAKG;IACH,IAAW,UAAU,IAAI,MAAM,CAE9B;IACD,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAElC;IAED;;;;OAIG;IACH,IAAW,cAAc,IAAI,MAAM,CAElC;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAEtC;IAED;;;;OAIG;IACH,IAAW,aAAa,IAAI,MAAM,CAEjC;IACD,IAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IAED;;;;OAIG;IACH,IAAW,aAAa,IAAI,MAAM,CAEjC;IACD,IAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IAED;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,MAAM,CAErC;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAEzC;IAED;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,MAAM,CAErC;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAEzC;IAED;;;;;OAKG;IACH,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAEjC;CAIJ"}
@@ -14,6 +14,7 @@ export class PaginatorElementIntl extends ElementIntlBase {
14
14
  _nextPageLabel;
15
15
  _previousPageLabel;
16
16
  _itemsPerPageLabel;
17
+ _pageLabel;
17
18
  // #endregion
18
19
  // #region Ctor
19
20
  /**
@@ -29,6 +30,7 @@ export class PaginatorElementIntl extends ElementIntlBase {
29
30
  this._nextPageLabel = 'Next page';
30
31
  this._previousPageLabel = 'Previous page';
31
32
  this._itemsPerPageLabel = 'Items per page';
33
+ this._pageLabel = 'Page {0}';
32
34
  }
33
35
  // #endregion
34
36
  // #region Properties
@@ -99,5 +101,17 @@ export class PaginatorElementIntl extends ElementIntlBase {
99
101
  set itemsPerPageLabel(value) {
100
102
  this._itemsPerPageLabel = value;
101
103
  }
104
+ /**
105
+ * Gets or sets the page button label template.
106
+ * Use {0} for the page number.
107
+ *
108
+ * @public
109
+ */
110
+ get pageLabel() {
111
+ return this._pageLabel;
112
+ }
113
+ set pageLabel(value) {
114
+ this._pageLabel = value;
115
+ }
102
116
  }
103
117
  //# sourceMappingURL=PaginatorElementIntl.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PaginatorElementIntl.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAEhF,aAAa;AAEb;;;;GAIG;AACH,MAAM,OAAO,oBACT,SAAQ,eAAe;IAEvB,iBAAiB;IAET,WAAW,CAAS;IACpB,eAAe,CAAS;IACxB,cAAc,CAAS;IACvB,cAAc,CAAS;IACvB,kBAAkB,CAAS;IAC3B,kBAAkB,CAAS;IAEnC,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH,YAAmB,MAAe;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC;QACpC,IAAI,CAAC,eAAe,GAAG,YAAY,CAAC;QACpC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,kBAAkB,GAAG,eAAe,CAAC;QAC1C,IAAI,CAAC,kBAAkB,GAAG,gBAAgB,CAAC;IAC/C,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;OAKG;IACH,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IACD,IAAW,UAAU,CAAC,KAAa;QAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED;;;;OAIG;IACH,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IACD,IAAW,cAAc,CAAC,KAAa;QACnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,IAAW,aAAa;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IACD,IAAW,aAAa,CAAC,KAAa;QAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,IAAW,aAAa;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IACD,IAAW,aAAa,CAAC,KAAa;QAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IACD,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IACpC,CAAC;IAED;;;;OAIG;IACH,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IACD,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IACpC,CAAC;CAIJ"}
1
+ {"version":3,"file":"PaginatorElementIntl.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAEhF,aAAa;AAEb;;;;GAIG;AACH,MAAM,OAAO,oBACT,SAAQ,eAAe;IAEvB,iBAAiB;IAET,WAAW,CAAS;IACpB,eAAe,CAAS;IACxB,cAAc,CAAS;IACvB,cAAc,CAAS;IACvB,kBAAkB,CAAS;IAC3B,kBAAkB,CAAS;IAC3B,UAAU,CAAS;IAE3B,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH,YAAmB,MAAe;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC;QACpC,IAAI,CAAC,eAAe,GAAG,YAAY,CAAC;QACpC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,kBAAkB,GAAG,eAAe,CAAC;QAC1C,IAAI,CAAC,kBAAkB,GAAG,gBAAgB,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IACjC,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;OAKG;IACH,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IACD,IAAW,UAAU,CAAC,KAAa;QAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED;;;;OAIG;IACH,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IACD,IAAW,cAAc,CAAC,KAAa;QACnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,IAAW,aAAa;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IACD,IAAW,aAAa,CAAC,KAAa;QAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,IAAW,aAAa;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IACD,IAAW,aAAa,CAAC,KAAa;QAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IACD,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IACpC,CAAC;IAED;;;;OAIG;IACH,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IACD,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACH,IAAW,SAAS;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IACD,IAAW,SAAS,CAAC,KAAa;QAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC5B,CAAC;CAIJ"}
@@ -5,15 +5,14 @@ import { CustomElement } from '../../Abstracts/CustomElement';
5
5
  import type { ITabPanelElementProps } from './ITabPanelElementProps';
6
6
  declare const TabPanelElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
7
7
  /**
8
- * Tab Panel - A scrollable container for tab strip items with optional navigation buttons.
8
+ * Tab Panel - A container that delegates overflowing tab strip items to the Scroll component.
9
9
  *
10
10
  * @description
11
- * The Tab Panel component serves as a container for the tab strip, providing horizontal scrolling
12
- * when the total width of tab items exceeds the available space. It automatically detects scrollable
13
- * content and displays navigation buttons (start/end) to allow users to scroll through tabs that
14
- * extend beyond the visible area. The component supports different alignments and placements,
15
- * integrates with the parent tab's indicator settings, and can enable swipe gestures for touch
16
- * devices.
11
+ * The Tab Panel component serves as a container for the tab strip and composes a Scroll component
12
+ * for overflow handling. Top and bottom placements scroll horizontally, while left and right
13
+ * placements scroll vertically. The composed Scroll component provides edge fades, navigation
14
+ * buttons, native touch scrolling, and boundary detection. The panel mirrors that boundary state
15
+ * through its existing public scroll properties.
17
16
  *
18
17
  * @name Tab Panel
19
18
  * @element mosaik-tab-panel
@@ -23,6 +22,7 @@ declare const TabPanelElement_base: (abstract new (...args: Array<any>) => impor
23
22
  *
24
23
  * @csspart content - The scrollable content container
25
24
  * @csspart endScrollButton - The navigation button for scrolling to end
25
+ * @csspart scroll - The composed Scroll element
26
26
  * @csspart startScrollButton - The navigation button for scrolling to start
27
27
  *
28
28
  * @cssprop {String} --tab-panel-background-color - The background fill color of the panel
@@ -52,7 +52,7 @@ declare const TabPanelElement_base: (abstract new (...args: Array<any>) => impor
52
52
  * @fires connected {ConnectedEvent} - Fired when connected to the DOM
53
53
  * @fires changed {PropertyChangedEvent} - Fired when properties change
54
54
  *
55
- * @dependency mosaik-button - The Button element.
55
+ * @dependency mosaik-scroll - The Scroll element.
56
56
  *
57
57
  * @example
58
58
  * Tab panel with scrollable content:
@@ -80,7 +80,7 @@ declare const TabPanelElement_base: (abstract new (...args: Array<any>) => impor
80
80
  * @public
81
81
  */
82
82
  export declare class TabPanelElement extends TabPanelElement_base implements ITabPanelElementProps, ISlottable {
83
- private _containerElement;
83
+ private _scrollElement;
84
84
  private _hasScrollableContent;
85
85
  private _canScrollToStart;
86
86
  private _canScrollToEnd;
@@ -167,12 +167,11 @@ export declare class TabPanelElement extends TabPanelElement_base implements ITa
167
167
  * @private
168
168
  * @template
169
169
  */
170
- scrollByTabOffset(direction: 'before' | 'after'): void;
170
+ onScrollStateChanged(): void;
171
171
  /**
172
172
  * @private
173
- * @template
174
173
  */
175
- onScroll(e: Event): void;
174
+ private syncScrollState;
176
175
  }
177
176
  /**
178
177
  * @public
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanelElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAKrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAQrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,qBAgBa,eACT,SAAQ,oBACR,YAAW,qBAAqB,EAAE,UAAU;IAI5C,OAAO,CAAC,iBAAiB,CAAe;IACxC,OAAO,CAAC,qBAAqB,CAAU;IACvC,OAAO,CAAC,iBAAiB,CAAU;IACnC,OAAO,CAAC,eAAe,CAAU;IACjC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,eAAe,CAAU;IAMjC;;OAEG;;IAiBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,iBAAiB,CAExC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,iBAAiB,EAK5C;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,iBAAiB,CAExC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,iBAAiB,EAK5C;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IACD,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAErC;IAED;;;;;OAKG;IACH,IAIW,cAAc,IAAI,OAAO,CAEnC;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,OAAO,EAEvC;IAED;;;;;OAKG;IACH,IAIW,oBAAoB,IAAI,OAAO,CAEzC;IACD,OAAO,KAAK,oBAAoB,QAK/B;IAED;;;;;OAKG;IACH,IAIW,gBAAgB,IAAI,OAAO,CAErC;IACD,OAAO,KAAK,gBAAgB,QAK3B;IAED;;;;;OAKG;IACH,IAIW,cAAc,IAAI,OAAO,CAEnC;IACD,OAAO,KAAK,cAAc,QAKzB;IAMe,MAAM,IAAI,OAAO;IAIjC;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAO1C;;;OAGG;IACI,iBAAiB,CAAC,SAAS,EAAE,QAAQ,GAAG,OAAO,GAAG,IAAI;IAO7D;;;OAGG;IACI,QAAQ,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;CAQlC;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAC;KACvC;CACJ"}
1
+ {"version":3,"file":"TabPanelElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAKrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAQrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,qBAgBa,eACT,SAAQ,oBACR,YAAW,qBAAqB,EAAE,UAAU;IAI5C,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,qBAAqB,CAAU;IACvC,OAAO,CAAC,iBAAiB,CAAU;IACnC,OAAO,CAAC,eAAe,CAAU;IACjC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,eAAe,CAAU;IAMjC;;OAEG;;IAkBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,iBAAiB,CAExC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,iBAAiB,EAK5C;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,iBAAiB,CAExC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,iBAAiB,EAK5C;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IACD,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAErC;IAED;;;;;OAKG;IACH,IAIW,cAAc,IAAI,OAAO,CAEnC;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,OAAO,EAEvC;IAED;;;;;OAKG;IACH,IAIW,oBAAoB,IAAI,OAAO,CAEzC;IACD,OAAO,KAAK,oBAAoB,QAK/B;IAED;;;;;OAKG;IACH,IAIW,gBAAgB,IAAI,OAAO,CAErC;IACD,OAAO,KAAK,gBAAgB,QAK3B;IAED;;;;;OAKG;IACH,IAIW,cAAc,IAAI,OAAO,CAEnC;IACD,OAAO,KAAK,cAAc,QAKzB;IAMe,MAAM,IAAI,OAAO;IAIjC;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAO1C;;;OAGG;IACI,oBAAoB,IAAI,IAAI;IAInC;;OAEG;IACH,OAAO,CAAC,eAAe;CAY1B;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAC;KACvC;CACJ"}
@@ -17,22 +17,21 @@ import { Property } from '../../../Decorators/PropertyDecorator';
17
17
  import { TabPanelAlignment } from '../../../Types/TabPanelAlignment';
18
18
  import { TabStripPlacement } from '../../../Types/TabStripPlacement';
19
19
  import { CustomElement } from '../../Abstracts/CustomElement';
20
- import { ButtonElement } from '../../Buttons/Button/ButtonElement';
20
+ import { ScrollElement } from '../../Primitives/Scroll/ScrollElement';
21
21
  import { tabPanelElementTemplate } from './TabPanelElementTemplate';
22
22
  import { tabPanelElementCosmopolitanStyle } from './Themes/TabPanelElement.Cosmopolitan';
23
23
  import { tabPanelElementJoyStyle } from './Themes/TabPanelElement.Joy';
24
24
  import { tabPanelElementMemphisStyle } from './Themes/TabPanelElement.Memphis';
25
25
  // #endregion
26
26
  /**
27
- * Tab Panel - A scrollable container for tab strip items with optional navigation buttons.
27
+ * Tab Panel - A container that delegates overflowing tab strip items to the Scroll component.
28
28
  *
29
29
  * @description
30
- * The Tab Panel component serves as a container for the tab strip, providing horizontal scrolling
31
- * when the total width of tab items exceeds the available space. It automatically detects scrollable
32
- * content and displays navigation buttons (start/end) to allow users to scroll through tabs that
33
- * extend beyond the visible area. The component supports different alignments and placements,
34
- * integrates with the parent tab's indicator settings, and can enable swipe gestures for touch
35
- * devices.
30
+ * The Tab Panel component serves as a container for the tab strip and composes a Scroll component
31
+ * for overflow handling. Top and bottom placements scroll horizontally, while left and right
32
+ * placements scroll vertically. The composed Scroll component provides edge fades, navigation
33
+ * buttons, native touch scrolling, and boundary detection. The panel mirrors that boundary state
34
+ * through its existing public scroll properties.
36
35
  *
37
36
  * @name Tab Panel
38
37
  * @element mosaik-tab-panel
@@ -42,6 +41,7 @@ import { tabPanelElementMemphisStyle } from './Themes/TabPanelElement.Memphis';
42
41
  *
43
42
  * @csspart content - The scrollable content container
44
43
  * @csspart endScrollButton - The navigation button for scrolling to end
44
+ * @csspart scroll - The composed Scroll element
45
45
  * @csspart startScrollButton - The navigation button for scrolling to start
46
46
  *
47
47
  * @cssprop {String} --tab-panel-background-color - The background fill color of the panel
@@ -71,7 +71,7 @@ import { tabPanelElementMemphisStyle } from './Themes/TabPanelElement.Memphis';
71
71
  * @fires connected {ConnectedEvent} - Fired when connected to the DOM
72
72
  * @fires changed {PropertyChangedEvent} - Fired when properties change
73
73
  *
74
- * @dependency mosaik-button - The Button element.
74
+ * @dependency mosaik-scroll - The Scroll element.
75
75
  *
76
76
  * @example
77
77
  * Tab panel with scrollable content:
@@ -100,7 +100,7 @@ import { tabPanelElementMemphisStyle } from './Themes/TabPanelElement.Memphis';
100
100
  */
101
101
  let TabPanelElement = class TabPanelElement extends Themeable(Slottable(Appearanceable(CustomElement))) {
102
102
  // #region Fields
103
- _containerElement;
103
+ _scrollElement;
104
104
  _hasScrollableContent;
105
105
  _canScrollToStart;
106
106
  _canScrollToEnd;
@@ -117,8 +117,9 @@ let TabPanelElement = class TabPanelElement extends Themeable(Slottable(Appearan
117
117
  super();
118
118
  this._alignment = TabPanelAlignment.Start;
119
119
  this._placement = TabStripPlacement.Top;
120
+ this._scrollElement = null;
120
121
  this._hasScrollableContent = false;
121
- this._canScrollToStart = true;
122
+ this._canScrollToStart = false;
122
123
  this._canScrollToEnd = false;
123
124
  this._hasIndicator = false;
124
125
  this._enableGestures = false;
@@ -246,27 +247,26 @@ let TabPanelElement = class TabPanelElement extends Themeable(Slottable(Appearan
246
247
  */
247
248
  onApplyTemplate() {
248
249
  super.onApplyTemplate();
249
- this._containerElement = this.getTemplatePart('content');
250
- this.hasScrollableContent = this._containerElement.scrollWidth > this._containerElement.clientWidth;
250
+ this._scrollElement = this.getTemplatePart('scroll');
251
+ this.syncScrollState();
251
252
  }
252
253
  /**
253
254
  * @private
254
255
  * @template
255
256
  */
256
- scrollByTabOffset(direction) {
257
- // this.scrollToDirection(direction);
258
- // if (this._container?.selectedItem) {
259
- // this.alignToElement(this._container.selectedItem);
260
- // }
257
+ onScrollStateChanged() {
258
+ this.syncScrollState();
261
259
  }
262
260
  /**
263
261
  * @private
264
- * @template
265
262
  */
266
- onScroll(e) {
267
- const el = e.target;
268
- this.canScrollToEnd = !(el.scrollWidth <= Math.abs(this._containerElement.scrollLeft) + this._containerElement.offsetWidth);
269
- this.canScrollToStart = this._containerElement.scrollLeft !== 0;
263
+ syncScrollState() {
264
+ if (!this._scrollElement) {
265
+ return;
266
+ }
267
+ this.hasScrollableContent = this._scrollElement.isScrollable;
268
+ this.canScrollToStart = this._scrollElement.isScrollable && !this._scrollElement.isAtScrollStart;
269
+ this.canScrollToEnd = this._scrollElement.isScrollable && !this._scrollElement.isAtScrollEnd;
270
270
  }
271
271
  };
272
272
  __decorate([
@@ -333,7 +333,7 @@ TabPanelElement = __decorate([
333
333
  delegatesFocus: true
334
334
  },
335
335
  imports: [
336
- ButtonElement
336
+ ScrollElement
337
337
  ]
338
338
  }),
339
339
  __metadata("design:paramtypes", [])
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanelElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElement.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TabPanelElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElement.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanelElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,eAAe,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAuBvF"}
1
+ {"version":3,"file":"TabPanelElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,eAAe,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAiBvF"}
@@ -1,8 +1,7 @@
1
1
  // #region Imports
2
2
  import { html } from '../../../../Dom/Html';
3
- import { Icons } from '../../../../Resources/Icons';
4
- import { when } from '../../../Directives/Directives';
5
- import { Size } from '../../../Types/Size';
3
+ import { Orientation } from '../../../Types/Orientation';
4
+ import { TabStripPlacement } from '../../../Types/TabStripPlacement';
6
5
  // #endregion
7
6
  /**
8
7
  * The template of the `TabPanelElement`.
@@ -10,27 +9,20 @@ import { Size } from '../../../Types/Size';
10
9
  * @public
11
10
  */
12
11
  export function tabPanelElementTemplate(e) {
12
+ const orientation = e.placement === TabStripPlacement.Left || e.placement === TabStripPlacement.Right
13
+ ? Orientation.Vertical
14
+ : Orientation.Horizontal;
13
15
  return html `
14
- ${when(e.hasScrollableContent, () => html `
15
- <mosaik-button part="startScrollButton"
16
- tabindex="-1"
17
- .size="${Size.Large}"
18
- .icon="${Icons.chevronLeft}"
19
- .disabled="${e.canScrollToStart}"
20
- @click="${() => e.scrollByTabOffset('before')}"></mosaik-button>
21
- `)}
22
- <div part="content"
23
- @scroll="${(x) => e.onScroll(x)}">
16
+ <mosaik-scroll part="scroll"
17
+ exportparts="scroller:content, scrollButtonPrev:startScrollButton, scrollButtonNext:endScrollButton"
18
+ .dir="${e.dir}"
19
+ .lang="${e.lang}"
20
+ .orientation="${orientation}"
21
+ .showScrollButtons="${true}"
22
+ .showScrollbar="${false}"
23
+ @changed="${() => e.onScrollStateChanged()}">
24
24
  <slot></slot>
25
- </div>
26
- ${when(e.hasScrollableContent, () => html `
27
- <mosaik-button part="endScrollButton"
28
- tabindex="-1"
29
- size="large"
30
- .icon="${Icons.chevronRight}"
31
- .disabled="${e.canScrollToEnd}"
32
- @click="${() => e.scrollByTabOffset('after')}"></mosaik-button>
33
- `)}
25
+ </mosaik-scroll>
34
26
  `;
35
27
  }
36
28
  //# sourceMappingURL=TabPanelElementTemplate.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanelElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAG3C,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAA4B,CAAI;IACnE,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;gCAGjB,IAAI,CAAC,KAAK;gCACV,KAAK,CAAC,WAAW;oCACb,CAAC,CAAC,gBAAgB;iCACrB,GAAG,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC;SAC3D,CAAC;;wBAEc,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;;;UAGzC,IAAI,CAAC,CAAC,CAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;gCAIjB,KAAK,CAAC,YAAY;oCACd,CAAC,CAAC,cAAc;iCACnB,GAAG,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC;SAC1D,CAAC;KACL,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"TabPanelElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAA4B,CAAI;IACnE,MAAM,WAAW,GAAG,CAAC,CAAC,SAAS,KAAK,iBAAiB,CAAC,IAAI,IAAI,CAAC,CAAC,SAAS,KAAK,iBAAiB,CAAC,KAAK;QACjG,CAAC,CAAC,WAAW,CAAC,QAAQ;QACtB,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC;IAE7B,OAAO,IAAI,CAAA;;;+BAGgB,CAAC,CAAC,GAAG;gCACJ,CAAC,CAAC,IAAI;uCACC,WAAW;6CACL,IAAI;yCACR,KAAK;mCACX,GAAG,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;;;KAG5D,CAAC;AACN,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TabElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAwOvD"}
1
+ {"version":3,"file":"TabElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CA4OvD"}
@@ -214,6 +214,10 @@ export function tabElementCosmopolitanStyle() {
214
214
  writing-mode: vertical-lr;
215
215
  }
216
216
 
217
+ :host([placement="left"]) [part="root"] [part="tabPanel"] [part="tabStrip"] [part="tabStripItem"]::part(label) {
218
+ transform: rotate(180deg);
219
+ }
220
+
217
221
  :host([placement="right"]) [part="root"] {
218
222
  flex-direction: row-reverse;
219
223
  }
@@ -1 +1 @@
1
- {"version":3,"file":"TabElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsOT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"TabElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0OT,CAAC;AACN,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TabElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,CAwQ9C"}
1
+ {"version":3,"file":"TabElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,CA4Q9C"}
@@ -214,6 +214,10 @@ export function tabElementJoyStyle() {
214
214
  writing-mode: vertical-lr;
215
215
  }
216
216
 
217
+ :host([placement="left"]) [part="root"] [part="tabPanel"] [part="tabStrip"] [part="tabStripItem"]::part(label) {
218
+ transform: rotate(180deg);
219
+ }
220
+
217
221
  :host([placement="right"]) [part="root"] {
218
222
  flex-direction: row-reverse;
219
223
  }
@@ -1 +1 @@
1
- {"version":3,"file":"TabElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,kBAAkB;IAC9B,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsQT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"TabElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,kBAAkB;IAC9B,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0QT,CAAC;AACN,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TabElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAqPlD"}
1
+ {"version":3,"file":"TabElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAyPlD"}
@@ -214,6 +214,10 @@ export function tabElementMemphisStyle() {
214
214
  writing-mode: vertical-lr;
215
215
  }
216
216
 
217
+ :host([placement="left"]) [part="root"] [part="tabPanel"] [part="tabStrip"] [part="tabStripItem"]::part(label) {
218
+ transform: rotate(180deg);
219
+ }
220
+
217
221
  :host([placement="right"]) [part="root"] {
218
222
  flex-direction: row-reverse;
219
223
  }
@@ -1 +1 @@
1
- {"version":3,"file":"TabElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmPT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"TabElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuPT,CAAC;AACN,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanelElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,SAAS,CAyF5D"}
1
+ {"version":3,"file":"TabPanelElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,SAAS,CAqG5D"}