@semcore/base-trigger 4.53.0-prerelease.0 → 4.53.1-prerelease.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.
Files changed (42) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/BaseTrigger.js +21 -19
  3. package/lib/cjs/BaseTrigger.js.map +1 -1
  4. package/lib/cjs/ButtonTrigger.js +6 -4
  5. package/lib/cjs/ButtonTrigger.js.map +1 -1
  6. package/lib/cjs/FilterTrigger.js +10 -8
  7. package/lib/cjs/FilterTrigger.js.map +1 -1
  8. package/lib/cjs/LinkTrigger.js +15 -13
  9. package/lib/cjs/LinkTrigger.js.map +1 -1
  10. package/lib/es6/BaseTrigger.js +21 -19
  11. package/lib/es6/BaseTrigger.js.map +1 -1
  12. package/lib/es6/ButtonTrigger.js +6 -4
  13. package/lib/es6/ButtonTrigger.js.map +1 -1
  14. package/lib/es6/FilterTrigger.js +10 -8
  15. package/lib/es6/FilterTrigger.js.map +1 -1
  16. package/lib/es6/LinkTrigger.js +15 -13
  17. package/lib/es6/LinkTrigger.js.map +1 -1
  18. package/lib/esm/BaseTrigger.mjs +98 -83
  19. package/lib/esm/ButtonTrigger.mjs +57 -48
  20. package/lib/esm/FilterTrigger.mjs +176 -150
  21. package/lib/esm/LinkTrigger.mjs +83 -70
  22. package/lib/esm/index.mjs +8 -8
  23. package/lib/esm/style/base-trigger.shadow.css +185 -0
  24. package/lib/esm/style/button-trigger.shadow.css +8 -0
  25. package/lib/esm/style/filter-trigger.shadow.css +30 -0
  26. package/lib/esm/style/link-trigger.shadow.css +104 -0
  27. package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +30 -30
  28. package/lib/esm/translations/de.json.mjs +8 -6
  29. package/lib/esm/translations/en.json.mjs +8 -6
  30. package/lib/esm/translations/es.json.mjs +8 -6
  31. package/lib/esm/translations/fr.json.mjs +8 -6
  32. package/lib/esm/translations/it.json.mjs +8 -6
  33. package/lib/esm/translations/ja.json.mjs +8 -6
  34. package/lib/esm/translations/ko.json.mjs +8 -6
  35. package/lib/esm/translations/nl.json.mjs +8 -6
  36. package/lib/esm/translations/pl.json.mjs +8 -6
  37. package/lib/esm/translations/pt.json.mjs +8 -6
  38. package/lib/esm/translations/sv.json.mjs +8 -6
  39. package/lib/esm/translations/tr.json.mjs +8 -6
  40. package/lib/esm/translations/vi.json.mjs +8 -6
  41. package/lib/esm/translations/zh.json.mjs +8 -6
  42. package/package.json +9 -9
@@ -0,0 +1,185 @@
1
+ SBaseTrigger {
2
+ display: inline-block;
3
+ align-items: center;
4
+ justify-content: center;
5
+ line-height: normal;
6
+ position: relative;
7
+ touch-action: manipulation;
8
+ white-space: nowrap;
9
+ user-select: none;
10
+ box-sizing: border-box;
11
+ padding: 0;
12
+ margin: 0;
13
+ box-shadow: none;
14
+ text-decoration: none;
15
+ -webkit-tap-highlight-color: transparent;
16
+ overflow: visible;
17
+ outline: 0;
18
+ text-align: center;
19
+ vertical-align: middle;
20
+ font-family: inherit;
21
+ cursor: pointer;
22
+
23
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
24
+
25
+ font-weight: var(--intergalactic-regular, 400);
26
+ border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
27
+ color: var(--intergalactic-text-primary, #191b23);
28
+
29
+ &::-moz-focus-inner {
30
+ border: none;
31
+ padding: 0;
32
+ }
33
+
34
+ &:active,
35
+ &:hover,
36
+ &:focus {
37
+ outline: 0;
38
+ text-decoration: none;
39
+ }
40
+
41
+ &[keyboardFocused] {
42
+ border: 1px solid var(--intergalactic-border-info-active, #006dca);
43
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
44
+ z-index: 1;
45
+ }
46
+
47
+ &:hover {
48
+ background-color: var(--intergalactic-bg-primary-neutral-hover, #f4f5f9);
49
+ }
50
+
51
+ &:active,
52
+ &[active] {
53
+ border-color: var(--intergalactic-border-info-active, #006dca);
54
+ background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
55
+ }
56
+ }
57
+
58
+ SBaseTrigger[disabled] {
59
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
60
+ cursor: default;
61
+ /* Disable link interactions */
62
+ pointer-events: none;
63
+ }
64
+
65
+ SInner {
66
+ display: inline-flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ height: 100%;
70
+ width: 100%;
71
+ }
72
+
73
+ SText {
74
+ display: inline;
75
+ /* disable-tokens-validator */
76
+ padding: 1px 0;
77
+ overflow: hidden;
78
+ white-space: nowrap;
79
+ text-overflow: ellipsis;
80
+ line-height: var(--intergalactic-lh-200, 142%);
81
+ flex-grow: 1;
82
+ text-align: left;
83
+ }
84
+
85
+ SAddon {
86
+ display: inline-flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ flex-shrink: 0;
90
+ pointer-events: none;
91
+ }
92
+
93
+ SBaseAddon {
94
+ width: 12px;
95
+ height: 12px;
96
+ }
97
+
98
+ SBaseTrigger[size='m'] {
99
+ min-width: 26px;
100
+ height: 28px;
101
+ border-radius: var(--intergalactic-control-rounded, 6px);
102
+ padding: 0 var(--intergalactic-spacing-2x, 8px);
103
+ font-size: var(--intergalactic-fs-200, 14px);
104
+
105
+ & SAddon {
106
+ &:not(:only-child):first-child {
107
+ margin-right: var(--intergalactic-spacing-2x, 8px);
108
+ }
109
+
110
+ &:not(:only-child):last-child {
111
+ margin-left: var(--intergalactic-spacing-2x, 8px);
112
+ }
113
+
114
+ &:only-child {
115
+ margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
116
+ margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
117
+ }
118
+ }
119
+ }
120
+
121
+ SBaseTrigger[size='l'] {
122
+ min-width: 32px;
123
+ height: 40px;
124
+ border-radius: var(--intergalactic-control-rounded, 6px);
125
+ padding: 0 var(--intergalactic-spacing-3x, 12px);
126
+ font-size: var(--intergalactic-fs-300, 16px);
127
+
128
+ & SAddon {
129
+ &:not(:only-child):first-child {
130
+ margin-right: var(--intergalactic-spacing-2x, 8px);
131
+ }
132
+
133
+ &:not(:only-child):last-child {
134
+ margin-left: var(--intergalactic-spacing-2x, 8px);
135
+ }
136
+
137
+ &:only-child {
138
+ margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
139
+ margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
140
+ }
141
+ }
142
+ }
143
+
144
+ SBaseTrigger[neighborLocation='right'] {
145
+ border-top-right-radius: 0;
146
+ border-bottom-right-radius: 0;
147
+ }
148
+
149
+ SBaseTrigger[neighborLocation='both'] {
150
+ border-radius: 0;
151
+ /* disable-tokens-validator */
152
+ margin-left: -1px;
153
+ }
154
+
155
+ SBaseTrigger[neighborLocation='left'] {
156
+ border-top-left-radius: 0;
157
+ border-bottom-left-radius: 0;
158
+ /* disable-tokens-validator */
159
+ margin-left: -1px;
160
+ }
161
+
162
+ SText[display-placeholder] {
163
+ color: var(--intergalactic-text-placeholder, #8a8e9b);
164
+ }
165
+
166
+ SBaseTrigger[state='valid'] {
167
+ border-color: var(--intergalactic-border-success-active, #007c65);
168
+ }
169
+
170
+ SBaseTrigger[state='invalid'] {
171
+ border-color: var(--intergalactic-border-critical-active, #d1002f);
172
+
173
+ &[keyboardFocused] {
174
+ border-color: var(--intergalactic-border-critical-active, #d1002f);
175
+ box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5));
176
+ }
177
+ }
178
+
179
+ SInvalidPattern[size='m'] {
180
+ margin-left: calc(-1 * var(--intergalactic-spacing-2x, 8px));
181
+ }
182
+
183
+ SInvalidPattern[size='l'] {
184
+ margin-left: calc(-1 * var(--intergalactic-spacing-3x, 12px));
185
+ }
@@ -0,0 +1,8 @@
1
+ SButtonAddon {
2
+ width: 12px;
3
+ height: 12px;
4
+ }
5
+
6
+ SButtonTriggerSpin {
7
+ fill: var(--intergalactic-icon-primary-neutral, #6c6e79);
8
+ }
@@ -0,0 +1,30 @@
1
+ SFilterTrigger[selected] {
2
+ border-color: var(--intergalactic-border-info-active, #006dca);
3
+ background-color: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
4
+ color: var(--intergalactic-text-primary, #191b23);
5
+
6
+ &:hover {
7
+ background-color: var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2));
8
+ }
9
+
10
+ &:active,
11
+ &[active] {
12
+ background-color: var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3));
13
+ }
14
+ }
15
+
16
+ SWrapper {
17
+ display: inline-flex;
18
+
19
+ &:focus {
20
+ outline: none;
21
+ }
22
+ }
23
+
24
+ SWrapper[keyboardFocused]:focus {
25
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
26
+ }
27
+
28
+ SCounter {
29
+ background-color: var(--intergalactic-bg-primary-info, #008ff8);
30
+ }
@@ -0,0 +1,104 @@
1
+ SLinkTrigger {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ line-height: normal;
5
+ position: relative;
6
+ touch-action: manipulation;
7
+ white-space: nowrap;
8
+ user-select: none;
9
+ box-sizing: border-box;
10
+ padding: 0;
11
+ margin: 0;
12
+ text-decoration: none;
13
+ -webkit-tap-highlight-color: transparent;
14
+ overflow: visible;
15
+ outline: 0;
16
+ vertical-align: middle;
17
+ cursor: pointer;
18
+ color: var(--intergalactic-text-link, #006dca);
19
+ background: none;
20
+ transition: color 0.15s ease-in-out;
21
+ border: 0;
22
+
23
+ &:focus {
24
+ outline: none;
25
+ }
26
+
27
+ &[active],
28
+ &:hover,
29
+ &:active {
30
+ color: var(--intergalactic-text-link-hover-active, #044792);
31
+
32
+ & SText {
33
+ border-color: currentColor;
34
+ }
35
+ }
36
+
37
+ & SText {
38
+ border-bottom-width: 1px;
39
+ border-bottom-style: solid;
40
+ border-color: transparent;
41
+ transition: border-bottom-color 0.15s ease-in-out;
42
+ text-overflow: ellipsis;
43
+ overflow: hidden;
44
+ }
45
+ }
46
+
47
+ SLinkTrigger[color] {
48
+ color: var(--color);
49
+
50
+ &:hover {
51
+ filter: brightness(0.8);
52
+ }
53
+ }
54
+
55
+ SLinkTrigger[disabled] {
56
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
57
+ cursor: default;
58
+ pointer-events: none;
59
+ }
60
+
61
+ SLinkTrigger[keyboardFocused] {
62
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
63
+ z-index: 1;
64
+ }
65
+
66
+ SAddon,
67
+ SLinkAddon {
68
+ display: inline-flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ flex-shrink: 0;
72
+ margin-bottom: var(--intergalactic-spacing-05x, 2px);
73
+
74
+ &:not(:only-child):first-child {
75
+ margin-right: var(--intergalactic-spacing-1x, 4px);
76
+ }
77
+
78
+ &:not(:only-child):last-child {
79
+ margin-left: var(--intergalactic-spacing-1x, 4px);
80
+ }
81
+ }
82
+
83
+ SLinkAddon {
84
+ width: 16px;
85
+ height: 16px;
86
+ }
87
+
88
+ SLinkTrigger[size='m'] {
89
+ font-size: var(--intergalactic-fs-200, 14px);
90
+ }
91
+
92
+ SLinkTrigger[size='l'] {
93
+ font-size: var(--intergalactic-fs-300, 16px);
94
+ }
95
+
96
+ @media (prefers-reduced-motion) {
97
+ SLinkTrigger {
98
+ transition: none;
99
+
100
+ & SText {
101
+ transition: none;
102
+ }
103
+ }
104
+ }
@@ -1,33 +1,33 @@
1
- import r from "./de.json.mjs";
2
- import o from "./en.json.mjs";
3
- import m from "./es.json.mjs";
4
- import t from "./fr.json.mjs";
5
- import i from "./it.json.mjs";
6
- import p from "./ja.json.mjs";
7
- import f from "./ko.json.mjs";
8
- import e from "./nl.json.mjs";
9
- import s from "./pt.json.mjs";
10
- import a from "./tr.json.mjs";
11
- import l from "./vi.json.mjs";
12
- import v from "./zh.json.mjs";
13
- import d from "./pl.json.mjs";
14
- import n from "./sv.json.mjs";
15
- var B = {
16
- de: r,
17
- en: o,
18
- es: m,
19
- fr: t,
20
- it: i,
21
- ja: p,
22
- ko: f,
23
- nl: e,
24
- pt: s,
25
- tr: a,
26
- vi: l,
27
- zh: v,
28
- pl: d,
29
- sv: n
1
+ import de from "./de.json.mjs";
2
+ import en from "./en.json.mjs";
3
+ import es from "./es.json.mjs";
4
+ import fr from "./fr.json.mjs";
5
+ import it from "./it.json.mjs";
6
+ import ja from "./ja.json.mjs";
7
+ import ko from "./ko.json.mjs";
8
+ import nl from "./nl.json.mjs";
9
+ import pt from "./pt.json.mjs";
10
+ import tr from "./tr.json.mjs";
11
+ import vi from "./vi.json.mjs";
12
+ import zh from "./zh.json.mjs";
13
+ import pl from "./pl.json.mjs";
14
+ import sv from "./sv.json.mjs";
15
+ var localizedMessages = {
16
+ de,
17
+ en,
18
+ es,
19
+ fr,
20
+ it,
21
+ ja,
22
+ ko,
23
+ nl,
24
+ pt,
25
+ tr,
26
+ vi,
27
+ zh,
28
+ pl,
29
+ sv
30
30
  };
31
31
  export {
32
- B as localizedMessages
32
+ localizedMessages
33
33
  };
@@ -1,9 +1,11 @@
1
- const e = "Löschen", t = "Filter", c = {
2
- clear: e,
3
- filter: t
1
+ const clear = "Löschen";
2
+ const filter = "Filter";
3
+ const de = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- e as clear,
7
- c as default,
8
- t as filter
8
+ clear,
9
+ de as default,
10
+ filter
9
11
  };
@@ -1,10 +1,12 @@
1
- const e = "Clear", r = "Filter", l = {
2
- clear: e,
3
- filter: r,
1
+ const clear = "Clear";
2
+ const filter = "Filter";
3
+ const en = {
4
+ clear,
5
+ filter,
4
6
  "BaseTrigger.FilterTrigger.Counter.selected:aria-label": "selected"
5
7
  };
6
8
  export {
7
- e as clear,
8
- l as default,
9
- r as filter
9
+ clear,
10
+ en as default,
11
+ filter
10
12
  };
@@ -1,9 +1,11 @@
1
- const r = "Borrar", t = "Filtro", e = {
2
- clear: r,
3
- filter: t
1
+ const clear = "Borrar";
2
+ const filter = "Filtro";
3
+ const es = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- r as clear,
7
- e as default,
8
- t as filter
8
+ clear,
9
+ es as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const e = "Effacer", r = "Filtre", t = {
2
- clear: e,
3
- filter: r
1
+ const clear = "Effacer";
2
+ const filter = "Filtre";
3
+ const fr = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- e as clear,
7
- t as default,
8
- r as filter
8
+ clear,
9
+ fr as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const t = "Pulisci", l = "Filtro", c = {
2
- clear: t,
3
- filter: l
1
+ const clear = "Pulisci";
2
+ const filter = "Filtro";
3
+ const it = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- t as clear,
7
- c as default,
8
- l as filter
8
+ clear,
9
+ it as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const t = "クリア", e = "フィルタ", a = {
2
- clear: t,
3
- filter: e
1
+ const clear = "クリア";
2
+ const filter = "フィルタ";
3
+ const ja = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- t as clear,
7
- a as default,
8
- e as filter
8
+ clear,
9
+ ja as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const t = "지우기", e = "필터", c = {
2
- clear: t,
3
- filter: e
1
+ const clear = "지우기";
2
+ const filter = "필터";
3
+ const ko = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- t as clear,
7
- c as default,
8
- e as filter
8
+ clear,
9
+ ko as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const e = "Wissen", t = "Filter", l = {
2
- clear: e,
3
- filter: t
1
+ const clear = "Wissen";
2
+ const filter = "Filter";
3
+ const nl = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- e as clear,
7
- l as default,
8
- t as filter
8
+ clear,
9
+ nl as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const t = "Wyczyść", l = "Filtr", c = {
2
- clear: t,
3
- filter: l
1
+ const clear = "Wyczyść";
2
+ const filter = "Filtr";
3
+ const pl = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- t as clear,
7
- c as default,
8
- l as filter
8
+ clear,
9
+ pl as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const t = "Limpar", r = "Filtro", e = {
2
- clear: t,
3
- filter: r
1
+ const clear = "Limpar";
2
+ const filter = "Filtro";
3
+ const pt = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- t as clear,
7
- e as default,
8
- r as filter
8
+ clear,
9
+ pt as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const e = "Rensa", t = "Filter", l = {
2
- clear: e,
3
- filter: t
1
+ const clear = "Rensa";
2
+ const filter = "Filter";
3
+ const sv = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- e as clear,
7
- l as default,
8
- t as filter
8
+ clear,
9
+ sv as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const e = "Temizle", t = "Filtre", l = {
2
- clear: e,
3
- filter: t
1
+ const clear = "Temizle";
2
+ const filter = "Filtre";
3
+ const tr = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- e as clear,
7
- l as default,
8
- t as filter
8
+ clear,
9
+ tr as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const t = "Xóa", c = "Lọc", e = {
2
- clear: t,
3
- filter: c
1
+ const clear = "Xóa";
2
+ const filter = "Lọc";
3
+ const vi = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- t as clear,
7
- e as default,
8
- c as filter
8
+ clear,
9
+ vi as default,
10
+ filter
9
11
  };
@@ -1,9 +1,11 @@
1
- const t = "清除", e = "筛选器", c = {
2
- clear: t,
3
- filter: e
1
+ const clear = "清除";
2
+ const filter = "筛选器";
3
+ const zh = {
4
+ clear,
5
+ filter
4
6
  };
5
7
  export {
6
- t as clear,
7
- c as default,
8
- e as filter
8
+ clear,
9
+ zh as default,
10
+ filter
9
11
  };