@nectary/components 5.25.0 → 5.26.0
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/bundle.js +1 -1
- package/package.json +3 -3
- package/select-button/index.js +1 -1
- package/select-button/types.d.ts +15 -0
package/bundle.js
CHANGED
|
@@ -11786,7 +11786,7 @@ class SegmentedIconControl extends NectaryElement {
|
|
|
11786
11786
|
};
|
|
11787
11787
|
}
|
|
11788
11788
|
defineCustomElement("sinch-segmented-icon-control", SegmentedIconControl);
|
|
11789
|
-
const templateHTML$h = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:
|
|
11789
|
+
const templateHTML$h = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--sinch-local-gap);box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 var(--sinch-local-padding-end) 0 var(--sinch-local-padding-start);background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-local-padding-start:var(--sinch-comp-select-button-spacing-padding-left-m, 12px);--sinch-local-padding-end:var(--sinch-comp-select-button-spacing-padding-right-m, 8px);--sinch-local-gap:var(--sinch-comp-select-button-spacing-gap-m, 8px);--sinch-local-left-slot-gap:var(--sinch-comp-select-button-spacing-left-slot-gap-m, 4px);--sinch-local-left-slot-offset:var(--sinch-comp-select-button-spacing-left-slot-offset-m, -4px);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-local-padding-start:var(--sinch-comp-select-button-spacing-padding-left-l, 12px);--sinch-local-padding-end:var(--sinch-comp-select-button-spacing-padding-right-l, 12px);--sinch-local-gap:var(--sinch-comp-select-button-spacing-gap-l, 8px);--sinch-local-left-slot-gap:var(--sinch-comp-select-button-spacing-left-slot-gap-l, 4px);--sinch-local-left-slot-offset:var(--sinch-comp-select-button-spacing-left-slot-offset-l, -4px);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-local-padding-start:var(--sinch-comp-select-button-spacing-padding-left-m, 12px);--sinch-local-padding-end:var(--sinch-comp-select-button-spacing-padding-right-m, 8px);--sinch-local-gap:var(--sinch-comp-select-button-spacing-gap-m, 8px);--sinch-local-left-slot-gap:var(--sinch-comp-select-button-spacing-left-slot-gap-m, 4px);--sinch-local-left-slot-offset:var(--sinch-comp-select-button-spacing-left-slot-offset-m, -4px);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-local-padding-start:var(--sinch-comp-select-button-spacing-padding-left-s, 12px);--sinch-local-padding-end:var(--sinch-comp-select-button-spacing-padding-right-s, 4px);--sinch-local-gap:var(--sinch-comp-select-button-spacing-gap-s, 8px);--sinch-local-left-slot-gap:var(--sinch-comp-select-button-spacing-left-slot-gap-s, 4px);--sinch-local-left-slot-offset:var(--sinch-comp-select-button-spacing-left-slot-offset-s, -4px);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:var(--sinch-local-left-slot-gap);margin-left:var(--sinch-local-left-slot-offset)}#left.empty{display:none}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-angle-down" id="dropdown-icon"></sinch-icon></div>';
|
|
11790
11790
|
const template$h = document.createElement("template");
|
|
11791
11791
|
template$h.innerHTML = templateHTML$h;
|
|
11792
11792
|
class SelectButton extends NectaryElement {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nectary/components",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.26.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"**/*/*.css",
|
|
6
6
|
"**/*/*.json",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.22.15",
|
|
27
|
-
"@nectary/assets": "3.6.
|
|
27
|
+
"@nectary/assets": "3.6.5"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@babel/cli": "^7.22.15",
|
|
@@ -40,6 +40,6 @@
|
|
|
40
40
|
"vite": "^7.0.6"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"@nectary/theme-base": "1.
|
|
43
|
+
"@nectary/theme-base": "1.14.0"
|
|
44
44
|
}
|
|
45
45
|
}
|
package/select-button/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { isAttrEqual, updateAttribute, isAttrTrue, updateBooleanAttribute, getAt
|
|
|
5
5
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
6
6
|
import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
7
7
|
import { sizeValues, DEFAULT_SIZE } from "../utils/size.js";
|
|
8
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:
|
|
8
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--sinch-local-gap);box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 var(--sinch-local-padding-end) 0 var(--sinch-local-padding-start);background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-local-padding-start:var(--sinch-comp-select-button-spacing-padding-left-m, 12px);--sinch-local-padding-end:var(--sinch-comp-select-button-spacing-padding-right-m, 8px);--sinch-local-gap:var(--sinch-comp-select-button-spacing-gap-m, 8px);--sinch-local-left-slot-gap:var(--sinch-comp-select-button-spacing-left-slot-gap-m, 4px);--sinch-local-left-slot-offset:var(--sinch-comp-select-button-spacing-left-slot-offset-m, -4px);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-local-padding-start:var(--sinch-comp-select-button-spacing-padding-left-l, 12px);--sinch-local-padding-end:var(--sinch-comp-select-button-spacing-padding-right-l, 12px);--sinch-local-gap:var(--sinch-comp-select-button-spacing-gap-l, 8px);--sinch-local-left-slot-gap:var(--sinch-comp-select-button-spacing-left-slot-gap-l, 4px);--sinch-local-left-slot-offset:var(--sinch-comp-select-button-spacing-left-slot-offset-l, -4px);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-local-padding-start:var(--sinch-comp-select-button-spacing-padding-left-m, 12px);--sinch-local-padding-end:var(--sinch-comp-select-button-spacing-padding-right-m, 8px);--sinch-local-gap:var(--sinch-comp-select-button-spacing-gap-m, 8px);--sinch-local-left-slot-gap:var(--sinch-comp-select-button-spacing-left-slot-gap-m, 4px);--sinch-local-left-slot-offset:var(--sinch-comp-select-button-spacing-left-slot-offset-m, -4px);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-local-padding-start:var(--sinch-comp-select-button-spacing-padding-left-s, 12px);--sinch-local-padding-end:var(--sinch-comp-select-button-spacing-padding-right-s, 4px);--sinch-local-gap:var(--sinch-comp-select-button-spacing-gap-s, 8px);--sinch-local-left-slot-gap:var(--sinch-comp-select-button-spacing-left-slot-gap-s, 4px);--sinch-local-left-slot-offset:var(--sinch-comp-select-button-spacing-left-slot-offset-s, -4px);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:var(--sinch-local-left-slot-gap);margin-left:var(--sinch-local-left-slot-offset)}#left.empty{display:none}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-angle-down" id="dropdown-icon"></sinch-icon></div>';
|
|
9
9
|
const template = document.createElement("template");
|
|
10
10
|
template.innerHTML = templateHTML;
|
|
11
11
|
class SelectButton extends NectaryElement {
|
package/select-button/types.d.ts
CHANGED
|
@@ -26,12 +26,27 @@ export type TSinchSelectButtonStyle = {
|
|
|
26
26
|
'--sinch-comp-select-button-size-container-l'?: string;
|
|
27
27
|
'--sinch-comp-select-button-size-icon-l'?: string;
|
|
28
28
|
'--sinch-comp-select-button-shape-radius-size-l'?: string;
|
|
29
|
+
'--sinch-comp-select-button-spacing-gap-l'?: string;
|
|
30
|
+
'--sinch-comp-select-button-spacing-left-slot-gap-l'?: string;
|
|
31
|
+
'--sinch-comp-select-button-spacing-left-slot-offset-l'?: string;
|
|
32
|
+
'--sinch-comp-select-button-spacing-padding-left-l'?: string;
|
|
33
|
+
'--sinch-comp-select-button-spacing-padding-right-l'?: string;
|
|
29
34
|
'--sinch-comp-select-button-size-container-m'?: string;
|
|
30
35
|
'--sinch-comp-select-button-size-icon-m'?: string;
|
|
31
36
|
'--sinch-comp-select-button-shape-radius-size-m'?: string;
|
|
37
|
+
'--sinch-comp-select-button-spacing-gap-m'?: string;
|
|
38
|
+
'--sinch-comp-select-button-spacing-left-slot-gap-m'?: string;
|
|
39
|
+
'--sinch-comp-select-button-spacing-left-slot-offset-m'?: string;
|
|
40
|
+
'--sinch-comp-select-button-spacing-padding-left-m'?: string;
|
|
41
|
+
'--sinch-comp-select-button-spacing-padding-right-m'?: string;
|
|
32
42
|
'--sinch-comp-select-button-size-container-s'?: string;
|
|
33
43
|
'--sinch-comp-select-button-size-icon-s'?: string;
|
|
34
44
|
'--sinch-comp-select-button-shape-radius-size-s'?: string;
|
|
45
|
+
'--sinch-comp-select-button-spacing-gap-s'?: string;
|
|
46
|
+
'--sinch-comp-select-button-spacing-left-slot-gap-s'?: string;
|
|
47
|
+
'--sinch-comp-select-button-spacing-left-slot-offset-s'?: string;
|
|
48
|
+
'--sinch-comp-select-button-spacing-padding-left-s'?: string;
|
|
49
|
+
'--sinch-comp-select-button-spacing-padding-right-s'?: string;
|
|
35
50
|
'--sinch-comp-select-button-color-default-background-initial'?: string;
|
|
36
51
|
'--sinch-comp-select-button-color-default-icon-initial'?: string;
|
|
37
52
|
'--sinch-comp-select-button-color-default-text-initial'?: string;
|