@semcore/base-trigger 3.11.1 → 3.11.2
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/CHANGELOG.md +6 -2
- package/lib/cjs/BaseTrigger.js +18 -18
- package/lib/cjs/ButtonTrigger.js +3 -3
- package/lib/cjs/FilterTrigger.js +7 -15
- package/lib/cjs/FilterTrigger.js.map +1 -1
- package/lib/cjs/LinkTrigger.js +13 -13
- package/lib/cjs/style/base-trigger.shadow.css +1 -0
- package/lib/cjs/style/filter-trigger.shadow.css +0 -62
- package/lib/cjs/style/link-trigger.shadow.css +0 -5
- package/lib/es6/BaseTrigger.js +18 -18
- package/lib/es6/ButtonTrigger.js +3 -3
- package/lib/es6/FilterTrigger.js +7 -15
- package/lib/es6/FilterTrigger.js.map +1 -1
- package/lib/es6/LinkTrigger.js +13 -13
- package/lib/es6/style/base-trigger.shadow.css +1 -0
- package/lib/es6/style/filter-trigger.shadow.css +0 -62
- package/lib/es6/style/link-trigger.shadow.css +0 -5
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [3.11.
|
|
5
|
+
## [3.11.2] - 2023-06-13
|
|
6
6
|
|
|
7
7
|
### Fixed
|
|
8
8
|
|
|
9
|
-
-
|
|
9
|
+
- Transferring style for trigger active state from FilterTrigger/LinkTrigger to BaseTrigger.
|
|
10
|
+
|
|
11
|
+
### Changed
|
|
12
|
+
|
|
13
|
+
- Remove unused style in FilterTrigger.
|
|
10
14
|
|
|
11
15
|
## [3.11.0] - 2023-06-12
|
|
12
16
|
|
package/lib/cjs/BaseTrigger.js
CHANGED
|
@@ -22,24 +22,24 @@ var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
|
22
22
|
var _animatedSizeEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/animatedSizeEnhance"));
|
|
23
23
|
var _useCssVariable = require("@semcore/utils/lib/useCssVariable");
|
|
24
24
|
/*__reshadow-styles__:"./style/base-trigger.shadow.css"*/
|
|
25
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
26
|
-
"__SBaseTrigger": "
|
|
27
|
-
"_keyboardFocused": "
|
|
28
|
-
"_active": "
|
|
29
|
-
"_disabled": "
|
|
30
|
-
"__SInner": "
|
|
31
|
-
"__SText": "
|
|
32
|
-
"__SAddon": "
|
|
33
|
-
"__SBaseAddon": "
|
|
34
|
-
"_size_m": "
|
|
35
|
-
"_size_l": "
|
|
36
|
-
"_neighborLocation_right": "
|
|
37
|
-
"_neighborLocation_both": "
|
|
38
|
-
"_neighborLocation_left": "
|
|
39
|
-
"_placeholder": "
|
|
40
|
-
"_state_normal": "
|
|
41
|
-
"_state_valid": "
|
|
42
|
-
"_state_invalid": "
|
|
25
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SBaseTrigger_1f9rx_gg_{display:inline-block;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);font-weight:var(--intergalactic-regular, 400);border:1px solid var(--intergalactic-border-primary, #c4c7cf);color:var(--intergalactic-text-primary, #191b23)}.___SBaseTrigger_1f9rx_gg_::-moz-focus-inner{border:0;padding:0}.___SBaseTrigger_1f9rx_gg_:active,.___SBaseTrigger_1f9rx_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___SBaseTrigger_1f9rx_gg_:hover{outline:0;text-decoration:none}}.___SBaseTrigger_1f9rx_gg_.__keyboardFocused_1f9rx_gg_{border:1px solid var(--intergalactic-border-info-active, #006dca);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}@media (hover:hover){.___SBaseTrigger_1f9rx_gg_:hover{background-color:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SBaseTrigger_1f9rx_gg_.__active_1f9rx_gg_,.___SBaseTrigger_1f9rx_gg_:active{background-color:var(--intergalactic-bg-primary-neutral-active, #e0e1e9)}.___SBaseTrigger_1f9rx_gg_.__disabled_1f9rx_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SBaseTrigger_1f9rx_gg_.__keyboardFocused_1f9rx_gg_{z-index:1}.___SInner_1f9rx_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SText_1f9rx_gg_{display:inline;padding:1px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--intergalactic-lh-200, 142%);flex-grow:1;text-align:left}.___SAddon_1f9rx_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SBaseAddon_1f9rx_gg_{width:12px;height:12px}.___SBaseTrigger_1f9rx_gg_._size_m_1f9rx_gg_{min-width:26px;height:28px;border-radius:var(--intergalactic-control-rounded, 6px);padding:0 var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px)}.___SBaseTrigger_1f9rx_gg_._size_m_1f9rx_gg_ .___SAddon_1f9rx_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_1f9rx_gg_._size_m_1f9rx_gg_ .___SAddon_1f9rx_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_1f9rx_gg_._size_l_1f9rx_gg_ .___SAddon_1f9rx_gg_:only-child,.___SBaseTrigger_1f9rx_gg_._size_m_1f9rx_gg_ .___SAddon_1f9rx_gg_:only-child{margin-left:calc(-1*var(--intergalactic-spacing-1x, 4px));margin-right:calc(-1*var(--intergalactic-spacing-1x, 4px))}.___SBaseTrigger_1f9rx_gg_._size_l_1f9rx_gg_{min-width:32px;height:40px;border-radius:var(--intergalactic-control-rounded, 6px);padding:0 var(--intergalactic-spacing-3x, 12px);font-size:var(--intergalactic-fs-300, 16px)}.___SBaseTrigger_1f9rx_gg_._size_l_1f9rx_gg_ .___SAddon_1f9rx_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_1f9rx_gg_._size_l_1f9rx_gg_ .___SAddon_1f9rx_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_1f9rx_gg_._neighborLocation_right_1f9rx_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SBaseTrigger_1f9rx_gg_._neighborLocation_both_1f9rx_gg_{border-radius:0;margin-left:-1px}.___SBaseTrigger_1f9rx_gg_._neighborLocation_left_1f9rx_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SText_1f9rx_gg_.__placeholder_1f9rx_gg_{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SBaseTrigger_1f9rx_gg_._state_normal_1f9rx_gg_{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SBaseTrigger_1f9rx_gg_.__active_1f9rx_gg_,.___SBaseTrigger_1f9rx_gg_:active{border-color:var(--intergalactic-border-info-active, #006dca);background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SBaseTrigger_1f9rx_gg_._state_valid_1f9rx_gg_{border-color:var(--intergalactic-border-success-active, #007c65)}.___SBaseTrigger_1f9rx_gg_._state_invalid_1f9rx_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SBaseTrigger_1f9rx_gg_._state_invalid_1f9rx_gg_.__keyboardFocused_1f9rx_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f);box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}" /*__inner_css_end__*/, "1f9rx_gg_") /*__reshadow_css_end__*/, {
|
|
26
|
+
"__SBaseTrigger": "___SBaseTrigger_1f9rx_gg_",
|
|
27
|
+
"_keyboardFocused": "__keyboardFocused_1f9rx_gg_",
|
|
28
|
+
"_active": "__active_1f9rx_gg_",
|
|
29
|
+
"_disabled": "__disabled_1f9rx_gg_",
|
|
30
|
+
"__SInner": "___SInner_1f9rx_gg_",
|
|
31
|
+
"__SText": "___SText_1f9rx_gg_",
|
|
32
|
+
"__SAddon": "___SAddon_1f9rx_gg_",
|
|
33
|
+
"__SBaseAddon": "___SBaseAddon_1f9rx_gg_",
|
|
34
|
+
"_size_m": "_size_m_1f9rx_gg_",
|
|
35
|
+
"_size_l": "_size_l_1f9rx_gg_",
|
|
36
|
+
"_neighborLocation_right": "_neighborLocation_right_1f9rx_gg_",
|
|
37
|
+
"_neighborLocation_both": "_neighborLocation_both_1f9rx_gg_",
|
|
38
|
+
"_neighborLocation_left": "_neighborLocation_left_1f9rx_gg_",
|
|
39
|
+
"_placeholder": "__placeholder_1f9rx_gg_",
|
|
40
|
+
"_state_normal": "_state_normal_1f9rx_gg_",
|
|
41
|
+
"_state_valid": "_state_valid_1f9rx_gg_",
|
|
42
|
+
"_state_invalid": "_state_invalid_1f9rx_gg_"
|
|
43
43
|
});
|
|
44
44
|
var RootBaseTrigger = /*#__PURE__*/function (_Component) {
|
|
45
45
|
(0, _inherits2["default"])(RootBaseTrigger, _Component);
|
package/lib/cjs/ButtonTrigger.js
CHANGED
|
@@ -20,9 +20,9 @@ var _spin = _interopRequireDefault(require("@semcore/spin"));
|
|
|
20
20
|
var _animatedSizeEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/animatedSizeEnhance"));
|
|
21
21
|
var _useCssVariable = require("@semcore/utils/lib/useCssVariable");
|
|
22
22
|
/*__reshadow-styles__:"./style/button-trigger.shadow.css"*/
|
|
23
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
24
|
-
"__SButtonAddon": "
|
|
25
|
-
"__SButtonTriggerSpin": "
|
|
23
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SButtonAddon_1ggrl_gg_{width:12px;height:12px}.___SButtonTriggerSpin_1ggrl_gg_{fill:var(--intergalactic-icon-primary-neutral, #6c6e79)}" /*__inner_css_end__*/, "1ggrl_gg_") /*__reshadow_css_end__*/, {
|
|
24
|
+
"__SButtonAddon": "___SButtonAddon_1ggrl_gg_",
|
|
25
|
+
"__SButtonTriggerSpin": "___SButtonTriggerSpin_1ggrl_gg_"
|
|
26
26
|
});
|
|
27
27
|
var RootButtonTrigger = /*#__PURE__*/function (_Component) {
|
|
28
28
|
(0, _inherits2["default"])(RootButtonTrigger, _Component);
|
package/lib/cjs/FilterTrigger.js
CHANGED
|
@@ -31,21 +31,13 @@ var _useCssVariable = require("@semcore/utils/lib/useCssVariable");
|
|
|
31
31
|
var _inputProps = _interopRequireWildcard(require("@semcore/utils/lib/inputProps"));
|
|
32
32
|
var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
|
|
33
33
|
/*__reshadow-styles__:"./style/filter-trigger.shadow.css"*/
|
|
34
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"_state_normal": "_state_normal_12xxj_gg_",
|
|
42
|
-
"_state_valid": "_state_valid_12xxj_gg_",
|
|
43
|
-
"_state_invalid": "_state_invalid_12xxj_gg_",
|
|
44
|
-
"__SFilterTrigger": "___SFilterTrigger_12xxj_gg_",
|
|
45
|
-
"_selected": "__selected_12xxj_gg_",
|
|
46
|
-
"__SWrapper": "___SWrapper_12xxj_gg_",
|
|
47
|
-
"_keyboardFocused": "__keyboardFocused_12xxj_gg_",
|
|
48
|
-
"__SCounter": "___SCounter_12xxj_gg_"
|
|
34
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SFilterTrigger_r4g0u_gg_.__selected_r4g0u_gg_{border-color:var(--intergalactic-border-info-active, #006dca);background-color:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));color:var(--intergalactic-text-primary, #191b23)}@media (hover:hover){.___SFilterTrigger_r4g0u_gg_.__selected_r4g0u_gg_:hover{background-color:var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2))}}.___SFilterTrigger_r4g0u_gg_.__selected_r4g0u_gg_.__active_r4g0u_gg_,.___SFilterTrigger_r4g0u_gg_.__selected_r4g0u_gg_:active{background-color:var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3))}.___SWrapper_r4g0u_gg_{display:inline-flex}.___SWrapper_r4g0u_gg_:focus{outline:0}.___SWrapper_r4g0u_gg_.__keyboardFocused_r4g0u_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SCounter_r4g0u_gg_{background-color:var(--intergalactic-bg-primary-info, #008ff8)}" /*__inner_css_end__*/, "r4g0u_gg_") /*__reshadow_css_end__*/, {
|
|
35
|
+
"__SFilterTrigger": "___SFilterTrigger_r4g0u_gg_",
|
|
36
|
+
"_selected": "__selected_r4g0u_gg_",
|
|
37
|
+
"_active": "__active_r4g0u_gg_",
|
|
38
|
+
"__SWrapper": "___SWrapper_r4g0u_gg_",
|
|
39
|
+
"_keyboardFocused": "__keyboardFocused_r4g0u_gg_",
|
|
40
|
+
"__SCounter": "___SCounter_r4g0u_gg_"
|
|
49
41
|
});
|
|
50
42
|
var RootFilterTrigger = /*#__PURE__*/function (_Component) {
|
|
51
43
|
(0, _inherits2["default"])(RootFilterTrigger, _Component);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterTrigger.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_BaseTrigger","_flexBox","_neighborLocation","_dot","_m","_m2","_assignProps3","_addonTextChildren","_intergalacticDynamicLocales","_i18nEnhance","_animatedSizeEnhance","_useCssVariable","_inputProps","_uniqueID","style","sstyled","insert","RootFilterTrigger","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","e","stopPropagation","_createClass2","key","value","render","_ref","asProps","_ref3","SWrapper","Box","SFilterTrigger","BaseTrigger","_this$asProps","Children","styles","empty","onClear","size","placeholder","active","disabled","getI18nText","includeInputProps","uid","id","role","_getInputProps","getInputProps","_getInputProps2","_slicedToArray2","controlProps","createElement","cn","_objectSpread2","assignProps","addonTextChildren","FilterTrigger","Text","Addon","Counter","tag","ChevronDown","callAllEventHandlers","handleStopPropagation","Close","Component","i18nEnhance","localizedMessages","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","animatedSizeEnhance","animateProps","onChangeOf","uniqueIDEnhancement","inputProps","i18n","locale","props","_ref2","arguments[0]","_ref4","SCounter","Dot","createComponent","parent","_default","exports"],"sources":["../../src/FilterTrigger.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport BaseTrigger from './BaseTrigger';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport Dot from '@semcore/dot';\nimport Close from '@semcore/icon/Close/m';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport animatedSizeEnhance from '@semcore/utils/lib/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/filter-trigger.shadow.css';\n\nclass RootFilterTrigger extends Component {\n static displayName = 'FilterTrigger';\n static style = style;\n static enhance = [\n i18nEnhance(localizedMessages),\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n uniqueIDEnhancement(),\n ];\n static defaultProps = {\n includeInputProps: inputProps,\n i18n: localizedMessages,\n locale: 'en',\n };\n\n handleStopPropagation = (e) => e.stopPropagation();\n\n render() {\n const SWrapper = Root;\n const SFilterTrigger = BaseTrigger;\n const {\n Children,\n styles,\n empty,\n onClear,\n size,\n placeholder,\n active,\n disabled,\n getI18nText,\n includeInputProps,\n uid,\n id,\n } = this.asProps;\n\n if (this.asProps.role === 'button') {\n this.asProps.role = 'group';\n }\n\n const [controlProps] = getInputProps(this.asProps, includeInputProps);\n\n return sstyled(styles)(\n <SWrapper render={Box} aria-label={getI18nText('filter')} __excludeProps={['id']}>\n <NeighborLocation>\n <SFilterTrigger\n w=\"100%\"\n size={size}\n placeholder={placeholder}\n empty={empty}\n selected={!empty}\n active={active}\n disabled={disabled}\n animationsDisabled\n {...controlProps}\n >\n {addonTextChildren(\n Children,\n FilterTrigger.Text,\n [FilterTrigger.Addon, FilterTrigger.Counter],\n empty,\n )}\n {empty && <FilterTrigger.Addon tag={ChevronDown} />}\n </SFilterTrigger>\n {!empty && (\n <SFilterTrigger\n tag=\"button\"\n size={size}\n empty={empty}\n selected\n onClick={callAllEventHandlers(onClear, this.handleStopPropagation)}\n onKeyDown={this.handleStopPropagation}\n disabled={disabled}\n id={`igc-${uid}-filter-trigger-clear`}\n aria-labelledby={`igc-${uid}-filter-trigger-clear ${id}`}\n >\n <FilterTrigger.Addon tag={Close} aria-label={getI18nText('clear')} />\n </SFilterTrigger>\n )}\n </NeighborLocation>\n </SWrapper>,\n );\n }\n}\n\nfunction Counter(props) {\n const SCounter = Root;\n return sstyled(props.styles)(<SCounter render={BaseTrigger.Addon} tag={Dot} />);\n}\n\nconst FilterTrigger = createComponent(\n RootFilterTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n Counter,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default FilterTrigger;\n"],"mappings":";;;;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,IAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,EAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,GAAA,GAAAN,sBAAA,CAAAF,OAAA;AACA,IAAAS,aAAA,GAAAT,OAAA;AACA,IAAAU,kBAAA,GAAAR,sBAAA,CAAAF,OAAA;AACA,IAAAW,4BAAA,GAAAX,OAAA;AACA,IAAAY,YAAA,GAAAV,sBAAA,CAAAF,OAAA;AACA,IAAAa,oBAAA,GAAAX,sBAAA,CAAAF,OAAA;AACA,IAAAc,eAAA,GAAAd,OAAA;AACA,IAAAe,WAAA,GAAAhB,uBAAA,CAAAC,OAAA;AACA,IAAAgB,SAAA,GAAAd,sBAAA,CAAAF,OAAA;AAA8D;AAAA,IAAAiB,KAAA,+BAAAnB,KAAA,CAAAoB,OAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;
|
|
1
|
+
{"version":3,"file":"FilterTrigger.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_BaseTrigger","_flexBox","_neighborLocation","_dot","_m","_m2","_assignProps3","_addonTextChildren","_intergalacticDynamicLocales","_i18nEnhance","_animatedSizeEnhance","_useCssVariable","_inputProps","_uniqueID","style","sstyled","insert","RootFilterTrigger","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","e","stopPropagation","_createClass2","key","value","render","_ref","asProps","_ref3","SWrapper","Box","SFilterTrigger","BaseTrigger","_this$asProps","Children","styles","empty","onClear","size","placeholder","active","disabled","getI18nText","includeInputProps","uid","id","role","_getInputProps","getInputProps","_getInputProps2","_slicedToArray2","controlProps","createElement","cn","_objectSpread2","assignProps","addonTextChildren","FilterTrigger","Text","Addon","Counter","tag","ChevronDown","callAllEventHandlers","handleStopPropagation","Close","Component","i18nEnhance","localizedMessages","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","animatedSizeEnhance","animateProps","onChangeOf","uniqueIDEnhancement","inputProps","i18n","locale","props","_ref2","arguments[0]","_ref4","SCounter","Dot","createComponent","parent","_default","exports"],"sources":["../../src/FilterTrigger.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport BaseTrigger from './BaseTrigger';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport Dot from '@semcore/dot';\nimport Close from '@semcore/icon/Close/m';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport animatedSizeEnhance from '@semcore/utils/lib/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/filter-trigger.shadow.css';\n\nclass RootFilterTrigger extends Component {\n static displayName = 'FilterTrigger';\n static style = style;\n static enhance = [\n i18nEnhance(localizedMessages),\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n uniqueIDEnhancement(),\n ];\n static defaultProps = {\n includeInputProps: inputProps,\n i18n: localizedMessages,\n locale: 'en',\n };\n\n handleStopPropagation = (e) => e.stopPropagation();\n\n render() {\n const SWrapper = Root;\n const SFilterTrigger = BaseTrigger;\n const {\n Children,\n styles,\n empty,\n onClear,\n size,\n placeholder,\n active,\n disabled,\n getI18nText,\n includeInputProps,\n uid,\n id,\n } = this.asProps;\n\n if (this.asProps.role === 'button') {\n this.asProps.role = 'group';\n }\n\n const [controlProps] = getInputProps(this.asProps, includeInputProps);\n\n return sstyled(styles)(\n <SWrapper render={Box} aria-label={getI18nText('filter')} __excludeProps={['id']}>\n <NeighborLocation>\n <SFilterTrigger\n w=\"100%\"\n size={size}\n placeholder={placeholder}\n empty={empty}\n selected={!empty}\n active={active}\n disabled={disabled}\n animationsDisabled\n {...controlProps}\n >\n {addonTextChildren(\n Children,\n FilterTrigger.Text,\n [FilterTrigger.Addon, FilterTrigger.Counter],\n empty,\n )}\n {empty && <FilterTrigger.Addon tag={ChevronDown} />}\n </SFilterTrigger>\n {!empty && (\n <SFilterTrigger\n tag=\"button\"\n size={size}\n empty={empty}\n selected\n onClick={callAllEventHandlers(onClear, this.handleStopPropagation)}\n onKeyDown={this.handleStopPropagation}\n disabled={disabled}\n id={`igc-${uid}-filter-trigger-clear`}\n aria-labelledby={`igc-${uid}-filter-trigger-clear ${id}`}\n >\n <FilterTrigger.Addon tag={Close} aria-label={getI18nText('clear')} />\n </SFilterTrigger>\n )}\n </NeighborLocation>\n </SWrapper>,\n );\n }\n}\n\nfunction Counter(props) {\n const SCounter = Root;\n return sstyled(props.styles)(<SCounter render={BaseTrigger.Addon} tag={Dot} />);\n}\n\nconst FilterTrigger = createComponent(\n RootFilterTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n Counter,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default FilterTrigger;\n"],"mappings":"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"}
|
package/lib/cjs/LinkTrigger.js
CHANGED
|
@@ -21,19 +21,19 @@ var _flexBox = require("@semcore/flex-box");
|
|
|
21
21
|
var _color = _interopRequireWildcard(require("@semcore/utils/lib/color"));
|
|
22
22
|
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
23
23
|
/*__reshadow-styles__:"./style/link-trigger.shadow.css"*/
|
|
24
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
25
|
-
"__SLinkTrigger": "
|
|
26
|
-
"_active": "
|
|
27
|
-
"__SText": "
|
|
28
|
-
"_color": "
|
|
29
|
-
"--color": "--
|
|
30
|
-
"--color-hover": "--color-
|
|
31
|
-
"_disabled": "
|
|
32
|
-
"_keyboardFocused": "
|
|
33
|
-
"__SAddon": "
|
|
34
|
-
"__SLinkAddon": "
|
|
35
|
-
"_size_m": "
|
|
36
|
-
"_size_l": "
|
|
24
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SLinkTrigger_1e04w_gg_{display:inline-flex;align-items:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;vertical-align:middle;cursor:pointer;color:var(--intergalactic-text-link, #006dca);background:0 0;transition:color .15s ease-in-out}.___SLinkTrigger_1e04w_gg_.__active_1e04w_gg_,.___SLinkTrigger_1e04w_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLinkTrigger_1e04w_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLinkTrigger_1e04w_gg_.__active_1e04w_gg_ .___SText_1e04w_gg_,.___SLinkTrigger_1e04w_gg_:active .___SText_1e04w_gg_{border-color:currentColor}@media (hover:hover){.___SLinkTrigger_1e04w_gg_:hover .___SText_1e04w_gg_{border-color:currentColor}}.___SLinkTrigger_1e04w_gg_ .___SText_1e04w_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out;text-overflow:ellipsis;overflow:hidden}.___SLinkTrigger_1e04w_gg_.__color_1e04w_gg_{color:var(--color_1e04w)}@media (hover:hover){.___SLinkTrigger_1e04w_gg_.__color_1e04w_gg_:hover{color:var(--color-hover_1e04w)}}.___SLinkTrigger_1e04w_gg_.__disabled_1e04w_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SLinkTrigger_1e04w_gg_.__keyboardFocused_1e04w_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SAddon_1e04w_gg_,.___SLinkAddon_1e04w_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:var(--intergalactic-spacing-05x, 2px)}.___SAddon_1e04w_gg_:not(:only-child):first-child,.___SLinkAddon_1e04w_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SAddon_1e04w_gg_:not(:only-child):last-child,.___SLinkAddon_1e04w_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SLinkAddon_1e04w_gg_{width:16px;height:16px}.___SLinkTrigger_1e04w_gg_._size_m_1e04w_gg_{font-size:var(--intergalactic-fs-200, 14px)}.___SLinkTrigger_1e04w_gg_._size_l_1e04w_gg_{font-size:var(--intergalactic-fs-300, 16px)}@media (prefers-reduced-motion){.___SLinkTrigger_1e04w_gg_,.___SLinkTrigger_1e04w_gg_ .___SText_1e04w_gg_{transition:none}}" /*__inner_css_end__*/, "1e04w_gg_") /*__reshadow_css_end__*/, {
|
|
25
|
+
"__SLinkTrigger": "___SLinkTrigger_1e04w_gg_",
|
|
26
|
+
"_active": "__active_1e04w_gg_",
|
|
27
|
+
"__SText": "___SText_1e04w_gg_",
|
|
28
|
+
"_color": "__color_1e04w_gg_",
|
|
29
|
+
"--color": "--color_1e04w",
|
|
30
|
+
"--color-hover": "--color-hover_1e04w",
|
|
31
|
+
"_disabled": "__disabled_1e04w_gg_",
|
|
32
|
+
"_keyboardFocused": "__keyboardFocused_1e04w_gg_",
|
|
33
|
+
"__SAddon": "___SAddon_1e04w_gg_",
|
|
34
|
+
"__SLinkAddon": "___SLinkAddon_1e04w_gg_",
|
|
35
|
+
"_size_m": "_size_m_1e04w_gg_",
|
|
36
|
+
"_size_l": "_size_l_1e04w_gg_"
|
|
37
37
|
});
|
|
38
38
|
var RootLinkTrigger = /*#__PURE__*/function (_Component) {
|
|
39
39
|
(0, _inherits2["default"])(RootLinkTrigger, _Component);
|
|
@@ -171,6 +171,7 @@ SBaseTrigger[state='normal'] {
|
|
|
171
171
|
SBaseTrigger[active],
|
|
172
172
|
SBaseTrigger:active {
|
|
173
173
|
border-color: var(--intergalactic-border-info-active, #006dca);
|
|
174
|
+
background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
|
|
174
175
|
}
|
|
175
176
|
|
|
176
177
|
SBaseTrigger[state='valid'] {
|
|
@@ -1,60 +1,3 @@
|
|
|
1
|
-
SButtonTrigger {
|
|
2
|
-
border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
|
|
3
|
-
background: var(--intergalactic-bg-primary-neutral, #ffffff);
|
|
4
|
-
color: var(--intergalactic-text-primary, #191b23);
|
|
5
|
-
|
|
6
|
-
&::-moz-focus-inner {
|
|
7
|
-
border: none;
|
|
8
|
-
padding: 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
&:active,
|
|
12
|
-
&:hover,
|
|
13
|
-
&:focus {
|
|
14
|
-
outline: 0;
|
|
15
|
-
text-decoration: none;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
&:active,
|
|
19
|
-
&:hover,
|
|
20
|
-
&[active] {
|
|
21
|
-
background-color: var(
|
|
22
|
-
--intergalactic-control-secondary-neutral-hover,
|
|
23
|
-
rgba(138, 142, 155, 0.2)
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
SButtonTrigger[size='m'] {
|
|
29
|
-
min-width: 26px;
|
|
30
|
-
height: 28px;
|
|
31
|
-
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
32
|
-
font-size: var(--intergalactic-fs-200, 14px);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
SButtonTrigger[size='l'] {
|
|
36
|
-
min-width: 32px;
|
|
37
|
-
height: 40px;
|
|
38
|
-
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
39
|
-
font-size: var(--intergalactic-fs-300, 16px);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
SText[placeholder] {
|
|
43
|
-
color: var(--intergalactic-text-placeholder, #8a8e9b);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
SButtonTrigger[state='normal'] {
|
|
47
|
-
border-color: var(--intergalactic-border-primary, #c4c7cf);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
SButtonTrigger[state='valid'] {
|
|
51
|
-
border-color: var(--intergalactic-border-success-active, #007c65);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
SButtonTrigger[state='invalid'] {
|
|
55
|
-
border-color: var(--intergalactic-border-critical-active, #d1002f);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
1
|
SFilterTrigger[selected] {
|
|
59
2
|
border-color: var(--intergalactic-border-info-active, #006dca);
|
|
60
3
|
background-color: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
|
|
@@ -85,8 +28,3 @@ SWrapper[keyboardFocused] {
|
|
|
85
28
|
SCounter {
|
|
86
29
|
background-color: var(--intergalactic-bg-primary-info, #008ff8);
|
|
87
30
|
}
|
|
88
|
-
|
|
89
|
-
SFilterTrigger:active,
|
|
90
|
-
SFilterTrigger[active] {
|
|
91
|
-
background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
|
|
92
|
-
}
|
|
@@ -89,11 +89,6 @@ SLinkTrigger[size='l'] {
|
|
|
89
89
|
font-size: var(--intergalactic-fs-300, 16px);
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
SLinkTrigger:active:active,
|
|
93
|
-
SLinkTrigger[active][active] {
|
|
94
|
-
background-color: transparent;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
92
|
@media (prefers-reduced-motion) {
|
|
98
93
|
SLinkTrigger {
|
|
99
94
|
transition: none;
|
package/lib/es6/BaseTrigger.js
CHANGED
|
@@ -18,24 +18,24 @@ import logger from '@semcore/utils/lib/logger';
|
|
|
18
18
|
import animatedSizeEnhance from '@semcore/utils/lib/enhances/animatedSizeEnhance';
|
|
19
19
|
import { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';
|
|
20
20
|
/*__reshadow-styles__:"./style/base-trigger.shadow.css"*/
|
|
21
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
22
|
-
"__SBaseTrigger": "
|
|
23
|
-
"_keyboardFocused": "
|
|
24
|
-
"_active": "
|
|
25
|
-
"_disabled": "
|
|
26
|
-
"__SInner": "
|
|
27
|
-
"__SText": "
|
|
28
|
-
"__SAddon": "
|
|
29
|
-
"__SBaseAddon": "
|
|
30
|
-
"_size_m": "
|
|
31
|
-
"_size_l": "
|
|
32
|
-
"_neighborLocation_right": "
|
|
33
|
-
"_neighborLocation_both": "
|
|
34
|
-
"_neighborLocation_left": "
|
|
35
|
-
"_placeholder": "
|
|
36
|
-
"_state_normal": "
|
|
37
|
-
"_state_valid": "
|
|
38
|
-
"_state_invalid": "
|
|
21
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SBaseTrigger_1f9rx_gg_{display:inline-block;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);font-weight:var(--intergalactic-regular, 400);border:1px solid var(--intergalactic-border-primary, #c4c7cf);color:var(--intergalactic-text-primary, #191b23)}.___SBaseTrigger_1f9rx_gg_::-moz-focus-inner{border:0;padding:0}.___SBaseTrigger_1f9rx_gg_:active,.___SBaseTrigger_1f9rx_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___SBaseTrigger_1f9rx_gg_:hover{outline:0;text-decoration:none}}.___SBaseTrigger_1f9rx_gg_.__keyboardFocused_1f9rx_gg_{border:1px solid var(--intergalactic-border-info-active, #006dca);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}@media (hover:hover){.___SBaseTrigger_1f9rx_gg_:hover{background-color:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SBaseTrigger_1f9rx_gg_.__active_1f9rx_gg_,.___SBaseTrigger_1f9rx_gg_:active{background-color:var(--intergalactic-bg-primary-neutral-active, #e0e1e9)}.___SBaseTrigger_1f9rx_gg_.__disabled_1f9rx_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SBaseTrigger_1f9rx_gg_.__keyboardFocused_1f9rx_gg_{z-index:1}.___SInner_1f9rx_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SText_1f9rx_gg_{display:inline;padding:1px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--intergalactic-lh-200, 142%);flex-grow:1;text-align:left}.___SAddon_1f9rx_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SBaseAddon_1f9rx_gg_{width:12px;height:12px}.___SBaseTrigger_1f9rx_gg_._size_m_1f9rx_gg_{min-width:26px;height:28px;border-radius:var(--intergalactic-control-rounded, 6px);padding:0 var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px)}.___SBaseTrigger_1f9rx_gg_._size_m_1f9rx_gg_ .___SAddon_1f9rx_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_1f9rx_gg_._size_m_1f9rx_gg_ .___SAddon_1f9rx_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_1f9rx_gg_._size_l_1f9rx_gg_ .___SAddon_1f9rx_gg_:only-child,.___SBaseTrigger_1f9rx_gg_._size_m_1f9rx_gg_ .___SAddon_1f9rx_gg_:only-child{margin-left:calc(-1*var(--intergalactic-spacing-1x, 4px));margin-right:calc(-1*var(--intergalactic-spacing-1x, 4px))}.___SBaseTrigger_1f9rx_gg_._size_l_1f9rx_gg_{min-width:32px;height:40px;border-radius:var(--intergalactic-control-rounded, 6px);padding:0 var(--intergalactic-spacing-3x, 12px);font-size:var(--intergalactic-fs-300, 16px)}.___SBaseTrigger_1f9rx_gg_._size_l_1f9rx_gg_ .___SAddon_1f9rx_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_1f9rx_gg_._size_l_1f9rx_gg_ .___SAddon_1f9rx_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_1f9rx_gg_._neighborLocation_right_1f9rx_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SBaseTrigger_1f9rx_gg_._neighborLocation_both_1f9rx_gg_{border-radius:0;margin-left:-1px}.___SBaseTrigger_1f9rx_gg_._neighborLocation_left_1f9rx_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SText_1f9rx_gg_.__placeholder_1f9rx_gg_{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SBaseTrigger_1f9rx_gg_._state_normal_1f9rx_gg_{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SBaseTrigger_1f9rx_gg_.__active_1f9rx_gg_,.___SBaseTrigger_1f9rx_gg_:active{border-color:var(--intergalactic-border-info-active, #006dca);background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SBaseTrigger_1f9rx_gg_._state_valid_1f9rx_gg_{border-color:var(--intergalactic-border-success-active, #007c65)}.___SBaseTrigger_1f9rx_gg_._state_invalid_1f9rx_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SBaseTrigger_1f9rx_gg_._state_invalid_1f9rx_gg_.__keyboardFocused_1f9rx_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f);box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}" /*__inner_css_end__*/, "1f9rx_gg_") /*__reshadow_css_end__*/, {
|
|
22
|
+
"__SBaseTrigger": "___SBaseTrigger_1f9rx_gg_",
|
|
23
|
+
"_keyboardFocused": "__keyboardFocused_1f9rx_gg_",
|
|
24
|
+
"_active": "__active_1f9rx_gg_",
|
|
25
|
+
"_disabled": "__disabled_1f9rx_gg_",
|
|
26
|
+
"__SInner": "___SInner_1f9rx_gg_",
|
|
27
|
+
"__SText": "___SText_1f9rx_gg_",
|
|
28
|
+
"__SAddon": "___SAddon_1f9rx_gg_",
|
|
29
|
+
"__SBaseAddon": "___SBaseAddon_1f9rx_gg_",
|
|
30
|
+
"_size_m": "_size_m_1f9rx_gg_",
|
|
31
|
+
"_size_l": "_size_l_1f9rx_gg_",
|
|
32
|
+
"_neighborLocation_right": "_neighborLocation_right_1f9rx_gg_",
|
|
33
|
+
"_neighborLocation_both": "_neighborLocation_both_1f9rx_gg_",
|
|
34
|
+
"_neighborLocation_left": "_neighborLocation_left_1f9rx_gg_",
|
|
35
|
+
"_placeholder": "__placeholder_1f9rx_gg_",
|
|
36
|
+
"_state_normal": "_state_normal_1f9rx_gg_",
|
|
37
|
+
"_state_valid": "_state_valid_1f9rx_gg_",
|
|
38
|
+
"_state_invalid": "_state_invalid_1f9rx_gg_"
|
|
39
39
|
});
|
|
40
40
|
var RootBaseTrigger = /*#__PURE__*/function (_Component) {
|
|
41
41
|
_inherits(RootBaseTrigger, _Component);
|
package/lib/es6/ButtonTrigger.js
CHANGED
|
@@ -14,9 +14,9 @@ import Spin from '@semcore/spin';
|
|
|
14
14
|
import animatedSizeEnhance from '@semcore/utils/lib/enhances/animatedSizeEnhance';
|
|
15
15
|
import { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';
|
|
16
16
|
/*__reshadow-styles__:"./style/button-trigger.shadow.css"*/
|
|
17
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
18
|
-
"__SButtonAddon": "
|
|
19
|
-
"__SButtonTriggerSpin": "
|
|
17
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SButtonAddon_1ggrl_gg_{width:12px;height:12px}.___SButtonTriggerSpin_1ggrl_gg_{fill:var(--intergalactic-icon-primary-neutral, #6c6e79)}" /*__inner_css_end__*/, "1ggrl_gg_") /*__reshadow_css_end__*/, {
|
|
18
|
+
"__SButtonAddon": "___SButtonAddon_1ggrl_gg_",
|
|
19
|
+
"__SButtonTriggerSpin": "___SButtonTriggerSpin_1ggrl_gg_"
|
|
20
20
|
});
|
|
21
21
|
var RootButtonTrigger = /*#__PURE__*/function (_Component) {
|
|
22
22
|
_inherits(RootButtonTrigger, _Component);
|
package/lib/es6/FilterTrigger.js
CHANGED
|
@@ -26,21 +26,13 @@ import { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';
|
|
|
26
26
|
import getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';
|
|
27
27
|
import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
28
28
|
/*__reshadow-styles__:"./style/filter-trigger.shadow.css"*/
|
|
29
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"_state_normal": "_state_normal_12xxj_gg_",
|
|
37
|
-
"_state_valid": "_state_valid_12xxj_gg_",
|
|
38
|
-
"_state_invalid": "_state_invalid_12xxj_gg_",
|
|
39
|
-
"__SFilterTrigger": "___SFilterTrigger_12xxj_gg_",
|
|
40
|
-
"_selected": "__selected_12xxj_gg_",
|
|
41
|
-
"__SWrapper": "___SWrapper_12xxj_gg_",
|
|
42
|
-
"_keyboardFocused": "__keyboardFocused_12xxj_gg_",
|
|
43
|
-
"__SCounter": "___SCounter_12xxj_gg_"
|
|
29
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SFilterTrigger_r4g0u_gg_.__selected_r4g0u_gg_{border-color:var(--intergalactic-border-info-active, #006dca);background-color:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));color:var(--intergalactic-text-primary, #191b23)}@media (hover:hover){.___SFilterTrigger_r4g0u_gg_.__selected_r4g0u_gg_:hover{background-color:var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2))}}.___SFilterTrigger_r4g0u_gg_.__selected_r4g0u_gg_.__active_r4g0u_gg_,.___SFilterTrigger_r4g0u_gg_.__selected_r4g0u_gg_:active{background-color:var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3))}.___SWrapper_r4g0u_gg_{display:inline-flex}.___SWrapper_r4g0u_gg_:focus{outline:0}.___SWrapper_r4g0u_gg_.__keyboardFocused_r4g0u_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SCounter_r4g0u_gg_{background-color:var(--intergalactic-bg-primary-info, #008ff8)}" /*__inner_css_end__*/, "r4g0u_gg_") /*__reshadow_css_end__*/, {
|
|
30
|
+
"__SFilterTrigger": "___SFilterTrigger_r4g0u_gg_",
|
|
31
|
+
"_selected": "__selected_r4g0u_gg_",
|
|
32
|
+
"_active": "__active_r4g0u_gg_",
|
|
33
|
+
"__SWrapper": "___SWrapper_r4g0u_gg_",
|
|
34
|
+
"_keyboardFocused": "__keyboardFocused_r4g0u_gg_",
|
|
35
|
+
"__SCounter": "___SCounter_r4g0u_gg_"
|
|
44
36
|
});
|
|
45
37
|
var RootFilterTrigger = /*#__PURE__*/function (_Component) {
|
|
46
38
|
_inherits(RootFilterTrigger, _Component);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterTrigger.js","names":["React","createComponent","Component","Root","sstyled","BaseTrigger","Box","NeighborLocation","Dot","Close","ChevronDown","callAllEventHandlers","addonTextChildren","localizedMessages","i18nEnhance","animatedSizeEnhance","cssVariableEnhance","getInputProps","inputProps","uniqueIDEnhancement","style","_sstyled","insert","RootFilterTrigger","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","e","stopPropagation","_createClass","key","value","render","_ref","asProps","_ref3","SWrapper","SFilterTrigger","_this$asProps","Children","styles","empty","onClear","size","placeholder","active","disabled","getI18nText","includeInputProps","uid","id","role","_getInputProps","_getInputProps2","_slicedToArray","controlProps","createElement","cn","_objectSpread","_assignProps","FilterTrigger","Text","Addon","Counter","tag","handleStopPropagation","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","i18n","locale","props","_ref2","arguments[0]","_ref4","SCounter","_assignProps2","parent"],"sources":["../../src/FilterTrigger.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport BaseTrigger from './BaseTrigger';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport Dot from '@semcore/dot';\nimport Close from '@semcore/icon/Close/m';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport animatedSizeEnhance from '@semcore/utils/lib/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/filter-trigger.shadow.css';\n\nclass RootFilterTrigger extends Component {\n static displayName = 'FilterTrigger';\n static style = style;\n static enhance = [\n i18nEnhance(localizedMessages),\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n uniqueIDEnhancement(),\n ];\n static defaultProps = {\n includeInputProps: inputProps,\n i18n: localizedMessages,\n locale: 'en',\n };\n\n handleStopPropagation = (e) => e.stopPropagation();\n\n render() {\n const SWrapper = Root;\n const SFilterTrigger = BaseTrigger;\n const {\n Children,\n styles,\n empty,\n onClear,\n size,\n placeholder,\n active,\n disabled,\n getI18nText,\n includeInputProps,\n uid,\n id,\n } = this.asProps;\n\n if (this.asProps.role === 'button') {\n this.asProps.role = 'group';\n }\n\n const [controlProps] = getInputProps(this.asProps, includeInputProps);\n\n return sstyled(styles)(\n <SWrapper render={Box} aria-label={getI18nText('filter')} __excludeProps={['id']}>\n <NeighborLocation>\n <SFilterTrigger\n w=\"100%\"\n size={size}\n placeholder={placeholder}\n empty={empty}\n selected={!empty}\n active={active}\n disabled={disabled}\n animationsDisabled\n {...controlProps}\n >\n {addonTextChildren(\n Children,\n FilterTrigger.Text,\n [FilterTrigger.Addon, FilterTrigger.Counter],\n empty,\n )}\n {empty && <FilterTrigger.Addon tag={ChevronDown} />}\n </SFilterTrigger>\n {!empty && (\n <SFilterTrigger\n tag=\"button\"\n size={size}\n empty={empty}\n selected\n onClick={callAllEventHandlers(onClear, this.handleStopPropagation)}\n onKeyDown={this.handleStopPropagation}\n disabled={disabled}\n id={`igc-${uid}-filter-trigger-clear`}\n aria-labelledby={`igc-${uid}-filter-trigger-clear ${id}`}\n >\n <FilterTrigger.Addon tag={Close} aria-label={getI18nText('clear')} />\n </SFilterTrigger>\n )}\n </NeighborLocation>\n </SWrapper>,\n );\n }\n}\n\nfunction Counter(props) {\n const SCounter = Root;\n return sstyled(props.styles)(<SCounter render={BaseTrigger.Addon} tag={Dot} />);\n}\n\nconst FilterTrigger = createComponent(\n RootFilterTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n Counter,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default FilterTrigger;\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,eAAe,IAAIC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,WAAW,MAAM,eAAe;AACvC,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,gBAAgB,MAAM,4BAA4B;AACzD,OAAOC,GAAG,MAAM,cAAc;AAC9B,OAAOC,KAAK,MAAM,uBAAuB;AACzC,OAAOC,WAAW,MAAM,6BAA6B;AACrD,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,OAAOC,iBAAiB,MAAM,sCAAsC;AACpE,SAASC,iBAAiB,QAAQ,gDAAgD;AAClF,OAAOC,WAAW,MAAM,yCAAyC;AACjE,OAAOC,mBAAmB,MAAM,iDAAiD;AACjF,SAASC,kBAAkB,QAAQ,mCAAmC;AACtE,OAAOC,aAAa,IAAIC,UAAU,QAAQ,+BAA+B;AACzE,OAAOC,mBAAmB,MAAM,6BAA6B;AAAC;AAAA,IAAAC,KAAA,+BAAAC,QAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;
|
|
1
|
+
{"version":3,"file":"FilterTrigger.js","names":["React","createComponent","Component","Root","sstyled","BaseTrigger","Box","NeighborLocation","Dot","Close","ChevronDown","callAllEventHandlers","addonTextChildren","localizedMessages","i18nEnhance","animatedSizeEnhance","cssVariableEnhance","getInputProps","inputProps","uniqueIDEnhancement","style","_sstyled","insert","RootFilterTrigger","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","e","stopPropagation","_createClass","key","value","render","_ref","asProps","_ref3","SWrapper","SFilterTrigger","_this$asProps","Children","styles","empty","onClear","size","placeholder","active","disabled","getI18nText","includeInputProps","uid","id","role","_getInputProps","_getInputProps2","_slicedToArray","controlProps","createElement","cn","_objectSpread","_assignProps","FilterTrigger","Text","Addon","Counter","tag","handleStopPropagation","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","i18n","locale","props","_ref2","arguments[0]","_ref4","SCounter","_assignProps2","parent"],"sources":["../../src/FilterTrigger.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport BaseTrigger from './BaseTrigger';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport Dot from '@semcore/dot';\nimport Close from '@semcore/icon/Close/m';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport animatedSizeEnhance from '@semcore/utils/lib/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/filter-trigger.shadow.css';\n\nclass RootFilterTrigger extends Component {\n static displayName = 'FilterTrigger';\n static style = style;\n static enhance = [\n i18nEnhance(localizedMessages),\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n uniqueIDEnhancement(),\n ];\n static defaultProps = {\n includeInputProps: inputProps,\n i18n: localizedMessages,\n locale: 'en',\n };\n\n handleStopPropagation = (e) => e.stopPropagation();\n\n render() {\n const SWrapper = Root;\n const SFilterTrigger = BaseTrigger;\n const {\n Children,\n styles,\n empty,\n onClear,\n size,\n placeholder,\n active,\n disabled,\n getI18nText,\n includeInputProps,\n uid,\n id,\n } = this.asProps;\n\n if (this.asProps.role === 'button') {\n this.asProps.role = 'group';\n }\n\n const [controlProps] = getInputProps(this.asProps, includeInputProps);\n\n return sstyled(styles)(\n <SWrapper render={Box} aria-label={getI18nText('filter')} __excludeProps={['id']}>\n <NeighborLocation>\n <SFilterTrigger\n w=\"100%\"\n size={size}\n placeholder={placeholder}\n empty={empty}\n selected={!empty}\n active={active}\n disabled={disabled}\n animationsDisabled\n {...controlProps}\n >\n {addonTextChildren(\n Children,\n FilterTrigger.Text,\n [FilterTrigger.Addon, FilterTrigger.Counter],\n empty,\n )}\n {empty && <FilterTrigger.Addon tag={ChevronDown} />}\n </SFilterTrigger>\n {!empty && (\n <SFilterTrigger\n tag=\"button\"\n size={size}\n empty={empty}\n selected\n onClick={callAllEventHandlers(onClear, this.handleStopPropagation)}\n onKeyDown={this.handleStopPropagation}\n disabled={disabled}\n id={`igc-${uid}-filter-trigger-clear`}\n aria-labelledby={`igc-${uid}-filter-trigger-clear ${id}`}\n >\n <FilterTrigger.Addon tag={Close} aria-label={getI18nText('clear')} />\n </SFilterTrigger>\n )}\n </NeighborLocation>\n </SWrapper>,\n );\n }\n}\n\nfunction Counter(props) {\n const SCounter = Root;\n return sstyled(props.styles)(<SCounter render={BaseTrigger.Addon} tag={Dot} />);\n}\n\nconst FilterTrigger = createComponent(\n RootFilterTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n Counter,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default FilterTrigger;\n"],"mappings":"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"}
|
package/lib/es6/LinkTrigger.js
CHANGED
|
@@ -17,19 +17,19 @@ import { Box } from '@semcore/flex-box';
|
|
|
17
17
|
import resolveColor, { shade } from '@semcore/utils/lib/color';
|
|
18
18
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
19
19
|
/*__reshadow-styles__:"./style/link-trigger.shadow.css"*/
|
|
20
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
21
|
-
"__SLinkTrigger": "
|
|
22
|
-
"_active": "
|
|
23
|
-
"__SText": "
|
|
24
|
-
"_color": "
|
|
25
|
-
"--color": "--
|
|
26
|
-
"--color-hover": "--color-
|
|
27
|
-
"_disabled": "
|
|
28
|
-
"_keyboardFocused": "
|
|
29
|
-
"__SAddon": "
|
|
30
|
-
"__SLinkAddon": "
|
|
31
|
-
"_size_m": "
|
|
32
|
-
"_size_l": "
|
|
20
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SLinkTrigger_1e04w_gg_{display:inline-flex;align-items:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;vertical-align:middle;cursor:pointer;color:var(--intergalactic-text-link, #006dca);background:0 0;transition:color .15s ease-in-out}.___SLinkTrigger_1e04w_gg_.__active_1e04w_gg_,.___SLinkTrigger_1e04w_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLinkTrigger_1e04w_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLinkTrigger_1e04w_gg_.__active_1e04w_gg_ .___SText_1e04w_gg_,.___SLinkTrigger_1e04w_gg_:active .___SText_1e04w_gg_{border-color:currentColor}@media (hover:hover){.___SLinkTrigger_1e04w_gg_:hover .___SText_1e04w_gg_{border-color:currentColor}}.___SLinkTrigger_1e04w_gg_ .___SText_1e04w_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out;text-overflow:ellipsis;overflow:hidden}.___SLinkTrigger_1e04w_gg_.__color_1e04w_gg_{color:var(--color_1e04w)}@media (hover:hover){.___SLinkTrigger_1e04w_gg_.__color_1e04w_gg_:hover{color:var(--color-hover_1e04w)}}.___SLinkTrigger_1e04w_gg_.__disabled_1e04w_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SLinkTrigger_1e04w_gg_.__keyboardFocused_1e04w_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SAddon_1e04w_gg_,.___SLinkAddon_1e04w_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:var(--intergalactic-spacing-05x, 2px)}.___SAddon_1e04w_gg_:not(:only-child):first-child,.___SLinkAddon_1e04w_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SAddon_1e04w_gg_:not(:only-child):last-child,.___SLinkAddon_1e04w_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SLinkAddon_1e04w_gg_{width:16px;height:16px}.___SLinkTrigger_1e04w_gg_._size_m_1e04w_gg_{font-size:var(--intergalactic-fs-200, 14px)}.___SLinkTrigger_1e04w_gg_._size_l_1e04w_gg_{font-size:var(--intergalactic-fs-300, 16px)}@media (prefers-reduced-motion){.___SLinkTrigger_1e04w_gg_,.___SLinkTrigger_1e04w_gg_ .___SText_1e04w_gg_{transition:none}}" /*__inner_css_end__*/, "1e04w_gg_") /*__reshadow_css_end__*/, {
|
|
21
|
+
"__SLinkTrigger": "___SLinkTrigger_1e04w_gg_",
|
|
22
|
+
"_active": "__active_1e04w_gg_",
|
|
23
|
+
"__SText": "___SText_1e04w_gg_",
|
|
24
|
+
"_color": "__color_1e04w_gg_",
|
|
25
|
+
"--color": "--color_1e04w",
|
|
26
|
+
"--color-hover": "--color-hover_1e04w",
|
|
27
|
+
"_disabled": "__disabled_1e04w_gg_",
|
|
28
|
+
"_keyboardFocused": "__keyboardFocused_1e04w_gg_",
|
|
29
|
+
"__SAddon": "___SAddon_1e04w_gg_",
|
|
30
|
+
"__SLinkAddon": "___SLinkAddon_1e04w_gg_",
|
|
31
|
+
"_size_m": "_size_m_1e04w_gg_",
|
|
32
|
+
"_size_l": "_size_l_1e04w_gg_"
|
|
33
33
|
});
|
|
34
34
|
var RootLinkTrigger = /*#__PURE__*/function (_Component) {
|
|
35
35
|
_inherits(RootLinkTrigger, _Component);
|
|
@@ -171,6 +171,7 @@ SBaseTrigger[state='normal'] {
|
|
|
171
171
|
SBaseTrigger[active],
|
|
172
172
|
SBaseTrigger:active {
|
|
173
173
|
border-color: var(--intergalactic-border-info-active, #006dca);
|
|
174
|
+
background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
|
|
174
175
|
}
|
|
175
176
|
|
|
176
177
|
SBaseTrigger[state='valid'] {
|
|
@@ -1,60 +1,3 @@
|
|
|
1
|
-
SButtonTrigger {
|
|
2
|
-
border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
|
|
3
|
-
background: var(--intergalactic-bg-primary-neutral, #ffffff);
|
|
4
|
-
color: var(--intergalactic-text-primary, #191b23);
|
|
5
|
-
|
|
6
|
-
&::-moz-focus-inner {
|
|
7
|
-
border: none;
|
|
8
|
-
padding: 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
&:active,
|
|
12
|
-
&:hover,
|
|
13
|
-
&:focus {
|
|
14
|
-
outline: 0;
|
|
15
|
-
text-decoration: none;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
&:active,
|
|
19
|
-
&:hover,
|
|
20
|
-
&[active] {
|
|
21
|
-
background-color: var(
|
|
22
|
-
--intergalactic-control-secondary-neutral-hover,
|
|
23
|
-
rgba(138, 142, 155, 0.2)
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
SButtonTrigger[size='m'] {
|
|
29
|
-
min-width: 26px;
|
|
30
|
-
height: 28px;
|
|
31
|
-
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
32
|
-
font-size: var(--intergalactic-fs-200, 14px);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
SButtonTrigger[size='l'] {
|
|
36
|
-
min-width: 32px;
|
|
37
|
-
height: 40px;
|
|
38
|
-
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
39
|
-
font-size: var(--intergalactic-fs-300, 16px);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
SText[placeholder] {
|
|
43
|
-
color: var(--intergalactic-text-placeholder, #8a8e9b);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
SButtonTrigger[state='normal'] {
|
|
47
|
-
border-color: var(--intergalactic-border-primary, #c4c7cf);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
SButtonTrigger[state='valid'] {
|
|
51
|
-
border-color: var(--intergalactic-border-success-active, #007c65);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
SButtonTrigger[state='invalid'] {
|
|
55
|
-
border-color: var(--intergalactic-border-critical-active, #d1002f);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
1
|
SFilterTrigger[selected] {
|
|
59
2
|
border-color: var(--intergalactic-border-info-active, #006dca);
|
|
60
3
|
background-color: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
|
|
@@ -85,8 +28,3 @@ SWrapper[keyboardFocused] {
|
|
|
85
28
|
SCounter {
|
|
86
29
|
background-color: var(--intergalactic-bg-primary-info, #008ff8);
|
|
87
30
|
}
|
|
88
|
-
|
|
89
|
-
SFilterTrigger:active,
|
|
90
|
-
SFilterTrigger[active] {
|
|
91
|
-
background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
|
|
92
|
-
}
|
|
@@ -89,11 +89,6 @@ SLinkTrigger[size='l'] {
|
|
|
89
89
|
font-size: var(--intergalactic-fs-300, 16px);
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
SLinkTrigger:active:active,
|
|
93
|
-
SLinkTrigger[active][active] {
|
|
94
|
-
background-color: transparent;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
92
|
@media (prefers-reduced-motion) {
|
|
98
93
|
SLinkTrigger {
|
|
99
94
|
transition: none;
|