@haiilo/catalyst 4.0.0 → 4.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalyst/catalyst.css +1 -0
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/p-ccfebe33.js.map +1 -1
- package/dist/catalyst/p-e92ee75d.entry.js +10 -0
- package/dist/catalyst/p-e92ee75d.entry.js.map +1 -0
- package/dist/catalyst/scss/core/_typography.scss +1 -0
- package/dist/cjs/cat-alert_24.cjs.entry.js +173 -40
- package/dist/cjs/cat-alert_24.cjs.entry.js.map +1 -1
- package/dist/cjs/cat-icon-registry-671af264.js.map +1 -1
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cat-avatar/cat-avatar.css +1 -0
- package/dist/collection/components/cat-checkbox/cat-checkbox.js +16 -1
- package/dist/collection/components/cat-checkbox/cat-checkbox.js.map +1 -1
- package/dist/collection/components/cat-form-hint/cat-form-hint-utils.js +13 -0
- package/dist/collection/components/cat-form-hint/cat-form-hint-utils.js.map +1 -0
- package/dist/collection/components/cat-i18n/cat-i18n-registry.js.map +1 -1
- package/dist/collection/components/cat-input/cat-input.css +1 -1
- package/dist/collection/components/cat-input/cat-input.js +64 -57
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-radio/cat-radio.js +16 -1
- package/dist/collection/components/cat-radio/cat-radio.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.css +256 -0
- package/dist/collection/components/cat-select/cat-select.js +96 -10
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-select-demo/cat-select-demo.js +52 -5
- package/dist/collection/components/cat-select-demo/cat-select-demo.js.map +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.css +261 -1
- package/dist/collection/components/cat-textarea/cat-textarea.js +102 -10
- package/dist/collection/components/cat-textarea/cat-textarea.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.js +16 -1
- package/dist/collection/components/cat-toggle/cat-toggle.js.map +1 -1
- package/dist/collection/scss/core/_typography.scss +1 -0
- package/dist/components/cat-avatar2.js +1 -1
- package/dist/components/cat-avatar2.js.map +1 -1
- package/dist/components/cat-checkbox2.js +2 -1
- package/dist/components/cat-checkbox2.js.map +1 -1
- package/dist/components/cat-form-hint-utils.js +17 -0
- package/dist/components/cat-form-hint-utils.js.map +1 -0
- package/dist/components/cat-i18n-registry.js.map +1 -1
- package/dist/components/cat-input.js +39 -21
- package/dist/components/cat-input.js.map +1 -1
- package/dist/components/cat-radio.js +2 -1
- package/dist/components/cat-radio.js.map +1 -1
- package/dist/components/cat-select-demo.js +51 -6
- package/dist/components/cat-select-demo.js.map +1 -1
- package/dist/components/cat-select2.js +40 -9
- package/dist/components/cat-select2.js.map +1 -1
- package/dist/components/cat-textarea.js +50 -7
- package/dist/components/cat-textarea.js.map +1 -1
- package/dist/components/cat-toggle.js +2 -1
- package/dist/components/cat-toggle.js.map +1 -1
- package/dist/esm/cat-alert_24.entry.js +173 -40
- package/dist/esm/cat-alert_24.entry.js.map +1 -1
- package/dist/esm/cat-icon-registry-d6b80490.js.map +1 -1
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-checkbox/cat-checkbox.d.ts +6 -0
- package/dist/types/components/cat-form-hint/cat-form-hint-utils.d.ts +4 -0
- package/dist/types/components/cat-i18n/cat-i18n-registry.d.ts +1 -1
- package/dist/types/components/cat-input/cat-input.d.ts +17 -11
- package/dist/types/components/cat-radio/cat-radio.d.ts +6 -0
- package/dist/types/components/cat-select/cat-select.d.ts +28 -2
- package/dist/types/components/cat-select-demo/cat-select-demo.d.ts +2 -0
- package/dist/types/components/cat-textarea/cat-textarea.d.ts +27 -1
- package/dist/types/components/cat-toggle/cat-toggle.d.ts +6 -0
- package/dist/types/components.d.ts +85 -20
- package/package.json +2 -2
- package/dist/catalyst/p-0a46696e.entry.js +0 -10
- package/dist/catalyst/p-0a46696e.entry.js.map +0 -1
|
@@ -61,7 +61,7 @@ const loadImg = (src) => {
|
|
|
61
61
|
});
|
|
62
62
|
};
|
|
63
63
|
|
|
64
|
-
const catAvatarCss = ":host{display:contents}:host([hidden]){display:none}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
|
|
64
|
+
const catAvatarCss = ":host{display:contents}:host([hidden]){display:none}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden;vertical-align:middle;font-weight:600;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
|
|
65
65
|
|
|
66
66
|
const CatAvatar = class {
|
|
67
67
|
constructor(hostRef) {
|
|
@@ -577,7 +577,7 @@ const CatCheckbox = class {
|
|
|
577
577
|
this.input.click();
|
|
578
578
|
}
|
|
579
579
|
render() {
|
|
580
|
-
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
580
|
+
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
581
581
|
}
|
|
582
582
|
get hintSection() {
|
|
583
583
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
@@ -3222,7 +3222,17 @@ const CatIcon = class {
|
|
|
3222
3222
|
};
|
|
3223
3223
|
CatIcon.style = catIconCss;
|
|
3224
3224
|
|
|
3225
|
-
|
|
3225
|
+
function buildHintSection(hostElement, id, hint, errorMap) {
|
|
3226
|
+
const errors = Object.entries(errorMap || {});
|
|
3227
|
+
if (errors.length) {
|
|
3228
|
+
return (h("div", { id: id + '-hint' }, errors.map(([key, params]) => (h(CatFormHint, { hint: catI18nRegistry.t(`error.${key}`, params), class: "cat-text-danger" })))));
|
|
3229
|
+
}
|
|
3230
|
+
const hasSlottedHint = !!hostElement.querySelector('[slot="hint"]');
|
|
3231
|
+
return ((hint || hasSlottedHint) && (h("div", { id: id + '-hint' },
|
|
3232
|
+
h(CatFormHint, { hint: hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) }))));
|
|
3233
|
+
}
|
|
3234
|
+
|
|
3235
|
+
const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):hover.input-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.input-wrapper:not(.input-disabled):focus-within.input-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper.input-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
|
|
3226
3236
|
|
|
3227
3237
|
let nextUniqueId$6 = 0;
|
|
3228
3238
|
const CatInput = class {
|
|
@@ -3274,18 +3284,17 @@ const CatInput = class {
|
|
|
3274
3284
|
*/
|
|
3275
3285
|
this.type = 'text';
|
|
3276
3286
|
/**
|
|
3277
|
-
*
|
|
3287
|
+
* Fine-grained control over when the errors are shown. Can be `false` to
|
|
3288
|
+
* never show errors, `true` to show errors on blur, or a number to show
|
|
3289
|
+
* errors on change with the given delay in milliseconds.
|
|
3278
3290
|
*/
|
|
3279
|
-
this.
|
|
3280
|
-
/**
|
|
3281
|
-
* Disable validation for the input. No error messages or error colors will be shown.
|
|
3282
|
-
*/
|
|
3283
|
-
this.disableValidation = false;
|
|
3291
|
+
this.errorUpdate = 0;
|
|
3284
3292
|
}
|
|
3285
3293
|
get id() {
|
|
3286
3294
|
return this.identifier || this._id;
|
|
3287
3295
|
}
|
|
3288
3296
|
componentWillRender() {
|
|
3297
|
+
this.watchErrorsHandler(this.errors);
|
|
3289
3298
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
3290
3299
|
if (!this.label && !this.hasSlottedLabel) {
|
|
3291
3300
|
loglevel.warn('[A11y] Missing ARIA label on input', this);
|
|
@@ -3320,34 +3329,53 @@ const CatInput = class {
|
|
|
3320
3329
|
async clear() {
|
|
3321
3330
|
this.value = '';
|
|
3322
3331
|
}
|
|
3332
|
+
watchErrorsHandler(value) {
|
|
3333
|
+
if (this.errorUpdate === false) {
|
|
3334
|
+
this.errorMap = undefined;
|
|
3335
|
+
}
|
|
3336
|
+
else {
|
|
3337
|
+
this.errorMapSrc = Array.isArray(value)
|
|
3338
|
+
? value.map(error => ({ [error]: undefined }))
|
|
3339
|
+
: value === true
|
|
3340
|
+
? {}
|
|
3341
|
+
: value || undefined;
|
|
3342
|
+
}
|
|
3343
|
+
}
|
|
3323
3344
|
render() {
|
|
3324
|
-
|
|
3345
|
+
var _a;
|
|
3346
|
+
return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), h("div", { class: {
|
|
3325
3347
|
'input-wrapper': true,
|
|
3326
3348
|
'input-round': this.round,
|
|
3327
3349
|
'input-disabled': this.disabled,
|
|
3328
|
-
'input-invalid': this.invalid
|
|
3329
|
-
}, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix
|
|
3350
|
+
'input-invalid': this.invalid
|
|
3351
|
+
}, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, class: {
|
|
3330
3352
|
'has-clearable': this.clearable && !this.disabled
|
|
3331
|
-
}, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' :
|
|
3353
|
+
}, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), buildHintSection(this.hostElement, this.id, this.hint, this.errorMap)));
|
|
3332
3354
|
}
|
|
3333
|
-
get
|
|
3334
|
-
|
|
3335
|
-
return Object.keys(this.errors).map(error => (h(CatFormHint, { hint: catI18nRegistry.t(`error.${error}`), class: "cat-text-danger" })));
|
|
3336
|
-
}
|
|
3337
|
-
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
3338
|
-
return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
|
|
3355
|
+
get invalid() {
|
|
3356
|
+
return !!this.errorMap;
|
|
3339
3357
|
}
|
|
3340
3358
|
onInput(event) {
|
|
3341
3359
|
this.value = this.input.value;
|
|
3342
3360
|
this.catChange.emit(event);
|
|
3361
|
+
if (typeof this.errorUpdate === 'number') {
|
|
3362
|
+
typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
|
|
3363
|
+
this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);
|
|
3364
|
+
}
|
|
3343
3365
|
}
|
|
3344
3366
|
onFocus(event) {
|
|
3345
3367
|
this.catFocus.emit(event);
|
|
3346
3368
|
}
|
|
3347
3369
|
onBlur(event) {
|
|
3348
3370
|
this.catBlur.emit(event);
|
|
3371
|
+
if (this.errorUpdate !== false) {
|
|
3372
|
+
this.errorMap = this.errorMapSrc;
|
|
3373
|
+
}
|
|
3349
3374
|
}
|
|
3350
3375
|
get hostElement() { return getElement(this); }
|
|
3376
|
+
static get watchers() { return {
|
|
3377
|
+
"errors": ["watchErrorsHandler"]
|
|
3378
|
+
}; }
|
|
3351
3379
|
};
|
|
3352
3380
|
CatInput.style = catInputCss;
|
|
3353
3381
|
|
|
@@ -3565,7 +3593,7 @@ const CatRadio = class {
|
|
|
3565
3593
|
this.input.click();
|
|
3566
3594
|
}
|
|
3567
3595
|
render() {
|
|
3568
|
-
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
3596
|
+
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
3569
3597
|
}
|
|
3570
3598
|
get hintSection() {
|
|
3571
3599
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
@@ -5559,7 +5587,7 @@ var autosizeInput = function (element, options) {
|
|
|
5559
5587
|
}
|
|
5560
5588
|
};
|
|
5561
5589
|
|
|
5562
|
-
const catSelectCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem;line-height:1.25rem;position:relative;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;padding:0.25rem}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}.select-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-s, 0.125rem);white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 0 0 1px rgb(var(--cat-border-color, 235, 236, 240)), 0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem
|
|
5590
|
+
const catSelectCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;flex-direction:column;gap:0.5rem;line-height:1.25rem;position:relative;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;padding:0.25rem;}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.select-wrapper:not(.select-disabled):hover.select-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.select-wrapper:not(.select-disabled):focus-within.select-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.select-wrapper.select-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.select-wrapper:has(input:-webkit-autofill),.select-wrapper:has(input:-webkit-autofill):hover,.select-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}.select-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-s, 0.125rem);white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.icon-suffix{padding:0.25rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 0 0 1px rgb(var(--cat-border-color, 235, 236, 240)), 0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem}.select-option-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-option-text{flex:1 1 0%;min-width:0}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-wrap:break-word;word-break:break-word}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
|
|
5563
5591
|
|
|
5564
5592
|
const INIT_STATE = {
|
|
5565
5593
|
term: '',
|
|
@@ -5625,6 +5653,12 @@ const CatSelect = class {
|
|
|
5625
5653
|
* Whether the select should add new items.
|
|
5626
5654
|
*/
|
|
5627
5655
|
this.tags = false;
|
|
5656
|
+
/**
|
|
5657
|
+
* Fine-grained control over when the errors are shown. Can be `false` to
|
|
5658
|
+
* never show errors, `true` to show errors on blur, or a number to show
|
|
5659
|
+
* errors on change with the given delay in milliseconds.
|
|
5660
|
+
*/
|
|
5661
|
+
this.errorUpdate = 0;
|
|
5628
5662
|
}
|
|
5629
5663
|
get id() {
|
|
5630
5664
|
return this.identifier || this._id;
|
|
@@ -5636,6 +5670,18 @@ const CatSelect = class {
|
|
|
5636
5670
|
onValueChange() {
|
|
5637
5671
|
!this.valueChangedBySelection ? this.resolve() : (this.valueChangedBySelection = false);
|
|
5638
5672
|
}
|
|
5673
|
+
watchErrorsHandler(value) {
|
|
5674
|
+
if (this.errorUpdate === false) {
|
|
5675
|
+
this.errorMap = undefined;
|
|
5676
|
+
}
|
|
5677
|
+
else {
|
|
5678
|
+
this.errorMapSrc = Array.isArray(value)
|
|
5679
|
+
? value.map(error => ({ [error]: undefined }))
|
|
5680
|
+
: value === true
|
|
5681
|
+
? {}
|
|
5682
|
+
: value || undefined;
|
|
5683
|
+
}
|
|
5684
|
+
}
|
|
5639
5685
|
onStateChange(newState, oldState) {
|
|
5640
5686
|
var _a;
|
|
5641
5687
|
const changed = (key) => newState[key] !== oldState[key];
|
|
@@ -5676,6 +5722,10 @@ const CatSelect = class {
|
|
|
5676
5722
|
this.value = newValue;
|
|
5677
5723
|
}
|
|
5678
5724
|
this.catChange.emit();
|
|
5725
|
+
if (typeof this.errorUpdate === 'number') {
|
|
5726
|
+
typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
|
|
5727
|
+
this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);
|
|
5728
|
+
}
|
|
5679
5729
|
}
|
|
5680
5730
|
}
|
|
5681
5731
|
componentDidLoad() {
|
|
@@ -5687,6 +5737,7 @@ const CatSelect = class {
|
|
|
5687
5737
|
}
|
|
5688
5738
|
}
|
|
5689
5739
|
componentWillRender() {
|
|
5740
|
+
this.watchErrorsHandler(this.errors);
|
|
5690
5741
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
5691
5742
|
if (!this.label && !this.hasSlottedLabel) {
|
|
5692
5743
|
loglevel.warn('[A11y] Missing ARIA label on select', this);
|
|
@@ -5704,6 +5755,9 @@ const CatSelect = class {
|
|
|
5704
5755
|
this.hide();
|
|
5705
5756
|
this.patchState({ activeSelectionIndex: -1 });
|
|
5706
5757
|
this.catBlur.emit(event);
|
|
5758
|
+
if (this.errorUpdate !== false) {
|
|
5759
|
+
this.errorMap = this.errorMapSrc;
|
|
5760
|
+
}
|
|
5707
5761
|
}
|
|
5708
5762
|
onKeyDown(event) {
|
|
5709
5763
|
var _a, _b, _c, _d, _e;
|
|
@@ -5822,21 +5876,25 @@ const CatSelect = class {
|
|
|
5822
5876
|
});
|
|
5823
5877
|
}
|
|
5824
5878
|
render() {
|
|
5825
|
-
|
|
5879
|
+
var _a, _b;
|
|
5880
|
+
return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => {
|
|
5826
5881
|
var _a;
|
|
5827
5882
|
return (h("span", { class: {
|
|
5828
5883
|
pill: true,
|
|
5829
5884
|
'select-no-open': true,
|
|
5830
5885
|
'select-option-active': this.state.activeSelectionIndex === i
|
|
5831
5886
|
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))));
|
|
5832
|
-
}))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, initials: '' })) : null, h("input", { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, onInput: () => this.onInput(), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", null), (this.state.selection.length || this.state.term.length) &&
|
|
5887
|
+
}))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, initials: (_a = this.state.selection[0].render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("input", Object.assign({}, this.nativeAttributes, { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_b = this.hint) === null || _b === void 0 ? void 0 : _b.length) ? this.id + '-hint' : undefined, onInput: () => this.onInput(), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving }))), this.state.isResolving && h("cat-spinner", null), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
|
|
5833
5888
|
!this.disabled &&
|
|
5834
5889
|
!this.state.isResolving &&
|
|
5835
|
-
this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), this.
|
|
5890
|
+
this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), buildHintSection(this.hostElement, this.id, this.hint, this.errorMap), h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
|
|
5836
5891
|
? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
|
|
5837
5892
|
: !this.state.options.length &&
|
|
5838
5893
|
!this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catI18nRegistry.t('select.empty')))))))));
|
|
5839
5894
|
}
|
|
5895
|
+
get invalid() {
|
|
5896
|
+
return !!this.errorMap;
|
|
5897
|
+
}
|
|
5840
5898
|
get optionsList() {
|
|
5841
5899
|
return this.state.options.map((item, i) => {
|
|
5842
5900
|
var _a, _b;
|
|
@@ -5858,10 +5916,6 @@ const CatSelect = class {
|
|
|
5858
5916
|
}, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_b = item.render.avatar.initials) !== null && _b !== void 0 ? _b : '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))));
|
|
5859
5917
|
});
|
|
5860
5918
|
}
|
|
5861
|
-
get hintSection() {
|
|
5862
|
-
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
5863
|
-
return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
|
|
5864
|
-
}
|
|
5865
5919
|
get connectorSafe() {
|
|
5866
5920
|
if (this.connector) {
|
|
5867
5921
|
return this.connector;
|
|
@@ -6150,6 +6204,7 @@ const CatSelect = class {
|
|
|
6150
6204
|
static get watchers() { return {
|
|
6151
6205
|
"connector": ["onConnectorChange"],
|
|
6152
6206
|
"value": ["onValueChange"],
|
|
6207
|
+
"errors": ["watchErrorsHandler"],
|
|
6153
6208
|
"state": ["onStateChange"]
|
|
6154
6209
|
}; }
|
|
6155
6210
|
};
|
|
@@ -6162,7 +6217,7 @@ const CatSelectTest = class {
|
|
|
6162
6217
|
registerInstance(this, hostRef);
|
|
6163
6218
|
}
|
|
6164
6219
|
componentDidLoad() {
|
|
6165
|
-
var _a, _b, _c, _d, _e, _f;
|
|
6220
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
6166
6221
|
(_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.connect({
|
|
6167
6222
|
resolve: (ids) => {
|
|
6168
6223
|
console.info(`Resolving data... (${ids.join(', ')})`);
|
|
@@ -6227,8 +6282,42 @@ const CatSelectTest = class {
|
|
|
6227
6282
|
}
|
|
6228
6283
|
})
|
|
6229
6284
|
});
|
|
6230
|
-
(_c = this.
|
|
6231
|
-
|
|
6285
|
+
(_c = this.multipleSelectAvatarInitials) === null || _c === void 0 ? void 0 : _c.connect({
|
|
6286
|
+
resolve: (ids) => {
|
|
6287
|
+
console.info(`Resolving data... (${ids.join(', ')})`);
|
|
6288
|
+
return of(ids.map(id => ({
|
|
6289
|
+
id,
|
|
6290
|
+
firstName: 'John',
|
|
6291
|
+
lastName: `Doe (${id})`,
|
|
6292
|
+
desc: 'resolved'
|
|
6293
|
+
}))).pipe(delay(500));
|
|
6294
|
+
},
|
|
6295
|
+
retrieve: (term, page) => {
|
|
6296
|
+
console.info(`Retrieving data... ("${term}", ${page})`);
|
|
6297
|
+
return term === 'no'
|
|
6298
|
+
? of({ last: true, content: [], totalElements: 0 })
|
|
6299
|
+
: of({
|
|
6300
|
+
last: false,
|
|
6301
|
+
totalElements: 10000,
|
|
6302
|
+
content: Array.from({ length: 10 }, (_, i) => ({
|
|
6303
|
+
id: '' + (i + page * 10),
|
|
6304
|
+
firstName: 'John',
|
|
6305
|
+
lastName: `Doe (${i + page * 10})`,
|
|
6306
|
+
desc: `"${term}": page ${page}`
|
|
6307
|
+
}))
|
|
6308
|
+
}).pipe(delay(500));
|
|
6309
|
+
},
|
|
6310
|
+
render: (user) => ({
|
|
6311
|
+
label: `${user.firstName} ${user.lastName}`,
|
|
6312
|
+
description: user.desc,
|
|
6313
|
+
avatar: {
|
|
6314
|
+
round: true,
|
|
6315
|
+
initials: `JD`
|
|
6316
|
+
}
|
|
6317
|
+
})
|
|
6318
|
+
});
|
|
6319
|
+
(_d = this.multipleSelectTagging) === null || _d === void 0 ? void 0 : _d.connect(this.countryConnector);
|
|
6320
|
+
(_e = this.singleSelect) === null || _e === void 0 ? void 0 : _e.connect({
|
|
6232
6321
|
resolve: (ids) => {
|
|
6233
6322
|
console.info(`Resolving data... (${ids.join(', ')})`);
|
|
6234
6323
|
return of(ids.map(id => ({
|
|
@@ -6258,12 +6347,23 @@ const CatSelectTest = class {
|
|
|
6258
6347
|
description: user.desc
|
|
6259
6348
|
})
|
|
6260
6349
|
});
|
|
6261
|
-
(
|
|
6262
|
-
(
|
|
6350
|
+
(_f = this.singleSelectAvatar) === null || _f === void 0 ? void 0 : _f.connect(this.countryConnector);
|
|
6351
|
+
(_g = this.singleSelectAvatarInitials) === null || _g === void 0 ? void 0 : _g.connect(Object.assign(Object.assign({}, this.countryConnector), { render: (country) => {
|
|
6352
|
+
var _a, _b, _c, _d, _e;
|
|
6353
|
+
return ({
|
|
6354
|
+
label: country.country,
|
|
6355
|
+
description: country.capital || 'No capital',
|
|
6356
|
+
avatar: {
|
|
6357
|
+
round: true,
|
|
6358
|
+
initials: `${(_b = (_a = country.country.charAt(0)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : 'J'}${(_e = (_d = (_c = country.capital) === null || _c === void 0 ? void 0 : _c.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : 'D'}`
|
|
6359
|
+
}
|
|
6360
|
+
});
|
|
6361
|
+
} }));
|
|
6362
|
+
(_h = this.singleSelectTagging) === null || _h === void 0 ? void 0 : _h.connect(this.countryConnector);
|
|
6263
6363
|
setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
|
|
6264
6364
|
}
|
|
6265
6365
|
render() {
|
|
6266
|
-
return (h(Host, { style: { display: 'flex', flexDirection: 'column' } }, h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true }, h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), h("cat-dropdown", { overflow: true, noAutoClose: true }, h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { slot: "content", style: { width: '400px' } }, h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));
|
|
6366
|
+
return (h(Host, { style: { display: 'flex', flexDirection: 'column' } }, h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true }, h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), h("cat-select", { label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), h("cat-select", { label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true }), h("cat-dropdown", { overflow: true, noAutoClose: true }, h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { slot: "content", style: { width: '400px' } }, h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));
|
|
6267
6367
|
}
|
|
6268
6368
|
get countryConnector() {
|
|
6269
6369
|
return {
|
|
@@ -7699,7 +7799,7 @@ CatTabs.style = catTabsCss;
|
|
|
7699
7799
|
|
|
7700
7800
|
var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o));},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1));}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test");}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t};}function r(e){var t=n.get(e);t&&t.destroy();}function i(e){var t=n.get(e);t&&t.update();}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,d=function(){e.clientWidth!==i&&c();},a=function(t){window.removeEventListener("resize",d,!1),e.removeEventListener("input",c,!1),e.removeEventListener("keyup",c,!1),e.removeEventListener("autosize:destroy",a,!1),e.removeEventListener("autosize:update",c,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n];}),n.delete(e);}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",a,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",c,!1),window.addEventListener("resize",d,!1),e.addEventListener("input",c,!1),e.addEventListener("autosize:update",c,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:a,update:c}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),c();}function u(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t;}function s(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(e),n=document.documentElement&&document.documentElement.scrollTop;e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t.forEach(function(e){e.node.scrollTop=e.scrollTop;}),n&&(document.documentElement.scrollTop=n);}}function c(){s();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?"hidden"===n.overflowY&&(u("scroll"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):"hidden"!==n.overflowY&&(u("hidden"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o("autosize:resized");try{e.dispatchEvent(i);}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e});var d=l;
|
|
7701
7801
|
|
|
7702
|
-
const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.
|
|
7802
|
+
const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.textarea-wrapper{position:relative;display:flex;flex-direction:column}.icon-suffix{position:absolute;top:calc(0.625rem - 2px);right:0.75rem;background:rgba(255, 255, 255, 0.75);border-radius:100rem}.textarea-disabled .icon-suffix{background:rgba(242, 244, 247, 0.75)}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;resize:vertical;}textarea:disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}.textarea-invalid textarea{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.textarea-invalid textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.textarea-invalid textarea:focus{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}";
|
|
7703
7803
|
|
|
7704
7804
|
let nextUniqueId$2 = 0;
|
|
7705
7805
|
const CatTextarea = class {
|
|
@@ -7738,11 +7838,18 @@ const CatTextarea = class {
|
|
|
7738
7838
|
* Specifies the initial number of lines in the textarea.
|
|
7739
7839
|
*/
|
|
7740
7840
|
this.rows = 3;
|
|
7841
|
+
/**
|
|
7842
|
+
* Fine-grained control over when the errors are shown. Can be `false` to
|
|
7843
|
+
* never show errors, `true` to show errors on blur, or a number to show
|
|
7844
|
+
* errors on change with the given delay in milliseconds.
|
|
7845
|
+
*/
|
|
7846
|
+
this.errorUpdate = 0;
|
|
7741
7847
|
}
|
|
7742
7848
|
get id() {
|
|
7743
7849
|
return this.identifier || this._id;
|
|
7744
7850
|
}
|
|
7745
7851
|
componentWillRender() {
|
|
7852
|
+
this.watchErrorsHandler(this.errors);
|
|
7746
7853
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
7747
7854
|
if (!this.label && !this.hasSlottedLabel) {
|
|
7748
7855
|
loglevel.warn('[A11y] Missing ARIA label on textarea', this);
|
|
@@ -7774,24 +7881,50 @@ const CatTextarea = class {
|
|
|
7774
7881
|
async doClick() {
|
|
7775
7882
|
this.textarea.click();
|
|
7776
7883
|
}
|
|
7884
|
+
watchErrorsHandler(value) {
|
|
7885
|
+
if (this.errorUpdate === false) {
|
|
7886
|
+
this.errorMap = undefined;
|
|
7887
|
+
}
|
|
7888
|
+
else {
|
|
7889
|
+
this.errorMapSrc = Array.isArray(value)
|
|
7890
|
+
? value.map(error => ({ [error]: undefined }))
|
|
7891
|
+
: value === true
|
|
7892
|
+
? {}
|
|
7893
|
+
: value || undefined;
|
|
7894
|
+
}
|
|
7895
|
+
}
|
|
7777
7896
|
render() {
|
|
7778
|
-
|
|
7897
|
+
var _a;
|
|
7898
|
+
return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), h("div", { class: {
|
|
7899
|
+
'textarea-wrapper': true,
|
|
7900
|
+
'textarea-disabled': this.disabled,
|
|
7901
|
+
'textarea-invalid': this.invalid
|
|
7902
|
+
} }, h("textarea", Object.assign({}, this.nativeAttributes, { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), buildHintSection(this.hostElement, this.id, this.hint, this.errorMap)));
|
|
7779
7903
|
}
|
|
7780
|
-
get
|
|
7781
|
-
|
|
7782
|
-
return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
|
|
7904
|
+
get invalid() {
|
|
7905
|
+
return !!this.errorMap;
|
|
7783
7906
|
}
|
|
7784
7907
|
onInput(event) {
|
|
7785
7908
|
this.value = this.textarea.value;
|
|
7786
7909
|
this.catChange.emit(event);
|
|
7910
|
+
if (typeof this.errorUpdate === 'number') {
|
|
7911
|
+
typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
|
|
7912
|
+
this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);
|
|
7913
|
+
}
|
|
7787
7914
|
}
|
|
7788
7915
|
onFocus(event) {
|
|
7789
7916
|
this.catFocus.emit(event);
|
|
7790
7917
|
}
|
|
7791
7918
|
onBlur(event) {
|
|
7792
7919
|
this.catBlur.emit(event);
|
|
7920
|
+
if (this.errorUpdate !== false) {
|
|
7921
|
+
this.errorMap = this.errorMapSrc;
|
|
7922
|
+
}
|
|
7793
7923
|
}
|
|
7794
7924
|
get hostElement() { return getElement(this); }
|
|
7925
|
+
static get watchers() { return {
|
|
7926
|
+
"errors": ["watchErrorsHandler"]
|
|
7927
|
+
}; }
|
|
7795
7928
|
};
|
|
7796
7929
|
CatTextarea.style = catTextareaCss;
|
|
7797
7930
|
|
|
@@ -7864,7 +7997,7 @@ const CatToggle = class {
|
|
|
7864
7997
|
this.input.click();
|
|
7865
7998
|
}
|
|
7866
7999
|
render() {
|
|
7867
|
-
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
8000
|
+
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
7868
8001
|
}
|
|
7869
8002
|
get hintSection() {
|
|
7870
8003
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|