@haiilo/catalyst 12.3.2 → 12.3.3
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.esm.js +1 -1
- package/dist/catalyst/{p-52889fcc.entry.js → p-72182657.entry.js} +3 -3
- package/dist/catalyst/p-72182657.entry.js.map +1 -0
- package/dist/cjs/cat-alert_30.cjs.entry.js +24 -10
- package/dist/cjs/cat-alert_30.cjs.entry.js.map +1 -1
- package/dist/collection/components/cat-button/cat-button.css +4 -2
- package/dist/collection/components/cat-time/cat-time-locale.js +1 -4
- package/dist/collection/components/cat-time/cat-time-locale.js.map +1 -1
- package/dist/collection/components/cat-time/cat-time.js +22 -5
- package/dist/collection/components/cat-time/cat-time.js.map +1 -1
- package/dist/components/cat-button2.js +1 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-time.js +23 -9
- package/dist/components/cat-time.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +24 -10
- package/dist/esm/cat-alert_30.entry.js.map +1 -1
- package/dist/types/components/cat-time/cat-time.d.ts +2 -0
- package/package.json +2 -2
- package/dist/catalyst/p-52889fcc.entry.js.map +0 -1
|
@@ -148,15 +148,17 @@
|
|
|
148
148
|
background-color: transparent;
|
|
149
149
|
color: rgb(var(--text));
|
|
150
150
|
text-decoration: var(--cat-link-button-decoration, none);
|
|
151
|
+
text-underline-offset: 2px;
|
|
152
|
+
text-decoration-thickness: 1px;
|
|
151
153
|
}
|
|
152
154
|
.cat-button-link.cat-button-disabled {
|
|
153
155
|
--text: var(--cat-font-color-muted, 81, 92, 108);
|
|
154
156
|
}
|
|
155
157
|
.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
156
|
-
text-decoration: var(--cat-link-button-decoration-hover, underline);
|
|
158
|
+
text-decoration-style: var(--cat-link-button-decoration-hover, underline);
|
|
157
159
|
}
|
|
158
160
|
.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
159
|
-
text-decoration: var(--cat-link-button-decoration-hover, underline);
|
|
161
|
+
text-decoration-style: var(--cat-link-button-decoration-hover, underline);
|
|
160
162
|
}
|
|
161
163
|
|
|
162
164
|
.cat-button-primary {
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { catI18nRegistry as i18n } from "../cat-i18n/cat-i18n-registry";
|
|
2
2
|
export function getHour12(language) {
|
|
3
|
-
|
|
4
|
-
.format(new Date())
|
|
5
|
-
.toLowerCase();
|
|
6
|
-
return dateStr.includes('am') || dateStr.includes('pm');
|
|
3
|
+
return new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' }).resolvedOptions().hour12 ?? false;
|
|
7
4
|
}
|
|
8
5
|
export function getLocale(language) {
|
|
9
6
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-time-locale.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time-locale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAGxE,MAAM,UAAU,SAAS,CAAC,QAAgB;IACxC,
|
|
1
|
+
{"version":3,"file":"cat-time-locale.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time-locale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAGxE,MAAM,UAAU,SAAS,CAAC,QAAgB;IACxC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC,MAAM,IAAI,KAAK,CAAC;AACrH,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,QAAgB;IACxC,OAAO;QACL,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;QACnC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;QACnC,UAAU,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;KAC9C,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAU;IAClC,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AAC3G,CAAC","sourcesContent":["import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { TimeFormatType } from 'cleave-zen/dist/time/types';\n\nexport function getHour12(language: string): boolean {\n return new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' }).resolvedOptions().hour12 ?? false;\n}\n\nexport function getLocale(language: string): { [key: string]: string } & { timeFormat: TimeFormatType } {\n return {\n change: i18n.t('timepicker.change'),\n choose: i18n.t('timepicker.choose'),\n timeFormat: getHour12(language) ? '12' : '24'\n };\n}\n\nexport function formatIso(date: Date) {\n return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;\n}\n"]}
|
|
@@ -10,6 +10,7 @@ export class CatTime {
|
|
|
10
10
|
this.language = i18n.getLocale();
|
|
11
11
|
this.locale = getLocale(this.language);
|
|
12
12
|
this.timeMaskOptions = { timeFormat: this.locale.timeFormat, timePattern: ['h', 'm'] };
|
|
13
|
+
this.localizedDayPeriods = this.getLocalizedDayPeriods(this.language);
|
|
13
14
|
this.hasSlottedLabel = false;
|
|
14
15
|
this.hasSlottedHint = false;
|
|
15
16
|
this.selectionTime = null;
|
|
@@ -115,14 +116,14 @@ export class CatTime {
|
|
|
115
116
|
*/
|
|
116
117
|
async select(date) {
|
|
117
118
|
const oldValue = this.value;
|
|
118
|
-
let newValue
|
|
119
|
+
let newValue;
|
|
119
120
|
if (!date) {
|
|
120
121
|
this.selectionTime = null;
|
|
121
122
|
newValue = undefined;
|
|
122
123
|
}
|
|
123
124
|
else {
|
|
124
125
|
const time = clampTime(this.min ?? null, date, this.max ?? null);
|
|
125
|
-
this.isAm = this.format(time).toLowerCase().includes(
|
|
126
|
+
this.isAm = this.format(time).toLowerCase().includes(this.localizedDayPeriods.am.toLowerCase());
|
|
126
127
|
this.selectionTime = time;
|
|
127
128
|
newValue = formatIso(time);
|
|
128
129
|
}
|
|
@@ -165,14 +166,14 @@ export class CatTime {
|
|
|
165
166
|
}
|
|
166
167
|
render() {
|
|
167
168
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
168
|
-
return (h(Host, { key: '
|
|
169
|
+
return (h(Host, { key: '2025cdaa021635ee439a4a02d3ff785ad5d7e6b1' }, h("cat-input", { key: '4b4d5116691031cdfca0c5dc2505df4bcc45eae6', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, timeMaskOptions: this.timeMaskOptions, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: '4c4d14f8434f006567ecfb2daac038305073b92d', slot: "label" }, this.hasSlottedLabel && h("slot", { key: 'e8d5a908a81ee97f192e87648fef499988216de2', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '46ca2c5967d88e9b6cddb36982bf476c5bcb8746', class: "label-aria" }, " (HH:mm)")), h("div", { key: '6e590af0ca4c42ca8851c38f9e8e7e6a57412f02', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: '0cedddaae33c0cbb1b3a5a3dd015814412d55c96', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? this.localizedDayPeriods.am : this.localizedDayPeriods.pm)), h("cat-dropdown", { key: 'dbf68f80cf3db81cad5d30b4a4788055f019f358', slot: "addon", placement: this.placement }, h("cat-button", { key: '0db9cec70ded6901153ec3b725526e2f1798338b', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), h("nav", { key: '5e2f440e3a6b481edbc7cead067d8cb5a36cd6f6', slot: "content", class: "cat-nav" }, h("ul", { key: '2993dd0d03f48a8da01fc7b5e73338a6d440610d' }, this.timeArray().map(time => {
|
|
169
170
|
const isoTime = formatIso(time);
|
|
170
171
|
const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
|
|
171
172
|
return (h("li", null, h("cat-button", { class: {
|
|
172
173
|
'cat-nav-item': true,
|
|
173
174
|
'time-disabled': disabled
|
|
174
175
|
}, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
|
|
175
|
-
}))))), this.hasSlottedHint && (h("span", { key: '
|
|
176
|
+
}))))), this.hasSlottedHint && (h("span", { key: '7feb6d38eece89879698bef77edb911601b863e7', slot: "hint" }, h("slot", { key: '44961541b1dc0604dacbceaec937326791b70d96', name: "hint" }))))));
|
|
176
177
|
}
|
|
177
178
|
timeArray() {
|
|
178
179
|
const result = [];
|
|
@@ -219,7 +220,8 @@ export class CatTime {
|
|
|
219
220
|
minute: '2-digit'
|
|
220
221
|
}).format(date)
|
|
221
222
|
: '';
|
|
222
|
-
|
|
223
|
+
const reg = new RegExp(`\\s?(${this.localizedDayPeriods.am.toLowerCase()}|${this.localizedDayPeriods.pm.toLowerCase()})`, 'i');
|
|
224
|
+
return includeAmPm ? str : str.replace(reg, '');
|
|
223
225
|
}
|
|
224
226
|
reclamp(mode, limit) {
|
|
225
227
|
if (!this.value)
|
|
@@ -233,6 +235,21 @@ export class CatTime {
|
|
|
233
235
|
this.catChange.emit(newValue);
|
|
234
236
|
}
|
|
235
237
|
}
|
|
238
|
+
getLocalizedDayPeriods(language) {
|
|
239
|
+
const format = new Intl.DateTimeFormat(language, {
|
|
240
|
+
hour: '2-digit',
|
|
241
|
+
minute: '2-digit',
|
|
242
|
+
hour12: true
|
|
243
|
+
});
|
|
244
|
+
const extractDayPeriod = (hour) => {
|
|
245
|
+
const parts = format.formatToParts(new Date(2025, 0, 1, hour));
|
|
246
|
+
return parts.find(p => p.type === 'dayPeriod')?.value ?? '';
|
|
247
|
+
};
|
|
248
|
+
return {
|
|
249
|
+
am: extractDayPeriod(9), // Morning
|
|
250
|
+
pm: extractDayPeriod(15) // Afternoon
|
|
251
|
+
};
|
|
252
|
+
}
|
|
236
253
|
static get is() { return "cat-time"; }
|
|
237
254
|
static get encapsulation() { return "shadow"; }
|
|
238
255
|
static get delegatesFocus() { return true; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-time.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { formatIso, getLocale } from './cat-time-locale';\nimport { clampTime, isAfter, isBefore } from './cat-time-math';\nimport { FormatTimeOptions } from 'cleave-zen';\n\n/**\n * A time input component to select a time in a dropdown.\n */\n@Component({\n tag: 'cat-time',\n styleUrl: 'cat-time.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTime {\n private readonly language = i18n.getLocale();\n private readonly locale = getLocale(this.language);\n private readonly timeMaskOptions: FormatTimeOptions = { timeFormat: this.locale.timeFormat, timePattern: ['h', 'm'] };\n private input?: HTMLCatInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() selectionTime: Date | null = null;\n\n @State() isAm = true;\n\n @State() valueChangedBySelection = false;\n\n /**\n * Whether the label need a marker to shown if the input is required or optional.\n */\n @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n /**\n * Whether the label is on top or left.\n */\n @Prop() horizontal = false;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete = 'off';\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * Whether the input is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the input.\n */\n @Prop() hint?: string | string[];\n\n /**\n * The name of an icon to be displayed in the input.\n */\n @Prop() icon?: string;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * A unique identifier for the input.\n */\n @Prop() identifier?: string;\n\n /**\n * The label for the input.\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 maximum time value given in HH:mm format.\n */\n @Prop() max?: string;\n\n /**\n * A minimum value given in HH:mm format.\n */\n @Prop() min?: string;\n\n /**\n * The name of the form control. Submitted with the form as part of a name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * A textual prefix to be displayed in the input.\n */\n @Prop() textPrefix?: string;\n\n /**\n * A textual suffix to be displayed in the input.\n */\n @Prop() textSuffix?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = 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 value of the control given in HH:mm format\n */\n @Prop({ mutable: true }) value?: string;\n\n /**\n * The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n */\n @Prop() errors?: boolean | string[] | ErrorMap;\n\n /**\n * Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors change with the given delay in milliseconds or immediately on blur.\n */\n @Prop() errorUpdate: boolean | number = 0;\n\n /**\n * Attributes that will be added to the native HTML input element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n */\n @Prop() testId?: string;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-end';\n\n /**\n * The step size for times in minutes.\n */\n @Prop() step = 30;\n\n @Watch('min')\n onMinChanged(min?: string, oldMin?: string) {\n if (min !== oldMin) {\n this.reclamp('min', min);\n }\n }\n\n @Watch('max')\n onMaxChanged(max?: string, oldMax?: string) {\n if (max !== oldMax) {\n this.reclamp('max', max);\n }\n }\n\n @Watch('value')\n onValueChanged(value: string, oldValue: string) {\n if (this.valueChangedBySelection) {\n this.valueChangedBySelection = false;\n } else if (value !== oldValue) {\n this.set12hFormat();\n this.syncValue(value ?? '');\n }\n }\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string>;\n\n /**\n * Emitted when the input received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.set12hFormat();\n this.syncValue(this.value ?? '');\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n @Listen('catOpen')\n onOpen() {\n const query = (selector: string) => this.hostElement.shadowRoot?.querySelector<HTMLCatButtonElement>(selector);\n const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);\n const elem1 = query(`[data-time=\"${formatIso(time)}\"]`);\n time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);\n const elem2 = query(`[data-time=\"${formatIso(time)}\"]`);\n setTimeout(() => {\n (elem2 ?? elem1)?.doFocus();\n (elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);\n }); // not entirely sure why this is necessary\n }\n\n /**\n * Select a time in the picker.\n *\n * @param date The time to select.\n */\n @Method()\n async select(date: Date | null): Promise<void> {\n const oldValue = this.value;\n let newValue = this.value;\n if (!date) {\n this.selectionTime = null;\n newValue = undefined;\n } else {\n const time = clampTime(this.min ?? null, date, this.max ?? null);\n this.isAm = this.format(time).toLowerCase().includes('am');\n this.selectionTime = time;\n newValue = formatIso(time);\n }\n // we need to set the input explicitly to sync the input even without a\n // rerender (if the value is not changed)\n if (this.input) {\n this.input.value = this.format(this.selectionTime, false);\n }\n if (oldValue !== newValue) {\n this.valueChangedBySelection = true;\n this.value = newValue;\n this.catChange.emit(this.value);\n } else {\n this.valueChangedBySelection = false;\n }\n }\n\n /**\n * Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n *\n * @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input?.doFocus(options);\n }\n\n /**\n * Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input?.doBlur();\n }\n\n /**\n * Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.input?.clear();\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <cat-input\n class=\"cat-time-input\"\n ref={el => (this.input = el as HTMLCatInputElement)}\n requiredMarker={this.requiredMarker}\n horizontal={this.horizontal}\n autoComplete={this.autoComplete}\n clearable={this.clearable}\n disabled={this.disabled}\n hint={this.hint}\n icon={this.icon}\n iconRight={this.iconRight}\n identifier={this.identifier}\n label={this.label}\n labelHidden={this.labelHidden}\n name={this.name}\n placeholder={this.placeholder}\n textPrefix={this.textPrefix}\n textSuffix={this.textSuffix}\n readonly={this.readonly}\n required={this.required}\n value={this.format(this.selectionTime, false)}\n errors={this.errors}\n errorUpdate={this.errorUpdate}\n testId={this.testId}\n nativeAttributes={this.nativeAttributes}\n timeMaskOptions={this.timeMaskOptions}\n onCatFocus={e => this.catFocus.emit(e.detail)}\n onCatBlur={e => this.onInputBlur(e.detail)}\n >\n <span slot=\"label\">\n {this.hasSlottedLabel && <slot name=\"label\"></slot>}\n {!this.hasSlottedLabel && this.label}\n <span class=\"label-aria\"> (HH:mm)</span>\n </span>\n <div slot=\"addon\" class=\"cat-time-addon\">\n {this.locale.timeFormat === '12' && (\n <cat-button\n class=\"cat-time-format\"\n disabled={this.disabled || this.readonly}\n onCatClick={() => this.toggleAm()}\n >\n {this.isAm ? 'AM' : 'PM'}\n </cat-button>\n )}\n <cat-dropdown slot=\"addon\" placement={this.placement}>\n <cat-button\n slot=\"trigger\"\n class=\"cat-time-toggle\"\n disabled={this.disabled || this.readonly}\n icon=\"$cat:timepicker-clock\"\n iconOnly\n a11yLabel={\n this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose\n }\n ></cat-button>\n <nav slot=\"content\" class=\"cat-nav\">\n <ul>\n {this.timeArray().map(time => {\n const isoTime = formatIso(time);\n const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);\n return (\n <li>\n <cat-button\n class={{\n 'cat-nav-item': true,\n 'time-disabled': disabled\n }}\n disabled={disabled}\n active={isoTime === this.value}\n color={isoTime === this.value ? 'primary' : 'secondary'}\n variant={isoTime === this.value ? 'filled' : 'outlined'}\n onCatClick={() => this.select(time)}\n data-time={isoTime}\n >\n {this.format(time)}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n </div>\n {this.hasSlottedHint && (\n <span slot=\"hint\">\n <slot name=\"hint\"></slot>\n </span>\n )}\n </cat-input>\n </Host>\n );\n }\n\n private timeArray() {\n const result = [];\n const start = new Date(2000, 5, 1, 0, 0, 0);\n let time = new Date(start.getTime());\n while (time.getDate() === start.getDate()) {\n result.push(time);\n time = new Date(time.getTime() + this.step * 60000);\n }\n return result;\n }\n\n private syncValue(value: string) {\n const [, hh, mm] = value.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n if (hh === undefined || mm === undefined) {\n this.select(null);\n return;\n }\n\n this.select(\n this.locale.timeFormat === '24'\n ? new Date(2000, 5, 1, hh, mm, 0)\n : new Date(2000, 5, 1, (hh % 12) + (this.isAm ? 0 : 12), mm, 0)\n );\n }\n\n private set12hFormat() {\n const [, hh] = this.value?.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n if (this.locale.timeFormat === '12') {\n this.isAm = hh === 0 || hh < 12;\n }\n }\n\n private toggleAm() {\n if (this.selectionTime) {\n this.select(new Date(this.selectionTime.getTime() + (this.isAm ? 12 : -12) * 3600000));\n } else {\n this.isAm = !this.isAm;\n }\n }\n\n private onInputBlur(e: FocusEvent) {\n this.syncValue(this.input?.value ?? '');\n this.catBlur.emit(e);\n }\n\n private format(date: Date | null, includeAmPm = true) {\n const str = date\n ? new Intl.DateTimeFormat(this.language, {\n hour: '2-digit',\n minute: '2-digit'\n }).format(date)\n : '';\n return includeAmPm ? str : str.replace(/\\s?(am|pm)/i, '');\n }\n\n private reclamp(mode: 'min' | 'max', limit: string | undefined) {\n if (!this.value) return;\n const min = (mode === 'min' ? limit : this.min) ?? null;\n const max = (mode === 'max' ? limit : this.max) ?? null;\n const [match, hh, mm] = this.value.match(/(\\d{2}):(\\d{2})/) ?? [];\n const newValue = match ? formatIso(clampTime(min, new Date(2000, 5, 1, Number(hh), Number(mm)), max)) : undefined;\n if (this.value !== newValue) {\n this.syncValue(newValue ?? '');\n this.catChange.emit(newValue);\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-time.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { formatIso, getLocale } from './cat-time-locale';\nimport { clampTime, isAfter, isBefore } from './cat-time-math';\nimport { FormatTimeOptions } from 'cleave-zen';\n\n/**\n * A time input component to select a time in a dropdown.\n */\n@Component({\n tag: 'cat-time',\n styleUrl: 'cat-time.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTime {\n private readonly language = i18n.getLocale();\n private readonly locale = getLocale(this.language);\n private readonly timeMaskOptions: FormatTimeOptions = { timeFormat: this.locale.timeFormat, timePattern: ['h', 'm'] };\n private input?: HTMLCatInputElement;\n private localizedDayPeriods = this.getLocalizedDayPeriods(this.language);\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() selectionTime: Date | null = null;\n\n @State() isAm = true;\n\n @State() valueChangedBySelection = false;\n\n /**\n * Whether the label need a marker to shown if the input is required or optional.\n */\n @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n /**\n * Whether the label is on top or left.\n */\n @Prop() horizontal = false;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete = 'off';\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * Whether the input is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the input.\n */\n @Prop() hint?: string | string[];\n\n /**\n * The name of an icon to be displayed in the input.\n */\n @Prop() icon?: string;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * A unique identifier for the input.\n */\n @Prop() identifier?: string;\n\n /**\n * The label for the input.\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 maximum time value given in HH:mm format.\n */\n @Prop() max?: string;\n\n /**\n * A minimum value given in HH:mm format.\n */\n @Prop() min?: string;\n\n /**\n * The name of the form control. Submitted with the form as part of a name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * A textual prefix to be displayed in the input.\n */\n @Prop() textPrefix?: string;\n\n /**\n * A textual suffix to be displayed in the input.\n */\n @Prop() textSuffix?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = 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 value of the control given in HH:mm format\n */\n @Prop({ mutable: true }) value?: string;\n\n /**\n * The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n */\n @Prop() errors?: boolean | string[] | ErrorMap;\n\n /**\n * Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors change with the given delay in milliseconds or immediately on blur.\n */\n @Prop() errorUpdate: boolean | number = 0;\n\n /**\n * Attributes that will be added to the native HTML input element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n */\n @Prop() testId?: string;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-end';\n\n /**\n * The step size for times in minutes.\n */\n @Prop() step = 30;\n\n @Watch('min')\n onMinChanged(min?: string, oldMin?: string) {\n if (min !== oldMin) {\n this.reclamp('min', min);\n }\n }\n\n @Watch('max')\n onMaxChanged(max?: string, oldMax?: string) {\n if (max !== oldMax) {\n this.reclamp('max', max);\n }\n }\n\n @Watch('value')\n onValueChanged(value: string, oldValue: string) {\n if (this.valueChangedBySelection) {\n this.valueChangedBySelection = false;\n } else if (value !== oldValue) {\n this.set12hFormat();\n this.syncValue(value ?? '');\n }\n }\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string>;\n\n /**\n * Emitted when the input received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.set12hFormat();\n this.syncValue(this.value ?? '');\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n @Listen('catOpen')\n onOpen() {\n const query = (selector: string) => this.hostElement.shadowRoot?.querySelector<HTMLCatButtonElement>(selector);\n const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);\n const elem1 = query(`[data-time=\"${formatIso(time)}\"]`);\n time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);\n const elem2 = query(`[data-time=\"${formatIso(time)}\"]`);\n setTimeout(() => {\n (elem2 ?? elem1)?.doFocus();\n (elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);\n }); // not entirely sure why this is necessary\n }\n\n /**\n * Select a time in the picker.\n *\n * @param date The time to select.\n */\n @Method()\n async select(date: Date | null): Promise<void> {\n const oldValue = this.value;\n let newValue: string | undefined;\n if (!date) {\n this.selectionTime = null;\n newValue = undefined;\n } else {\n const time = clampTime(this.min ?? null, date, this.max ?? null);\n this.isAm = this.format(time).toLowerCase().includes(this.localizedDayPeriods.am.toLowerCase());\n this.selectionTime = time;\n newValue = formatIso(time);\n }\n // we need to set the input explicitly to sync the input even without a\n // rerender (if the value is not changed)\n if (this.input) {\n this.input.value = this.format(this.selectionTime, false);\n }\n if (oldValue !== newValue) {\n this.valueChangedBySelection = true;\n this.value = newValue;\n this.catChange.emit(this.value);\n } else {\n this.valueChangedBySelection = false;\n }\n }\n\n /**\n * Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n *\n * @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input?.doFocus(options);\n }\n\n /**\n * Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input?.doBlur();\n }\n\n /**\n * Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.input?.clear();\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <cat-input\n class=\"cat-time-input\"\n ref={el => (this.input = el as HTMLCatInputElement)}\n requiredMarker={this.requiredMarker}\n horizontal={this.horizontal}\n autoComplete={this.autoComplete}\n clearable={this.clearable}\n disabled={this.disabled}\n hint={this.hint}\n icon={this.icon}\n iconRight={this.iconRight}\n identifier={this.identifier}\n label={this.label}\n labelHidden={this.labelHidden}\n name={this.name}\n placeholder={this.placeholder}\n textPrefix={this.textPrefix}\n textSuffix={this.textSuffix}\n readonly={this.readonly}\n required={this.required}\n value={this.format(this.selectionTime, false)}\n errors={this.errors}\n errorUpdate={this.errorUpdate}\n testId={this.testId}\n nativeAttributes={this.nativeAttributes}\n timeMaskOptions={this.timeMaskOptions}\n onCatFocus={e => this.catFocus.emit(e.detail)}\n onCatBlur={e => this.onInputBlur(e.detail)}\n >\n <span slot=\"label\">\n {this.hasSlottedLabel && <slot name=\"label\"></slot>}\n {!this.hasSlottedLabel && this.label}\n <span class=\"label-aria\"> (HH:mm)</span>\n </span>\n <div slot=\"addon\" class=\"cat-time-addon\">\n {this.locale.timeFormat === '12' && (\n <cat-button\n class=\"cat-time-format\"\n disabled={this.disabled || this.readonly}\n onCatClick={() => this.toggleAm()}\n >\n {this.isAm ? this.localizedDayPeriods.am : this.localizedDayPeriods.pm}\n </cat-button>\n )}\n <cat-dropdown slot=\"addon\" placement={this.placement}>\n <cat-button\n slot=\"trigger\"\n class=\"cat-time-toggle\"\n disabled={this.disabled || this.readonly}\n icon=\"$cat:timepicker-clock\"\n iconOnly\n a11yLabel={\n this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose\n }\n ></cat-button>\n <nav slot=\"content\" class=\"cat-nav\">\n <ul>\n {this.timeArray().map(time => {\n const isoTime = formatIso(time);\n const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);\n return (\n <li>\n <cat-button\n class={{\n 'cat-nav-item': true,\n 'time-disabled': disabled\n }}\n disabled={disabled}\n active={isoTime === this.value}\n color={isoTime === this.value ? 'primary' : 'secondary'}\n variant={isoTime === this.value ? 'filled' : 'outlined'}\n onCatClick={() => this.select(time)}\n data-time={isoTime}\n >\n {this.format(time)}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n </div>\n {this.hasSlottedHint && (\n <span slot=\"hint\">\n <slot name=\"hint\"></slot>\n </span>\n )}\n </cat-input>\n </Host>\n );\n }\n\n private timeArray() {\n const result = [];\n const start = new Date(2000, 5, 1, 0, 0, 0);\n let time = new Date(start.getTime());\n while (time.getDate() === start.getDate()) {\n result.push(time);\n time = new Date(time.getTime() + this.step * 60000);\n }\n return result;\n }\n\n private syncValue(value: string) {\n const [, hh, mm] = value.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n if (hh === undefined || mm === undefined) {\n this.select(null);\n return;\n }\n\n this.select(\n this.locale.timeFormat === '24'\n ? new Date(2000, 5, 1, hh, mm, 0)\n : new Date(2000, 5, 1, (hh % 12) + (this.isAm ? 0 : 12), mm, 0)\n );\n }\n\n private set12hFormat() {\n const [, hh] = this.value?.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n if (this.locale.timeFormat === '12') {\n this.isAm = hh === 0 || hh < 12;\n }\n }\n\n private toggleAm() {\n if (this.selectionTime) {\n this.select(new Date(this.selectionTime.getTime() + (this.isAm ? 12 : -12) * 3600000));\n } else {\n this.isAm = !this.isAm;\n }\n }\n\n private onInputBlur(e: FocusEvent) {\n this.syncValue(this.input?.value ?? '');\n this.catBlur.emit(e);\n }\n\n private format(date: Date | null, includeAmPm = true) {\n const str = date\n ? new Intl.DateTimeFormat(this.language, {\n hour: '2-digit',\n minute: '2-digit'\n }).format(date)\n : '';\n const reg = new RegExp(\n `\\\\s?(${this.localizedDayPeriods.am.toLowerCase()}|${this.localizedDayPeriods.pm.toLowerCase()})`,\n 'i'\n );\n return includeAmPm ? str : str.replace(reg, '');\n }\n\n private reclamp(mode: 'min' | 'max', limit: string | undefined) {\n if (!this.value) return;\n const min = (mode === 'min' ? limit : this.min) ?? null;\n const max = (mode === 'max' ? limit : this.max) ?? null;\n const [match, hh, mm] = this.value.match(/(\\d{2}):(\\d{2})/) ?? [];\n const newValue = match ? formatIso(clampTime(min, new Date(2000, 5, 1, Number(hh), Number(mm)), max)) : undefined;\n if (this.value !== newValue) {\n this.syncValue(newValue ?? '');\n this.catChange.emit(newValue);\n }\n }\n\n private getLocalizedDayPeriods(language: string): { am: string; pm: string } {\n const format = new Intl.DateTimeFormat(language, {\n hour: '2-digit',\n minute: '2-digit',\n hour12: true\n });\n\n const extractDayPeriod = (hour: number): string => {\n const parts = format.formatToParts(new Date(2025, 0, 1, hour));\n return parts.find(p => p.type === 'dayPeriod')?.value ?? '';\n };\n\n return {\n am: extractDayPeriod(9), // Morning\n pm: extractDayPeriod(15) // Afternoon\n };\n }\n}\n"]}
|
|
@@ -16,7 +16,7 @@ function findClosest(selector, element) {
|
|
|
16
16
|
return nextElement ? findClosest(selector, nextElement) : null;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
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}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.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-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 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.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -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.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}: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;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}: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;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}: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;gap:0.5rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}: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;gap:0.75rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}: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}:host(.cat-tab)::part(button),:host(.cat-tab-more-button)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}";
|
|
19
|
+
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}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.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-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration-style:var(--cat-link-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration-style:var(--cat-link-button-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 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.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -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.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}: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;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}: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;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}: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;gap:0.5rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}: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;gap:0.75rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}: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}:host(.cat-tab)::part(button),:host(.cat-tab-more-button)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}";
|
|
20
20
|
|
|
21
21
|
const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLElement {
|
|
22
22
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-button2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/utils/find-closest.ts","src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","src/components/cat-button/cat-button.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n if (element instanceof Element && element.matches(selector)) {\n return element;\n }\n\n // Search in parent element or Shadow DOM host\n const nextElement =\n element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([data-button-group='middle']),\n:host([data-button-group='last']) {\n margin-left: -1px;\n}\n\n.cat-button {\n position: relative;\n font: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n transition:\n color cat-token('time.transition.s') linear,\n border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear,\n box-shadow cat-token('time.transition.s') linear;\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n// ----- content\n\n.cat-button-content {\n display: flex;\n flex-direction: column;\n min-width: 0;\n\n .cat-button-empty & {\n display: none;\n }\n}\n\n.cat-button-content-inner {\n @include cat-break-word;\n\n .cat-button-ellipsed & {\n @include cat-ellipsis;\n }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n cursor: default;\n\n cat-spinner {\n position: absolute;\n }\n\n > *:not(cat-spinner) {\n visibility: hidden;\n }\n}\n\n// ----- group button\n\n.cat-button-group {\n &-first {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &-middle {\n border-radius: 0;\n }\n\n &-last {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n}\n\n// ----- theme\n\n.cat-button-filled {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: var(--cat-font-weight-button, 600);\n @include cat-font-smooth;\n\n &.cat-button-disabled {\n --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n}\n\n.cat-button-outlined {\n background-color: cat-token('color.ui.background.surface');\n box-shadow: inset 0 0 0 1px color-mix(in srgb, cat-token-wrap(var(--base)) 20%, #fff);\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n}\n\n.cat-button-link {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkButtonHover');\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkButtonHover');\n }\n}\n\n@mixin theme($theme) {\n .cat-button-#{$theme} {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n }\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding, $gap: 0.25rem) {\n $-line-height: cat-body-line-height($fontSize);\n\n $-total-height: map.get($button-sizes, $size);\n $-padding-v: ($-total-height - $-line-height) * 0.5;\n $-padding-h: $padding;\n\n .cat-button-#{$size} {\n min-width: map.get($button-sizes, $size);\n padding: $-padding-v $-padding-h;\n @include cat-body($fontSize, null);\n gap: $gap;\n\n // normalize icon size for line height\n @if $fontSize == 'm' {\n cat-icon {\n margin-top: -0.125rem;\n margin-bottom: -0.125rem;\n }\n }\n\n &.cat-button-icon {\n width: $-total-height;\n height: $-total-height;\n padding: 0;\n }\n }\n\n :host(.cat-button-pull[size='#{$size}']) {\n margin: $-padding-v * -1 $-padding-h * -1;\n }\n\n :host(.cat-button-pull-h[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n margin-right: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-v[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-t[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-l[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-b[size='#{$size}']) {\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-r[size='#{$size}']) {\n margin-right: $-padding-h * -1;\n }\n}\n\n:host(.cat-button-pull:not([size])) {\n margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n margin-left: -0.75rem;\n margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n margin-top: -0.625rem;\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem, 0.5rem);\n@include size('xl', 'l', 1.25rem, 0.75rem);\n\n// ----- tabs\n\n:host(.cat-tab),\n:host(.cat-tab-more-button) {\n &::part(button) {\n padding: 1.125rem 0.75rem;\n --cat-secondary-bg: transparent;\n --cat-primary-text: transparent;\n --cat-danger-text: transparent;\n }\n\n &::part(content) {\n &::before {\n content: attr(data-text);\n content: attr(data-text) / '';\n height: 0;\n visibility: hidden;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n font-weight: 700;\n }\n }\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n text-align: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n text-align: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n justify-content: left;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n\n// ----- datepicker\n\n:host(.cat-time-format) {\n .cat-button {\n border-radius: 0;\n }\n}\n\n:host(.cat-date-toggle),\n:host(.cat-time-toggle) {\n .cat-button {\n margin-left: -1px;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n\n:host(.cat-date-item),\n:host(.cat-date-toggle),\n:host(.cat-time-format),\n:host(.cat-time-toggle) {\n .cat-button {\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n }\n}\n\n:host(.cat-date-item) {\n .cat-button {\n padding: 0;\n min-width: 2rem;\n max-height: 3rem;\n aspect-ratio: 1;\n }\n}\n\n:host(.date-start:not(.date-end)) {\n .cat-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n\n:host(.date-end:not(.date-start)) {\n .cat-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\nimport { findClosest } from '../../utils/find-closest';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatButton {\n private button!: HTMLButtonElement | HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @Element() hostElement!: HTMLElement;\n\n @State() _iconOnly = true;\n\n @State() hasSlottedContent = false;\n\n /**\n * The rendering style of the button.\n */\n @Prop() variant: 'filled' | 'outlined' | 'text' | 'link' = 'outlined';\n\n /**\n * The color palette of the button.\n */\n @Prop() color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n /**\n * Set the button into an active state.\n */\n @Prop() active = false;\n\n /**\n * The size of the button.\n */\n @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n */\n @Prop() name?: string;\n\n /**\n * The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n */\n @Prop() value?: string;\n\n /**\n * Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n */\n @Prop() loading = false;\n\n /**\n * Allows the button to submit a form.\n */\n @Prop() submit = false;\n\n /**\n * Disables ellipse overflowing button content.\n */\n @Prop() noEllipsis = false;\n\n /**\n * Use round button edges.\n */\n @Prop() round = false;\n\n /**\n * A destination to link to, rendered in the href attribute of a link.\n */\n @Prop() url?: string;\n\n /**\n * Specifies where to open the linked document.\n */\n @Prop() urlTarget?: '_blank' | '_self';\n\n /**\n * The name of an icon to be displayed in the button.\n */\n @Prop() icon?: string;\n\n /**\n * Hide the actual button content and only display the icon.\n */\n @Prop() iconOnly: boolean | Breakpoint = false;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n */\n @Prop() buttonId?: string;\n\n /**\n * Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n */\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /**\n * Sets the `aria-current` attribute on the button.\n */\n @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n /**\n * Attributes that will be added to the native HTML button element\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * Attributes that will be added to the native HTML button content element\n */\n @Prop() nativeContentAttributes?: { [key: string]: string };\n\n /**\n * A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n */\n @Prop() testId?: string;\n\n /**\n * The index of a button that is used inside a cat-button-group component\n */\n @Prop() buttonGroupPosition?: 'first' | 'last' | 'middle';\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean | Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /**\n * Emitted when the button is clicked.\n */\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /**\n * Emitted when the button received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the button loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n this.hasSlottedContent = this.hostElement.hasChildNodes();\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled || this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n } else if (this.submit) {\n const form = findClosest('form', this.hostElement);\n if (form && form instanceof HTMLFormElement) {\n // we can't provide a submitter as it is hidden in the shadow DOM\n form.requestSubmit();\n }\n }\n }\n\n /**\n * Programmatically move focus to the button. Use this method instead of\n * `button.focus()`.\n *\n * @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n /**\n * Programmatically remove focus from the button. Use this method instead of\n * `button.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.button.blur();\n }\n\n /**\n * Programmatically simulate a click on the button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.button.click();\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n if (this.url) {\n return (\n <Host data-button-group={this.buttonGroupPosition}>\n <a\n data-test={this.testId}\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-empty': !this.hasSlottedContent,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size),\n [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n </Host>\n );\n } else {\n return (\n <Host data-button-group={this.buttonGroupPosition}>\n <button\n data-test={this.testId}\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-empty': !this.hasSlottedContent,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size),\n [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n </Host>\n );\n }\n }\n\n private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return Boolean(this.icon) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\" {...this.nativeContentAttributes}>\n <span class=\"cat-button-content-inner\">\n <slot></slot>\n </span>\n </span>\n ),\n this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"suffix\"></cat-icon> : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cat-button2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/utils/find-closest.ts","src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","src/components/cat-button/cat-button.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n if (element instanceof Element && element.matches(selector)) {\n return element;\n }\n\n // Search in parent element or Shadow DOM host\n const nextElement =\n element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([data-button-group='middle']),\n:host([data-button-group='last']) {\n margin-left: -1px;\n}\n\n.cat-button {\n position: relative;\n font: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n transition:\n color cat-token('time.transition.s') linear,\n border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear,\n box-shadow cat-token('time.transition.s') linear;\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n// ----- content\n\n.cat-button-content {\n display: flex;\n flex-direction: column;\n min-width: 0;\n\n .cat-button-empty & {\n display: none;\n }\n}\n\n.cat-button-content-inner {\n @include cat-break-word;\n\n .cat-button-ellipsed & {\n @include cat-ellipsis;\n }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n cursor: default;\n\n cat-spinner {\n position: absolute;\n }\n\n > *:not(cat-spinner) {\n visibility: hidden;\n }\n}\n\n// ----- group button\n\n.cat-button-group {\n &-first {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &-middle {\n border-radius: 0;\n }\n\n &-last {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n}\n\n// ----- theme\n\n.cat-button-filled {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: var(--cat-font-weight-button, 600);\n @include cat-font-smooth;\n\n &.cat-button-disabled {\n --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n}\n\n.cat-button-outlined {\n background-color: cat-token('color.ui.background.surface');\n box-shadow: inset 0 0 0 1px color-mix(in srgb, cat-token-wrap(var(--base)) 20%, #fff);\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n}\n\n.cat-button-link {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration-style: cat-token('font.decoration.linkButtonHover');\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration-style: cat-token('font.decoration.linkButtonHover');\n }\n}\n\n@mixin theme($theme) {\n .cat-button-#{$theme} {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n }\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding, $gap: 0.25rem) {\n $-line-height: cat-body-line-height($fontSize);\n\n $-total-height: map.get($button-sizes, $size);\n $-padding-v: ($-total-height - $-line-height) * 0.5;\n $-padding-h: $padding;\n\n .cat-button-#{$size} {\n min-width: map.get($button-sizes, $size);\n padding: $-padding-v $-padding-h;\n @include cat-body($fontSize, null);\n gap: $gap;\n\n // normalize icon size for line height\n @if $fontSize == 'm' {\n cat-icon {\n margin-top: -0.125rem;\n margin-bottom: -0.125rem;\n }\n }\n\n &.cat-button-icon {\n width: $-total-height;\n height: $-total-height;\n padding: 0;\n }\n }\n\n :host(.cat-button-pull[size='#{$size}']) {\n margin: $-padding-v * -1 $-padding-h * -1;\n }\n\n :host(.cat-button-pull-h[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n margin-right: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-v[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-t[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-l[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-b[size='#{$size}']) {\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-r[size='#{$size}']) {\n margin-right: $-padding-h * -1;\n }\n}\n\n:host(.cat-button-pull:not([size])) {\n margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n margin-left: -0.75rem;\n margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n margin-top: -0.625rem;\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem, 0.5rem);\n@include size('xl', 'l', 1.25rem, 0.75rem);\n\n// ----- tabs\n\n:host(.cat-tab),\n:host(.cat-tab-more-button) {\n &::part(button) {\n padding: 1.125rem 0.75rem;\n --cat-secondary-bg: transparent;\n --cat-primary-text: transparent;\n --cat-danger-text: transparent;\n }\n\n &::part(content) {\n &::before {\n content: attr(data-text);\n content: attr(data-text) / '';\n height: 0;\n visibility: hidden;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n font-weight: 700;\n }\n }\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n text-align: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n text-align: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n justify-content: left;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n\n// ----- datepicker\n\n:host(.cat-time-format) {\n .cat-button {\n border-radius: 0;\n }\n}\n\n:host(.cat-date-toggle),\n:host(.cat-time-toggle) {\n .cat-button {\n margin-left: -1px;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n\n:host(.cat-date-item),\n:host(.cat-date-toggle),\n:host(.cat-time-format),\n:host(.cat-time-toggle) {\n .cat-button {\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n }\n}\n\n:host(.cat-date-item) {\n .cat-button {\n padding: 0;\n min-width: 2rem;\n max-height: 3rem;\n aspect-ratio: 1;\n }\n}\n\n:host(.date-start:not(.date-end)) {\n .cat-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n\n:host(.date-end:not(.date-start)) {\n .cat-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\nimport { findClosest } from '../../utils/find-closest';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatButton {\n private button!: HTMLButtonElement | HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @Element() hostElement!: HTMLElement;\n\n @State() _iconOnly = true;\n\n @State() hasSlottedContent = false;\n\n /**\n * The rendering style of the button.\n */\n @Prop() variant: 'filled' | 'outlined' | 'text' | 'link' = 'outlined';\n\n /**\n * The color palette of the button.\n */\n @Prop() color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n /**\n * Set the button into an active state.\n */\n @Prop() active = false;\n\n /**\n * The size of the button.\n */\n @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n */\n @Prop() name?: string;\n\n /**\n * The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n */\n @Prop() value?: string;\n\n /**\n * Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n */\n @Prop() loading = false;\n\n /**\n * Allows the button to submit a form.\n */\n @Prop() submit = false;\n\n /**\n * Disables ellipse overflowing button content.\n */\n @Prop() noEllipsis = false;\n\n /**\n * Use round button edges.\n */\n @Prop() round = false;\n\n /**\n * A destination to link to, rendered in the href attribute of a link.\n */\n @Prop() url?: string;\n\n /**\n * Specifies where to open the linked document.\n */\n @Prop() urlTarget?: '_blank' | '_self';\n\n /**\n * The name of an icon to be displayed in the button.\n */\n @Prop() icon?: string;\n\n /**\n * Hide the actual button content and only display the icon.\n */\n @Prop() iconOnly: boolean | Breakpoint = false;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n */\n @Prop() buttonId?: string;\n\n /**\n * Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n */\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /**\n * Sets the `aria-current` attribute on the button.\n */\n @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n /**\n * Attributes that will be added to the native HTML button element\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * Attributes that will be added to the native HTML button content element\n */\n @Prop() nativeContentAttributes?: { [key: string]: string };\n\n /**\n * A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n */\n @Prop() testId?: string;\n\n /**\n * The index of a button that is used inside a cat-button-group component\n */\n @Prop() buttonGroupPosition?: 'first' | 'last' | 'middle';\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean | Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /**\n * Emitted when the button is clicked.\n */\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /**\n * Emitted when the button received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the button loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n this.hasSlottedContent = this.hostElement.hasChildNodes();\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled || this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n } else if (this.submit) {\n const form = findClosest('form', this.hostElement);\n if (form && form instanceof HTMLFormElement) {\n // we can't provide a submitter as it is hidden in the shadow DOM\n form.requestSubmit();\n }\n }\n }\n\n /**\n * Programmatically move focus to the button. Use this method instead of\n * `button.focus()`.\n *\n * @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n /**\n * Programmatically remove focus from the button. Use this method instead of\n * `button.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.button.blur();\n }\n\n /**\n * Programmatically simulate a click on the button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.button.click();\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n if (this.url) {\n return (\n <Host data-button-group={this.buttonGroupPosition}>\n <a\n data-test={this.testId}\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-empty': !this.hasSlottedContent,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size),\n [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n </Host>\n );\n } else {\n return (\n <Host data-button-group={this.buttonGroupPosition}>\n <button\n data-test={this.testId}\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-empty': !this.hasSlottedContent,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size),\n [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n </Host>\n );\n }\n }\n\n private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return Boolean(this.icon) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\" {...this.nativeContentAttributes}>\n <span class=\"cat-button-content-inner\">\n <slot></slot>\n </span>\n </span>\n ),\n this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"suffix\"></cat-icon> : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}
|
|
@@ -7,10 +7,7 @@ import { d as defineCustomElement$3 } from './cat-input2.js';
|
|
|
7
7
|
import { d as defineCustomElement$2 } from './cat-spinner2.js';
|
|
8
8
|
|
|
9
9
|
function getHour12(language) {
|
|
10
|
-
|
|
11
|
-
.format(new Date())
|
|
12
|
-
.toLowerCase();
|
|
13
|
-
return dateStr.includes('am') || dateStr.includes('pm');
|
|
10
|
+
return new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' }).resolvedOptions().hour12 ?? false;
|
|
14
11
|
}
|
|
15
12
|
function getLocale(language) {
|
|
16
13
|
return {
|
|
@@ -64,6 +61,7 @@ const CatTime$1 = /*@__PURE__*/ proxyCustomElement(class CatTime extends HTMLEle
|
|
|
64
61
|
this.language = catI18nRegistry.getLocale();
|
|
65
62
|
this.locale = getLocale(this.language);
|
|
66
63
|
this.timeMaskOptions = { timeFormat: this.locale.timeFormat, timePattern: ['h', 'm'] };
|
|
64
|
+
this.localizedDayPeriods = this.getLocalizedDayPeriods(this.language);
|
|
67
65
|
this.hasSlottedLabel = false;
|
|
68
66
|
this.hasSlottedHint = false;
|
|
69
67
|
this.selectionTime = null;
|
|
@@ -169,14 +167,14 @@ const CatTime$1 = /*@__PURE__*/ proxyCustomElement(class CatTime extends HTMLEle
|
|
|
169
167
|
*/
|
|
170
168
|
async select(date) {
|
|
171
169
|
const oldValue = this.value;
|
|
172
|
-
let newValue
|
|
170
|
+
let newValue;
|
|
173
171
|
if (!date) {
|
|
174
172
|
this.selectionTime = null;
|
|
175
173
|
newValue = undefined;
|
|
176
174
|
}
|
|
177
175
|
else {
|
|
178
176
|
const time = clampTime(this.min ?? null, date, this.max ?? null);
|
|
179
|
-
this.isAm = this.format(time).toLowerCase().includes(
|
|
177
|
+
this.isAm = this.format(time).toLowerCase().includes(this.localizedDayPeriods.am.toLowerCase());
|
|
180
178
|
this.selectionTime = time;
|
|
181
179
|
newValue = formatIso(time);
|
|
182
180
|
}
|
|
@@ -219,14 +217,14 @@ const CatTime$1 = /*@__PURE__*/ proxyCustomElement(class CatTime extends HTMLEle
|
|
|
219
217
|
}
|
|
220
218
|
render() {
|
|
221
219
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
222
|
-
return (h(Host, { key: '
|
|
220
|
+
return (h(Host, { key: '2025cdaa021635ee439a4a02d3ff785ad5d7e6b1' }, h("cat-input", { key: '4b4d5116691031cdfca0c5dc2505df4bcc45eae6', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, timeMaskOptions: this.timeMaskOptions, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: '4c4d14f8434f006567ecfb2daac038305073b92d', slot: "label" }, this.hasSlottedLabel && h("slot", { key: 'e8d5a908a81ee97f192e87648fef499988216de2', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '46ca2c5967d88e9b6cddb36982bf476c5bcb8746', class: "label-aria" }, " (HH:mm)")), h("div", { key: '6e590af0ca4c42ca8851c38f9e8e7e6a57412f02', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: '0cedddaae33c0cbb1b3a5a3dd015814412d55c96', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? this.localizedDayPeriods.am : this.localizedDayPeriods.pm)), h("cat-dropdown", { key: 'dbf68f80cf3db81cad5d30b4a4788055f019f358', slot: "addon", placement: this.placement }, h("cat-button", { key: '0db9cec70ded6901153ec3b725526e2f1798338b', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), h("nav", { key: '5e2f440e3a6b481edbc7cead067d8cb5a36cd6f6', slot: "content", class: "cat-nav" }, h("ul", { key: '2993dd0d03f48a8da01fc7b5e73338a6d440610d' }, this.timeArray().map(time => {
|
|
223
221
|
const isoTime = formatIso(time);
|
|
224
222
|
const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
|
|
225
223
|
return (h("li", null, h("cat-button", { class: {
|
|
226
224
|
'cat-nav-item': true,
|
|
227
225
|
'time-disabled': disabled
|
|
228
226
|
}, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
|
|
229
|
-
}))))), this.hasSlottedHint && (h("span", { key: '
|
|
227
|
+
}))))), this.hasSlottedHint && (h("span", { key: '7feb6d38eece89879698bef77edb911601b863e7', slot: "hint" }, h("slot", { key: '44961541b1dc0604dacbceaec937326791b70d96', name: "hint" }))))));
|
|
230
228
|
}
|
|
231
229
|
timeArray() {
|
|
232
230
|
const result = [];
|
|
@@ -273,7 +271,8 @@ const CatTime$1 = /*@__PURE__*/ proxyCustomElement(class CatTime extends HTMLEle
|
|
|
273
271
|
minute: '2-digit'
|
|
274
272
|
}).format(date)
|
|
275
273
|
: '';
|
|
276
|
-
|
|
274
|
+
const reg = new RegExp(`\\s?(${this.localizedDayPeriods.am.toLowerCase()}|${this.localizedDayPeriods.pm.toLowerCase()})`, 'i');
|
|
275
|
+
return includeAmPm ? str : str.replace(reg, '');
|
|
277
276
|
}
|
|
278
277
|
reclamp(mode, limit) {
|
|
279
278
|
if (!this.value)
|
|
@@ -287,6 +286,21 @@ const CatTime$1 = /*@__PURE__*/ proxyCustomElement(class CatTime extends HTMLEle
|
|
|
287
286
|
this.catChange.emit(newValue);
|
|
288
287
|
}
|
|
289
288
|
}
|
|
289
|
+
getLocalizedDayPeriods(language) {
|
|
290
|
+
const format = new Intl.DateTimeFormat(language, {
|
|
291
|
+
hour: '2-digit',
|
|
292
|
+
minute: '2-digit',
|
|
293
|
+
hour12: true
|
|
294
|
+
});
|
|
295
|
+
const extractDayPeriod = (hour) => {
|
|
296
|
+
const parts = format.formatToParts(new Date(2025, 0, 1, hour));
|
|
297
|
+
return parts.find(p => p.type === 'dayPeriod')?.value ?? '';
|
|
298
|
+
};
|
|
299
|
+
return {
|
|
300
|
+
am: extractDayPeriod(9), // Morning
|
|
301
|
+
pm: extractDayPeriod(15) // Afternoon
|
|
302
|
+
};
|
|
303
|
+
}
|
|
290
304
|
static get delegatesFocus() { return true; }
|
|
291
305
|
get hostElement() { return this; }
|
|
292
306
|
static get watchers() { return {
|