@haiilo/catalyst 0.11.0 → 0.12.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/dist/catalyst/catalyst.css +1 -1
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/{p-aa382647.entry.js → p-14edfc2b.entry.js} +5 -5
- package/dist/catalyst/p-14edfc2b.entry.js.map +1 -0
- package/dist/catalyst/p-5ba5e33c.entry.js +2 -0
- package/dist/catalyst/{p-c0b4200d.entry.js.map → p-5ba5e33c.entry.js.map} +1 -1
- package/dist/catalyst/scss/core/_base.scss +0 -1
- package/dist/catalyst/scss/utils/_layout.scss +4 -4
- package/dist/catalyst/scss/utils/_typography.mixins.scss +3 -3
- package/dist/cjs/cat-alert_21.cjs.entry.js +63 -23
- package/dist/cjs/cat-alert_21.cjs.entry.js.map +1 -1
- package/dist/cjs/cat-textarea.cjs.entry.js +1 -1
- package/dist/cjs/cat-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cat-button/cat-button.css +185 -0
- package/dist/collection/components/cat-checkbox/cat-checkbox.css +16 -9
- package/dist/collection/components/cat-input/cat-input.css +3 -0
- package/dist/collection/components/cat-radio/cat-radio.css +3 -0
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +30 -0
- package/dist/collection/components/cat-radio-group/cat-radio-group.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.css +4 -2
- package/dist/collection/components/cat-select/cat-select.js +76 -17
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.css +3 -0
- package/dist/collection/components/cat-toggle/cat-toggle.css +9 -9
- package/dist/collection/components/cat-tooltip/cat-tooltip.css +2 -3
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/scss/core/_base.scss +0 -1
- package/dist/collection/scss/utils/_layout.scss +4 -4
- package/dist/collection/scss/utils/_typography.mixins.scss +3 -3
- package/dist/components/cat-button2.js +1 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-checkbox.js +1 -1
- package/dist/components/cat-checkbox.js.map +1 -1
- package/dist/components/cat-input.js +1 -1
- package/dist/components/cat-input.js.map +1 -1
- package/dist/components/cat-radio-group.js +7 -1
- package/dist/components/cat-radio-group.js.map +1 -1
- package/dist/components/cat-radio.js +1 -1
- package/dist/components/cat-radio.js.map +1 -1
- package/dist/components/cat-select.js +52 -18
- package/dist/components/cat-select.js.map +1 -1
- package/dist/components/cat-textarea.js +1 -1
- package/dist/components/cat-textarea.js.map +1 -1
- package/dist/components/cat-toggle.js +1 -1
- package/dist/components/cat-toggle.js.map +1 -1
- package/dist/components/cat-tooltip.js +1 -1
- package/dist/components/cat-tooltip.js.map +1 -1
- package/dist/esm/cat-alert_21.entry.js +63 -23
- package/dist/esm/cat-alert_21.entry.js.map +1 -1
- package/dist/esm/cat-textarea.entry.js +1 -1
- package/dist/esm/cat-textarea.entry.js.map +1 -1
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-radio-group/cat-radio-group.d.ts +5 -0
- package/dist/types/components/cat-select/cat-select.d.ts +9 -0
- package/dist/types/components.d.ts +8 -0
- package/dist/types/index.d.ts +1 -1
- package/package.json +2 -2
- package/dist/catalyst/p-aa382647.entry.js.map +0 -1
- package/dist/catalyst/p-c0b4200d.entry.js +0 -2
|
@@ -192,6 +192,7 @@ label + p {
|
|
|
192
192
|
.hint-section ::slotted([slot=hint]) {
|
|
193
193
|
font-size: 0.875rem;
|
|
194
194
|
line-height: 1rem;
|
|
195
|
+
font-weight: var(--cat-font-weight-body, 400);
|
|
195
196
|
margin: 0;
|
|
196
197
|
}
|
|
197
198
|
|
|
@@ -201,6 +202,7 @@ label + p {
|
|
|
201
202
|
gap: 0.5rem;
|
|
202
203
|
font-size: 0.9375rem;
|
|
203
204
|
line-height: 1.25rem;
|
|
205
|
+
font-weight: var(--cat-font-weight-body, 400);
|
|
204
206
|
margin-bottom: 1rem;
|
|
205
207
|
}
|
|
206
208
|
|
|
@@ -230,6 +232,7 @@ label.hidden {
|
|
|
230
232
|
margin-left: 0.25rem;
|
|
231
233
|
font-size: 0.75rem;
|
|
232
234
|
line-height: 1rem;
|
|
235
|
+
font-weight: var(--cat-font-weight-body, 400);
|
|
233
236
|
color: rgb(var(--cat-font-color-muted, 105, 118, 135));
|
|
234
237
|
}
|
|
235
238
|
|
|
@@ -238,7 +241,7 @@ label.hidden {
|
|
|
238
241
|
overflow: hidden;
|
|
239
242
|
font-size: 16px;
|
|
240
243
|
}
|
|
241
|
-
.choices:focus {
|
|
244
|
+
.choices.is-focused, .choices:focus {
|
|
242
245
|
outline: none;
|
|
243
246
|
box-shadow: 0 1px 4px 0 #101d3033;
|
|
244
247
|
}
|
|
@@ -247,7 +250,6 @@ label.hidden {
|
|
|
247
250
|
}
|
|
248
251
|
.choices.is-open {
|
|
249
252
|
overflow: visible;
|
|
250
|
-
box-shadow: 0 1px 4px 0 #101d3033;
|
|
251
253
|
}
|
|
252
254
|
.choices.is-disabled .choices__inner,
|
|
253
255
|
.choices.is-disabled .choices__input {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
|
|
1
|
+
import { Component, Element, Event, h, Host, Prop, State, Watch, Listen } from '@stencil/core';
|
|
2
2
|
import Choices from 'choices.js';
|
|
3
3
|
import log from 'loglevel';
|
|
4
4
|
import { CatFormHint } from '../cat-form-hint/cat-form-hint';
|
|
@@ -77,7 +77,8 @@ export class CatSelect {
|
|
|
77
77
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, 'value', 'label', true);
|
|
78
78
|
const vItems = ((_b = this.choice) === null || _b === void 0 ? void 0 : _b.getValue()) || [];
|
|
79
79
|
const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]);
|
|
80
|
-
const
|
|
80
|
+
const value = this.value || [];
|
|
81
|
+
const vItemValues = [...value];
|
|
81
82
|
// remove duplicate items
|
|
82
83
|
(_c = this.choice) === null || _c === void 0 ? void 0 : _c.unhighlightAll();
|
|
83
84
|
vItemsArray.forEach(vItem => {
|
|
@@ -93,6 +94,7 @@ export class CatSelect {
|
|
|
93
94
|
});
|
|
94
95
|
(_d = this.choice) === null || _d === void 0 ? void 0 : _d.removeHighlightedItems(false);
|
|
95
96
|
}
|
|
97
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
96
98
|
setValueHandler(value) {
|
|
97
99
|
var _a, _b;
|
|
98
100
|
if (this.resetItemsOnNextValueChange) {
|
|
@@ -109,35 +111,47 @@ export class CatSelect {
|
|
|
109
111
|
}
|
|
110
112
|
}
|
|
111
113
|
componentDidLoad() {
|
|
112
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
114
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
113
115
|
this.init();
|
|
114
116
|
const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
115
117
|
if (attachedInternals) {
|
|
116
118
|
const root = attachedInternals.shadowRoot;
|
|
119
|
+
this.choicesElement = (root === null || root === void 0 ? void 0 : root.querySelector('.choices')) || undefined;
|
|
117
120
|
this.choiceInner = (root === null || root === void 0 ? void 0 : root.querySelector('.choices__inner')) || undefined;
|
|
118
121
|
this.choiceDropdown = ((_c = root === null || root === void 0 ? void 0 : root.querySelector('.choices__list--dropdown')) === null || _c === void 0 ? void 0 : _c.firstElementChild) || undefined;
|
|
119
122
|
}
|
|
120
|
-
(_d = this.
|
|
121
|
-
(_e = this.
|
|
122
|
-
(_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('
|
|
123
|
-
(_g = this.
|
|
123
|
+
(_d = this.choicesElement) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.resetFocus.bind(this));
|
|
124
|
+
(_e = this.choiceInner) === null || _e === void 0 ? void 0 : _e.addEventListener('click', this.showDropdownHandler.bind(this));
|
|
125
|
+
(_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('hideDropdown', this.showMultipleFocus.bind(this));
|
|
126
|
+
(_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('showDropdown', this.showMultipleFocus.bind(this));
|
|
127
|
+
(_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.resetFocus.bind(this));
|
|
128
|
+
(_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('change', this.onChange.bind(this));
|
|
129
|
+
(_k = this.selectElement) === null || _k === void 0 ? void 0 : _k.addEventListener('search', this.onSearch.bind(this));
|
|
130
|
+
(_l = this.choiceDropdown) === null || _l === void 0 ? void 0 : _l.addEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
124
131
|
if (this.multiple) {
|
|
125
|
-
(
|
|
132
|
+
(_m = this.selectElement) === null || _m === void 0 ? void 0 : _m.addEventListener('choice', this.onChoice.bind(this));
|
|
126
133
|
this.createRemoveItemButton();
|
|
127
134
|
}
|
|
128
135
|
}
|
|
129
136
|
disconnectedCallback() {
|
|
130
|
-
var _a, _b, _c, _d, _e, _f;
|
|
137
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
131
138
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
132
139
|
this.choice = undefined;
|
|
133
|
-
(_b = this.
|
|
134
|
-
(_c = this.
|
|
135
|
-
(_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('
|
|
136
|
-
(_e = this.
|
|
140
|
+
(_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.resetFocus.bind(this));
|
|
141
|
+
(_c = this.choiceInner) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.showDropdownHandler.bind(this));
|
|
142
|
+
(_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('hideDropdown', this.showMultipleFocus.bind(this));
|
|
143
|
+
(_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('showDropdown', this.showMultipleFocus.bind(this));
|
|
144
|
+
(_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('removeItem', this.resetFocus.bind(this));
|
|
145
|
+
(_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('change', this.onChange.bind(this));
|
|
146
|
+
(_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('search', this.onSearch.bind(this));
|
|
147
|
+
(_j = this.choiceDropdown) === null || _j === void 0 ? void 0 : _j.removeEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
137
148
|
if (this.multiple) {
|
|
138
|
-
(
|
|
149
|
+
(_k = this.removeElement) === null || _k === void 0 ? void 0 : _k.removeEventListener('choice', this.onChoice.bind(this));
|
|
139
150
|
}
|
|
140
151
|
}
|
|
152
|
+
onBlur(event) {
|
|
153
|
+
this.catBlur.emit(event);
|
|
154
|
+
}
|
|
141
155
|
render() {
|
|
142
156
|
return (h(Host, null,
|
|
143
157
|
(this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } },
|
|
@@ -256,12 +270,30 @@ export class CatSelect {
|
|
|
256
270
|
this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue(true);
|
|
257
271
|
this.catChange.emit(this.value);
|
|
258
272
|
}
|
|
273
|
+
showMultipleFocus() {
|
|
274
|
+
var _a, _b;
|
|
275
|
+
if (this.multiple && this.isFocused() && !((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.classList.contains('is-focused'))) {
|
|
276
|
+
(_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.classList.add('is-focused');
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
resetFocus() {
|
|
280
|
+
var _a, _b, _c;
|
|
281
|
+
if (!this.isFocused()) {
|
|
282
|
+
if (!((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('tabindex'))) {
|
|
283
|
+
(_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
|
|
284
|
+
}
|
|
285
|
+
(_c = this.choicesElement) === null || _c === void 0 ? void 0 : _c.focus();
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
isFocused() {
|
|
289
|
+
return document.activeElement === this.hostElement;
|
|
290
|
+
}
|
|
259
291
|
onChoice(event) {
|
|
260
292
|
var _a;
|
|
261
293
|
const customEvent = event;
|
|
262
|
-
const
|
|
263
|
-
if (
|
|
264
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(
|
|
294
|
+
const choice = customEvent.detail.choice;
|
|
295
|
+
if (choice.selected) {
|
|
296
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(choice.value);
|
|
265
297
|
this.onChange();
|
|
266
298
|
}
|
|
267
299
|
}
|
|
@@ -306,6 +338,7 @@ export class CatSelect {
|
|
|
306
338
|
event.stopPropagation();
|
|
307
339
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
|
|
308
340
|
this.updateRemoveItemButtonVisibility();
|
|
341
|
+
this.onChange();
|
|
309
342
|
}
|
|
310
343
|
static get is() { return "cat-select"; }
|
|
311
344
|
static get encapsulation() { return "shadow"; }
|
|
@@ -563,6 +596,25 @@ export class CatSelect {
|
|
|
563
596
|
"resolved": "any",
|
|
564
597
|
"references": {}
|
|
565
598
|
}
|
|
599
|
+
}, {
|
|
600
|
+
"method": "catBlur",
|
|
601
|
+
"name": "catBlur",
|
|
602
|
+
"bubbles": true,
|
|
603
|
+
"cancelable": true,
|
|
604
|
+
"composed": true,
|
|
605
|
+
"docs": {
|
|
606
|
+
"tags": [],
|
|
607
|
+
"text": "Emitted when the select loses focus."
|
|
608
|
+
},
|
|
609
|
+
"complexType": {
|
|
610
|
+
"original": "FocusEvent",
|
|
611
|
+
"resolved": "FocusEvent",
|
|
612
|
+
"references": {
|
|
613
|
+
"FocusEvent": {
|
|
614
|
+
"location": "global"
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
}
|
|
566
618
|
}]; }
|
|
567
619
|
static get elementRef() { return "hostElement"; }
|
|
568
620
|
static get watchers() { return [{
|
|
@@ -572,5 +624,12 @@ export class CatSelect {
|
|
|
572
624
|
"propName": "value",
|
|
573
625
|
"methodName": "setValueHandler"
|
|
574
626
|
}]; }
|
|
627
|
+
static get listeners() { return [{
|
|
628
|
+
"name": "blur",
|
|
629
|
+
"method": "onBlur",
|
|
630
|
+
"target": undefined,
|
|
631
|
+
"capture": true,
|
|
632
|
+
"passive": false
|
|
633
|
+
}]; }
|
|
575
634
|
}
|
|
576
635
|
//# sourceMappingURL=cat-select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-select.js","sourceRoot":"","sources":["../../../src/components/cat-select/cat-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport Choices, { Choice, ClassNames, Item, Options } from 'choices.js';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\nconst getOptionTemplate = (data: Item): string => {\n if (data.customProperties?.imageUrl) {\n return `\n <div class=\"d-flex align-items-center\">\n <img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />\n ${data.label}\n </div>\n `;\n }\n return `<cat-checkbox label=\"${data.label}\" checked=\"${data.selected}\"></cat-checkbox>`;\n};\n\n/**\n * A single option in the select.\n */\nexport type CatSelectItem = Pick<Choice, 'label' | 'value' | 'customProperties'>;\n\n/**\n * Select lets user choose one option from an options menu. Consider using\n * select when you have 6 or more options. Select component supports any content\n * type.\n *\n * @slot hint - Optional hint element to be displayed with the select.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n tag: 'cat-select',\n styleUrl: 'cat-select.scss',\n shadow: true\n})\nexport class CatSelect {\n private readonly i18n = CatI18nRegistry.getInstance();\n private readonly id = `cat-select-${nextUniqueId++}`;\n private resetItemsOnNextValueChange = true;\n\n private choice?: Choices;\n private choiceInner?: Element;\n private choiceDropdown?: Element;\n private selectElement?: HTMLSelectElement;\n private removeElement?: HTMLCatButtonElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /**\n * The label for the select.\n */\n @Prop() label = '';\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @Prop() labelHidden = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * The available options for the input.\n */\n @Prop() items: CatSelectItem[] = [];\n\n /**\n * The value of the select.\n */\n @Prop({ mutable: true }) value?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n /**\n * Disable the select.\n */\n @Prop() disabled = false;\n\n /**\n * Enable multiple selection.\n */\n @Prop() multiple = false;\n\n /**\n * The placeholder for the select.\n */\n @Prop() placeholder = '';\n\n /**\n * Whether the dropdown should appear above `(top)` or below `(bottom)` the\n * input. By default, if there is not enough space within the window the\n * dropdown will appear above the input, otherwise below it.\n */\n @Prop() position: 'auto' | 'top' | 'bottom' = 'auto';\n\n /**\n * Enable search for the select.\n */\n @Prop() search = false;\n\n /**\n * Optional hint text(s) to be displayed with the select.\n */\n @Prop() hint?: string | string[];\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter;\n\n /**\n * Emitted when the search is triggered.\n */\n @Event() catSearch!: EventEmitter;\n\n /**\n * Emitted when scrolled to the bottom.\n */\n @Event() catScrolledBottom!: EventEmitter;\n\n @Watch('items')\n setChoicesHandler(items: CatSelectItem[]) {\n const isSelected = (item: CatSelectItem) => this.value?.includes(item.value);\n const choices = items.map(item => ({ ...item, selected: isSelected(item) }));\n this.choice?.setChoices(choices, 'value', 'label', true);\n\n const vItems = this.choice?.getValue() || [];\n const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]) as Item[];\n const vItemValues = [...this.value];\n\n // remove duplicate items\n this.choice?.unhighlightAll();\n vItemsArray.forEach(vItem => {\n const index = vItemValues.indexOf(vItem.value);\n if (index > -1) {\n vItemValues.splice(index, 1);\n } else {\n vItem.choiceId = -1; // disconnect item from choice\n this.choice?.highlightItem(vItem, false);\n }\n });\n this.choice?.removeHighlightedItems(false);\n }\n\n @Watch('value')\n setValueHandler(value?: any) { // eslint-disable-line @typescript-eslint/no-explicit-any\n if (this.resetItemsOnNextValueChange) {\n this.choice?.removeActiveItems(-1);\n }\n this.resetItemsOnNextValueChange = true;\n this.choice?.setChoiceByValue(value);\n this.multiple && this.updateRemoveItemButtonVisibility();\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.error('[A11y] Missing ARIA label on select', this);\n }\n }\n\n componentDidLoad(): void {\n this.init();\n const attachedInternals: ElementInternals | undefined = this.hostElement.attachInternals?.();\n if (attachedInternals) {\n const root = attachedInternals.shadowRoot;\n this.choiceInner = root?.querySelector('.choices__inner') || undefined;\n this.choiceDropdown = root?.querySelector('.choices__list--dropdown')?.firstElementChild || undefined;\n }\n this.choiceInner?.addEventListener('click', this.showDropdownHandler.bind(this));\n this.selectElement?.addEventListener('change', this.onChange.bind(this));\n this.selectElement?.addEventListener('search', this.onSearch.bind(this));\n this.choiceDropdown?.addEventListener('scroll', this.onScrolledBottom.bind(this));\n if (this.multiple) {\n this.selectElement?.addEventListener('choice', this.onChoice.bind(this));\n this.createRemoveItemButton();\n }\n }\n\n disconnectedCallback(): void {\n this.choice?.destroy();\n this.choice = undefined;\n this.choiceInner?.removeEventListener('click', this.showDropdownHandler.bind(this));\n this.selectElement?.removeEventListener('change', this.onChange.bind(this));\n this.selectElement?.removeEventListener('search', this.onSearch.bind(this));\n this.choiceDropdown?.removeEventListener('scroll', this.onScrolledBottom.bind(this));\n if (this.multiple) {\n this.removeElement?.removeEventListener('choice', this.onChoice.bind(this));\n }\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel || this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n {!this.required && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({this.i18n.t('input.optional')})\n </span>\n )}\n </span>\n </label>\n )}\n <select\n id={this.id}\n ref={el => (this.selectElement = el)}\n multiple={this.multiple}\n disabled={this.disabled}\n ></select>\n {this.hintSection}\n </Host>\n );\n }\n\n private init() {\n const component = this; // eslint-disable-line @typescript-eslint/no-this-alias\n const removeItemText = (value: string) => this.i18n.t('select.removeItem', { value });\n const config = {\n allowHTML: true,\n removeItemButton: true,\n duplicateItemsAllowed: false,\n delimiter: '',\n paste: false,\n searchEnabled: this.search,\n searchChoices: false,\n position: this.position,\n resetScrollPosition: false,\n placeholder: !!this.placeholder,\n placeholderValue: this.placeholder || '',\n searchPlaceholderValue: this.i18n.t('select.searchPlaceholder'),\n renderSelectedChoices: 'always' as 'auto' | 'always',\n loadingText: this.i18n.t('select.loading'),\n noResultsText: this.i18n.t('select.noResults'),\n noChoicesText: this.i18n.t('select.noChoices'),\n itemSelectText: this.i18n.t('select.selectItem'),\n addItemText: (value: string) => this.i18n.t('select.addItem', { value }),\n maxItemText: (maxItemCount: number) => this.i18n.t('select.maxItem', { maxItemCount }),\n uniqueItemText: this.i18n.t('select.uniqueItem'),\n customAddItemText: this.i18n.t('select.customAddItem'),\n callbackOnInit: function () {\n const choice = this as unknown as Choices;\n choice.setChoices(component.items, 'value', 'label', true);\n choice.setChoiceByValue(component.value);\n }\n };\n\n const configSingle = {\n callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n return {\n item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n const template = data.customProperties?.imageUrl\n ? `<img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />`\n : '';\n return strToEl(\n `\n <div class=\"${classNames.item} ${\n data.highlighted ? classNames.highlightedState : classNames.itemSelectable\n } ${data.placeholder ? classNames.placeholder : ''}\" data-item data-id=\"${data.id}\" data-value=\"${\n data.value\n }\" ${data.active ? 'aria-selected=\"true\"' : ''} ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n <span>${template}</span> ${data.label}\n <button type=\"button\"\n class=\"${classNames.button}\"\n aria-label=\"${removeItemText(data.label)}\"\n data-button>${removeItemText(data.label)}</button>\n </div>\n `\n );\n }\n };\n }\n };\n\n const configMultiple = {\n callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n const itemSelectText = config.itemSelectText;\n return {\n item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n const template = data.customProperties?.imageUrl\n ? `<img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem;\" />`\n : '';\n return strToEl(\n `<div class=\"\n ${classNames.item}\n ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}\n ${data.placeholder ? classNames.placeholder : ''}\"\n data-item data-id=\"${data.id}\" data-value=\"${data.value}\"\n ${data.active ? 'aria-selected=\"true\"' : ''}\n ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n ${template}\n ${data.label}\n <button type=\"button\"\n class=\"${classNames.button}\"\n aria-label=\"${removeItemText(data.label)}\"\n data-button>${removeItemText(data.label)}</button>\n </div>`\n );\n },\n choice: function ({ classNames }: { classNames: ClassNames }, data: Item) {\n const template = getOptionTemplate(data);\n const className = `${String(classNames.item)} ${String(classNames.itemChoice)}\n ${String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}\n ${data.selected ? 'choices__item--selected' : ''}`;\n return strToEl(\n `<div class=\"${className}\"\n data-select-text=\"${itemSelectText}\"\n data-choice data-id=\"${String(data.id)}\" data-value=\"${String(data.value)}\"\n ${data.disabled ? 'data-choice-disabled aria-disabled=\"true\"' : 'data-choice-selectable'}\n ${data.groupId && data.groupId > 0 ? 'role=\"treeitem\"' : 'role=\"option\"'}>\n ${template}\n </div>`\n );\n }\n };\n }\n };\n\n const settings: Partial<Options> = this.multiple\n ? { ...config, ...configMultiple }\n : { ...config, ...configSingle };\n this.choice = new Choices(this.selectElement, settings);\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint || hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onChange() {\n this.resetItemsOnNextValueChange = false;\n this.value = this.choice?.getValue(true);\n this.catChange.emit(this.value);\n }\n\n private onChoice(event: Event) {\n const customEvent = event as CustomEvent<{ choice: Choice }>;\n const coice = customEvent.detail.choice;\n if (coice.selected) {\n this.choice?.removeActiveItemsByValue(coice.value);\n this.onChange();\n }\n }\n\n private onSearch(event: Event) {\n const customEvent = event as CustomEvent<{ value: string }>;\n this.catSearch.emit(customEvent.detail.value);\n }\n\n private onScrolledBottom() {\n const scrolledBottom =\n this.choiceDropdown?.scrollHeight ===\n (this.choiceDropdown?.scrollTop || 0) + (this.choiceDropdown?.clientHeight || 0);\n if (scrolledBottom) {\n this.catScrolledBottom.emit();\n }\n }\n\n private showDropdownHandler() {\n !this.disabled && this.choice?.showDropdown();\n }\n\n private createRemoveItemButton() {\n this.removeElement = document.createElement('cat-button') as HTMLCatButtonElement;\n this.removeElement.icon = 'cross-circle-outlined';\n this.removeElement.iconOnly = true;\n this.removeElement.a11yLabel = this.i18n.t('select.removeItem');\n this.updateRemoveItemButtonVisibility();\n this.removeElement.addEventListener('click', this.onRemoveItemButtonClick.bind(this));\n this.choiceInner?.appendChild(this.removeElement);\n }\n\n private updateRemoveItemButtonVisibility() {\n const items = Array.from(this.choice?.getValue() as Item[]);\n if (items.length) {\n this.removeElement?.removeAttribute('hidden');\n } else {\n this.removeElement?.setAttribute('hidden', 'true');\n }\n }\n\n private onRemoveItemButtonClick(event: Event) {\n event.stopPropagation();\n this.choice?.removeActiveItems(-1);\n this.updateRemoveItemButtonVisibility();\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-select.js","sourceRoot":"","sources":["../../../src/components/cat-select/cat-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch, Listen } from '@stencil/core';\nimport Choices, { Choice, ClassNames, Item, Options } from 'choices.js';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\nconst getOptionTemplate = (data: Item): string => {\n if (data.customProperties?.imageUrl) {\n return `\n <div class=\"d-flex align-items-center\">\n <img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />\n ${data.label}\n </div>\n `;\n }\n return `<cat-checkbox label=\"${data.label}\" checked=\"${data.selected}\"></cat-checkbox>`;\n};\n\n/**\n * A single option in the select.\n */\nexport type CatSelectItem = Pick<Choice, 'label' | 'value' | 'customProperties'>;\n\n/**\n * Select lets user choose one option from an options menu. Consider using\n * select when you have 6 or more options. Select component supports any content\n * type.\n *\n * @slot hint - Optional hint element to be displayed with the select.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n tag: 'cat-select',\n styleUrl: 'cat-select.scss',\n shadow: true\n})\nexport class CatSelect {\n private readonly i18n = CatI18nRegistry.getInstance();\n private readonly id = `cat-select-${nextUniqueId++}`;\n private resetItemsOnNextValueChange = true;\n\n private choice?: Choices;\n private choicesElement?: HTMLElement;\n private choiceInner?: Element;\n private choiceDropdown?: Element;\n private selectElement?: HTMLSelectElement;\n private removeElement?: HTMLCatButtonElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /**\n * The label for the select.\n */\n @Prop() label = '';\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @Prop() labelHidden = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * The available options for the input.\n */\n @Prop() items: CatSelectItem[] = [];\n\n /**\n * The value of the select.\n */\n @Prop({ mutable: true }) value?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n /**\n * Disable the select.\n */\n @Prop() disabled = false;\n\n /**\n * Enable multiple selection.\n */\n @Prop() multiple = false;\n\n /**\n * The placeholder for the select.\n */\n @Prop() placeholder = '';\n\n /**\n * Whether the dropdown should appear above `(top)` or below `(bottom)` the\n * input. By default, if there is not enough space within the window the\n * dropdown will appear above the input, otherwise below it.\n */\n @Prop() position: 'auto' | 'top' | 'bottom' = 'auto';\n\n /**\n * Enable search for the select.\n */\n @Prop() search = false;\n\n /**\n * Optional hint text(s) to be displayed with the select.\n */\n @Prop() hint?: string | string[];\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter;\n\n /**\n * Emitted when the search is triggered.\n */\n @Event() catSearch!: EventEmitter;\n\n /**\n * Emitted when scrolled to the bottom.\n */\n @Event() catScrolledBottom!: EventEmitter;\n\n /**\n * Emitted when the select loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n @Watch('items')\n setChoicesHandler(items: CatSelectItem[]) {\n const isSelected = (item: CatSelectItem) => this.value?.includes(item.value);\n const choices = items.map(item => ({ ...item, selected: isSelected(item) }));\n this.choice?.setChoices(choices, 'value', 'label', true);\n\n const vItems = this.choice?.getValue() || [];\n const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]) as Item[];\n const value = this.value || [];\n const vItemValues = [...value];\n\n // remove duplicate items\n this.choice?.unhighlightAll();\n vItemsArray.forEach(vItem => {\n const index = vItemValues.indexOf(vItem.value);\n if (index > -1) {\n vItemValues.splice(index, 1);\n } else {\n vItem.choiceId = -1; // disconnect item from choice\n this.choice?.highlightItem(vItem, false);\n }\n });\n this.choice?.removeHighlightedItems(false);\n }\n\n @Watch('value')\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n setValueHandler(value?: any) {\n if (this.resetItemsOnNextValueChange) {\n this.choice?.removeActiveItems(-1);\n }\n this.resetItemsOnNextValueChange = true;\n this.choice?.setChoiceByValue(value);\n this.multiple && this.updateRemoveItemButtonVisibility();\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.error('[A11y] Missing ARIA label on select', this);\n }\n }\n\n componentDidLoad(): void {\n this.init();\n const attachedInternals: ElementInternals | undefined = this.hostElement.attachInternals?.();\n if (attachedInternals) {\n const root = attachedInternals.shadowRoot;\n this.choicesElement = root?.querySelector('.choices') || undefined;\n this.choiceInner = root?.querySelector('.choices__inner') || undefined;\n this.choiceDropdown = root?.querySelector('.choices__list--dropdown')?.firstElementChild || undefined;\n }\n this.choicesElement?.addEventListener('click', this.resetFocus.bind(this));\n this.choiceInner?.addEventListener('click', this.showDropdownHandler.bind(this));\n this.selectElement?.addEventListener('hideDropdown', this.showMultipleFocus.bind(this));\n this.selectElement?.addEventListener('showDropdown', this.showMultipleFocus.bind(this));\n this.selectElement?.addEventListener('removeItem', this.resetFocus.bind(this));\n this.selectElement?.addEventListener('change', this.onChange.bind(this));\n this.selectElement?.addEventListener('search', this.onSearch.bind(this));\n this.choiceDropdown?.addEventListener('scroll', this.onScrolledBottom.bind(this));\n if (this.multiple) {\n this.selectElement?.addEventListener('choice', this.onChoice.bind(this));\n this.createRemoveItemButton();\n }\n }\n\n disconnectedCallback(): void {\n this.choice?.destroy();\n this.choice = undefined;\n this.choicesElement?.removeEventListener('click', this.resetFocus.bind(this));\n this.choiceInner?.removeEventListener('click', this.showDropdownHandler.bind(this));\n this.selectElement?.removeEventListener('hideDropdown', this.showMultipleFocus.bind(this));\n this.selectElement?.removeEventListener('showDropdown', this.showMultipleFocus.bind(this));\n this.selectElement?.removeEventListener('removeItem', this.resetFocus.bind(this));\n this.selectElement?.removeEventListener('change', this.onChange.bind(this));\n this.selectElement?.removeEventListener('search', this.onSearch.bind(this));\n this.choiceDropdown?.removeEventListener('scroll', this.onScrolledBottom.bind(this));\n if (this.multiple) {\n this.removeElement?.removeEventListener('choice', this.onChoice.bind(this));\n }\n }\n\n @Listen('blur', { capture: true })\n onBlur(event: FocusEvent): void {\n this.catBlur.emit(event);\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel || this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n {!this.required && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({this.i18n.t('input.optional')})\n </span>\n )}\n </span>\n </label>\n )}\n <select\n id={this.id}\n ref={el => (this.selectElement = el)}\n multiple={this.multiple}\n disabled={this.disabled}\n ></select>\n {this.hintSection}\n </Host>\n );\n }\n\n private init() {\n const component = this; // eslint-disable-line @typescript-eslint/no-this-alias\n const removeItemText = (value: string) => this.i18n.t('select.removeItem', { value });\n const config = {\n allowHTML: true,\n removeItemButton: true,\n duplicateItemsAllowed: false,\n delimiter: '',\n paste: false,\n searchEnabled: this.search,\n searchChoices: false,\n position: this.position,\n resetScrollPosition: false,\n placeholder: !!this.placeholder,\n placeholderValue: this.placeholder || '',\n searchPlaceholderValue: this.i18n.t('select.searchPlaceholder'),\n renderSelectedChoices: 'always' as 'auto' | 'always',\n loadingText: this.i18n.t('select.loading'),\n noResultsText: this.i18n.t('select.noResults'),\n noChoicesText: this.i18n.t('select.noChoices'),\n itemSelectText: this.i18n.t('select.selectItem'),\n addItemText: (value: string) => this.i18n.t('select.addItem', { value }),\n maxItemText: (maxItemCount: number) => this.i18n.t('select.maxItem', { maxItemCount }),\n uniqueItemText: this.i18n.t('select.uniqueItem'),\n customAddItemText: this.i18n.t('select.customAddItem'),\n callbackOnInit: function () {\n const choice = this as unknown as Choices;\n choice.setChoices(component.items, 'value', 'label', true);\n choice.setChoiceByValue(component.value);\n }\n };\n\n const configSingle = {\n callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n return {\n item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n const template = data.customProperties?.imageUrl\n ? `<img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />`\n : '';\n return strToEl(\n `\n <div class=\"${classNames.item} ${\n data.highlighted ? classNames.highlightedState : classNames.itemSelectable\n } ${data.placeholder ? classNames.placeholder : ''}\" data-item data-id=\"${data.id}\" data-value=\"${\n data.value\n }\" ${data.active ? 'aria-selected=\"true\"' : ''} ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n <span>${template}</span> ${data.label}\n <button type=\"button\"\n class=\"${classNames.button}\"\n aria-label=\"${removeItemText(data.label)}\"\n data-button>${removeItemText(data.label)}</button>\n </div>\n `\n );\n }\n };\n }\n };\n\n const configMultiple = {\n callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n const itemSelectText = config.itemSelectText;\n return {\n item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n const template = data.customProperties?.imageUrl\n ? `<img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem;\" />`\n : '';\n return strToEl(\n `<div class=\"\n ${classNames.item}\n ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}\n ${data.placeholder ? classNames.placeholder : ''}\"\n data-item data-id=\"${data.id}\" data-value=\"${data.value}\"\n ${data.active ? 'aria-selected=\"true\"' : ''}\n ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n ${template}\n ${data.label}\n <button type=\"button\"\n class=\"${classNames.button}\"\n aria-label=\"${removeItemText(data.label)}\"\n data-button>${removeItemText(data.label)}</button>\n </div>`\n );\n },\n choice: function ({ classNames }: { classNames: ClassNames }, data: Item) {\n const template = getOptionTemplate(data);\n const className = `${String(classNames.item)} ${String(classNames.itemChoice)}\n ${String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}\n ${data.selected ? 'choices__item--selected' : ''}`;\n return strToEl(\n `<div class=\"${className}\"\n data-select-text=\"${itemSelectText}\"\n data-choice data-id=\"${String(data.id)}\" data-value=\"${String(data.value)}\"\n ${data.disabled ? 'data-choice-disabled aria-disabled=\"true\"' : 'data-choice-selectable'}\n ${data.groupId && data.groupId > 0 ? 'role=\"treeitem\"' : 'role=\"option\"'}>\n ${template}\n </div>`\n );\n }\n };\n }\n };\n\n const settings: Partial<Options> = this.multiple\n ? { ...config, ...configMultiple }\n : { ...config, ...configSingle };\n this.choice = new Choices(this.selectElement, settings);\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint || hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onChange() {\n this.resetItemsOnNextValueChange = false;\n this.value = this.choice?.getValue(true);\n this.catChange.emit(this.value);\n }\n\n private showMultipleFocus() {\n if (this.multiple && this.isFocused() && !this.choicesElement?.classList.contains('is-focused')) {\n this.choicesElement?.classList.add('is-focused');\n }\n }\n\n private resetFocus() {\n if (!this.isFocused()) {\n if (!this.choicesElement?.hasAttribute('tabindex')) {\n this.choicesElement?.setAttribute('tabindex', '0');\n }\n this.choicesElement?.focus();\n }\n }\n\n private isFocused() {\n return document.activeElement === this.hostElement;\n }\n\n private onChoice(event: Event) {\n const customEvent = event as CustomEvent<{ choice: Choice }>;\n const choice = customEvent.detail.choice;\n if (choice.selected) {\n this.choice?.removeActiveItemsByValue(choice.value);\n this.onChange();\n }\n }\n\n private onSearch(event: Event) {\n const customEvent = event as CustomEvent<{ value: string }>;\n this.catSearch.emit(customEvent.detail.value);\n }\n\n private onScrolledBottom() {\n const scrolledBottom =\n this.choiceDropdown?.scrollHeight ===\n (this.choiceDropdown?.scrollTop || 0) + (this.choiceDropdown?.clientHeight || 0);\n if (scrolledBottom) {\n this.catScrolledBottom.emit();\n }\n }\n\n private showDropdownHandler() {\n !this.disabled && this.choice?.showDropdown();\n }\n\n private createRemoveItemButton() {\n this.removeElement = document.createElement('cat-button') as HTMLCatButtonElement;\n this.removeElement.icon = 'cross-circle-outlined';\n this.removeElement.iconOnly = true;\n this.removeElement.a11yLabel = this.i18n.t('select.removeItem');\n this.updateRemoveItemButtonVisibility();\n this.removeElement.addEventListener('click', this.onRemoveItemButtonClick.bind(this));\n this.choiceInner?.appendChild(this.removeElement);\n }\n\n private updateRemoveItemButtonVisibility() {\n const items = Array.from(this.choice?.getValue() as Item[]);\n if (items.length) {\n this.removeElement?.removeAttribute('hidden');\n } else {\n this.removeElement?.setAttribute('hidden', 'true');\n }\n }\n\n private onRemoveItemButtonClick(event: Event) {\n event.stopPropagation();\n this.choice?.removeActiveItems(-1);\n this.updateRemoveItemButtonVisibility();\n this.onChange();\n }\n}\n"]}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
.hint-section ::slotted([slot=hint]) {
|
|
13
13
|
font-size: 0.875rem;
|
|
14
14
|
line-height: 1rem;
|
|
15
|
+
font-weight: var(--cat-font-weight-body, 400);
|
|
15
16
|
margin: 0;
|
|
16
17
|
}
|
|
17
18
|
|
|
@@ -21,6 +22,7 @@
|
|
|
21
22
|
gap: 0.5rem;
|
|
22
23
|
font-size: 0.9375rem;
|
|
23
24
|
line-height: 1.25rem;
|
|
25
|
+
font-weight: var(--cat-font-weight-body, 400);
|
|
24
26
|
margin-bottom: 1rem;
|
|
25
27
|
}
|
|
26
28
|
|
|
@@ -47,6 +49,7 @@ label.hidden {
|
|
|
47
49
|
margin-left: 0.25rem;
|
|
48
50
|
font-size: 0.75rem;
|
|
49
51
|
line-height: 1rem;
|
|
52
|
+
font-weight: var(--cat-font-weight-body, 400);
|
|
50
53
|
color: rgb(var(--cat-font-color-muted, 105, 118, 135));
|
|
51
54
|
}
|
|
52
55
|
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
.hint-section ::slotted([slot=hint]) {
|
|
13
13
|
font-size: 0.875rem;
|
|
14
14
|
line-height: 1rem;
|
|
15
|
+
font-weight: var(--cat-font-weight-body, 400);
|
|
15
16
|
margin: 0;
|
|
16
17
|
}
|
|
17
18
|
|
|
@@ -32,6 +33,7 @@ label {
|
|
|
32
33
|
gap: 0.5rem;
|
|
33
34
|
font-size: 0.9375rem;
|
|
34
35
|
line-height: 1.25rem;
|
|
36
|
+
font-weight: var(--cat-font-weight-body, 400);
|
|
35
37
|
/* stylelint-disable property-no-vendor-prefix */
|
|
36
38
|
-webkit-user-select: none;
|
|
37
39
|
-ms-user-select: none;
|
|
@@ -45,15 +47,12 @@ label {
|
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
input {
|
|
48
|
-
position: absolute
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
clip: rect(0, 0, 0, 0) !important;
|
|
55
|
-
white-space: nowrap !important;
|
|
56
|
-
border: 0 !important;
|
|
50
|
+
position: absolute;
|
|
51
|
+
margin: 0;
|
|
52
|
+
width: 2rem;
|
|
53
|
+
height: 1.25rem;
|
|
54
|
+
opacity: 0;
|
|
55
|
+
cursor: inherit;
|
|
57
56
|
}
|
|
58
57
|
|
|
59
58
|
.toggle {
|
|
@@ -67,6 +66,7 @@ input {
|
|
|
67
66
|
border-radius: 10rem;
|
|
68
67
|
background-color: #d7dbe0;
|
|
69
68
|
transition: background-color 0.13s ease;
|
|
69
|
+
pointer-events: none;
|
|
70
70
|
}
|
|
71
71
|
:checked + .toggle {
|
|
72
72
|
background-color: rgb(var(--cat-primary-bg, 32, 127, 138));
|
|
@@ -17,14 +17,13 @@
|
|
|
17
17
|
line-height: 1rem;
|
|
18
18
|
font-weight: 500;
|
|
19
19
|
padding: 0.75rem;
|
|
20
|
-
background-color:
|
|
20
|
+
background-color: black;
|
|
21
21
|
border-radius: 0.25rem;
|
|
22
|
-
color:
|
|
22
|
+
color: white;
|
|
23
23
|
transition: opacity 0.25s linear, visibility 0.25s linear;
|
|
24
24
|
visibility: hidden;
|
|
25
25
|
opacity: 0;
|
|
26
26
|
box-shadow: rgba(0, 0, 0, 0.08) 0 1px 8px 0;
|
|
27
|
-
border: 1px solid #ebecf0;
|
|
28
27
|
z-index: 200;
|
|
29
28
|
max-width: 16rem;
|
|
30
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\nexport { NotificationsService } from './components/cat-notification/cat-notification';\nexport {
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\nexport { NotificationsService } from './components/cat-notification/cat-notification';\nexport { CatSelectItem } from './components/cat-select/cat-select';\n"]}
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
|
|
44
44
|
@include -layout-property('justify-items-start', 'justify-items', 'flex-start');
|
|
45
45
|
@include -layout-property('justify-items-end', 'justify-items', 'flex-end');
|
|
46
|
-
@include -layout-property('justify-items-center', 'justify-items', '
|
|
47
|
-
@include -layout-property('justify-items-stretch', 'justify-items', '
|
|
46
|
+
@include -layout-property('justify-items-center', 'justify-items', 'center');
|
|
47
|
+
@include -layout-property('justify-items-stretch', 'justify-items', 'stretch');
|
|
48
48
|
|
|
49
49
|
@include -layout-property('content-start', 'align-content', 'flex-start');
|
|
50
50
|
@include -layout-property('content-end', 'align-content', 'flex-end');
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
|
|
56
56
|
@include -layout-property('items-start', 'align-items', 'flex-start');
|
|
57
57
|
@include -layout-property('items-end', 'align-items', 'flex-end');
|
|
58
|
-
@include -layout-property('items-center', 'align-items', '
|
|
59
|
-
@include -layout-property('items-stretch', 'align-items', '
|
|
58
|
+
@include -layout-property('items-center', 'align-items', 'center');
|
|
59
|
+
@include -layout-property('items-stretch', 'align-items', 'stretch');
|
|
60
60
|
|
|
61
61
|
// -- Grid
|
|
62
62
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
@return cat-token('size.line.head.#{$size}');
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
@mixin cat-head($size, $weight:
|
|
17
|
+
@mixin cat-head($size, $weight: cat-token('font.weight.head')) {
|
|
18
18
|
font-family: cat-head-font-family();
|
|
19
19
|
font-size: cat-head-font-size($size);
|
|
20
20
|
line-height: cat-head-line-height($size);
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
@return cat-token('size.line.body.#{$size}');
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
@mixin cat-body($size, $weight:
|
|
39
|
+
@mixin cat-body($size, $weight: cat-token('font.weight.body')) {
|
|
40
40
|
// skip font family, as it is set on the body
|
|
41
41
|
// skip color, as it is set on the body
|
|
42
42
|
font-size: cat-body-font-size($size);
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
@return cat-token('size.line.mono.#{$size}');
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
@mixin cat-mono($size, $weight:
|
|
61
|
+
@mixin cat-mono($size, $weight: cat-token('font.weight.mono')) {
|
|
62
62
|
font-family: cat-mono-font-family();
|
|
63
63
|
font-size: cat-mono-font-size($size);
|
|
64
64
|
line-height: cat-mono-line-height($size);
|
|
@@ -118,7 +118,7 @@ function createEmptyStyleRule(query) {
|
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
|
|
121
|
+
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xs]){margin:-0.25rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
|
|
122
122
|
|
|
123
123
|
const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
124
124
|
constructor() {
|