@public-ui/hydrate 2.0.0-rc.5 → 2.0.0-rc.6
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/index.js +68 -43
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -7850,7 +7850,7 @@ const initKoliBri = () => {
|
|
|
7850
7850
|
| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.
|
|
7851
7851
|
| |\\ \\ | '-' | | | | | | '--' / | | | |
|
|
7852
7852
|
\`--' \`--´ \`---´ \`--' \`--' \`------´ \`--' \`--'
|
|
7853
|
-
🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.
|
|
7853
|
+
🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.6
|
|
7854
7854
|
`, {
|
|
7855
7855
|
forceLog: true,
|
|
7856
7856
|
});
|
|
@@ -10069,11 +10069,17 @@ const validateLabel = (component, value, options = {}) => {
|
|
|
10069
10069
|
};
|
|
10070
10070
|
const validateLabelWithExpertSlot = validateLabel;
|
|
10071
10071
|
|
|
10072
|
-
const
|
|
10073
|
-
const
|
|
10074
|
-
const
|
|
10072
|
+
const horizontalAlignOptions = ['left', 'right'];
|
|
10073
|
+
const verticalAlignOptions = ['top', 'bottom'];
|
|
10074
|
+
const alignPropTypeOptions = [...horizontalAlignOptions, ...verticalAlignOptions];
|
|
10075
|
+
const validateAlign = (component, value) => {
|
|
10076
|
+
validateAlignment(component, '_align', value);
|
|
10077
|
+
};
|
|
10078
|
+
|
|
10075
10079
|
const validateAlignment = (component, propName, value) => {
|
|
10076
|
-
watchValidator(component, propName, (value) =>
|
|
10080
|
+
watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, {
|
|
10081
|
+
defaultValue: 'top',
|
|
10082
|
+
});
|
|
10077
10083
|
};
|
|
10078
10084
|
|
|
10079
10085
|
const validateTooltipAlign = (component, value) => {
|
|
@@ -10131,10 +10137,12 @@ const validateOpen = (component, value, options) => {
|
|
|
10131
10137
|
watchBoolean(component, '_open', value, options);
|
|
10132
10138
|
};
|
|
10133
10139
|
|
|
10140
|
+
const headingLevelOptions = [0, 1, 2, 3, 4, 5, 6];
|
|
10141
|
+
|
|
10134
10142
|
const watchHeadingLevel = (component, value) => {
|
|
10135
10143
|
watchValidator(component, '_level', (value) => {
|
|
10136
|
-
return typeof value === 'number' &&
|
|
10137
|
-
}, new Set([
|
|
10144
|
+
return typeof value === 'number' && headingLevelOptions.includes(value);
|
|
10145
|
+
}, new Set([`Number {${headingLevelOptions.join(', ')}`]), value, {
|
|
10138
10146
|
defaultValue: 1,
|
|
10139
10147
|
required: true,
|
|
10140
10148
|
});
|
|
@@ -10363,6 +10371,9 @@ const validateHasCloser = (component, value) => {
|
|
|
10363
10371
|
watchBoolean(component, '_hasCloser', value);
|
|
10364
10372
|
};
|
|
10365
10373
|
|
|
10374
|
+
const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'];
|
|
10375
|
+
const alertVariantOptions = ['card', 'msg'];
|
|
10376
|
+
|
|
10366
10377
|
const Icon = (props) => {
|
|
10367
10378
|
return hAsync("kol-icon", { class: "heading-icon", _label: typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel, _icons: props.icon });
|
|
10368
10379
|
};
|
|
@@ -10447,10 +10458,10 @@ class KolAlertWc {
|
|
|
10447
10458
|
}
|
|
10448
10459
|
}
|
|
10449
10460
|
validateType(value) {
|
|
10450
|
-
watchValidator(this, '_type', (value) => typeof value === 'string' && (value
|
|
10461
|
+
watchValidator(this, '_type', (value) => typeof value === 'string' && alertTypeOptions.includes(value), new Set(`String {${alertTypeOptions.join(', ')}`), value);
|
|
10451
10462
|
}
|
|
10452
10463
|
validateVariant(value) {
|
|
10453
|
-
watchValidator(this, '_variant', (value) => value === '
|
|
10464
|
+
watchValidator(this, '_variant', (value) => typeof value === 'string' && alertVariantOptions.includes(value), new Set(`AlertVariant {${alertVariantOptions.join(', ')}`), value);
|
|
10454
10465
|
}
|
|
10455
10466
|
componentWillLoad() {
|
|
10456
10467
|
this.validateAlert(this._alert);
|
|
@@ -11257,7 +11268,7 @@ class KolBreadcrumb {
|
|
|
11257
11268
|
}; }
|
|
11258
11269
|
}
|
|
11259
11270
|
|
|
11260
|
-
const defaultStyleCss$C = "@layer kol-global {\n\t\n\t.sc-kol-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
|
|
11271
|
+
const defaultStyleCss$C = "@layer kol-global {\n\t\n\t.sc-kol-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
|
|
11261
11272
|
|
|
11262
11273
|
class KolButton {
|
|
11263
11274
|
constructor(hostRef) {
|
|
@@ -11484,12 +11495,14 @@ const validateButtonCallbacks = (component, value) => {
|
|
|
11484
11495
|
watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']), value);
|
|
11485
11496
|
};
|
|
11486
11497
|
|
|
11498
|
+
const buttonTypePropTypeOptions = ['button', 'reset', 'submit'];
|
|
11487
11499
|
const validateButtonType = (component, value) => {
|
|
11488
|
-
watchValidator(component, `_type`, (value) =>
|
|
11500
|
+
watchValidator(component, `_type`, (value) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value), new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]), value);
|
|
11489
11501
|
};
|
|
11490
11502
|
|
|
11503
|
+
const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'];
|
|
11491
11504
|
const validateButtonVariant = (component, value) => {
|
|
11492
|
-
watchValidator(component, `_variant`, (value) =>
|
|
11505
|
+
watchValidator(component, `_variant`, (value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value), new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]), value, {
|
|
11493
11506
|
defaultValue: 'normal',
|
|
11494
11507
|
});
|
|
11495
11508
|
};
|
|
@@ -12480,9 +12493,9 @@ class KolIcon {
|
|
|
12480
12493
|
}; }
|
|
12481
12494
|
}
|
|
12482
12495
|
|
|
12483
|
-
const
|
|
12496
|
+
const loadingOptions = ['eager', 'lazy'];
|
|
12484
12497
|
function validateLoading(component, value) {
|
|
12485
|
-
watchValidator(component, '_loading', (value) => value === '
|
|
12498
|
+
watchValidator(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);
|
|
12486
12499
|
}
|
|
12487
12500
|
|
|
12488
12501
|
const defaultStyleCss$v = "@layer kol-component {\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}";
|
|
@@ -12694,6 +12707,8 @@ const validateIndeterminate = (component, value) => {
|
|
|
12694
12707
|
watchBoolean(component, '_indeterminate', value);
|
|
12695
12708
|
};
|
|
12696
12709
|
|
|
12710
|
+
const orientationOptions = ['horizontal', 'vertical'];
|
|
12711
|
+
|
|
12697
12712
|
const validateInputSelectOptions = (option) => {
|
|
12698
12713
|
if (typeof option === 'object' && option !== null) {
|
|
12699
12714
|
if (typeof option.label === 'string' && option.label.length > 0) {
|
|
@@ -12953,7 +12968,7 @@ class InputRadioController extends InputCheckboxRadioController {
|
|
|
12953
12968
|
this.component = component;
|
|
12954
12969
|
}
|
|
12955
12970
|
validateOrientation(value) {
|
|
12956
|
-
watchValidator(this.component, '_orientation', (value) => value === '
|
|
12971
|
+
watchValidator(this.component, '_orientation', (value) => typeof value === 'string' && orientationOptions.includes(value), new Set([`Orientation {${orientationOptions.join(', ')}`]), value, {
|
|
12957
12972
|
defaultValue: 'vertical',
|
|
12958
12973
|
});
|
|
12959
12974
|
}
|
|
@@ -12989,6 +13004,8 @@ class InputRadioController extends InputCheckboxRadioController {
|
|
|
12989
13004
|
}
|
|
12990
13005
|
}
|
|
12991
13006
|
|
|
13007
|
+
const inputCheckboxVariantOptions = ['button', 'default', 'switch'];
|
|
13008
|
+
|
|
12992
13009
|
class InputCheckboxController extends InputCheckboxRadioController {
|
|
12993
13010
|
constructor(component, name, host) {
|
|
12994
13011
|
super(component, name, host);
|
|
@@ -13036,7 +13053,7 @@ class InputCheckboxController extends InputCheckboxRadioController {
|
|
|
13036
13053
|
this.setFormAssociatedCheckboxValue(this.component.state._value);
|
|
13037
13054
|
}
|
|
13038
13055
|
validateVariant(value) {
|
|
13039
|
-
watchValidator(this.component, '_variant', (value) => typeof value === 'string' && (value
|
|
13056
|
+
watchValidator(this.component, '_variant', (value) => typeof value === 'string' && inputCheckboxVariantOptions.includes(value), new Set([`String {${inputCheckboxVariantOptions.join(', ')}`]), value);
|
|
13040
13057
|
}
|
|
13041
13058
|
componentWillLoad() {
|
|
13042
13059
|
super.componentWillLoad();
|
|
@@ -13059,10 +13076,11 @@ const InternalUnderlinedAccessKey = ({ accessKey, label }) => {
|
|
|
13059
13076
|
accessKey = accessKey.toLowerCase();
|
|
13060
13077
|
[first, ...rest] = label.split(accessKey);
|
|
13061
13078
|
}
|
|
13062
|
-
return (hAsync(
|
|
13079
|
+
return (hAsync(Fragment, null,
|
|
13063
13080
|
first,
|
|
13064
|
-
rest.length ? hAsync(
|
|
13065
|
-
|
|
13081
|
+
rest.length ? (hAsync(Fragment, null,
|
|
13082
|
+
hAsync("u", null, accessKey),
|
|
13083
|
+
rest.join(accessKey))) : null));
|
|
13066
13084
|
};
|
|
13067
13085
|
|
|
13068
13086
|
const defaultStyleCss$t = "@layer kol-global {\n\t\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-checkbox-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tkol-input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tjustify-items: left;\n\t}\n\n\tkol-input.default,\n\tkol-input.switch {\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\tkol-input .input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\torder: 1;\n\t}\n\n\tkol-input .input div {\n\t\tdisplay: inline-flex;\n\t}\n\n\tkol-input .input input {\n\t\tmargin: 0;\n\t}\n\n\tkol-input label {\n\t\torder: 2;\n\t}\n\n\tkol-input .hint,\n\tkol-input.error > kol-alert {\n\t\tgrid-column: span 2;\n\t}\n\n\tkol-input kol-alert.error {\n\t\torder: 3;\n\t}\n\n\tkol-input .hint {\n\t\torder: 4;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n\n\tinput {\n\t\tborder-style: solid;\n\t\tborder-width: 2px;\n\t\tline-height: 24px;\n\t}\n\n\tinput[type='checkbox'] {\n\t\tappearance: none;\n\t\tbackground-color: #fff;\n\t\tcursor: pointer;\n\t\ttransition: 0.5s;\n\t}\n\n\tinput[type='checkbox'].kol-disabled:before {\n\t\tcursor: not-allowed;\n\t}\n\n\tinput[type='checkbox']:before {\n\t\tcontent: '';\n\t\tcursor: pointer;\n\t}\n\n\t.default kol-icon {\n\t\tdisplay: none;\n\t}\n\n\tkol-input.required .tooltip-content .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.button {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--a11y-min-size) auto;\n\t\tgrid-template-areas: 'error error' 'input label' 'hint hint';\n\t}\n\n\t.button[tabindex]:focus {\n\t\t\n\t\tcursor: inherit;\n\t}\n\n\t.button input {\n\t\tdisplay: none;\n\t}\n\n\t.button > .error {\n\t\tgrid-area: error;\n\t}\n\n\t.button > label {\n\t\tgrid-area: label;\n\t}\n\n\t.button > .input {\n\t\tgrid-area: input;\n\t}\n\n\t.button > .hint {\n\t\tgrid-area: hint;\n\t}\n\n\t.button .icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t}\n}\n\n@layer kol-component {\n\t.default input[type='checkbox'] {\n\t\theight: 1.5em;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:before {\n\t\tdisplay: block;\n\t\theight: 1.5em;\n\t\tposition: relative;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:checked:before {\n\t\tborder-radius: 1px;\n\t\tborder-style: solid;\n\t\tborder-width: 0 3px 3px 0;\n\t\theight: 0.75em;\n\t\tleft: calc(0.375em - 2px);\n\t\ttransform: rotate(40deg) translate(-50%, -50%);\n\t\ttop: calc(0.7125em - 2px);\n\t\twidth: 0.375em;\n\t}\n\n\t.default input[type='checkbox']:indeterminate:before {\n\t\tbackground-color: #000;\n\t\theight: 0.2em;\n\t\tleft: 0.24em;\n\t\ttop: 0.575em;\n\t\twidth: 0.8em;\n\t}\n}\n\n@layer kol-component {\n\t.switch .input {\n\t\tposition: relative;\n\t}\n\n\t.switch input[type='checkbox'] {\n\t\tdisplay: inline-block;\n\t\theight: 1.7em;\n\t\tmin-width: 3.2em;\n\t\tposition: relative;\n\t\twidth: 3.2em;\n\t}\n\n\t.switch input[type='checkbox']::before {\n\t\tbackground-color: #000;\n\t\theight: 1.2em;\n\t\tleft: calc(0.25em - 2px);\n\t\ttop: calc(0.25em - 2px);\n\t\tposition: absolute;\n\t\ttransition: 0.5s;\n\t\twidth: 1.2em;\n\t}\n\n\t.switch input[type='checkbox']:checked::before {\n\t\ttransform: translateX(1.5em);\n\t}\n\n\t.switch input[type='checkbox']:indeterminate::before {\n\t\ttransform: translateX(0.75em);\n\t}\n\n\t.switch .icon {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 1.2em;\n\t\theight: 1.2em;\n\t\tposition: absolute;\n\t\tz-index: 1;\n\t\ttop: 50%;\n\t\tleft: 4px;\n\t\ttransform: translate(0, -50%);\n\t\ttransition: 0.5s;\n\t\tcolor: #000;\n\t}\n\n\t.switch:has(input:checked) .icon {\n\t\ttransform: translate(1.5em, -50%);\n\t}\n\n\t.switch:has(input:indeterminate) .icon {\n\t\ttransform: translate(0.75em, -50%);\n\t}\n}";
|
|
@@ -13076,7 +13094,7 @@ class KolInputCheckbox {
|
|
|
13076
13094
|
[this.state._variant]: true,
|
|
13077
13095
|
'hide-label': !!this.state._hideLabel,
|
|
13078
13096
|
checked: this.state._checked,
|
|
13079
|
-
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' ? 0 : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
13097
|
+
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' ? 0 : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
|
|
13080
13098
|
}
|
|
13081
13099
|
constructor(hostRef) {
|
|
13082
13100
|
registerInstance(this, hostRef);
|
|
@@ -13262,6 +13280,8 @@ class KolInputCheckbox {
|
|
|
13262
13280
|
}; }
|
|
13263
13281
|
}
|
|
13264
13282
|
|
|
13283
|
+
const inputTypeOnOffOptions = ['on', 'off'];
|
|
13284
|
+
|
|
13265
13285
|
const validateSuggestions = (component, value) => {
|
|
13266
13286
|
watchJsonArrayString(component, '_suggestions', (item) => typeof item === 'string' || typeof item === 'number', value, undefined, {
|
|
13267
13287
|
hooks: {
|
|
@@ -13323,7 +13343,7 @@ class InputColorController extends InputIconController {
|
|
|
13323
13343
|
this.component = component;
|
|
13324
13344
|
}
|
|
13325
13345
|
validateAutoComplete(value) {
|
|
13326
|
-
watchValidator(this.component, '_autoComplete', (value) => typeof value === 'string' && (value
|
|
13346
|
+
watchValidator(this.component, '_autoComplete', (value) => typeof value === 'string' && inputTypeOnOffOptions.includes(value), new Set(inputTypeOnOffOptions), value);
|
|
13327
13347
|
}
|
|
13328
13348
|
validateSuggestions(value) {
|
|
13329
13349
|
validateSuggestions(this.component, value);
|
|
@@ -13362,7 +13382,7 @@ class KolInputColor {
|
|
|
13362
13382
|
return (hAsync(Host, null, hAsync("kol-input", { class: {
|
|
13363
13383
|
color: true,
|
|
13364
13384
|
'hide-label': !!this.state._hideLabel,
|
|
13365
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
13385
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
|
|
13366
13386
|
}
|
|
13367
13387
|
constructor(hostRef) {
|
|
13368
13388
|
registerInstance(this, hostRef);
|
|
@@ -13518,6 +13538,8 @@ class KolInputColor {
|
|
|
13518
13538
|
}; }
|
|
13519
13539
|
}
|
|
13520
13540
|
|
|
13541
|
+
const inputDateTypeOptions = ['date', 'datetime-local', 'month', 'time', 'week'];
|
|
13542
|
+
|
|
13521
13543
|
const validateReadOnly = (component, value) => {
|
|
13522
13544
|
watchBoolean(component, '_readOnly', value);
|
|
13523
13545
|
};
|
|
@@ -13636,8 +13658,7 @@ class InputDateController extends InputIconController {
|
|
|
13636
13658
|
watchNumber(this.component, '_step', value);
|
|
13637
13659
|
}
|
|
13638
13660
|
validateType(value) {
|
|
13639
|
-
watchValidator(this.component, '_type', (value) => typeof value === 'string' &&
|
|
13640
|
-
(value === 'date' || value === 'datetime-local' || value === 'month' || value === 'number' || value === 'time' || value === 'week'), new Set(['String {date, datetime-local, month, number, time, week}']), value);
|
|
13661
|
+
watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputDateTypeOptions.includes(value), new Set([`String {${inputDateTypeOptions.join(', ')}`]), value);
|
|
13641
13662
|
}
|
|
13642
13663
|
validateValue(value) {
|
|
13643
13664
|
this.validateValueEx(value);
|
|
@@ -13679,7 +13700,7 @@ class KolInputDate {
|
|
|
13679
13700
|
return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: {
|
|
13680
13701
|
[this.state._type]: true,
|
|
13681
13702
|
'hide-label': !!this.state._hideLabel,
|
|
13682
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
13703
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
|
|
13683
13704
|
}
|
|
13684
13705
|
constructor(hostRef) {
|
|
13685
13706
|
registerInstance(this, hostRef);
|
|
@@ -13894,6 +13915,8 @@ const validateMultiple = (component, value) => {
|
|
|
13894
13915
|
watchBoolean(component, '_multiple', value);
|
|
13895
13916
|
};
|
|
13896
13917
|
|
|
13918
|
+
const inputTextTypeOptions = ['text', 'search', 'url', 'tel'];
|
|
13919
|
+
|
|
13897
13920
|
const validateHasCounter = (component, value) => {
|
|
13898
13921
|
watchBoolean(component, '_hasCounter', value);
|
|
13899
13922
|
};
|
|
@@ -13996,7 +14019,7 @@ class InputTextController extends InputTextEmailController {
|
|
|
13996
14019
|
this.component = component;
|
|
13997
14020
|
}
|
|
13998
14021
|
validateType(value) {
|
|
13999
|
-
watchValidator(this.component, '_type', (value) => typeof value === 'string' && (value
|
|
14022
|
+
watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputTextTypeOptions.includes(value), new Set([`String {${inputTextTypeOptions.join(', ')}`]), value);
|
|
14000
14023
|
}
|
|
14001
14024
|
validateHasCounter(value) {
|
|
14002
14025
|
validateHasCounter(this.component, value);
|
|
@@ -14044,7 +14067,7 @@ class KolInputEmail {
|
|
|
14044
14067
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
14045
14068
|
return (hAsync(Host, { class: {
|
|
14046
14069
|
'has-value': this.state._hasValue,
|
|
14047
|
-
} }, hAsync("kol-input", { class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
14070
|
+
} }, hAsync("kol-input", { class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
|
|
14048
14071
|
}
|
|
14049
14072
|
constructor(hostRef) {
|
|
14050
14073
|
registerInstance(this, hostRef);
|
|
@@ -14306,7 +14329,7 @@ class KolInputFile {
|
|
|
14306
14329
|
return (hAsync(Host, null, hAsync("kol-input", { class: {
|
|
14307
14330
|
file: true,
|
|
14308
14331
|
'hide-label': !!this.state._hideLabel,
|
|
14309
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
14332
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange }))))));
|
|
14310
14333
|
}
|
|
14311
14334
|
constructor(hostRef) {
|
|
14312
14335
|
registerInstance(this, hostRef);
|
|
@@ -14584,7 +14607,7 @@ class KolInputNumber {
|
|
|
14584
14607
|
} }, hAsync("kol-input", { class: {
|
|
14585
14608
|
number: true,
|
|
14586
14609
|
'hide-label': !!this.state._hideLabel,
|
|
14587
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
14610
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
|
|
14588
14611
|
}
|
|
14589
14612
|
constructor(hostRef) {
|
|
14590
14613
|
registerInstance(this, hostRef);
|
|
@@ -14805,7 +14828,7 @@ class KolInputPassword {
|
|
|
14805
14828
|
} }, hAsync("kol-input", { class: {
|
|
14806
14829
|
'hide-label': !!this.state._hideLabel,
|
|
14807
14830
|
password: true,
|
|
14808
|
-
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
14831
|
+
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
|
|
14809
14832
|
}
|
|
14810
14833
|
constructor(hostRef) {
|
|
14811
14834
|
registerInstance(this, hostRef);
|
|
@@ -15252,7 +15275,7 @@ class KolInputRange {
|
|
|
15252
15275
|
return (hAsync(Host, null, hAsync("kol-input", { class: {
|
|
15253
15276
|
range: true,
|
|
15254
15277
|
'hide-label': !!this.state._hideLabel,
|
|
15255
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
15278
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("div", { class: "inputs-wrapper", style: {
|
|
15256
15279
|
'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
|
|
15257
15280
|
} }, hAsync("input", Object.assign({ title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp, onChange: this.onChange }))), hasSuggestions && [
|
|
15258
15281
|
hAsync("datalist", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
|
|
@@ -15470,7 +15493,7 @@ class KolInputText {
|
|
|
15470
15493
|
} }, hAsync("kol-input", { class: {
|
|
15471
15494
|
[this.state._type]: true,
|
|
15472
15495
|
'hide-label': !!this.state._hideLabel,
|
|
15473
|
-
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
15496
|
+
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
|
|
15474
15497
|
}
|
|
15475
15498
|
constructor(hostRef) {
|
|
15476
15499
|
registerInstance(this, hostRef);
|
|
@@ -15855,7 +15878,7 @@ class KolLink {
|
|
|
15855
15878
|
}; }
|
|
15856
15879
|
}
|
|
15857
15880
|
|
|
15858
|
-
const defaultStyleCss$h = "@layer kol-global {\n\t\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-link-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
|
|
15881
|
+
const defaultStyleCss$h = "@layer kol-global {\n\t\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-link-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
|
|
15859
15882
|
|
|
15860
15883
|
class KolLinkButton {
|
|
15861
15884
|
constructor(hostRef) {
|
|
@@ -16026,8 +16049,9 @@ class KolLinkGroup {
|
|
|
16026
16049
|
}; }
|
|
16027
16050
|
}
|
|
16028
16051
|
|
|
16052
|
+
const ariaCurrentPropTypeOptions = ['date', 'location', 'page', 'step', 'time', true, false];
|
|
16029
16053
|
const validate = (component, propName, value) => {
|
|
16030
|
-
watchValidator(component, propName, (value) =>
|
|
16054
|
+
watchValidator(component, propName, (value) => (typeof value === 'string' || typeof value === 'boolean') && ariaCurrentPropTypeOptions.includes(value), new Set([`String {${ariaCurrentPropTypeOptions.filter((option) => typeof option === 'string').join(', ')}`, 'true', 'false']), value);
|
|
16031
16055
|
};
|
|
16032
16056
|
const validateAriaCurrent = (component, value) => {
|
|
16033
16057
|
validate(component, '_ariaCurrent', value);
|
|
@@ -18436,10 +18460,6 @@ const computePosition = (reference, floating, options) => {
|
|
|
18436
18460
|
});
|
|
18437
18461
|
};
|
|
18438
18462
|
|
|
18439
|
-
const validateAlign = (component, value) => {
|
|
18440
|
-
validateAlignment(component, '_align', value);
|
|
18441
|
-
};
|
|
18442
|
-
|
|
18443
18463
|
const validateShow = (component, value, hooks) => {
|
|
18444
18464
|
watchBoolean(component, '_show', value, hooks);
|
|
18445
18465
|
};
|
|
@@ -18713,6 +18733,8 @@ class KolProcess {
|
|
|
18713
18733
|
}; }
|
|
18714
18734
|
}
|
|
18715
18735
|
|
|
18736
|
+
const koliBriQuoteVariantOptions = ['block', 'inline'];
|
|
18737
|
+
|
|
18716
18738
|
const defaultStyleCss$a = "@layer kol-global {\n\t\n\t.sc-kol-quote-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-quote-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}";
|
|
18717
18739
|
|
|
18718
18740
|
class KolQuote {
|
|
@@ -18742,7 +18764,7 @@ class KolQuote {
|
|
|
18742
18764
|
});
|
|
18743
18765
|
}
|
|
18744
18766
|
validateVariant(value) {
|
|
18745
|
-
watchValidator(this, '_variant', (value) => value === '
|
|
18767
|
+
watchValidator(this, '_variant', (value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value), new Set(koliBriQuoteVariantOptions), value);
|
|
18746
18768
|
}
|
|
18747
18769
|
componentWillLoad() {
|
|
18748
18770
|
this.validateHref(this._href);
|
|
@@ -18903,7 +18925,7 @@ class KolSelect {
|
|
|
18903
18925
|
return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: {
|
|
18904
18926
|
'hide-label': !!this.state._hideLabel,
|
|
18905
18927
|
select: true,
|
|
18906
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
18928
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("select", { ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false", onClick: this.controller.onFacade.onClick,
|
|
18907
18929
|
onBlur: this.controller.onFacade.onBlur,
|
|
18908
18930
|
onFocus: this.controller.onFacade.onFocus, onChange: this.onChange }, this.state._options.map((option, index) => {
|
|
18909
18931
|
const key = `-${index}`;
|
|
@@ -31461,8 +31483,9 @@ class KolSpanWc {
|
|
|
31461
31483
|
}; }
|
|
31462
31484
|
}
|
|
31463
31485
|
|
|
31486
|
+
const spinVariantPropTypeOptions = ['cycle', 'dot', 'none'];
|
|
31464
31487
|
const validateSpinVariant = (component, value) => {
|
|
31465
|
-
watchValidator(component, '_variant', (value) =>
|
|
31488
|
+
watchValidator(component, '_variant', (value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value), new Set(spinVariantPropTypeOptions), value);
|
|
31466
31489
|
};
|
|
31467
31490
|
|
|
31468
31491
|
const defaultStyleCss$6 = "@layer kol-global {\n\t\n\t.sc-kol-spin-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-spin-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.spin.cycle {\n\t\twidth: 3rem;\n\t\theight: 3rem;\n\t}\n\n\t.spin.cycle > .loader {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tposition: relative;\n\t\tanimation: 2s linear infinite rotate;\n\t}\n\n\t.spin.cycle > .loader::before {\n\t\tcontent: '';\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset: 0px;\n\t\tborder-radius: 50%;\n\t\tborder: 5px solid #333;\n\t\tanimation: 3s linear infinite prixClipFix;\n\t}\n\n\t@keyframes rotate {\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n\t@keyframes prixClipFix {\n\t\t0% {\n\t\t\tborder-color: #fff;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n\t\t}\n\t\t25% {\n\t\t\tborder-color: #666;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n\t\t}\n\t\t50% {\n\t\t\tborder-color: #fc0;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n\t\t}\n\t\t75% {\n\t\t\tborder-color: red;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n\t\t}\n\t\t100% {\n\t\t\tborder-color: #000;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n\t\t}\n\t} \n\t@media (prefers-reduced-motion) {\n\t\t.spin.cycle > .loader {\n\t\t\tanimation-duration: 4s;\n\t\t}\n\n\t\t.spin.cycle > .loader::before {\n\t\t\tanimation-duration: 6s;\n\t\t}\n\t}\n}\n\n@layer kol-component {\n\t.spin.dot {\n\t\theight: 1rem;\n\t\twidth: 3rem;\n\t}\n\n\t.spin.dot > span {\n\t\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\t\tborder-radius: 50%;\n\t\tborder: 0.1rem solid #fff;\n\t\theight: 0.8rem;\n\t\tposition: absolute;\n\t\ttop: 0.1rem;\n\t\twidth: 0.8rem;\n\t}\n\n\t.spin.dot > span:first-child {\n\t\tbackground-color: #fc0;\n\t\tz-index: 0;\n\t\tanimation: 1s infinite spin1;\n\t\tleft: 0.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(2) {\n\t\tbackground-color: red;\n\t\tz-index: 1;\n\t\tanimation: 1s infinite spin2;\n\t\tleft: 0.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(3) {\n\t\tbackground-color: #000;\n\t\tz-index: 1;\n\t\tanimation: 1s infinite spin2;\n\t\tleft: 1.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(4) {\n\t\tbackground-color: #666;\n\t\tz-index: 0;\n\t\tanimation: 1s infinite spin3;\n\t\tleft: 2.1rem;\n\t}\n\n\t@keyframes spin1 {\n\t\t0% {\n\t\t\ttransform: scale(0);\n\t\t}\n\t\t100% {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n\t@keyframes spin2 {\n\t\t0% {\n\t\t\ttransform: translate(0, 0);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translate(1rem, 0);\n\t\t}\n\t}\n\t@keyframes spin3 {\n\t\t0% {\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t100% {\n\t\t\ttransform: scale(0);\n\t\t}\n\t} \n\t@media (prefers-reduced-motion) {\n\t\t.spin.dot > span:first-child,\n\t\t.spin.dot > span:nth-child(2),\n\t\t.spin.dot > span:nth-child(3),\n\t\t.spin.dot > span:nth-child(4) {\n\t\t\tanimation-duration: 2s;\n\t\t}\n\t}\n}\n\n@layer kol-component {\n\t.spin {\n\t\tdisplay: block;\n\t\tpadding: 0.125rem;\n\t\tposition: relative;\n\t}\n}";
|
|
@@ -32489,6 +32512,8 @@ class KolTabs {
|
|
|
32489
32512
|
}; }
|
|
32490
32513
|
}
|
|
32491
32514
|
|
|
32515
|
+
const cssResizeOptions = ['both', 'horizontal', 'vertical', 'none'];
|
|
32516
|
+
|
|
32492
32517
|
class TextareaController extends InputController {
|
|
32493
32518
|
constructor(component, name, host) {
|
|
32494
32519
|
super(component, name, host);
|
|
@@ -32532,7 +32557,7 @@ class TextareaController extends InputController {
|
|
|
32532
32557
|
watchBoolean(this.component, '_readOnly', value);
|
|
32533
32558
|
}
|
|
32534
32559
|
validateResize(value) {
|
|
32535
|
-
watchValidator(this.component, '_resize', (value) => typeof value === 'string' && (value
|
|
32560
|
+
watchValidator(this.component, '_resize', (value) => typeof value === 'string' && cssResizeOptions.includes(value), new Set(`String {${cssResizeOptions.join(', ')}`), value);
|
|
32536
32561
|
}
|
|
32537
32562
|
validateRequired(value) {
|
|
32538
32563
|
watchBoolean(this.component, '_required', value);
|
|
@@ -32577,7 +32602,7 @@ class KolTextarea {
|
|
|
32577
32602
|
render() {
|
|
32578
32603
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
32579
32604
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
32580
|
-
return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(
|
|
32605
|
+
return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("textarea", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onKeyUp: this.onKeyUp, style: {
|
|
32581
32606
|
resize: this.state._resize,
|
|
32582
32607
|
}, value: this.state._value }))))));
|
|
32583
32608
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/hydrate",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.6",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": "https://github.com/public-ui/kolibri",
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
"hydrate"
|
|
43
43
|
],
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@public-ui/components": "2.0.0-rc.
|
|
45
|
+
"@public-ui/components": "2.0.0-rc.6",
|
|
46
46
|
"rimraf": "3.0.2"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"@public-ui/components": "2.0.0-rc.
|
|
49
|
+
"@public-ui/components": "2.0.0-rc.6"
|
|
50
50
|
},
|
|
51
51
|
"sideEffects": false,
|
|
52
52
|
"type": "commonjs",
|