@breadstone/mosaik-elements-foundation 0.1.25 → 0.1.27
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.
- package/Controls/Components/Buttons/SplitButton/SplitButtonElement.d.ts +4 -0
- package/Controls/Components/Buttons/SplitButton/SplitButtonElement.d.ts.map +1 -1
- package/Controls/Components/Buttons/SplitButton/SplitButtonElement.js +9 -0
- package/Controls/Components/Buttons/SplitButton/SplitButtonElement.js.map +1 -1
- package/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.d.ts.map +1 -1
- package/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.js +57 -31
- package/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.js.map +1 -1
- package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Cosmopolitan.js +2 -2
- package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Joy.js +2 -2
- package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Memphis.js +2 -2
- package/Routing/PathToRegexp.d.ts +1 -1
- package/custom-elements.json +12 -0
- package/package.json +3 -3
|
@@ -21,6 +21,7 @@ declare const SplitButtonElement_base: (abstract new (...args: Array<any>) => im
|
|
|
21
21
|
* @slot label - The label slot.
|
|
22
22
|
* @slot overlay - The overlay slot (useful for badge).
|
|
23
23
|
*
|
|
24
|
+
* @csspart ${part} - The ${part} part.
|
|
24
25
|
* @csspart button - The button part of the split button.
|
|
25
26
|
* @csspart buttonSplit - The part of the button responsible for splitting the button from the dropdown.
|
|
26
27
|
* @csspart focusRingMain - The focusRingMain part.
|
|
@@ -30,7 +31,9 @@ declare const SplitButtonElement_base: (abstract new (...args: Array<any>) => im
|
|
|
30
31
|
* @csspart innerStack - The innerStack part.
|
|
31
32
|
* @csspart label - The label part of the split button.
|
|
32
33
|
* @csspart popup - The popup part of the split button.
|
|
34
|
+
* @csspart portal - The portal part.
|
|
33
35
|
* @csspart progressRing - The progress ring part of the split button.
|
|
36
|
+
* @csspart projection - The projection part.
|
|
34
37
|
* @csspart rippleMain - The rippleMain part.
|
|
35
38
|
* @csspart rippleSplit - The rippleSplit part.
|
|
36
39
|
*
|
|
@@ -81,6 +84,7 @@ declare const SplitButtonElement_base: (abstract new (...args: Array<any>) => im
|
|
|
81
84
|
* @dependency {FloatingElement} mosaik-floating - The Floating component, used for floating behavior.
|
|
82
85
|
* @dependency {FocusRingElement} mosaik-focus-ring - The Focus Ring component, used for focus indication.
|
|
83
86
|
* @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the icon.
|
|
87
|
+
* @dependency mosaik-portal - The Portal element.
|
|
84
88
|
* @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for progress indication.
|
|
85
89
|
* @dependency {RippleElement} mosaik-ripple - The Ripple component, used for the ripple effect.
|
|
86
90
|
* @dependency {StackElement} mosaik-stack - The Stack component, used for layout management.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAoBnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;;AAQ3E
|
|
1
|
+
{"version":3,"file":"SplitButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAoBnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;;AAQ3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+GG;AACH,qBAwBa,kBACT,SAAQ,uBACR,YAAW,wBAAwB,EAAE,aAAa;IAIlD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAyB;IACjE,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAuB;IAM7D;;OAEG;;IA0BH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAMD;;OAEG;IAEH,SAAS,CAAC,+BAA+B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAgBhF,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAOjE,OAAO,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IASnC;;OAEG;IACH,OAAO,CAAC,gBAAgB;CAM3B;AAED;;GAEG;AACH,yBAAiB,kBAAkB,CAAC;IAChC,KAAY,KAAK,GAAG,wBAAwB,CAAC;CAChD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,kBAAkB,CAAC;KAC7C;CACJ"}
|
|
@@ -56,6 +56,7 @@ import { splitButtonElementMemphisStyle } from './Themes/SplitButtonElement.Memp
|
|
|
56
56
|
* @slot label - The label slot.
|
|
57
57
|
* @slot overlay - The overlay slot (useful for badge).
|
|
58
58
|
*
|
|
59
|
+
* @csspart ${part} - The ${part} part.
|
|
59
60
|
* @csspart button - The button part of the split button.
|
|
60
61
|
* @csspart buttonSplit - The part of the button responsible for splitting the button from the dropdown.
|
|
61
62
|
* @csspart focusRingMain - The focusRingMain part.
|
|
@@ -65,7 +66,9 @@ import { splitButtonElementMemphisStyle } from './Themes/SplitButtonElement.Memp
|
|
|
65
66
|
* @csspart innerStack - The innerStack part.
|
|
66
67
|
* @csspart label - The label part of the split button.
|
|
67
68
|
* @csspart popup - The popup part of the split button.
|
|
69
|
+
* @csspart portal - The portal part.
|
|
68
70
|
* @csspart progressRing - The progress ring part of the split button.
|
|
71
|
+
* @csspart projection - The projection part.
|
|
69
72
|
* @csspart rippleMain - The rippleMain part.
|
|
70
73
|
* @csspart rippleSplit - The rippleSplit part.
|
|
71
74
|
*
|
|
@@ -116,6 +119,7 @@ import { splitButtonElementMemphisStyle } from './Themes/SplitButtonElement.Memp
|
|
|
116
119
|
* @dependency {FloatingElement} mosaik-floating - The Floating component, used for floating behavior.
|
|
117
120
|
* @dependency {FocusRingElement} mosaik-focus-ring - The Focus Ring component, used for focus indication.
|
|
118
121
|
* @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the icon.
|
|
122
|
+
* @dependency mosaik-portal - The Portal element.
|
|
119
123
|
* @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for progress indication.
|
|
120
124
|
* @dependency {RippleElement} mosaik-ripple - The Ripple component, used for the ripple effect.
|
|
121
125
|
* @dependency {StackElement} mosaik-stack - The Stack component, used for layout management.
|
|
@@ -169,6 +173,7 @@ let SplitButtonElement = SplitButtonElement_1 = class SplitButtonElement extends
|
|
|
169
173
|
});
|
|
170
174
|
// REMARK: This is a workaround for the issue with the docs generation.
|
|
171
175
|
Object.assign(this, { dropDownMaxHeight: 'auto' });
|
|
176
|
+
this.addEventListener('activated', () => this.close());
|
|
172
177
|
}
|
|
173
178
|
// #endregion
|
|
174
179
|
// #region Properties
|
|
@@ -209,6 +214,10 @@ let SplitButtonElement = SplitButtonElement_1 = class SplitButtonElement extends
|
|
|
209
214
|
}
|
|
210
215
|
}
|
|
211
216
|
onSplit(e) {
|
|
217
|
+
if (this.disabled) {
|
|
218
|
+
e.preventDefault();
|
|
219
|
+
return;
|
|
220
|
+
}
|
|
212
221
|
this.toggle();
|
|
213
222
|
}
|
|
214
223
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitButtonElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;;AAElB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAsB,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,mCAAmC,EAAE,MAAM,0CAA0C,CAAC;AAC/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,aAAa;AAEb
|
|
1
|
+
{"version":3,"file":"SplitButtonElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;;AAElB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAsB,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,mCAAmC,EAAE,MAAM,0CAA0C,CAAC;AAC/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+GG;AAyBI,IAAM,kBAAkB,0BAAxB,MAAM,kBACT,SAAQ,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAGpI,iBAAiB;IAEA,uBAAuB,CAAyB;IAChD,qBAAqB,CAAuB;IAE7D,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,uBAAuB,GAAG,IAAI,sBAAsB,CAAC,IAAI,EAAE;YAC5D,WAAW,EAAE,IAAI;YACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;SAC1C,CAAC,CAAC;QACH,IAAI,CAAC,qBAAqB,GAAG,IAAI,oBAAoB,CAAC,IAAI,EAAE;YACxD,QAAQ,EAAE,EAAE;YACZ,cAAc,EAAE,qBAAqB;YACrC,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE;gBACpB,OAAO,CAAC,YAAY,CAAC,GAAG,oBAAkB,CAAC,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC;YACpE,CAAC;SACJ,CAAC,CAAC;QAEH,uEAAuE;QACvE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,CAAC;QAEnD,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,qBAAqB,CAAC;IACjC,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;OAEG;IAEO,+BAA+B,CAAC,KAAe,EAAE,IAAc;QACrE,sCAAsC;QACtC,IAAI,IAAI,EAAE,CAAC;YACP,2BAA2B;YAC3B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YAED,IAAI,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,uBAAuB,CAAC,SAAS,EAAE,CAAC;QAC7C,CAAC;IACL,CAAC;IAGS,uBAAuB,CAAC,KAAe,EAAE,IAAc;QAC7D,2BAA2B;QAC3B,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAChC,CAAC;IACL,CAAC;IAEM,OAAO,CAAC,CAAa;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAED;;OAEG;IACK,gBAAgB;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC;CAIJ,CAAA;AAzCa;IADT,KAAK,CAAC,gBAAgB,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;;;;yEAcvD;AAGS;IADT,KAAK,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;;;;iEAM/C;AAlFQ,kBAAkB;IAxB9B,SAAS,CAAC;QACP,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,0BAA0B;QACpC,MAAM,EAAE;YACJ,GAAG,EAAE,0BAA0B;YAC/B,OAAO,EAAE,8BAA8B;YACvC,YAAY,EAAE,mCAAmC;SACpD;QACD,OAAO,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,cAAc,EAAE,IAAI;SACvB;QACD,OAAO,EAAE;YACL,YAAY;YACZ,WAAW;YACX,aAAa;YACb,gBAAgB;YAChB,WAAW;YACX,mBAAmB;YACnB,eAAe;YACf,WAAW;YACX,aAAa;SAChB;KACJ,CAAC;;GACW,kBAAkB,CAsG9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitButtonElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SplitButtonElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAOjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAO/D;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,kBAAkB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAwH7F"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
// #region Imports
|
|
2
|
+
import { stop } from '@breadstone/mosaik-elements';
|
|
2
3
|
import { html } from '../../../../Dom/Html';
|
|
3
4
|
import { Icons } from '../../../../Resources/Icons';
|
|
4
5
|
import { when } from '../../../Directives/Directives';
|
|
@@ -6,7 +7,6 @@ import { Appearance } from '../../../Types/Appearance';
|
|
|
6
7
|
import { IconPosition } from '../../../Types/IconPosition';
|
|
7
8
|
import { Placement } from '../../../Types/Placement';
|
|
8
9
|
import { Size } from '../../../Types/Size';
|
|
9
|
-
// #endregion
|
|
10
10
|
/**
|
|
11
11
|
* The template of the `SplitButtonElement`.
|
|
12
12
|
*
|
|
@@ -14,18 +14,20 @@ import { Size } from '../../../Types/Size';
|
|
|
14
14
|
*/
|
|
15
15
|
export function splitButtonElementTemplate(e) {
|
|
16
16
|
return html `
|
|
17
|
-
${when(!e.disabled, () => html `
|
|
18
|
-
<mosaik-focus-ring part="focusRingMain"
|
|
19
|
-
.lang="${e.lang}"
|
|
20
|
-
.dir="${e.dir}"
|
|
21
|
-
.variant="${e.variant}"
|
|
22
|
-
.visible="${e.isFocused}"
|
|
23
|
-
.controlled="${'manual'}"
|
|
24
|
-
.for="${'button'}"></mosaik-focus-ring>
|
|
25
|
-
`)}
|
|
26
17
|
<button id="button"
|
|
27
18
|
part="button"
|
|
28
|
-
type="${e.type}"
|
|
19
|
+
type="${e.type}"
|
|
20
|
+
@focusin="${(x) => showFocusRing(x, 'focusRingMain', 'focusRingSplit')}"
|
|
21
|
+
@focusout="${(x) => hideFocusRing(x, 'focusRingMain')}"
|
|
22
|
+
@click="${() => e.close()}">
|
|
23
|
+
${when(!e.disabled, () => html `
|
|
24
|
+
<mosaik-focus-ring part="focusRingMain"
|
|
25
|
+
.lang="${e.lang}"
|
|
26
|
+
.dir="${e.dir}"
|
|
27
|
+
.variant="${e.variant}"
|
|
28
|
+
.controlled="${'manual'}"
|
|
29
|
+
.for="${'button'}"></mosaik-focus-ring>
|
|
30
|
+
`)}
|
|
29
31
|
${when(!e.disabled && e.ripple, () => html `
|
|
30
32
|
<mosaik-ripple part="rippleMain"
|
|
31
33
|
.lang="${e.lang}"
|
|
@@ -77,12 +79,16 @@ export function splitButtonElementTemplate(e) {
|
|
|
77
79
|
<button part="buttonSplit"
|
|
78
80
|
id="button_split"
|
|
79
81
|
type="button"
|
|
80
|
-
|
|
82
|
+
?disabled="${e.disabled}"
|
|
83
|
+
@focusin="${(x) => showFocusRing(x, 'focusRingSplit', 'focusRingMain')}"
|
|
84
|
+
@focusout="${(x) => hideFocusRing(x, 'focusRingSplit')}"
|
|
85
|
+
@click="${(x) => stop(x, () => e.onSplit(x))}">
|
|
81
86
|
${when(!e.disabled, () => html `
|
|
82
87
|
<mosaik-focus-ring part="focusRingSplit"
|
|
83
88
|
.lang="${e.lang}"
|
|
84
89
|
.dir="${e.dir}"
|
|
85
90
|
.variant="${e.variant}"
|
|
91
|
+
.controlled="${'manual'}"
|
|
86
92
|
.for="${'button_split'}"></mosaik-focus-ring>
|
|
87
93
|
`)}
|
|
88
94
|
${when(!e.disabled && e.ripple, () => html `
|
|
@@ -103,25 +109,45 @@ export function splitButtonElementTemplate(e) {
|
|
|
103
109
|
?disabled="${e.disabled}"></mosaik-icon>
|
|
104
110
|
</button>
|
|
105
111
|
<slot name="overlay"></slot>
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
112
|
+
<slot></slot>
|
|
113
|
+
<mosaik-portal part="portal">
|
|
114
|
+
<mosaik-floating part="popup"
|
|
115
|
+
.lang="${e.lang}"
|
|
116
|
+
.dir="${e.dir}"
|
|
117
|
+
.anchor="${getSplitAnchor(e)}"
|
|
118
|
+
.placement="${e.dropDownPlacement}"
|
|
119
|
+
.distance="${e.dropDownDistance}"
|
|
120
|
+
.skidding="${e.dropDownSkidding}"
|
|
121
|
+
.strategy="${e.dropDownStrategy}"
|
|
122
|
+
.maxHeight="${e.dropDownMaxHeight}"
|
|
123
|
+
.height="${e.dropDownHeight}"
|
|
124
|
+
.maxWidth="${e.dropDownMaxWidth}"
|
|
125
|
+
.width="${e.dropDownWidth}"
|
|
126
|
+
.flipFallbackPlacements="${[Placement.Top, Placement.Bottom, Placement.Left, Placement.Right]}"
|
|
127
|
+
.sync="${'none'}"
|
|
128
|
+
?flip="${true}"
|
|
129
|
+
?shift="${true}"
|
|
130
|
+
?active="${e.isDropDownOpen}">
|
|
131
|
+
<div part="projection"></div>
|
|
132
|
+
</mosaik-floating>
|
|
133
|
+
</mosaik-portal>
|
|
125
134
|
`;
|
|
126
135
|
}
|
|
136
|
+
function getSplitAnchor(element) {
|
|
137
|
+
return element.shadowRoot?.getElementById('button_split') ?? element;
|
|
138
|
+
}
|
|
139
|
+
function showFocusRing(event, focusedPart, blurredPart) {
|
|
140
|
+
setFocusRingVisible(event, focusedPart, true);
|
|
141
|
+
setFocusRingVisible(event, blurredPart, false);
|
|
142
|
+
}
|
|
143
|
+
function hideFocusRing(event, part) {
|
|
144
|
+
setFocusRingVisible(event, part, false);
|
|
145
|
+
}
|
|
146
|
+
function setFocusRingVisible(event, part, visible) {
|
|
147
|
+
const root = event.currentTarget.getRootNode();
|
|
148
|
+
const focusRing = root.querySelector(`[part="${part}"]`);
|
|
149
|
+
if (focusRing) {
|
|
150
|
+
focusRing.visible = visible;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
127
153
|
//# sourceMappingURL=SplitButtonElementTemplate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitButtonElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.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,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"SplitButtonElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.ts"],"names":[],"mappings":"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"}
|
|
@@ -192,7 +192,7 @@ export function splitButtonElementCosmopolitanStyle() {
|
|
|
192
192
|
text-decoration: none;
|
|
193
193
|
display: flex;
|
|
194
194
|
position: relative;
|
|
195
|
-
overflow:
|
|
195
|
+
overflow: visible;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
:host [part="button"] [part="icon"] {
|
|
@@ -266,7 +266,7 @@ export function splitButtonElementCosmopolitanStyle() {
|
|
|
266
266
|
margin: 0;
|
|
267
267
|
display: flex;
|
|
268
268
|
position: relative;
|
|
269
|
-
overflow:
|
|
269
|
+
overflow: visible;
|
|
270
270
|
}
|
|
271
271
|
|
|
272
272
|
:host [part="buttonSplit"] [part="iconCaret"] {
|
|
@@ -192,7 +192,7 @@ export function splitButtonElementJoyStyle() {
|
|
|
192
192
|
text-decoration: none;
|
|
193
193
|
display: flex;
|
|
194
194
|
position: relative;
|
|
195
|
-
overflow:
|
|
195
|
+
overflow: visible;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
:host [part="button"] [part="icon"] {
|
|
@@ -266,7 +266,7 @@ export function splitButtonElementJoyStyle() {
|
|
|
266
266
|
margin: 0;
|
|
267
267
|
display: flex;
|
|
268
268
|
position: relative;
|
|
269
|
-
overflow:
|
|
269
|
+
overflow: visible;
|
|
270
270
|
}
|
|
271
271
|
|
|
272
272
|
:host [part="buttonSplit"] [part="iconCaret"] {
|
|
@@ -192,7 +192,7 @@ export function splitButtonElementMemphisStyle() {
|
|
|
192
192
|
text-decoration: none;
|
|
193
193
|
display: flex;
|
|
194
194
|
position: relative;
|
|
195
|
-
overflow:
|
|
195
|
+
overflow: visible;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
:host [part="button"] [part="icon"] {
|
|
@@ -266,7 +266,7 @@ export function splitButtonElementMemphisStyle() {
|
|
|
266
266
|
margin: 0;
|
|
267
267
|
display: flex;
|
|
268
268
|
position: relative;
|
|
269
|
-
overflow:
|
|
269
|
+
overflow: visible;
|
|
270
270
|
}
|
|
271
271
|
|
|
272
272
|
:host [part="buttonSplit"] [part="iconCaret"] {
|
|
@@ -91,7 +91,7 @@ export interface Options {
|
|
|
91
91
|
*/
|
|
92
92
|
encode?: (value: string) => string;
|
|
93
93
|
}
|
|
94
|
-
export declare function modifierToString(modifier: Modifier): "" | "*" | "
|
|
94
|
+
export declare function modifierToString(modifier: Modifier): "" | "*" | "?" | "+";
|
|
95
95
|
/**
|
|
96
96
|
* Expose a function for taking tokens and returning a RegExp.
|
|
97
97
|
*/
|
package/custom-elements.json
CHANGED
|
@@ -9964,6 +9964,10 @@
|
|
|
9964
9964
|
}
|
|
9965
9965
|
],
|
|
9966
9966
|
"cssParts": [
|
|
9967
|
+
{
|
|
9968
|
+
"name": "${part}",
|
|
9969
|
+
"description": "The ${part} part."
|
|
9970
|
+
},
|
|
9967
9971
|
{
|
|
9968
9972
|
"name": "button",
|
|
9969
9973
|
"description": "The button part of the split button."
|
|
@@ -10000,10 +10004,18 @@
|
|
|
10000
10004
|
"name": "popup",
|
|
10001
10005
|
"description": "The popup part of the split button."
|
|
10002
10006
|
},
|
|
10007
|
+
{
|
|
10008
|
+
"name": "portal",
|
|
10009
|
+
"description": "The portal part."
|
|
10010
|
+
},
|
|
10003
10011
|
{
|
|
10004
10012
|
"name": "progressRing",
|
|
10005
10013
|
"description": "The progress ring part of the split button."
|
|
10006
10014
|
},
|
|
10015
|
+
{
|
|
10016
|
+
"name": "projection",
|
|
10017
|
+
"description": "The projection part."
|
|
10018
|
+
},
|
|
10007
10019
|
{
|
|
10008
10020
|
"name": "rippleMain",
|
|
10009
10021
|
"description": "The rippleMain part."
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@breadstone/mosaik-elements-foundation",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.27",
|
|
4
4
|
"description": "Mosaik elements components package.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@breadstone/mosaik-elements": "0.1.
|
|
18
|
-
"@breadstone/mosaik-themes": "0.1.
|
|
17
|
+
"@breadstone/mosaik-elements": "0.1.27",
|
|
18
|
+
"@breadstone/mosaik-themes": "0.1.27",
|
|
19
19
|
"tslib": "2.8.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|