@public-ui/hydrate 2.1.5-rc.7 → 2.1.5
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 +61 -36
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -4353,6 +4353,7 @@ let KolFormTag = 'kol-form';
|
|
|
4353
4353
|
let KolHeadingWcTag = 'kol-heading-wc';
|
|
4354
4354
|
let KolIconTag = 'kol-icon';
|
|
4355
4355
|
let KolIndentedTextTag = 'kol-indented-text';
|
|
4356
|
+
let KolIndentedTextWcTag = 'kol-indented-text-wc';
|
|
4356
4357
|
let KolInputCheckboxTag = 'kol-input-checkbox';
|
|
4357
4358
|
let KolInputWcTag = 'kol-input';
|
|
4358
4359
|
let KolLinkTag = 'kol-link';
|
|
@@ -4368,8 +4369,8 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
4368
4369
|
let KolTreeTag = 'kol-tree';
|
|
4369
4370
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
4370
4371
|
|
|
4371
|
-
const defaultStyleCss$
|
|
4372
|
-
var KolAbbrDefaultStyle0 = defaultStyleCss$
|
|
4372
|
+
const defaultStyleCss$O = "@layer kol-global {\n .sc-kol-abbr-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-abbr-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-abbr-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-abbr-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .sc-kol-abbr-default-h > abbr {\n cursor: help;\n }\n}";
|
|
4373
|
+
var KolAbbrDefaultStyle0 = defaultStyleCss$O;
|
|
4373
4374
|
|
|
4374
4375
|
class KolAbbr {
|
|
4375
4376
|
constructor(hostRef) {
|
|
@@ -4427,8 +4428,8 @@ const watchHeadingLevel = (component, value) => {
|
|
|
4427
4428
|
});
|
|
4428
4429
|
};
|
|
4429
4430
|
|
|
4430
|
-
const defaultStyleCss$
|
|
4431
|
-
var KolAccordionDefaultStyle0 = defaultStyleCss$
|
|
4431
|
+
const defaultStyleCss$N = "@layer kol-global {\n .sc-kol-accordion-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-accordion-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-accordion-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-accordion-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .sc-kol-accordion-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n \n .wrapper {\n display: grid;\n grid-template-rows: 0fr;\n overflow: hidden;\n transition: grid-template-rows 0.3s;\n }\n .accordion.open .wrapper {\n grid-template-rows: 1fr;\n }\n .animation-wrapper {\n min-height: 0;\n transition: visibility 0.3s;\n \n visibility: hidden;\n }\n .accordion.open .animation-wrapper {\n visibility: visible;\n }\n @media (prefers-reduced-motion) {\n .animation-wrapper,\n .wrapper {\n transition-duration: 0s;\n }\n }\n \n @media print {\n .accordion:not(.open) .animation-wrapper {\n display: none;\n }\n }\n \n .accordion .kol-heading-wc .kol-button-wc button .kol-span-wc {\n justify-items: start;\n }\n}";
|
|
4432
|
+
var KolAccordionDefaultStyle0 = defaultStyleCss$N;
|
|
4432
4433
|
|
|
4433
4434
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
4434
4435
|
|
|
@@ -4531,8 +4532,8 @@ class KolAccordion {
|
|
|
4531
4532
|
}; }
|
|
4532
4533
|
}
|
|
4533
4534
|
|
|
4534
|
-
const defaultStyleCss$
|
|
4535
|
-
var KolAlertDefaultStyle0 = defaultStyleCss$
|
|
4535
|
+
const defaultStyleCss$M = "@layer kol-global {\n .sc-kol-alert-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-alert-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-alert-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-alert-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .sc-kol-alert-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}";
|
|
4536
|
+
var KolAlertDefaultStyle0 = defaultStyleCss$M;
|
|
4536
4537
|
|
|
4537
4538
|
class KolAlert {
|
|
4538
4539
|
constructor(hostRef) {
|
|
@@ -4875,8 +4876,8 @@ class KolAlertWc {
|
|
|
4875
4876
|
}; }
|
|
4876
4877
|
}
|
|
4877
4878
|
|
|
4878
|
-
const defaultStyleCss$
|
|
4879
|
-
var KolAvatarDefaultStyle0 = defaultStyleCss$
|
|
4879
|
+
const defaultStyleCss$L = "@layer kol-global {\n .sc-kol-avatar-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-avatar-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-avatar-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .sc-kol-avatar-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .container {\n border-radius: 50%;\n overflow: hidden;\n \n outline: transparent solid 1px;\n \n width: 100px;\n height: 100px;\n }\n .image {\n width: 100%;\n height: 100%;\n }\n .initials {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n \n background: #d3d3d3;\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
4880
|
+
var KolAvatarDefaultStyle0 = defaultStyleCss$L;
|
|
4880
4881
|
|
|
4881
4882
|
class KolAvatar {
|
|
4882
4883
|
constructor(hostRef) {
|
|
@@ -4962,8 +4963,8 @@ class KolAvatarWc {
|
|
|
4962
4963
|
}; }
|
|
4963
4964
|
}
|
|
4964
4965
|
|
|
4965
|
-
const defaultStyleCss$
|
|
4966
|
-
var KolBadgeDefaultStyle0 = defaultStyleCss$
|
|
4966
|
+
const defaultStyleCss$K = "@layer kol-global {\n .sc-kol-badge-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-badge-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-badge-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n \n .sc-kol-badge-default-h > span {\n display: inline-flex;\n place-items: center;\n \n outline: transparent solid 1px;\n }\n .sc-kol-badge-default-h > span > .kol-button-wc button {\n color: inherit;\n }\n}";
|
|
4967
|
+
var KolBadgeDefaultStyle0 = defaultStyleCss$K;
|
|
4967
4968
|
|
|
4968
4969
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
4969
4970
|
class KolBadge {
|
|
@@ -5063,8 +5064,8 @@ const watchNavLinks = (className, component, value) => {
|
|
|
5063
5064
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
5064
5065
|
};
|
|
5065
5066
|
|
|
5066
|
-
const defaultStyleCss$
|
|
5067
|
-
var KolBreadcrumbDefaultStyle0 = defaultStyleCss$
|
|
5067
|
+
const defaultStyleCss$J = "@layer kol-global {\n .sc-kol-breadcrumb-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-breadcrumb-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-breadcrumb-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-breadcrumb-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n li,\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n gap: 0.5em;\n flex-wrap: wrap;\n place-items: center;\n }\n .kol-icon::part(separator) {\n font-weight: 900;\n font-size: 0.7em;\n }\n .kol-icon::part(separator):before {\n content: \"\\f054\";\n font-family: \"Font Awesome 6 Free\";\n }\n}";
|
|
5068
|
+
var KolBreadcrumbDefaultStyle0 = defaultStyleCss$J;
|
|
5068
5069
|
|
|
5069
5070
|
class KolBreadcrumb {
|
|
5070
5071
|
constructor(hostRef) {
|
|
@@ -5124,8 +5125,8 @@ class KolBreadcrumb {
|
|
|
5124
5125
|
}; }
|
|
5125
5126
|
}
|
|
5126
5127
|
|
|
5127
|
-
const defaultStyleCss$
|
|
5128
|
-
var KolButtonDefaultStyle0 = defaultStyleCss$
|
|
5128
|
+
const defaultStyleCss$I = "@charset \"UTF-8\";\n\n@layer kol-global {\n .sc-kol-button-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-button-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-button-default-h {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n }\n :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n \n content: \"\";\n }\n \n :is(a, button) > .kol-span-wc {\n margin: auto;\n width: 100%;\n }\n}";
|
|
5129
|
+
var KolButtonDefaultStyle0 = defaultStyleCss$I;
|
|
5129
5130
|
|
|
5130
5131
|
class KolButton {
|
|
5131
5132
|
constructor(hostRef) {
|
|
@@ -5206,8 +5207,8 @@ class KolButton {
|
|
|
5206
5207
|
}; }
|
|
5207
5208
|
}
|
|
5208
5209
|
|
|
5209
|
-
const defaultStyleCss$
|
|
5210
|
-
var KolButtonGroupDefaultStyle0 = defaultStyleCss$
|
|
5210
|
+
const defaultStyleCss$H = "@layer kol-global {\n .sc-kol-button-group-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-group-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-button-group-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-button-group-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .sc-kol-button-group-default-h > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
5211
|
+
var KolButtonGroupDefaultStyle0 = defaultStyleCss$H;
|
|
5211
5212
|
|
|
5212
5213
|
class KolButtonGroup {
|
|
5213
5214
|
constructor(hostRef) {
|
|
@@ -5249,8 +5250,8 @@ class KolButtonGroupWc {
|
|
|
5249
5250
|
}; }
|
|
5250
5251
|
}
|
|
5251
5252
|
|
|
5252
|
-
const defaultStyleCss$
|
|
5253
|
-
var KolButtonLinkDefaultStyle0 = defaultStyleCss$
|
|
5253
|
+
const defaultStyleCss$G = "@layer kol-global {\n .sc-kol-button-link-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-link-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-button-link-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-button-link-default-h {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) {\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n :is(a, button) .kol-span-wc .span-label {\n text-decoration-line: underline;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.2em;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background-color: #fff;\n left: unset;\n padding: 1em;\n position: unset;\n }\n .kol-icon.external-link-icon {\n display: inline-flex;\n }\n}";
|
|
5254
|
+
var KolButtonLinkDefaultStyle0 = defaultStyleCss$G;
|
|
5254
5255
|
|
|
5255
5256
|
class KolButtonLink {
|
|
5256
5257
|
constructor(hostRef) {
|
|
@@ -5795,8 +5796,8 @@ class KolButtonWc {
|
|
|
5795
5796
|
}; }
|
|
5796
5797
|
}
|
|
5797
5798
|
|
|
5798
|
-
const defaultStyleCss$
|
|
5799
|
-
var KolCardDefaultStyle0 = defaultStyleCss$
|
|
5799
|
+
const defaultStyleCss$F = "@layer kol-global {\n .sc-kol-card-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-card-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-card-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-card-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .sc-kol-card-default-h > div.card {\n height: 100%;\n position: relative;\n \n outline: transparent solid 1px;\n }\n .close {\n position: absolute;\n top: 0;\n right: 0;\n }\n}";
|
|
5800
|
+
var KolCardDefaultStyle0 = defaultStyleCss$F;
|
|
5800
5801
|
|
|
5801
5802
|
class KolCard {
|
|
5802
5803
|
constructor(hostRef) {
|
|
@@ -6165,8 +6166,8 @@ const getRenderStates = (state) => {
|
|
|
6165
6166
|
return { hasError, hasHint, ariaDescribedBy };
|
|
6166
6167
|
};
|
|
6167
6168
|
|
|
6168
|
-
const defaultStyleCss$
|
|
6169
|
-
var KolComboboxDefaultStyle0 = defaultStyleCss$
|
|
6169
|
+
const defaultStyleCss$E = "@layer kol-global {\n .sc-kol-combobox-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-combobox-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-combobox-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-combobox-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-combobox-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .combobox {\n position: relative;\n }\n .combobox.disabled, .combobox.disabled * {\n cursor: not-allowed !important;\n }\n .combobox.disabled {\n opacity: 0.5;\n outline: none;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n }\n .combobox__input {\n flex-grow: 1;\n }\n .combobox__listbox {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6170
|
+
var KolComboboxDefaultStyle0 = defaultStyleCss$E;
|
|
6170
6171
|
|
|
6171
6172
|
class KolCombobox {
|
|
6172
6173
|
async getValue() {
|
|
@@ -6576,8 +6577,8 @@ class DetailsAnimationController {
|
|
|
6576
6577
|
}
|
|
6577
6578
|
}
|
|
6578
6579
|
|
|
6579
|
-
const defaultStyleCss$
|
|
6580
|
-
var KolDetailsDefaultStyle0 = defaultStyleCss$
|
|
6580
|
+
const defaultStyleCss$D = "@layer kol-global {\n .sc-kol-details-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-details-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-details-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-details-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .sc-kol-details-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n details {\n display: grid;\n }\n details > summary {\n cursor: pointer;\n display: flex;\n place-items: center;\n }\n details > summary > span {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n details > summary:focus > span,\n details > summary:hover > span,\n details[open] > summary > span {\n border-bottom-color: #000;\n }\n .content {\n overflow: hidden;\n }\n details > .kol-indented-text {\n margin: 0.25em 0 0 0.5em;\n }\n .icon.is-open::part(icon) {\n transform: rotate(90deg);\n }\n}";
|
|
6581
|
+
var KolDetailsDefaultStyle0 = defaultStyleCss$D;
|
|
6581
6582
|
|
|
6582
6583
|
class KolDetails {
|
|
6583
6584
|
constructor(hostRef) {
|
|
@@ -6687,8 +6688,8 @@ class KolDetails {
|
|
|
6687
6688
|
}; }
|
|
6688
6689
|
}
|
|
6689
6690
|
|
|
6690
|
-
const defaultStyleCss$
|
|
6691
|
-
var KolDrawerDefaultStyle0 = defaultStyleCss$
|
|
6691
|
+
const defaultStyleCss$C = "@layer kol-global {\n .sc-kol-drawer-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-drawer-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-drawer-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .drawer__dialog {\n padding: 0;\n border: none;\n }\n .drawer__wrapper {\n position: fixed;\n width: auto;\n overflow: auto;\n background: white;\n }\n .drawer__wrapper--left {\n top: 0;\n left: 0;\n height: 100vh;\n max-height: 100%;\n }\n .drawer__wrapper--right {\n top: 0;\n right: 0;\n height: 100vh;\n max-height: 100%;\n }\n .drawer__wrapper--top {\n left: 0;\n top: 0;\n width: 100vw;\n max-width: 100%;\n }\n .drawer__wrapper--bottom {\n left: 0;\n bottom: 0;\n width: 100vw;\n max-width: 100%;\n }\n .drawer__content {\n position: relative;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6692
|
+
var KolDrawerDefaultStyle0 = defaultStyleCss$C;
|
|
6692
6693
|
|
|
6693
6694
|
class KolDrawer {
|
|
6694
6695
|
constructor(hostRef) {
|
|
@@ -6819,6 +6820,9 @@ class KolDrawer {
|
|
|
6819
6820
|
}; }
|
|
6820
6821
|
}
|
|
6821
6822
|
|
|
6823
|
+
const defaultStyleCss$B = "@layer kol-global {\n .sc-kol-form-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-form-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-form-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-form-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-form-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-form-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-form-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-form-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-form-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6824
|
+
var KolFormDefaultStyle0 = defaultStyleCss$B;
|
|
6825
|
+
|
|
6822
6826
|
class KolForm {
|
|
6823
6827
|
constructor(hostRef) {
|
|
6824
6828
|
registerInstance(this, hostRef);
|
|
@@ -6856,10 +6860,10 @@ class KolForm {
|
|
|
6856
6860
|
this.state = {};
|
|
6857
6861
|
}
|
|
6858
6862
|
render() {
|
|
6859
|
-
return (hAsync(Host, { key: '
|
|
6863
|
+
return (hAsync(Host, { key: 'b67a3e816c6ba2ff03b6aeb849b40934f9f33929', class: "kol-form" }, this._errorList && this._errorList.length > 0 && (hAsync(KolAlertWcTag, { key: 'f1a87ac00318b930438b29141e5f850bfaad1fda', _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { key: 'f42d3bedc5cf3cf18b8969875ad0cf8485d138bf', "aria-label": translate('kol-error-list') }, hAsync("ul", { key: '473d51f9efa5328f2dd3fe9374f0c54a7e5110e1' }, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
|
|
6860
6864
|
if (index === 0)
|
|
6861
6865
|
this.errorListElement = el;
|
|
6862
|
-
} })))))))), hAsync("form", { key: '
|
|
6866
|
+
} })))))))), hAsync("form", { key: '62ff621c61e4e52dff07aee1d8bb489df0ab5822', method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync(KolIndentedTextWcTag, null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync(KolIndentedTextWcTag, null, this.state._requiredText))) : null, hAsync("slot", { key: 'df4b8f63030f6e77b2f94407433758c7b9dd88e2' }))));
|
|
6863
6867
|
}
|
|
6864
6868
|
async focusErrorList() {
|
|
6865
6869
|
setTimeout(() => {
|
|
@@ -6896,8 +6900,11 @@ class KolForm {
|
|
|
6896
6900
|
"_requiredText": ["validateRequiredText"],
|
|
6897
6901
|
"_errorList": ["validateErrorList"]
|
|
6898
6902
|
}; }
|
|
6903
|
+
static get style() { return {
|
|
6904
|
+
default: KolFormDefaultStyle0
|
|
6905
|
+
}; }
|
|
6899
6906
|
static get cmpMeta() { return {
|
|
6900
|
-
"$flags$":
|
|
6907
|
+
"$flags$": 41,
|
|
6901
6908
|
"$tagName$": "kol-form",
|
|
6902
6909
|
"$members$": {
|
|
6903
6910
|
"_on": [16],
|
|
@@ -7157,10 +7164,9 @@ var KolIndentedTextDefaultStyle0 = defaultStyleCss$x;
|
|
|
7157
7164
|
class KolIndentedText {
|
|
7158
7165
|
constructor(hostRef) {
|
|
7159
7166
|
registerInstance(this, hostRef);
|
|
7160
|
-
this.state = {};
|
|
7161
7167
|
}
|
|
7162
7168
|
render() {
|
|
7163
|
-
return (hAsync(Host, { key: '
|
|
7169
|
+
return (hAsync(Host, { key: 'bb5a07893afe8eef2580e21e4372402986b28a8b', class: "kol-indented-text" }, hAsync(KolIndentedTextWcTag, { key: '9e66ca78fab3efd9ac426b978363b22a27cb9fe3' }, hAsync("slot", { key: '083ba1be75b77e69d4710ebcafa151ce97d43aad' }))));
|
|
7164
7170
|
}
|
|
7165
7171
|
static get style() { return {
|
|
7166
7172
|
default: KolIndentedTextDefaultStyle0
|
|
@@ -7168,6 +7174,24 @@ class KolIndentedText {
|
|
|
7168
7174
|
static get cmpMeta() { return {
|
|
7169
7175
|
"$flags$": 41,
|
|
7170
7176
|
"$tagName$": "kol-indented-text",
|
|
7177
|
+
"$members$": undefined,
|
|
7178
|
+
"$listeners$": undefined,
|
|
7179
|
+
"$lazyBundleId$": "-",
|
|
7180
|
+
"$attrsToReflect$": []
|
|
7181
|
+
}; }
|
|
7182
|
+
}
|
|
7183
|
+
|
|
7184
|
+
class KolIndentedTextWc {
|
|
7185
|
+
constructor(hostRef) {
|
|
7186
|
+
registerInstance(this, hostRef);
|
|
7187
|
+
this.state = {};
|
|
7188
|
+
}
|
|
7189
|
+
render() {
|
|
7190
|
+
return (hAsync(Host, { key: 'b11ea6d1d0b5a9284b7b60af77543ed314fa7495', class: "kol-indented-text-wc" }, hAsync("div", { key: '2ad0aa10a32cd4cd10e7acdaa6303e5a20b528b7' }, hAsync("slot", { key: 'fa9e1207e9e0ead236b24fcf3addf98de549cf72' }))));
|
|
7191
|
+
}
|
|
7192
|
+
static get cmpMeta() { return {
|
|
7193
|
+
"$flags$": 4,
|
|
7194
|
+
"$tagName$": "kol-indented-text-wc",
|
|
7171
7195
|
"$members$": {
|
|
7172
7196
|
"state": [32]
|
|
7173
7197
|
},
|
|
@@ -23349,7 +23373,7 @@ class KolTableStateful {
|
|
|
23349
23373
|
horizontal: (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
|
|
23350
23374
|
vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
|
|
23351
23375
|
};
|
|
23352
|
-
return (hAsync(Host, { key: '
|
|
23376
|
+
return (hAsync(Host, { key: '4c4f2713068a1618167ef2b51d7f8c2aa088ae6f', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '9b6bd641a61881e49814851acb5b12c1cf0f1e94', _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
23353
23377
|
onSort: (_, payload) => {
|
|
23354
23378
|
this.handleSort(payload);
|
|
23355
23379
|
},
|
|
@@ -23412,7 +23436,7 @@ class KolTableStateless$1 {
|
|
|
23412
23436
|
this._selection = undefined;
|
|
23413
23437
|
}
|
|
23414
23438
|
render() {
|
|
23415
|
-
return (hAsync(Host, { key: '
|
|
23439
|
+
return (hAsync(Host, { key: '0bec5c9cf8ac42f5df3a1c05138486ea094c6e32', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: 'b7ff23a8c326b9267af13d41fe702b0e8bb7b0fd', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
|
|
23416
23440
|
}
|
|
23417
23441
|
static get style() { return {
|
|
23418
23442
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -23812,9 +23836,9 @@ class KolTableStateless {
|
|
|
23812
23836
|
}
|
|
23813
23837
|
render() {
|
|
23814
23838
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
23815
|
-
return (hAsync(Host, { key: '
|
|
23839
|
+
return (hAsync(Host, { key: '762148d404ad64b0711ef8dedb454dfc796ef88f', class: "kol-table-stateless-wc" }, hAsync("div", { key: 'bb961bed50072ed6369d534e836c3051bb016ee7', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'da8170b6636e45b757b68d87aaaa50583fd721e4', style: {
|
|
23816
23840
|
minWidth: this.state._minWidth,
|
|
23817
|
-
} }, hAsync("div", { key: '
|
|
23841
|
+
} }, hAsync("div", { key: '4ec3daba2c822df83343a707402ce40ffa2976c7', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: '08b6d869ec1c07f0a7f2e1cdf39e792dc3d72144', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '761dd07138afbc4595837934d9c0d67246de130f' }, this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), cols.map((cell, colIndex) => {
|
|
23818
23842
|
if (cell.asTd === true) {
|
|
23819
23843
|
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
|
|
23820
23844
|
[cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
|
|
@@ -23830,7 +23854,7 @@ class KolTableStateless {
|
|
|
23830
23854
|
else {
|
|
23831
23855
|
return this.renderHeadingCell(cell, rowIndex, colIndex);
|
|
23832
23856
|
}
|
|
23833
|
-
})))))), hAsync("tbody", { key: '
|
|
23857
|
+
})))))), hAsync("tbody", { key: 'a41f9b4ff984f9cb26516363e7b77ab764cdfcd6' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
|
|
23834
23858
|
}
|
|
23835
23859
|
get host() { return getElement(this); }
|
|
23836
23860
|
static get watchers() { return {
|
|
@@ -25314,6 +25338,7 @@ registerComponents([
|
|
|
25314
25338
|
KolIcon,
|
|
25315
25339
|
KolImage,
|
|
25316
25340
|
KolIndentedText,
|
|
25341
|
+
KolIndentedTextWc,
|
|
25317
25342
|
KolInputCheckbox,
|
|
25318
25343
|
KolInputColor,
|
|
25319
25344
|
KolInputDate,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/hydrate",
|
|
3
|
-
"version": "2.1.5
|
|
3
|
+
"version": "2.1.5",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
],
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"rimraf": "5.0.7",
|
|
49
|
-
"@public-ui/components": "2.1.5
|
|
49
|
+
"@public-ui/components": "2.1.5"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@public-ui/components": "2.1.5
|
|
52
|
+
"@public-ui/components": "2.1.5"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": false,
|
|
55
55
|
"type": "commonjs",
|